Commit Graph

110 Commits

Author SHA1 Message Date
Peter Zimon
208eae6c07 Admin style refinements (#1234)
refs. c51bce7358

* Refine form inputs and button styles
* Refined Forget link and buttons
* Remove green icon success indicator from login screen
2019-06-21 13:52:39 +02: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
5047b9f3d7 Added initial custom integrations UI (#1051)
refs https://github.com/TryGhost/Ghost/issues/9865, https://github.com/TryGhost/Ghost/issues/9942

- `integration`, `api-key`, and `webhook` models and respective mirage mocks
- moves integration routes around to match ember's concept of nested routes (nested routes reflect nested UI not nested URLs)
- adds custom integrations list to integrations screen
- adds custom integration screen
  - allow editing of integration details
  - show list of webhooks
  - webhook creation modal

NB: the `enableDeveloperExperiments` flag needs to be enabled in the `config.development.json` file for the custom integrations UI to be displayed until it's out of development.
2018-10-18 00:18:29 +01:00
Zimo
c24d9b6718 Removing "Cantarell" font from font stack
refs. https://github.com/TryGhost/Ghost/issues/9824
2018-09-17 11:46:27 +02:00
Zimo
4c05d618bd Koenig - Replace custom CSS classes with Spirit
no issue
- Koenig container styles for Spirit
- Applying Spirit styles to card menu
- Applying Spirit styles to generic cards
- Replacing icon styles with Spirit
- Fix slash menu selected state
- Cleanup of unused files + fix empty HTML
2018-05-02 15:54:22 +01:00
Peter Zimon
af03f8f516 Koenig - Improve styles (#1008)
refs https://github.com/TryGhost/Ghost/issues/9505
- Tweaking UI of link input
- Tweaking toolbar menu
- Tweaking image toolbar style
- Applying image width styles
- Tweaking list typography
- Fixing empty post placeholder
2018-04-24 10:15:54 +01:00
Kevin Ansfield
4be392ef16 Koenig - Link creation/editing via formatting toolbar
refs https://github.com/TryGhost/Ghost/issues/9505
- wire up the link button in the toolbar to set a `linkRange` property on `{{koenig-editor}}`
- add `{{koenig-link-input}}` that is shown when `{{koenig-editor}}` has a `linkRange` set
    - <kbd>Escape</kbd> will cancel the link input
    - clicking outside the input will cancel the link input
    - previously selected text will be re-selected on cancel
    - if an existing link was selected (or partially selected) then pre-fill the link input with the `href`
    - `X` is shown when there's a href value and clicking will clear the input
    - <kbd>Enter</kbd> *with* a href value will remove all links from text that is touched by the selection and create a new link across only the selected text
    - <kbd>Enter</kbd> *with no* href value will remove all links touched by the selection
- fixed toolbar tick positioning that was 8px off after change to Spirit classes
2018-04-06 17:49:16 +01:00
Kevin Ansfield
20a4a687b7 Koenig - Quick-fix for broken styles
no issue
- our custom `.kg-card-selected` and `.kg-media-placeholder` classes were removed in https://github.com/TryGhost/Ghost-Admin/pull/985
- add them back in our 🛎🛎🛎 **shame** file until they make their way into Spirit
2018-04-03 17:28:52 +01:00
Kevin Ansfield
6bff262849 Switch to packaged version of Spirit (#985)
no issue
- remove the manually copied Spirit CSS files
- remove the manually copied Spirit helpers
- install `ember-cli-ghost-spirit` addon
- remove manual postcss configuration
- update all `color()` functions in CSS to `color-mod()`
- fixed invalid `color-mod()` usage in `power-calendar.css`
- bump sub-dependencies
2018-04-03 11:52:18 +01:00
Kevin Ansfield
6a3cfc2ca8 Use token input to allow selection of multiple authors in PSM
requires https://github.com/TryGhost/Ghost/pull/9426
- fixed default token component display in {{gh-token-input}}
    - if no `tokenComponent` is passed to `{{gh-token-input}}` then it should default to the ember-drag-drop `draggable-object` component but instead it didn't output anything
    - put `draggable-object` in quotes because `{{component}}` needs a component name rather than an object
    - rename `option` attribute to `content` to match the default `{{draggable-object}}` interface
- add embedded `authors` attr to the Post model
    - ensure authors is populated when starting new post
    - add validation for empty authors list
- swap author dropdown for a token input in PSM
- show all post authors in posts list
- update tests for `authors`
  - always provide through an authors array
  - fix mirage serialisation for paginated responses (embedded records were not being serialised)
- unify tags and author inputs design
  - remove highlight of primary tags
  - highlight internal tags
  - remove unnecessary/redundant title attributes on tags
  - use SVG icon for "remove option" button in token inputs
2018-03-27 18:50:52 +01:00
Kevin Ansfield
24df9781cc Custom Post Templates UI (#878)
refs https://github.com/TryGhost/Ghost/issues/9060

- add `{{gh-psm-template-select}}` component
  - allows selection of a custom template for a post if the active theme has custom templates
  - loads themes on render, only hitting the server if not already in the store
  - disables select if post slug matches a `post-*.hbs` or `page-*.hbs` template
- adds `customTemplate` attr to `Post` model
- adds `templates` attr to `Theme` model with CPs to pull out custom vs post/page override templates
- add `.gh-select.disabled` styles to make disabled selects look visually disabled
2017-10-10 14:26:19 +02:00
Kevin Ansfield
d6bd86f84b Added top-margin to nested lists (#889)
no issue

- nested lists can become very cramped in post previews, this matches the top margin of the list to what would normally be used in-between list items
2017-10-09 18:27:45 +07:00
Katharina Irrgang
79a746a254 Display private RSS feed url in general settings (#888)
refs https://github.com/TryGhost/Ghost/issues/9001

- show private feed url if private blogging is enabled
- added a `.avoid-break-out` CSS utility class to prevent layout issues caused by non-breaking text such as long links
2017-10-05 10:59:14 +01:00
John O'Nolan
c20214af08 🎨 Improve visibility of unchecked checkboxes (#851)
no issue

* Checkboxes now have greater contrast when unchecked to make them more visible
* Checkbox colour tweaks for nightshift
2017-09-10 09:28:28 +01:00
Seth Lilly
714717ba07 🎨 Fix positioning of direction arrows in subscribers table (#824)
closes TryGhost/Ghost #8876
- Changed arrow styles to enable correct positioning. The sort arrow displayed below the `th` label; this CSS change fixes it.
- Capitalization change: opinionated, but changing capitalization of “Address” to match “Subscription Date”.
2017-08-17 11:46:10 +01: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
Aileen Nowak
dd4fe3a68f Added Twitter & Facebook data override fields to PSM (#814)
refs https://github.com/TryGhost/Ghost/issues/8334, requires https://github.com/TryGhost/Ghost/pull/8827
- added open graph and twitter fields to `Post` model
- added facebook and twitter card pane to PSM
- 💅🏼 Added preview styles for custom FB/Twitter cards
2017-08-03 15:45:14 +04:00
Kevin Ansfield
1d3a9a692d 🎨 fix non-square icon sizes (#778)
closes https://github.com/TryGhost/Ghost/issues/8665

- updates width/height for non-square icons to match the desired dimensions (width+height have to be specified for IE11)

Changes introduced in #724 failed to take into account a few of our icons are not square (notably the `arrow-*-small.svg` icons) resulting in some icons appearing too small.
2017-07-10 13:54:24 +02:00
Aileen Nowak
533ad231f7 💅🏼 Reduce meta description word count font-size (#757)
closes TryGhost/Ghost#8552

Reduce the `font-size` per `0.5rem` so it'll fit within the `700px` `max-width` of the parent container even with three numbers in word count.
2017-06-22 11:53:24 +02:00
Aileen Nowak
c8b8cb8478 🐛 fix styles for password forgot link (#734)
closes TryGhost/Ghost#8550
- use no success- and failure-classes for forgot link `gh-task-button`
- fixes loading spinner fill and positioning.
2017-06-13 10:01:20 +01:00
John O'Nolan
cbd18c6253 Update dark mode
Fixes https://github.com/TryGhost/Ghost/issues/8560

Depends on https://github.com/TryGhost/Ghost-Admin/pull/733
2017-06-12 21:50:17 +01:00
John O'Nolan
d39bbb89ab New tour styles 2017-06-12 21:50:17 +01:00
Kevin Ansfield
05a3a11855 welcome tour (#527)
refs https://github.com/TryGhost/Ghost/issues/5168
- adds a `tour` service that handles syncing and management of tour throbbers & content
- adds a `gh-tour-item` component that handles the display of a throbber and it's associated popover when clicked
- uses settings API endpoint to populate viewed tour items on app boot/signin
- adds `liquid-tether@2.0.3` dependency for attaching throbbers and popups
- adds initial tour contents
2017-06-08 22:00:10 +07:00
Kevin Ansfield
2243c12aca 🐛 fix IE11 bugs and styles (#724)
closes https://github.com/TryGhost/Ghost/issues/8384

- fixes image uploads on settings/general by reverting to jQuery for triggering the file dialog because IE11 doesn't support `MouseEvent` events or have the `.closest` method on native DOM elements
- gives all SVG elements an explicit `width` and `height` - if one property is set to `auto` or not specified IE11 will treat it as 100% of the container
- fixes horizontal scroll + scrollbar on the main app viewport
2017-06-01 23:02:03 +02:00
Kevin Ansfield
c74662538a 🐛 fix lazy-loading of CodeMirror interfering with editor (#717)
closes https://github.com/TryGhost/Ghost/issues/8488

- don't lazy-load the CodeMirror styles in `gh-cm-editor` as they are already loaded and overridden
2017-05-30 15:31:18 +02:00
Kevin Ansfield
3f329d99c5 🐛 fix flickering buttons during modal transitions (#710)
no issue

- removes transition on `all` properties in favour of an explicit list, fixes the buttons flickering after the modal appears and the outline/text being visible when the modal disappears
- simplifies the liquid-fire transition so that elements being removed at slightly different times doesn't cause flickering when the modal is removed
2017-05-23 18:45:25 +02:00
Kevin Ansfield
e6bd8cbe3f 🔥 remove unused gh-spin-button component
closes https://github.com/TryGhost/Ghost/issues/7865
- `gh-spin-button` has been replaced with `gh-task-button`
2017-05-09 16:37:59 -05:00
Rabbi Hossain
b66c616f98 Fix for Firefox CSS Issues (#671)
closes https://github.com/TryGhost/Ghost/issues/8337
- fixes `Browse` file select icon being partially hidden on Labs screen
- fixes timezone alignment in date/time picker inside PSM
2017-04-25 09:17:16 +01:00
Aileen Nowak
2f83a1a4fa 🖌 Remove "Fira Sans" system font (#666)
closes TryGhost/Ghost#8136
- the "Fira Sans" system font looks - even on a retina display - not very readable for users.
2017-04-24 09:36:07 +01:00
Aileen Nowak
35bef04a7f 🎨 Don't scroll to top after toggle checkbox (#655)
closes TryGhost/Ghost#8335
- use `display: none` instead of positioning it out of the viewport.
2017-04-20 10:51:41 +01:00
Kevin Ansfield
e22eb668c4 💄 refactor setup screens to use ember-concurrency (#644)
refs TryGhost/Ghost#7865

💄 refactor signup to use ember-concurrency

refs https://github.com/TryGhost/Ghost/issues/7865
- moves authentication actions from `signup` route to controller
- refactors authentication and signup logic into EC tasks
- replaces use of `gh-spin-button` with `gh-task-button` in signup template

💄 refactor setup screens to use ember-concurrency

refs https://github.com/TryGhost/Ghost/issues/7865
- moves authentication actions from `setup/two` route to controller
- refactors authentication and setup logic into EC tasks
- replaces use of `gh-spin-button` with `gh-task-button`
- fixes some styling issues with the new SVG icons
- adds `app/styles/patterns/icons.css` back to contain per-icon overrides and animations (some SVGs use fills and others use strokes so we sometimes have conflicting styles)
2017-04-19 12:27:32 +02:00
Kevin Ansfield
f5035fbf2e Revert svg icon stroke changes
no issue
- reverts "remove hardcoded icon stroke colors"
- revert "add stroke color to button classes, remove icon-specific stoke/fill styles"

Unfortunately these changes had a larger effect than was initially obvious, will PR if these changes still prove to be useful.
2017-04-15 14:28:47 +01:00
Kevin Ansfield
8c296db045 add stroke color to button classes, remove icon-specific stoke/fill styles 2017-04-15 09:28:00 +01:00
Aileen Nowak
b8a1036a43 No more icon font: {{inline-svg}} - Part 2 (#642)
closes TryGhost/Ghost#8107
- replaces all icons in Ghost-Admin with SVGs by using our new helper {{inline-svg}}.
- removes all ghosticon fonts.

This is the second and final batch of the refactor.
2017-04-14 17:22:14 +01:00
Kevin Ansfield
216eab51b0 🎨 animated retry icon
refs https://github.com/TryGhost/Ghost/issues/7515
- add a `retry` icon that better matches button text dimensions
- add a spin animation for the retry icon
- use the new retry icon in the default `gh-task-button` template
- add a "restart animation" method to `gh-task-button` so that repeated clicks on a button appear to register the action when local validation means that there's no transition from failed->running->failed
2017-04-14 16:16:52 +01:00
Kevin Ansfield
2f767bef1e 🎨 first pass at animated icons for save-state buttons (#637)
refs https://github.com/TryGhost/Ghost/issues/7515
- adds animated spinner and check SVG icons
- improves SVG sizing/alignment in buttons
- disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed
- fixes broken spinner in `gh-spin-button` components
2017-04-11 16:44:37 +01:00
Kevin Ansfield
77fb6cbee6 🐛 fix long text overflowing signin button on setup screen (#635)
closes https://github.com/TryGhost/Ghost/issues/8029
- quick fix - works for the setup button but won't work for buttons that include spinners because the `display: flex` breaks the `text-overflow: ellipsis` style, this should be fine as I'm not aware of any other buttons where the text is user-defined
2017-04-11 13:09:09 +01:00
Ryan McCarvill
00f4cab7b9 General Editor UI improvements. (#630)
refs https://github.com/TryGhost/Ghost/issues/8248
refs https://github.com/TryGhost/Ghost/issues/8194
closes https://github.com/TryGhost/Ghost/issues/8192

Miscellaneous editor reliability and usability fixes. 
- Improve the reliability of selection.
- Ensure that the + menu appears even if there is a blank document (which meant the events weren't firing from mobiledoc itself)
- When cards are added they are automatically selected and if possible go straight into edit mode (only works on the markdown card).
- Fixes issues in Safari desktop, Safari mobile, and Firefox.
- Tries to position UI on screen at all times.
- Removes fastclick.
2017-04-10 10:10:53 +01:00
Aileen Nowak
f931f27dd4 🎨 No more icon font: {{inline-svg}} (#605)
refs TryGhost/Ghost#8107
- Replaces icon font with `{{inline-svg}}` helper incl. necessary style adjustments.
2017-04-07 16:23:45 +01:00
John O'Nolan
e39a31656e New publish menu 2017-03-11 19:23:44 +08:00
Kevin Ansfield
ad98a9a072 🎨 refactor settings screens to use ember-concurrency & gh-task-button
refs https://github.com/TryGhost/Ghost/issues/7865
- updates all settings screens to use EC tasks and `gh-task-button` to get save-state save buttons
- removes now-unused `settings-save` mixin
- moves the order of button color CSS so that grey buttons can change to green/red after completing
- removes the heading from `apps-loading` template so that there's no odd flash when loading slack/amp screens directly
2017-03-08 10:00:03 -07:00
John O'Nolan
8aa02da02c Editor card-menu and toolbar style updates 2017-03-08 21:08:20 +08:00
Kevin Ansfield
f1512d12c2 success/failure state spinner buttons (#566)
refs https://github.com/TryGhost/Ghost/issues/7515
- changes to `gh-task-button`:
  - can take `buttonText` (default: "Save"), `runningText` ("Saving"), `successText` ("Saved"), and `failureText` ("Retry") params
  - positional param for `buttonText`
  - default button display can be overridden by passing in a block, in that scenario the component will yield a hash containing all states to be used in this fashion:
    ```
    {{#gh-task-button task=myTask as |task|}}
    {{if task.isIdle "Save me"}}
    {{if task.isRunning "Saving"}}
    {{if task.isSuccess "Thank you!"}}
    {{if task.isFailure "Nooooooo!"}}
    {{/gh-task-button}}
    ```
- update existing uses of `gh-task-button` to match new component signature
2017-03-07 10:28:52 -07:00
Kevin Ansfield
ae60352c16 disable email input field when using OAuth, direct users to my.ghost.org for login details (#560)
no issue

- disables user email input field when using Ghost OAuth because email addresses are synced from the central identity management system
- adds a link to my.ghost.org account management when using Ghost OAuth and viewing your own user
2017-03-03 14:24:43 +01:00
John O'Nolan
08e6b00048 Minor editor style updates
Refs https://github.com/TryGhost/Ghost/issues/8021
2017-03-02 09:56:52 +00:00
John O'Nolan
afdc20d31e Update design screen styles, fix login bugs
Refs https://github.com/TryGhost/Ghost/issues/8021
2017-02-27 13:31:01 +07:00
John O'Nolan
54486af893 Colour updates 2017-02-21 13:03:44 +00:00
John O'Nolan
73ddd59367 New settings/general styles 2017-02-21 13:03:44 +00:00
John O'Nolan
639264166a Labs UI update 2017-02-17 12:31:12 -06:00
John O'Nolan
38315ffab1 Style updates to new app frame for all other screens 2017-02-17 10:14:16 +00:00