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
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
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
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
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
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
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
refs https://github.com/TryGhost/Team/issues/1236
Stripe allows coupon names to be only upto 40 chars long, while Ghost allowed them to be 191 chars. This change updates the admin validation to restrict name to 40 chars to match Stripe limit
refs https://github.com/TryGhost/Team/issues/1225
- when opening the media selector and the bottom is cut off, scroll the whole selector into view so it's bottom is 20px away from the viewport bottom
- if the adjusted scroll would hide the top of the selector, make sure the top is 20px from the viewport top leaving the bottom cut off
refs https://github.com/TryGhost/Team/issues/1225
Re-using the existing pattern of creating an image card and having it launch an image selector was proving to have a lot of edge cases when we wanted a more streamlined in-line image selector for gifs.
- added a new `'selector'` type to card definitions
- requires a `selectorComponent` argument that is the name of a component that renders the media and handles search
- updated card components to open the selector component when respective menu item is activated
- updated slash menu to instantly trigger the selector component when the slash command matches a card and is followed by a space so that searches continue inside the selector
- added `<KoenigMediaSelector>` component that wraps the card-definition provided component and handles escape key, clicks outside of the editor, and provides a stripped down API to the child component for selecting/closing
- added `<KoenigMediaSelectorTenor>` which mostly replicates the `<GhTenor>` component but has different styling and uses the provided media selector API
no issue
- fixed typo in the install-theme modal that meant we weren't correctly identifying Casper as the default theme meaning an attempt to install it was made instead of activating it
refs https://github.com/TryGhost/Team/issues/1121
Double-clicking the delete button in the confirmation modal could trigger a second attempt to delete the post/page when it had already been deleted resulting in an ugly/incomprehensible error bubbling up.
- added `{drop:true}` to the task instance so it can't be called again whilst it's currently running
- added a guard for `isDeleted` so we don't attempt to destroy an already deleted record
- added a `true` return so the button indicates a successful state rather than an error state whilst the modal is closing
refs https://github.com/TryGhost/Team/issues/1217
- tenor API config is now an object that lives at `config.tenor`
- updated gifs card gating to use the new config object
- added passthrough of `contentfilter` param from config when making Tenor API requests
Refs https://github.com/TryGhost/Team/issues/1206
- Replaced background and swatch colors to semi-transparent so that it works with light and dark mode
- Updated emoji-picker dark mode
- Removed text contrast adjustment for accent background
refs https://github.com/TryGhost/Team/issues/1206
- Re-use the saved emoji as the default for future callout cards
- Introduced a localstorage util that ignores errors. Ignoring errors avoids issues with browsers that don't support localstorage
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
closes https://github.com/TryGhost/Team/issues/1223
It's possible to disable the Unsplash integration from the integration settings but when disabled the image selector was still available for post feature images and as an editor embed option.
- adds `isAvailable` property to card definitions, if it's set it should be a string that matches a config/setting that determines the card's availability
- unsplash card updated to use `'settings.unsplash'` as it's `isAvailable` property
- adds conditional to `<GhEditorFeatureImage>` so the Unsplash selector is only shown when enabled to bring it inline with the `<GhImageUploader>` component that was used previously for post feature images
refs https://github.com/TryGhost/Team/issues/1220
- there's no options for individual gifs like there are with Unsplash images and there's no real need to zoom for gifs that are already fairly small so the extra zoom step is unnecessary
refs https://github.com/TryGhost/Team/issues/1220
- added resize observer and cut-off widths for number of columns to auto-adjust based on the size of the selector's container
- fixed error when tenor service is unavailable due to missing `retry` action
