Commit Graph

20 Commits

Author SHA1 Message Date
Kevin Ansfield
14e2c59335 Fixed error from backdrop click handler for modals without options
refs 5d839a4725

- `top.options` is not guaranteed to exist, put optional chaining in place so we aren't attempting to read `ignoreBackdropClick` from `undefined`
2022-04-21 11:41:45 +01:00
Kevin Ansfield
5d839a4725 Added Ctrl/Cmd+Shift+P shortcut for starting publish flow
refs https://github.com/TryGhost/Team/issues/1542

With the old publish menu flow the `Ctrl/Cmd+Shift+P` would immediately publish without showing any of the publish options which isn't ideal. For the redesign we'd like to try showing the publish flow modal instead.

- added key handler for the shortcut to the publish-flow triggering button
- added `ignoreBackdropClick` option to the publish flow modal and support for it in our modal backdrop click handler
  - the shortcut simulates a click on the button which when the modal is open equates to a backdrop click meaning repeated presses of the Cmd+Shift+P shortcut resulted in glitchy modal open/close behaviour
2022-04-21 11:33:52 +01:00
Kevin Ansfield
da972bfe58 🐛 Fixed non-functioning "Leave" button on unsaved-changes confirmation modals
no issue

- bumped version of our `ember-promise-modals` fork containing a workaround for modal promises missing their return values
  - upstream issue: https://github.com/simplabs/ember-promise-modals/issues/565
