Commit Graph

595 Commits

Author SHA1 Message Date
djordje vlaisavljevic
d46a94f6ba Added a star icon
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 11:17:43 +01:00
Thibaut Patel
53ed578140 Updated the product card to allow rating and button toggles
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 10:40:28 +01:00
djordje vlaisavljevic
fc00dc1abc Updated editor product card styles
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 01:16:41 +01:00
Rishabh
a18b3ac369 Fixed thumbnail override bug for audio cards
refs https://github.com/TryGhost/Team/issues/1230

- replacing an existing thumbnail in audio card was broken and prevented updating thumbnails for audio file
2021-12-07 00:20:30 +05:30
Thibaut Patel
824d4f2f51 Updated the product card star rating
refs https://github.com/TryGhost/Team/issues/1245

- Moved away from using only checkboxes and css because we need to use SVGs to display the stars
- Made it simple to keep CSS to the minimum and enable flexibility
2021-12-06 16:53:04 +01:00
djordje vlaisavljevic
9c8cb742d3 Updated toggle editor styles
refs https://github.com/TryGhost/Team/issues/1209
2021-12-03 20:15:38 +01:00
djordje vlaisavljevic
3dd1a12e0c Changed placeholders for inputs
refs https://github.com/TryGhost/Team/issues/1209
2021-12-03 10:43:20 +01:00
Rishabh
c5d9e27a07 Cleaned tab/enter behavior for toggle heading
refs https://github.com/TryGhost/Team/issues/1209

