Commit Graph

25 Commits

Author SHA1 Message Date
Kevin Ansfield
7b443d4b63 Removed need for .get() with config service
no issue

The `config` service has been a source of confusion when writing with modern Ember patterns because it's use of the deprecated `ProxyMixin` forced all property access/setting to go via `.get()` and `.set()` whereas the rest of the system has mostly (there are a few other uses of ProxyObjects remaining) eliminated the use of the non-native get/set methods.

- removed use of `ProxyMixin` in the `config` service by grabbing the API response after fetching and using `Object.defineProperty()` to add native getters/setters that pass through to a tracked object holding the API response data. Ember's autotracking automatically works across the native getters/setters so we can then use the service as if it was any other native object
- updated all code to use `config.{attrName}` directly for getting/setting instead of `.get()` and `.set()`
- removed unnecessary async around `config.availableTimezones` which wasn't making any async calls
2022-10-07 16:14:57 +01:00
Kevin Ansfield
060d791a63 Removed need for .get() with settings service
no issue

The `settings` service has been a source of confusion when writing with modern Ember patterns because it's use of the deprecated `ProxyMixin` forced all property access/setting to go via `.get()` and `.set()` whereas the rest of the system has mostly (there are a few other uses of ProxyObjects remaining) eliminated the use of the non-native get/set methods.

