Commit Graph

30 Commits

Author SHA1 Message Date
Peter Zimon
8ae47cd0e5 UI refinements (#1075)
no issue
* Update negative margin of card indicators
* Update to Spirit 0.0.49
2018-11-26 14:25:47 +00:00
Kevin Ansfield
0d08c639fe 🐛 Fixed editor undo states for card contents (#1064)
refs https://github.com/TryGhost/Ghost/issues/10049
- update `{{koenig-card}}` component to compare payload values and create a snapshot when exiting edit mode for container cards (markdown, html, code)
- update image card to trigger snapshots on image upload/selection and width change
2018-11-06 14:43:19 +00:00
Kevin Ansfield
9832414374 Fixed linting 2018-08-09 10:18:45 +01:00
Kevin Ansfield
fe13a46273 Koenig - Allow clicks on rich-text captions to place cursor immediately
refs https://github.com/TryGhost/Ghost/issues/9724
- add a `data-kg-allow-clickthrough` attribute so that it's possible to explicitly allow non-input elements to be clicked immediately when clicking on a card
2018-08-08 15:48:31 +01:00
Kevin Ansfield
821a5d38ab 🐛 Koenig - Fixed numpad Enter key not behaving like normal Enter key
refs https://github.com/TryGhost/Ghost/issues/9724
- `event.code` represents physical key location rather than the associated key value. Eg, `event.code` could be `NumpadEnter` rather than the expected `Enter` value
- ensure we use `event.key` anywhere that we are acting on the key value so that re-mapped or virtual keys still work as expected
2018-07-30 14:40:00 +01:00
Kevin Ansfield
cc41f07213 🎨 Koenig - Allow Ctrl/Cmd+Enter to exit card edit mode
refs https://github.com/TryGhost/Ghost/issues/9724
- <kbd>Ctrl/Cmd+Enter</kbd> is the shortcut to enter edit mode of a card that has it
- adds <kbd>Ctrl/Cmd+Enter</kbd> as a shortcut to exit edit mode as an addition to <kbd>Escape</kbd> for easier toggling in/out of edit mode
2018-07-18 15:15:07 +01:00
Kevin Ansfield
62d626a9fd 🐛 Koenig - Fixed "Retry" link in embed card error message
refs https://github.com/TryGhost/Ghost/issues/9724
- `element.contains(target)` was not reliably picking up the `<span>` inside the `<button>` element
- added a fallback that searches the event path for the card component's ID
2018-07-17 17:02:36 +01:00
Kevin Ansfield
06e6f42224 🐛 Koenig - Fixed caption/embed inputs in Firefox & Safari
refs https://github.com/TryGhost/Ghost/issues/9623
- disable `contenteditable` on the main editor element when an input in a card gains focus
    - Firefox chokes on inputs inside a `contenteditable` element
    - use a MutationObserver inside `{{koenig-card}}` to automatically add event handlers for focus/blur events so that each card is not required to set up handlers and enable/disable content editable manually
- bump Spirit dependency
    - remove `user-select: none` styling from `.form-text` for text inputs
    - fixes captions and embed inputs in Safari and improves behaviour in Firefox
- add a guard around `getSelection(0)` in the `_scrollCursorIntoView()` method to avoid Safari throwing errors
2018-06-21 15:47:50 +01:00
Kevin Ansfield
749839a8e1 🐛 Koenig - Fixed card click-to-deselect in Safari/Firefox
refs https://github.com/TryGhost/Ghost/issues/9623
- only Chrome exposes `MouseEvent.path` so use `MouseEvent.composedPath()` for Safari/FF support
2018-06-20 17:34:50 +01:00
Kevin Ansfield
e4dca1cb70 Koenig - Fixed HR card selection when clicking
refs https://github.com/TryGhost/Ghost/issues/9623
- clicks near the HR card when it was selected would trigger immediate deselection putting the cursor into a position where it was not possible to type
- update the guard in the click-to-deselect event handler to match any element contained by the editor rather than only clicks that are directly on the editor element
2018-06-20 16:54:43 +01:00
Kevin Ansfield
7ae1df7c8d Koenig - Lazy-click to edit on mouseup not mousedown
refs https://github.com/TryGhost/Ghost/issues/9623
- move lazy-click handling to a mouseup handler instead of mousedown in `{{koenig-card}}`
- ensure that we don't trigger edit mode on the initial mouseup after a mousedown event has selected the card
2018-06-20 15:00:07 +01:00
Kevin Ansfield
1133370568 Koenig - Deselect cards when a click happens outside of the editor canvas
refs https://github.com/TryGhost/Ghost/issues/9623
- move click handler registration from `onEnterEdit` to `onSelect`
- add guard against deselecting for clicks on the editor canvas
  - prevents card being deselected when the click would have placed the cursor in a position that selected the card
  - requires editor instance to be passed through to `{{koenig-card}}` in all card components
2018-06-14 12:21:22 +01:00
Kevin Ansfield
a04adae8d2 Koenig - Embed card
refs https://github.com/TryGhost/Ghost/issues/9623
requires https://github.com/TryGhost/Ghost/pull/9666
- `{{koenig-card-embed}}`
    - URL input
    - perform oembed lookup & fetch on <kbd>Enter</kbd>
    - remove card if enter pressed with empty URL
    - show error message on server error
        - "retry" returns to input bar
        - "paste as link" removes card and outputs link
        - "X" removes card
    - force embedded <script> tags to run
    - wrap embed html with `.koenig-embed-{video,photo,rich}` class
- add embed cards to the (+) and /-menus
    - "section" support in the card menus
    - refactor to use single card menu map and content component for both menus
    - update /-menu keyboard movement to handle sections
- add parameter support to /-menu commands
  - `/embed {url}` will insert embed card and automatically fetch oembed for supplied url
2018-06-12 14:07:50 +01:00
Kevin Ansfield
1ebdfac55d Koenig - Do not show image toolbar until image is uploaded
refs https://github.com/TryGhost/Ghost/issues/9623
- update `{{koenig-card}}` to show the toolbar immediately if it has changed
- update `{{koenig-card-image}}` to only add toolbar items when an image is present
2018-05-31 09:45:58 +01:00
Kevin Ansfield
56499cae5d Koenig - Fixed card creation from plus menu
refs 569a6942cd
- perform a check for a click originating on the plus menu in `{{koenig-card}}` to avoid an immediate deselection as soon as an editable card is created
- removed unnecessary `.koenig-plus-menu` class in favour of `[data-kg="plus-menu"]` selector
2018-05-23 14:11:42 +01:00
Kevin Ansfield
569a6942cd 🎨 Koenig - Exit edit mode of a card when clicking outside the card
refs https://github.com/TryGhost/Ghost/issues/9623
- register window click handler in `{{koenig-card}}` whilst card is in edit mode
  - deselect card when a click is registered
  - ignore any clicks inside the card
  - ignore any clicks that originate inside of a modal
- pass our `deselectCard` action through to all cards
2018-05-23 11:38:30 +01:00
Kevin Ansfield
135d550c8a Koenig - Switch this.get for ES5 getters
no issue
- Ember 3.1 adds support for ES5 getters to replace (mostly) the need for `this.get` - https://www.emberjs.com/blog/2018/04/13/ember-3-1-released.html#toc_es5-getters-for-computed-properties-2-of-4
- updating Koenig now because it's a fairly isolated part of Ghost-Admin and a good playground for new standards that we can migrate to in the main codebase
2018-05-01 17:13:53 +01:00
Kevin Ansfield
26e70e86ea Koenig - Sticky card icons (#1013)
refs https://github.com/TryGhost/Ghost/issues/9505
- use `ember-sticky-element` to stick card icons in top left when scrolling
- pass an `headerOffset` down from the `{{gh-editor}}` component through Koenig and the card components so that it can be used for adjustments where necessary
    - calculate `headerHeight` in `{{gh-editor}}` any time we change the header class
2018-05-01 15:55:51 +01:00
Kevin Ansfield
ec65fc890b Koenig - Fixed card context menus sometimes being misplaced
refs https://github.com/TryGhost/Ghost/issues/9505
- sometimes the toolbar was not in a state to measure correctly during `didInsertElement` so the positioning was incorrect
- fixed by re-calculating width/height each time we want to show the toolbar
2018-04-25 15:11:45 +01:00
Zimo
f25e4eb361 Koenig - Plus menu positioning and container card style
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-25 14:28:52 +01:00
Zimo
deea18576e Koenig - Tweaked container card styles
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-25 14:28:37 +01:00
Kevin Ansfield
bc32beef38 Koenig - Card menu and (+) button styles (#1010)
refs https://github.com/TryGhost/Ghost/issues/9505
- apply styles to card menu and replace icons
- apply styles for (+) button
2018-04-25 10:11:48 +01:00
Kevin Ansfield
ea0be6a4d8 Koenig - Fixed card context menu clickableness
refs https://github.com/TryGhost/Ghost/issues/9505
- ensure we disable `pointer-events` on context menus when hidden so that hidden menus do not interact with the mouse
- add z-index to context menus so that they sit on top of any editor content
- add `relative` positioning to the html card content so the click overlay div doesn't expand outside of the content area
2018-04-10 16:46:25 +01:00
Kevin Ansfield
4f08b7fb8d Koenig - Switch card context menu to Spirit classes
refs https://github.com/TryGhost/Ghost/issues/9505
- use Spirit classes for card context menu
- add button and icon class options for context menu items
- add ability to have icon+text for context menu items
- add "Edit" context menu item to markdown and html cards
2018-04-03 18:34:01 +01:00
Kevin Ansfield
25bc402f72 Koenig - Remove markdown/embed card if it's empty when leaving edit mode
refs https://github.com/TryGhost/Ghost/issues/9505
- add `deleteCard` action to `{{koenig-editor}}` component and pass it through to the component cards
  - required modifying the `_deleteCard` behaviour so that it doesn't always try to move the cursor
- use `onLeaveEdit` action from `{{koenig-card}}` in the markdown and html cards to check if their payload is empty and remove the card when exiting edit mode
- fixed `onLeaveEdit` action firing when card first rendered
2018-03-15 17:54:15 +00:00
Kevin Ansfield
355bf18c7c Koenig - Wrap HR card in {{koenig-card}} component
refs https://github.com/TryGhost/Ghost/issues/9311
- makes the HR card behave like the other cards wrt hover and selection visibility
2018-03-14 11:44:09 +00:00
Kevin Ansfield
618643606a Koenig - Allow clicks on cards to pass through for inputs
refs https://github.com/TryGhost/Ghost/issues/9311
- add `hasEditMode` flag to the `{{koenig-card}}` component so that cards without an edit mode (eg, the image card) don't have unnecessary state changes and even listeners
- allow `mousedown` events on cards to passthrough when selecting if the target was an input or textarea so that the cursor can be placed in an input immediately instead of requiring double clicks
2018-02-22 13:46:24 +00:00
Kevin Ansfield
b8a7925f46 Update Spirit CSS 2018-02-20 17:40:17 +00:00
Kevin Ansfield
4636b4be0d Koenig - Initial Spirit styles integration
no issue
- copy Spirit styles over (eventually these will live in an addon)
- update `ember-cli-build` to output a separate CSS file for Spirit
- update `asset-delivery` addon to output Spirit CSS link
- add `{{kg-style}}` helper for Spirit class names
- update `{{koenig-card}}` and the `{{koenig-card-markdown/html}}` components to use Spirit class names and markup
- replace markdown icon with new version from Spirit
2018-02-20 15:05:19 +00:00
Kevin Ansfield
2e4990093f Koenig - Generic {{koenig-card}} container card component
refs https://github.com/TryGhost/Ghost/issues/9311
- initial CSS for container card outline, selection state, toolbar, etc
- adds `{{#koenig-card}}` component to be used inside of component card templates to handle the default card container HTML, mouse interactions, etc
- update `{{koenig-card-markdown}}` to use the new `{{koenig-card}}` component
  - add render/edit mode views
  - focus the textarea when entering edit mode
- updated `{{koenig-editor}}`
  - add <kbd>Cmd+Enter</kbd> command to put a selected card into edit mode
  - when inserting new cards put them into edit mode immediately
  - move edit/select methods out of actions and into normal methods so that timing is easier to reason about
  - skip `cursorDidChange` process when cursor changes as a result of a card selection, fixes issues with `selectCard` being triggered multiple times unexpectedly
2018-02-13 18:00:54 +00:00