Updates Admin UX for Contributors
When logged in as a Contributor:
- removes sidebar, added floating account menu and dark-mode switch to right side. Updated mobile menu accordingly
- all post by the given user is listed in the Post list
- changed post filtering
- hides email columns in post list
- removes publishmenu for Contributors in Post preview modal
- visual tweaks
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
no issue
- the front-end only supports white text on accent color backgrounds so we shouldn't have any auto contrast selection for text in Admin for consistency and to give a hint that a chosen accent color is too light
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`
refs https://github.com/TryGhost/Team/issues/928
- the background color of the button was incorrectly applied to the original accent colour rather than the adjusted accent color
- added adjustment of text color on hover too in case it went outside of a visible range
refs https://github.com/TryGhost/Team/issues/927
- button should be visible when not editing if both text and url are set
- added container for the content section so other links aren't clickable
- added tooltip to button so button url can be checked without having to go into edit mode
refs https://github.com/TryGhost/Team/issues/927
- added CTA `button and url inputs to email-cta card
- added `textColorForBackgroundColor` color util and used it to add a white/black text color variable that can be used when the accent color is used as a background color
- added `{{hex-adjust}}` helper for modifying lightness and saturation of a hex color
- adjusted inline power-select dropdown styling
refs https://github.com/TryGhost/Team/issues/927
- we'll soon need access to adjusted accent colours outside of the application controller so they're now available on the `ui` service
refs https://github.com/TryGhost/Team/issues/840
We wanted to switch to a settings menu that stays open to the right of the editor rather than a popover that blocks all other interaction with the post to solve two use-cases:
1. when editing it's fairly common to select some text from the post contents when setting excerpt and meta data text, with the previous design not letting you scroll or select whilst the menu got in the way of that
2. having the menu open with meta data visible before publishing can help you see everything is set as you want and help you feel confident when publishing/sending content
---
- removed `psmRedesign` labs flag
- swapped labs component/css for main component and deleted labs component
- cleaned up now-unused `ui.showSettingsMenu` property and related actions/classes
no issue
- the billing modal is always rendered, it's contents being shown/hidden via CSS
- when the billing modal was rendered it was changing the `key` scope and binding the enter key, however because it's always rendered this was messing with the default key scope for all other areas of the app
- removed all keyboard handling from the billing modal because it wasn't actually doing anything (there is nothing to handle the "confirm" action when Enter is pressed) which fixes the unexpected key scope change
no issue
The billing iFrame needs to be rendered within the `main` content area rather than as fullscreen.
This needs most probably more tidying up, but is working for now without breaking the functionality.
* Move billing iFrame to render in main content area
* Fixed routing error when transistion url not defined
* Removed close modal button and esc key binding
no issue
Updated settings navigation to a completely redesigned flow for Ghost 4.0 🎉
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
Co-authored-by: Fabien O'Carroll <fabien@allou.is>
Co-authored-by: Rish <zrishabhgarg@gmail.com>
no issue
- Opted in to use explicit `hisotry.replaceState` and setting iframe's `src` using assignment instead of tracking it through computed property. This allows for tighter control over when iframe's history is updated which was causing problems when `src` was bound to computed property
- Added billing page metadata. This way browser history records appear with nicer signature
- Removed "update button" iframe and rewrote "global iframe" to not use modals. This allows to have single iframe on a page, which simplifies `postMessage` communication and preserve history inside iframe to be able to navigate it after closure
- Added route change handler responding to BMA app route changes. Allows to sync browser URL visible to the user with active route in BMA iframe. The sync is based on `hisory.replaceState` method that makes sure singular history records are kept in the browser history
- Added nested wildcard billing route. This is meant to catch all the nested routes inside of BMA iframe
no issue
- list custom post views in collapsable sidebar navigation
- default views: Draft, Scheduled, Published (except for contributors)
- record expanded/collapsed state of the navigation menus in user settings via new `navigation` service
- adds `customViews` service that manages custom views
- provides list of default views
- gives access to "active" custom view based on current route and query params
- manages loading/saving of custom views to user settings
- show "Add view" button in the content filter when the posts list has been filtered
- show "Edit view" button in the content filter when the posts list filter matches a saved view
Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
no issue
Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md
We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere.
This simplifies the rules for what template code is referring to...
`<Component>` = a component
`{{helper}}` = a helper (or locally assigned handlebars variable)
`{{this.foo}}` = data on the template backing context (a component/controller)
`{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments)
- ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories:
- `app/templates`
- `lib/koenig-editor/addon/templates`
- removed positional params from components as angle bracket syntax does not support them
- `gh-feature-flag`
- `gh-tour-item`
- `gh-cm-editor`
- `gh-fullscreen-modal`
- `gh-task-button`
- updates some code that was missed in 3c851293c1 to use explicit this
no issue
We were in a part-way state where some touched files had been (sometimes partially) migrated to explicit `this`. The codemod that was available has now fixed the formatting issues it had so it was a good time to run it.
https://github.com/ember-codemods/ember-no-implicit-this-codemod
- part of the migration path for https://github.com/emberjs/rfcs/pull/308
- starts to make template resolution rules more explicit
- `<MyComponent />` - always a component
- `{{my-component}}` - component or helper (components _must_ have a `-`. This style of component will go away once fully migrated to angle bracket components)
- `{{value}}` - a helper or local template variable
- `{{this.value}}` - reference to a property on the backing context (either a controller or a component JS file)
no issue
- adds `whats-new` service that fetches the changelog from ghost.org and exposes the latest changelog entries
- trigger a background fetch of the changelog from ghost.org when first loading the admin when logged in, or after signing in
- adds a "What's new" menu item next to the user popup menu
- adds an indicator to the user menu button and what's new menu item if there are unseen changelog entries
- closing the changelog modal will update the "last seen date", clearing both indicators
no issue
- modified `ui` service's `routeDidChange` handler to update it's `mainClass` property based on the new route's metadata
- used in the future for switching screen background colours
To use the feature, modify or add a `buildRouteInfoMetadata` hook in the route which you'd like to change, eg:
```js
export default AuthenticatedRoute.extend({
...
buildRouteInfoMetadata() {
return {
bodyClasses: ['my-body-class'],
mainClasses: ['grey-bg'] // <--------
};
}
});
```
The route hierarchy is taken into consideration with classes being added for all currently shown routes. For example if you wanted to add an `editor` class to all editor routes you could use the hook in `routes/editor.js` then if you added an `editor-new` class in `routes/editor/new.js` the resulting HTML output on the "New story" screen would be:
```html
<main class="gh-main editor editor-new">
```
no issue
- the autonav behaviour has outlasted it's usefulness - it was mostly useful for editing but the editor screen is now always fullscreen and the number of low-resolution screens has dropped significantly
- dropped the components and all supporting code associated with autonav behaviour
no issue
- upgrade to latest `ember-source` and related dependencies including `ember-cli`
- upgrade to latest `ember-mocha` and modern ember testing setup
- https://github.com/emberjs/rfcs/blob/master/text/0268-acceptance-testing-refactor.md
- switch from using global acceptance test helpers and `native-dom-helpers` to using the new `ember-test-helpers` methods
- use [`chai-dom`](https://github.com/nathanboktae/chai-dom) assertions where in some places (still a lot of places in the tests that could use these)
- pin `ember-in-viewport` to 3.0.x to work around incompatibilities between different versions used in `ember-light-table`, `ember-infinity`, and `ember-sticky-element`
- incompatibilities manifested as "Invalid value used as weak map key" errors thrown when using `ember-light-table` (subscribers screen)
- pin `ember-power-datepicker` to unreleased version that contains a move from global acceptance test helpers to modern test helpers
no issue
- in a very old iteration of the admin design we needed a data attribute containing the number of notifications in order to add extra spacing in the styles. This hasn't been necessary for a long time and there are easier ways to do it now than using observers.
no issue
The markdown help link was removed from the sidebar so the only link to toggle the markdown help modal is now the markdown editor yet we we still had a more general implementation with a confusing pass-through of closure actions.
- move the markdown modal toggle and display into the `{{gh-markdown-editor}}` component
no issue
- moves general UI state control such as menu display, autonav, settings menu, etc into a `ui` service for easier use within components
- no longer required to jump through hoops passing state and actions down from application controller into components
- removes indirect "route" actions in favour of calling actions/methods directly on the `ui` service
closesTryGhost/Ghost#8307
- unloading the store and refreshing the `session.user` attribute after an import was triggering a rendering edge case where the style was re-computed and a re-render was attempted after the sidebar has been destroyed
- rather than binding a style attribute directly to a CP in `gh-nav-menu` we pass the menu icon in (using `settings.settledIcon` - see below) and manually set the style attribute via the `didReceiveAttrs` hook so that outside changes don't trigger re-computations when we don't expect them and so we can still react to icons being uploaded or removed
- our usage of `settings.icon` is a bit of an odd situation because it's a link to an external resource that will only resolve correctly after a successful save - if we change `settings.icon` in the local store and the nav menu icon style updates before the save has been completed then the server will give us the old icon. To work around this a `settings.settledIcon` attribute has been added that is only updated when we receive data from the store ensuring that our cache-busting technique works correctly
no issue
- cleans up some of the render code
- aligns things with the "ember way"
- move metaTitleScratch and metaDescriptionScratch bindings to post model
refs https://github.com/TryGhost/Ghost/issues/7860
- load 30 posts per page
- clean up unnecessary styles, match class name to component name
- start moving towards desired content/styles end goal
no issue
- use the same loading indicator as used on my.ghost.org
- will display whilst the JS is loading and initializing rather than showing a completely blank screen
no issue
- fixes problem when the nav menu would be shown on an error404 route when the user is not logged in
- adds failing test that passes with this change
refs #5798, closes#5018
- adds new `gh-fullscreen-modal` component - modals are now specified in-context so that they can have deeper interaction with their surrounding components/controller/route, i.e. a modal component can be a thin confirm/deny wrapper over the underlying controller action keeping all context-sensitive logic in one place
- adds spin-buttons to all modals with async behaviour
- adds/improves behaviour of inline-validation in modals
- improves re-authenticate modal to properly handle validation and authentication errors
refs #5652
- reverts previous fix (#5698) to return translate3d smoothness
- add separate open-autonav toggle element and style it to always stick to the viewport edge to avoid wandering hover hit areas
issue #5483 & #5652
- trigger the close menus action every time a route transition is successful
- close nav menu when clicking "collapse sidebar" button (action chain was incomplete)
- [x] Mobilemenu button is missing from `content` and `editor` views
- [x] Mobilemenu pane slides entire content over, should expand over-top-of-content
- [x] Mobilemenu can't be closed
- [x] gh-view-title no longer generates an extra div; it is the h2.
- [x] gh-autonav-toggle closes the mobile menu on mobile. renamed `gh-menu-toggle`
- [ ] There is weird behaviour with mobile menu when changing from big=>small=>big viewport sizes
- ~~[ ] (Future issue) Ghost should remember (localstorage?) whether desktop menu is expanded or collapsed~~
- Adds gh-view-title component to implement mobile menu button for titles on any page
- Refactors the `content-cover` out into the application template
- Fix various z-index issues with content-cover and gh-alert
- Move `.settings-menu-expanded` application view state from body to `.gh-viewport`
- Unify nav menu / mobile menu actions and code