- switched from a GitHub ref to a proper published package to avoid issues with yarn not bumping versions of the fork for developers who installed an earlier version
2022-04-01 12:47:08 +01:00
Kevin Ansfield
85d7932e45 Resolved deprecation warnings for dynamic modal component binding (#2303)
refs https://github.com/TryGhost/Team/issues/559
refs 054a5f15f5

- with the update of `ember-promise-modals` we started to get deprecation warnings when using `modals.open('modal-component-name')`
  - upcoming Ember build updates will introduce tree shaking but using run-time lookup of modal components by name works against that because it's not statically analysable
- switched to importing components and passing the component class directly, eg. `modals.open(ModalComponent)`
- standardized modal component class names with a `MyModal` style to get better behaviour in code editors when it auto generates imports
- dropped the modal defaults from the modals service because we can now use a static `modalOptions` property on the modal components themselves when we want to override the defaults
2022-03-14 10:52:04 +00:00
Kevin Ansfield
054a5f15f5 🐛 Fixed scheduled date/time inputs not being focusable when used from post preview modal
closes https://github.com/TryGhost/Ghost/issues/14296

- bumped fork of `ember-promise-modals` as newer version exposes all focus-trap options and per-modal disabling
- disabled focus-trap for the post preview modal because it was preventing clicks on the input elements performing default behaviour
2022-03-11 17:58:20 +00:00
Gabriel Csapo
d51f2bcf23 [chore] migrate to eslint@8 and run --fix (#2256)
closes https://github.com/TryGhost/Admin/pull/2107

- updated related babel dependencies
- bumped eslint
- ran `yarn lint:js --fix`
- added eslint ignore comments for some required non-camel-case properties
2022-02-10 10:41:36 +00:00
Kevin Ansfield
8052166cbe Refactored modal for bulk deleting members
refs https://github.com/TryGhost/Team/issues/559

Members controller was becoming bloated and difficult to follow due to catering for many different concerns.

- converted old modal to newer promise-modal style
- pulled full label-removing logic out of the members controller and into the modal so logic is contained in one place
2022-02-09 22:04:02 +00:00
Kevin Ansfield
ed48cd6e3a Refactored custom-view-form modal
refs https://github.com/TryGhost/Team/issues/559
refs https://github.com/TryGhost/Admin/pull/2227

- updated modal component to use newer ember-promise-modals modals implementation
  - removed use of "delayedColor" properties as the workaround for liquid-fire based animation is no longer required
  - added `validate` action to remove need for `{{action}}` - we can't call the `validate()` method directly from the template because it's not bound correctly with `@action` and binding it breaks other code that expects `_super()` for the validate method to work via the mixin (eg, staff invite modal)
- removed `customViews.toggleFormModal()`` and changed `customViews.editView()` to open the modal directly
  - updated templates to use `{{on "click" this.customViews.editView}}` in place of toggling the "showFormModal" property
2022-01-31 10:41:57 +00:00
Kevin Ansfield
21f2a58a8a Refactored post email preview modal
refs https://github.com/TryGhost/Team/issues/559
refs https://github.com/TryGhost/Team/issues/1277

- switched modal implementation to the newer promise-modal style
- added `<GhEmailPreviewLink>` component that renders a link that when clicked opens the modal
  - removes the need for templates/controllers to manually handle modal opening/closing and to pass actions down from parents
  - updated all places we were triggering an email preview modal to use `<GhEmailPreviewLink>`
2022-01-25 13:17:05 +00:00
Kevin Ansfield
e9263827da Removed duplication of default modal class in modals service
refs https://github.com/TryGhost/Team/issues/559

- the majority of modals all have the same class so it doesn't make sense to repeat it constantly
- added `DEFAULT_OPTIONS` object for options that apply to all modals and removed the now-unnecessary repeated className definitions
- renamed `DEFAULT_MODAL_OPTIONS` to `MODAL_OPTIONS` to avoid confusion
2021-11-01 18:38:00 +00:00
Kevin Ansfield
569e4576d5 Added install+activate process to view theme screen
closes https://github.com/TryGhost/Team/issues/1130

- migrated install theme process to new modal system and changed to install+activate
- added "Use theme" button that opens the new install+activate modal
- when the view theme screen opens the install modal, an `onSuccess` callback is passed which sets a property that will skip closing the install modal when the view theme modal is closed and transitions to the `settings.design` route leaving the "success" modal state on screen
- added a `skipErrors` option to `themeManage.activateThemeTask` so that it can be used from processes that already handle theme errors without opening extra modals on top
2021-10-12 16:47:44 +01:00
Kevin Ansfield
265a19f550 Added initial view-theme modal for installing from themes list
refs https://github.com/TryGhost/Team/issues/1130

- added new route for viewing themes so back/forward buttons can be used
  - takes theme name as a parameter
  - opens a fullscreen modal with an iframe containing the theme demo
- changed installable themes list to link to new route
- swapped `previewUrl` in theme data to point at the real demo rather than the ghost.org demo page
2021-10-12 14:28:05 +01:00
Kevin Ansfield
13f9cb85fa Refactored theme upload process and linked from design screens
refs https://github.com/TryGhost/Team/issues/1130

- copied theme upload modal to new modals system and refactored for Octane syntax
  -  updated to use `themeManagement` service rather than passed in actions so the modal-based process can be opened from any screen
  - added default `beforeClose()` for the modal to the modals service so it won't close if an upload is in-progress (defaults were moved directly into the class so it had access to services)
- added `themeManagement.upload` action for triggering the upload modal and providing a central place for limit checks
- added upload-triggering buttons to change-theme and advanced design screens
2021-10-11 19:30:58 +01:00
Kevin Ansfield
640f028ae9 Fixed theme errors modal positioning
refs https://github.com/TryGhost/Team/issues/1111

- missed the modal classes on the newly added modal
2021-10-05 20:49:15 +01:00
Kevin Ansfield
715ee08100 Added advanced theme settings modal
refs https://github.com/TryGhost/Team/issues/1111

Extracted functionality for listing, downloading, activating, and deleting from the theme controller/template into separate components and services so that they are more composable/reusable in different situations.

- moved theme activation to a new `theme-management` service that uses the `modals` service to open the theme warnings modal or limits upgrade modal as required
  - the activate process is a task so that consumers can store a reference to the task instance and cancel it to close any related warning/limit modals (eg, when navigating away from the route or closing the modal that kicked off the process)
- created new-pattern modals for custom theme limit upgrade, theme errors, and delete confirmation so that we can treat them as promises and close where needed from parent
- duplicated theme table component as `<GhThemeTableLabs>` with an actions redesign and a refactor to handle download, activation, and deletion itself making use of the new theme-management service and modals
- fixed some oddities with design modal's transition/modal close handling by simplifying the async behaviour and being more explicit
- added advanced design modal that contains the new theme table component and linked to it from footer of design modal's sidebar
2021-10-05 20:44:27 +01:00
Kevin Ansfield
bf3a5198e4 Fixed missing return when opening modals
refs 37f721d76a

- change was missed from the previous commit 🤦🏻‍♂️ without it we don't get a modal reference back for managing confirmation and closing behaviour
2021-10-05 11:30:42 +01:00
Kevin Ansfield
37f721d76a Added centralized object for defining modal classNames
refs https://github.com/TryGhost/Team/issues/559

When modals are re-used across the app it's annoying to have to remember the class names that it uses in every location it's used.

- added a `DEFAULT_MODAL_OPTIONS` object to the modals service that's keyed on the modal to be opened and contains any options that are repeated across every instance
- overrode the `modals.open()` method to merge in the default options before calling `super()`
- updated invocation points of shared modals to remove duplicated class name options
2021-10-05 11:19:52 +01:00
Kevin Ansfield
63b1e1d385 Dropped intermediate design screen and moved to full-overlay modal
refs https://github.com/TryGhost/Team/issues/1111
refs https://github.com/TryGhost/Team/issues/1103

- moved customize modal from a link on the design screen to the main design screen
- changed modal design to be a full-screen overlay with side bar that emulates standard Admin design
- added toggled groups of settings in sidebar
  - added `{{set-has}}` helper for use in conditionals matching when a Set contains an object
  - added grouping of theme settings
- dropped unfinished advanced/change theme modals
2021-10-04 16:34:28 +01:00
Kevin Ansfield
4f2af95afe Moved modals service to manual handling of click and escape-to-close
refs https://github.com/TryGhost/Team/issues/559

Click-to-close and escape-to-close functionality in `ember-promise-modals` was deferred to `focus-trap`. For some of our use-cases that wasn't ideal because there was nowhere to hook in if we wanted to abort modal closing for any reason (eg, to show an unsaved changes confirmation)

- bumped the custom fork version of `ember-promise-modals` to allow all focus-trap close-inducing behaviour to be disabled
  - also adds a `beforeClose()` option when opening modals for future use
- changed modals service options that are passed through to `focus-trap` so that all close-inducing behaviour is disabled
- when the first modal is opened add event handlers for clicks and <kbd>Escape</kbd> key presses that should close modals and manually call `.close()` on the top-most modal in the stack
- remove event handlers when the last modal is removed
2021-09-16 20:26:57 +01:00
Kevin Ansfield
5ce67c7892 Initial ember-promise-modals implementation
refs https://github.com/TryGhost/Team/issues/559

We want to get rid of our existing modals implementation because it doesn't play well with Glimmer compoments and the animation library it uses is now unmaintained and blocking our Ember.js upgrades.

- installed addon using customised fork
  - fork allows passthrough of `allowOutsideClick` to `focus-trap` so we can allow clicks on dropdowns and other wormholed content inside of a modal
- extended the `modals` service locally so we can customise click-outside-to-close behaviour and tie in with our `dropdowns` service
- set up styles in `modals-new.css`, mostly copied from `modals.css` with a few specific overrides
  - once all modals are converted we can drop the old `modals.css` and rename `modals-new.css`
2021-09-13 13:01:12 +01:00