- updates tab/enter behavior for toggle heading -> content to use editor keyboard commands instead of overriding html input component
2021-12-03 01:39:21 +05:30
Rishabh Garg
6c837599d1 Allowed tab switch for heading to content input in toggle card (#2165)
refs https://github.com/TryGhost/Team/issues/1209

- allows switching to content input from heading by pressing tab
2021-12-03 01:14:05 +05:30
Rishabh
628150fd32 Renamed accordion usages to toggle for toggle card
refs https://github.com/TryGhost/Team/issues/1209
2021-12-03 00:52:46 +05:30
Rishabh
a5b0f75486 Updated audio card edit mode to include audio element
refs https://github.com/TryGhost/Team/issues/1230
2021-12-03 00:26:58 +05:30
James Morris
6eff87bf9c Editor changes for multiple quotes 2021-12-02 12:53:07 +00:00
Sanne de Vries
9ad920e985 Updated media card descriptions in cardmenu 2021-12-01 15:00:59 +00:00
Sanne de Vries
9fcaae4475 Updated callout card class for consistency
No ref

- Swapped "kg-card-callout" for "kg-callout-card"
2021-12-01 14:23:47 +00:00
Sanne de Vries
48742a1b15 Updated audio card placeholder 2021-12-01 14:07:05 +00:00
Kevin Ansfield
a7cf374566 Added "Gifs" card to the editor
refs https://github.com/TryGhost/Team/issues/1225

When inserted opens a searchable gif selector, creating an image card when a gif is chosen.

Includes keyboard navigation once open:
- `Tab`/`Shift+Tab` cycles highlighted gif through search result order
- `Up` / `Down` / `Left` / `Right` moves highlight in the respective direction
- `Enter` inserts highlighted gif

For the gifs card to be activated it's necessary to add a Tenor API key (obtained freely from https://tenor.com/gifapi) via your config.production.json file:

```
  ...
  "tenor": {
    "publicReadOnlyApiKey": "YOUR_KEY"
  }
}
```
2021-12-01 12:19:10 +00:00
Kevin Ansfield
cbdf3bfa28 Added "Button" card to the editor
refs https://github.com/TryGhost/Team/issues/1210

The button card lets you add a center or left-aligned button-styled link to your posts.
2021-12-01 12:01:46 +00:00
Sanne de Vries
80148c64db Updated file card icon in cardmenu 2021-12-01 10:29:17 +00:00
Rishabh
e0eff4436c Updated audio card with basic upload behavior
refs https://github.com/TryGhost/Team/issues/1230

- adds thumbnail upload on audio card
- cleans up card design in edit mode
2021-12-01 14:34:40 +05:30
Peter Zimon
fecbbdd2e7 Updated button URL suggestion copy 2021-11-30 17:10:24 -04:00
Peter Zimon
0a700cd10a Gif browser UI refinements 2021-11-30 17:07:07 -04:00
Kevin Ansfield
927a977257 Fixed focus not fully returning to editor after pressing escape in caption input
no issue

- forced card deselection+reselection so that keys such as `Enter` and `Backspace` work as expected when the card is shown as selected
2021-11-30 18:06:17 +00:00
Kevin Ansfield
ba532aa815 Reverted insertion of blank paragraph when selecting unsplash/gif image
refs e419e4e99f

- the behaviour wasn't desirable in all cases, reverting to the previous behaviour of selecting the card after image selection
2021-11-30 18:02:58 +00:00
Kevin Ansfield
024b27c8dd Fixed error when pressing enter inside a caption
refs e419e4e99f

- added an optional options param to `addParagraphAfterCard` but was missing a default value meaning the destructuring errored when the param wasn't provided
2021-11-30 18:02:58 +00:00
Thibaut Patel
1dac565dbc Fixed the product card bold/italic rendering
refs https://github.com/TryGhost/Team/issues/1233

- The content is html so it shouldn't be escaped by handlebars
2021-11-30 18:04:44 +01:00
Thibaut Patel
fc208558dd Added a star-rating input for the product card
refs https://github.com/TryGhost/Team/issues/1245

- This is a proof-of-concept as there are so many ways to implement a star-rating component
- The component is only available when editing the product card
- Uses the unicode star character: ★
- The inspiration is an old article from Lea Verou: https://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/ (minus the clever use of :not(:checked) on something that's not an input to filter-out IE)
- There is currently no way to remove the star rating as it'll get designed this week
2021-11-30 18:02:44 +01:00
djordje vlaisavljevic
f07e5b8c9c Updated product card editor look for 🛹 refs https://github.com/TryGhost/Team/issues/1233 2021-11-30 17:32:02 +01:00
Sanne de Vries
b3e84bfbd8 Updated media card icons in cardmenu 2021-11-30 16:01:40 +00:00
Kevin Ansfield
691308c34e Fixed video card settings panel position when card width changes
closes https://github.com/TryGhost/Team/issues/1244

- moved the `<KoenigSettingsPanel>` usage outside of the `<KoenigCard>` contents so it gets positioned relative to the outer card container rather than the inner card container so it's not affected by the inner card changing width/breaking out of the outer container
2021-11-30 15:32:21 +00:00
Kevin Ansfield
e419e4e99f Added blank paragraph insertion when selecting unsplash/gif image
refs https://github.com/TryGhost/Team/issues/1225

- provides a more obvious continuation point after selecting an image
- added `scrollIntoView` option to `addParagraphAfterCard()` because for large images the cursor in the new paragraph could be pushed out of the visible area
2021-11-30 15:05:41 +00:00
Kevin Ansfield
8e66f6ead5 Fixed editor not having focus after selecting an unsplash/gif image
refs https://github.com/TryGhost/Team/issues/1225

After selecting an image you were left in a state where it looked like the image card is inserted and selected but pressing Cmd+Z, Delete, Enter, etc had no effect.

- added a manual deselect/reselect of the card to make sure it's properly selected and editor has focus
- added a scrollToCard call so the newly inserted card position feels more natural
2021-11-30 13:06:57 +00:00
Kevin Ansfield
9223d0237c Added scroll-into-view behavior when opening gif selector
refs https://github.com/TryGhost/Team/issues/1225

When the gif selector is activated we want to scroll as much of the picker into view as possible.

- updated `scroll-into-view` modifier so it can work on bounding rects as well as offsets for those situations where a scroll parent is not the offset parent
  - only implemented "off bottom" behavior for now as that's all we need for this use-case
  - if the scroll adjustment would mean the top is cut off we readjust so that the top of the element is always visible
2021-11-30 12:51:56 +00:00
Kevin Ansfield
79d9ea82d9 Changed tenor config API key name
refs https://github.com/TryGhost/Team/issues/1237#issuecomment-981770688

- API key names for external services now follow a standard pattern
  - top-level key of the service name
  - public/private and read/write perms inside the name, eg. `publicReadOnlyApiKey`
- updated test to match expected API key name
2021-11-30 11:29:16 +00:00
Kevin Ansfield
506d925462 Fixed syntax error
refs 5b90fe87ad

- closing bracket was accidentally deleted in final post-push cleanup
2021-11-30 10:59:37 +00:00
Kevin Ansfield
5b90fe87ad Adjusted keyboard nav in gif selector to reduce vertical scroll jumps
refs https://github.com/TryGhost/Team/issues/1225

- `TAB` / `SHIFT+TAB` now cycle through gifs in the search return order. It means the highlight gif will not always be in the next column over but it drastically reduces the vertical scroll jumping
- `LEFT` / `RIGHT` now select the gif to the left/right that visually lines up with the top third of the currently highlighted gif and will stop at the grid edges. The result is `UP` / `DOWN` / `LEFT` / `RIGHT` act more like spatial navigation with no unexpected scroll jumps
- switching to only storing the highlighted gif and relying on indexes added to each gif by the `tenor` service when assigning to columns means that column number changes when resizing the viewport are automatically handled
2021-11-30 10:52:47 +00:00
Rishabh
a45e345a95 Added basic version for audio card UI
refs https://github.com/TryGhost/Team/issues/1230

- adds basic audio card edit mode UI with upload functionality
2021-11-30 13:52:14 +05:30
Kevin Ansfield
fccfcc3320 Added scroll-into-view behavior for highlighted gifs
refs https://github.com/TryGhost/Team/issues/1225

- added `scroll-into-view` modifier that will scroll an element into view putting it at the top or bottom of the viewport depending on which direction scroll is required
- used the `scroll-into-view` modifier to scroll the highlighted gif into view
2021-11-29 19:33:35 +00:00
Kevin Ansfield
66e6502cd2 Added first iteration of gif selector keyboard navigation
refs https://github.com/TryGhost/Team/issues/1225

Behaviour:
- `TAB`
  - highlights first gif if pressed whist search has focus
  - moves highlight to right, wrapping to next row, stops at final gif
- `SHIFT+TAB`
  - moves highlight to the left, wrapping to previous row
  - focuses the search bar if pressed whilst first gif is highlighted
- `ENTER`
  - highlights first gif if pressed whilst search has focus
  - inserts the highlighted gif
- `UP`
  - moves highlight up through current column
  - focuses the search bar if pressed when gif in top row is highlighted
- `DOWN`
  - highlights first gif if pressed whilst search has focus
  - moves highlight down through current column, stops at final gif in column
- `LEFT`
  - moves highlight to the left, wrapping to previous row
  - focuses the search bar if pressed whilst first gif is highlighted
- `RIGHT`
  - moves highlight to the right, wrapping to next row, stops at final gif
2021-11-29 18:28:19 +00:00
Kevin Ansfield
aa9a9c9598 Removed unused tenor components from earlier iterations
refs https://github.com/TryGhost/Team/issues/1225

- iterations of earlier approaches (modal-image-selector, and kg-media-selector) for the gif selector were kept around whilst we narrowed down the interaction patterns, we've settled on the inline-image-selector pattern introduced in 3f3b66b668 meaning the others are no longer needed
2021-11-29 18:28:19 +00:00
Thibaut Patel
ad90ad0236 Updated the product card first version
refs https://github.com/TryGhost/Team/issues/1233

- added a way to remove the product image
2021-11-29 18:29:33 +01:00
Thibaut Patel
93dba3cb9a Updated the first version of the product card
refs https://github.com/TryGhost/Team/issues/1233

- Moved to in-line editing for the title/description
- Only the button is clickable. The button dissapears if the text/href isn't defined
- Added an image (the image can't be deleted for now)
2021-11-29 17:50:56 +01:00
Kevin Ansfield
09cae883a8 Added drag/drop and paste support for video files
refs https://github.com/TryGhost/Team/issues/1229

- generalized `insertImageCards()` to `insertCardsFromFiles()` and added support for video cards
- added `canInsertCardsFromFiles()` function so the editor can check before starting an editor run loop and generating an undo point
2021-11-29 13:38:31 +00:00
Kevin Ansfield
7e4a277163 Extracted insertImageCards function into utils file
no issue

- preparation for adding additional files->cards utility functions for video/audio/file cards
2021-11-29 13:13:07 +00:00
Kevin Ansfield
d3bd7e8767 Added mimeType to video metadata extraction
refs https://github.com/TryGhost/Team/issues/1229

- `mimeType` was specified in the payload but it had been missed when extracting/setting the video metadata
2021-11-29 13:09:39 +00:00
Kevin Ansfield
3231abd0ae Added beginnings of the video card
refs https://github.com/TryGhost/Team/issues/1229

- mostly mirrors image card functionality but rebuilt with more modern syntax
- when uploading a video the size and duration is extracted along with a screen capture of the video from 0.5s in, the screen capture is uploaded once the video finishes because we need to use the uploaded video url as a reference to attach it as a thumbnail via the API
- the captured screenshot is currently what's shown in the card

To be implemented:
- "incomplete" state when video has been uploaded but not a thumbnail
- uploader in settings panel to change the video thumbnail
- play button overlay _or_ switch to `<video>` so it can be previewed
2021-11-29 09:28:10 +00:00
Kevin Ansfield
30b9718359 Added insertOnSpace attribute to card definitions
refs https://github.com/TryGhost/Team/issues/1225

- if set, typing `/card-name<space>` will instantly insert the card. Useful for cards that will trigger a media browser or similar where continuing to type will search with card-specific autocomplete
2021-11-25 16:13:55 +00:00
Kevin Ansfield
91191fea48 Added toggling between blockquote/aside/p via quote toolbar button
refs https://github.com/TryGhost/Team/issues/1239

- added new action for toggling quote sections that will loop through blockquote/aside/p when clicked
- copied `kg-quote.svg` to `kg-quote-2.svg` ready for alternate icon designs
2021-11-25 10:22:44 +00:00
Kevin Ansfield
7ff73753c8 🐛 Fixed /unsplash search term not including all words
no issue

- card definitions allow multiple params split by spaces in /menu commands but that meant for search terms that included spaces only the first word was being captured
- updated the param handling so the last param specified includes all remaining words in the slash command
2021-11-24 22:41:18 +00:00
Kevin Ansfield
0f517ad4e6 Added scroll-into-view behaviour for inline image selector
refs https://github.com/TryGhost/Team/issues/1225

- added `scrollToCard` action to `koenig-editor` and passed it through to all card components curried to already include the card as an argument
  - action selects the card which places the cursor on it, then triggers our existing cursor scroll-into-view behaviour with an option to allow scrolling a card into view
- updated our cursor scroll-into-view behaviour so if the cursor is large (eg, when it covers a card's height) we make sure the top of the cursor is kept in view rather than the bottom
  - ensures that on small-height screens, opening the gif selector doesn't result in it's search bar being scrolled off screen
2021-11-24 20:02:10 +00:00
Kevin Ansfield
5116c86557 Fixed error when cleaning up empty image card
refs https://github.com/TryGhost/Team/issues/1225

- deleting an empty image card in the initial cleanup phase triggers the `onDeselect` action in the card but at that point the card's section no longer exists in the editor post model which was causing errors when attempting to replace it's section with an empty paragraph
2021-11-24 19:55:40 +00:00