- removed use of `ProxyMixin` in the `settings` service by grabbing the attributes off the setting model after fetching and using `Object.defineProperty()` to add native getters/setters that pass through to the model's getters/setters. Ember's autotracking automatically works across the native getters/setters so we can then use the service as if it was any other native object
- updated all code to use `settings.{attrName}` directly for getting/setting instead of `.get()` and `.set()`
- removed use of observer in the `customViews` service because it was being set up before the native properties had been added on the settings service meaning autotracking wasn't able to set up properly
2022-10-07 16:14:57 +01:00
Kevin Ansfield
57b1ab4800 Ran ember-cli-update --run-codemods (#2219)
no issue

- part of ember upgrades
- removed all unnecessary usage of `.get`
- cleaned up imports where we had imports from the same module across multiple lines
- standardized on importing specific computed helpers rather than using `computed.foo`
- switched tests from using `wait()` to `settled()`
2022-01-21 19:25:47 +00:00
Kevin Ansfield
96a810e6c7 Removed text contrast adjustment for accent buttons
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
2021-11-16 17:01:52 +00:00
Kevin Ansfield
595018098d Switched design screen from modals to standard routes
refs https://github.com/TryGhost/Team/issues/1130

- added `ui.contextualNavMenu` property that when set will switch the main nav menu between components, if it's not set then it will show the default "main" menu component
- added `design` menu sub-component of `gh-nav-menu` ready for use via `contextualNavMenu`
  - moved sidebar contents from the design modal into this component
- updated design route to set/reset `ui.contextualNavMenu` to `design` on entering/leaving the route
  - all other design routes are sub-routes so this works across all other design screens
- moved base design modal preview into the `settings/design/index` controller/template
  - using index means that it's the default screen for `/settings/design` but will be automatically replaced by any other `design.x` routes
- moved `design/advanced` modal content into the `settings.design.advanced` controller/template and removed the modal handling from the route
2021-10-11 15:24:46 +01:00
Kevin Ansfield
06e63d371c 🎨 Added ability to upload a feature image by drag and dropping an image file
refs https://github.com/TryGhost/Team/issues/884

Drop-to-upload functionality was lost in the first version of the new feature image uploader inside the main editor area, this adds it back in.

- fixed dropzone flickering issue by switching the event listeners to the capture rather than bubble phase so we can indicate a drag is occurring on the body without each individual drag/drop handler needing to know about it
- moved the event handler init/cleanup to the `ui` service
- moved the event handler init call to the application service as it no longer requires auth to have occurred for access to the labs flag setting
- removed the `featureImgDragDrop` labs flag
2021-08-31 14:21:25 +01:00
Kevin Ansfield
45d4036faf Fixed incorrect text color for accent-color backgrounds for some accent colors
refs https://github.com/TryGhost/Team/issues/928

- text color was being selected based on original rather than adjusted accent color
2021-07-29 15:41:36 +01:00
Kevin Ansfield
0d092c2e32 Switched to extracted @tryghost/color-utils package
refs https://github.com/TryGhost/Team/issues/928

- we want to make use of the same color adjustments and contrast selection for accent colors we use in Admin on the server-side for emails so utility functions have been extracted to an external package
2021-07-29 11:35:15 +01:00
Kevin Ansfield
eed299d1f6 Matched Portal's contrast threshold for white/black text on background color
refs https://github.com/TryGhost/Team/issues/928

- switched to using `color` for color conversion and adjustments rather than maintaining our own limited utils (preparation to extract our own utils to separate library)
- changed contrast threshold for yiq-based contrast adjustment from `128` to `186` to match Portal's current behaviour
2021-07-28 17:14:33 +01:00
Kevin Ansfield
4e0473a93e Added CTA button and URL input to email-cta card
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
2021-07-26 17:03:17 +01:00
Kevin Ansfield
9cfb024a5f Moved adjusted accent color properties to ui service
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
2021-07-26 17:03:17 +01:00
Kevin Ansfield
3d16b95e0f 🎨 Adjusted post settings menu design so it can stay open whilst editing
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
2021-07-02 19:04:57 +01:00
Kevin Ansfield
14b31ae5a1 Migrated ui service to native class syntax
no issue

- switched to class syntax, tracked properties, getters, and dropped actions object for top-level action functions
2021-07-01 10:11:08 +01:00
Kevin Ansfield
e66bb4feac Removed tour feature
refs 10b48b1d6d
refs 1531712d92

- the tour feature is no longer used so all associated code can be removed
- removes `liquid-tether` dependency as it was only used by the tour throbbers/popovers
2021-03-02 14:29:26 +00:00
Kevin Ansfield
b4e750466d Hid tour throbbers when opening launch wizard
refs https://github.com/TryGhost/Team/issues/460

- add `showTour` property to `ui` service
- updated `<GhTourItem>` to not render anything if `ui.showTour` is `false`
- updated launch wizard template to hide tour when open and re-enable when closed
2021-02-09 11:43:44 +00:00
Peter Zimon
c51bce7358 🎨 Updated admin area design and usability (#1232)
refs. https://github.com/TryGhost/Team/issues/205

Major update to Ghost Admin UI including:
- improved general consistency (typography, colors and contrast, UI components, icons)
- new design for post and pages lists, improved discoverability of filters 
- search moved to modal
- account menu is decoupled from ghost logo
- further usability fixes
2019-06-18 11:47:20 +01:00
Kevin Ansfield
3653cfbfbf Refactored document-title handler
no issue
- moved `document-title` Route extension's functionality into the `ui` service
  - updates the title each time the router service emits a route changed event
  - `ui.updateDocumentTitle()` can now be called directly from components rather than the confusing `this.send('updateDocumentTitle')` bubbling behaviour
- refactored the `titleToken` implementation to use the now-formalised `RouteInfo`'s `metadata` field (https://github.com/emberjs/rfcs/blob/master/text/0398-RouteInfo-Metadata.md#appendix-a)
2019-05-20 16:16:19 +01:00
Kevin Ansfield
da92eadecd Added ability to set <main> class using route metadata
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">
```
2019-05-20 15:33:12 +01:00
Kevin Ansfield
bb7df76af0 Refactored styleBody mixin
no issue
- removed `styleBody` mixin in favour of using Ember's `buildRouteInfoMetadata` hook and router events in the `ui` service
- refactored separate CSS classes for each unauthenticated route into a single `.unauthenticated-route` class because hiding mobile nav whilst unauthenticated was the only use for body classes
2019-05-20 14:57:21 +01:00
Kevin Ansfield
352c4af1d7 Refactored usage of .get('property') with es5 getters
no issue
- ran [es5-getter-ember-codemod](https://github.com/rondale-sc/es5-getter-ember-codemod)
- [es5 getters RFC](https://github.com/emberjs/rfcs/blob/master/text/0281-es5-getters.md)
- updates the majority of `object.get('property')` with `object.property` with exceptions:
  - `.get('nested.property')` - it's not possible to determine if this is relying on "safe" path chaining for when `nested` doesn't exist
  - `.get('config.x')` and `.get('settings.x')` - both our `config` and `settings` services are proxy objects which do not support es5 getters
- this PR is not exhaustive, there are still a number of places where `.get('service.foo')` and similar could be replaced but it gets us a long way there in a quick and automated fashion
2019-03-06 13:54:14 +00:00
Kevin Ansfield
5e3de1c333 🎨 Removed auto hide/show navigation toggle (#1094)
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
2019-01-10 15:00:07 +00:00
Kevin Ansfield
9adbcd1fd0 Match service/controller import to ember-modules-codemod style for consistency
no issue

Automated tools, code generators, and editor integrations are increasingly standardising on the import style used in `ember-modules-codemod`. Our import style differed a little with regards to service/controller injection imports which meant we were starting to see inconsistent naming.
2017-10-30 09:38:01 +00:00
Kevin Ansfield
983110d931 Switched from ember-cli-shims to new module imports (#779)
no issue

- add eslint-plugin-ember, configure no-old-shims rule
- run `eslint --fix` on `app`, `lib`, `mirage`, and `tests` to move imports to the new module imports
- further cleanup of Ember globals usage
- remove event-dispatcher initializer now that `canDispatchToEventManager` is deprecated
2017-08-22 14:53:26 +07:00
Kevin Ansfield
350e3d1481 Unsplash integration
closes https://github.com/TryGhost/Ghost/issues/8859, requires https://github.com/TryGhost/Ghost/pull/8895
- adds Unsplash app to app settings
  - enable/disable toggle
  - validation and testing of Unsplash App ID
  - Unsplash App ID field hidden if provided via Ghost config
  - adds `fetchPrivate` method to `config` service to pull config that requires authentication and updates authentication routines to fetch private config
- adds Unsplash buttons to editor toolbar and `{{gh-image-uploader}}`
  - only present when Unsplash app is enabled
  - opens Unsplash image selector when clicked
  - `{{gh-image-uploader}}` has a new `allowUnsplash` attribute to control display of the unsplash button on a per-uploader basis
- adds Unsplash image selector (`{{gh-unsplash}}`)
  - uses new `unsplash` service to handle API requests and maintain state
  - search
  - infinite scroll
  - zoom image
  - insert image
  - download image
- adds `{{gh-scroll-trigger}}` that will fire an event when the component is rendered into or enters the visible screen area via scrolling
- updates `ui` service
  - adds `isFullscreen` property and updates `gh-editor` so that it gets set/unset when toggling editor fullscreen mode
  - adds `hasSideNav` and `isSideNavHidden` properties
- updates `media-queries` service so that it fires an event each time a breakpoint is entered/exited
  - removes the need for observers in certain circumstances
2017-08-15 16:01:12 +01:00
Kevin Ansfield
267ce40945 Refactor general UI state into a service
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
2017-08-15 16:01:12 +01:00