Commit Graph

372 Commits

Author SHA1 Message Date
Fabien O'Carroll
b8dd7c6af2 Revert "Added support for no-iframed embeds"
This reverts commit 8e29e8de79.
2021-11-15 15:49:42 +02:00
Fabien O'Carroll
dad82ec463 Revert "Fixed embeds without iframe resizing iframe"
This reverts commit 85c8674299.
2021-11-15 15:49:42 +02:00
Thibaut Patel
82ccb36338 Added an emoji picker for the callout card
refs https://github.com/TryGhost/Team/issues/1206

- Uses https://emoji-button.js.org/ for the emoji panel and search
- Displayed when the callout card emoji is clicked
2021-11-15 14:19:20 +01:00
Fabien O'Carroll
0f839a9d27 Added child component for NFT Embeds
refs https://github.com/TryGhost/Team/issues/1211

We've moved the rendering of HTML outside of the OEmbed endpoint - so
the Admin needs to handle constructing the HTML from the OEmbed response
metadata.
2021-11-15 11:02:27 +02:00
Fabien O'Carroll
85c8674299 Fixed embeds without iframe resizing iframe
refs https://github.com/TryGhost/Admin/commit/8e29e8de7

The listener for resize is added on the first render of the component,
so we cannot check for the existence of the iframe then.
2021-11-15 11:01:37 +02:00
Kevin Ansfield
cd6d167f77 Added repositioning of settings panel when it's size adjusts
refs https://github.com/TryGhost/Team/issues/1219

- added optional `adjustOnResize` argument to `{{movable}}` modifier
  - when the movable element's size changes (based on a `ResizeObserver` event) the passed in action is called with the element and the current x/y position
  - having this handled via the `{{movable}}` modifier is needed because that's what knows about any CSS translations that are present and allows the drag position to remain in sync with any resize-related adjustments
  - return value of the action is expected to be a new `{x, y}` tuple
- used `adjustOnResize` in the `<KoenigSettingsPanel>` component so that any time the settings panel grows and causes part of it to be off-screen we re-position so that the whole panel is kept on-screen
2021-11-12 18:45:03 +00:00
Kevin Ansfield
6853b964f8 First iteration of gifs image selector + card
refs https://github.com/TryGhost/Team/issues/1217

- adds `tenor` service that acts as a coordinator for the Tenor API similar to the `unsplash` service
- adds `<GhTenor>` component that renders an image search and select modal using the `tenor` service
- swapped the gifs card over to use the `tenor` image selector so it opens the tenor modal instead of the unsplash modal
2021-11-12 16:10:26 +00:00
Rishabh
b4415830e6 Refined design for toggle card in edit mode
refs https://github.com/TryGhost/Team/issues/1209
2021-11-12 16:31:39 +05:30
Rishabh
5e01b94bb1 Fixed default tag override not working on edits for html input component
no refs

- we added a default tag override for basic html input component, but the edit mode was still using `p` as the tag irrespective of default set, which caused switching back to p tag when editing the component
2021-11-12 16:31:39 +05:30
Rishabh
57b318de52 Added new html textarea component
refs https://github.com/TryGhost/Team/issues/1209

- adds new `KoenigHtmlTextarea` component for entering multi line html in cards
- updates accordion card to use html text area component
2021-11-12 16:31:39 +05:30
Sanne de Vries
549f89084f Updated callout-card color picker
Refs https://github.com/TryGhost/Team/issues/1206

- Replaced select component for color palette picker
- Added support for brand color
2021-11-11 15:48:14 +01:00
djordje vlaisavljevic
8f73a4e39b Updated Accordion card container and styles 2021-11-11 15:18:29 +01:00
Fabien O'Carroll
8e29e8de79 Added support for no-iframed embeds
refs https://github.com/TryGhost/Team/issues/1211

This is to allow us to style the NFT embed card in the Admin
2021-11-11 13:46:26 +02:00
Rishabh
d3cfa14498 Allowed custom default tag for html input component
no refs

- allows custom html tag to be passed in to basic html input component
- updates accordion heading input to use basic html input with h4 tag
2021-11-11 16:49:04 +05:30
Rishabh
697420957c Refined toggle card design in edit mode
refs https://github.com/TryGhost/Team/issues/1209
2021-11-11 16:49:04 +05:30
Peter Zimon
6a8976a683 Updated copy for Button card tooltip 2021-11-11 12:05:36 +01:00
Kevin Ansfield
49d32c4ca4 Added "incomplete" state for button card
refs https://github.com/TryGhost/Team/issues/1210

- when rendered, show button as greyed out if either text or url is missing
  - show "Add button URL" in tooltip if the url is missing
  - show "Add button text" in button if the text is missing
- adds wrapper element so the tooltip is not greyed out
2021-11-11 09:24:20 +00:00
Thibaut Patel
276841a523 Added background color config for the callout card
refs https://github.com/TryGhost/Team/issues/1205

- Stored in the payload as an hexadecimal (or variable) value
- chosen with a dropdown through a pre-selected list of colors (or the publication accent color)
2021-11-10 18:31:00 +01:00
Thibaut Patel
075d529e65 Added an emoji toggle for the callout card
refs https://github.com/TryGhost/Team/issues/1205

- Uses the KoenigSettingsPanel to display a toggle
- The Emoji is set to an empty string when disabled
- And arbitrarily set to 💡 by default when toggled back on
2021-11-10 15:51:16 +01:00
Kevin Ansfield
e51bcec5f1 Fixed email-cta card not auto-deleting when button is disabled but has content
no issue

- if the `showButton` property is `false`, auto-delete the card when leaving edit mode if the card has no rich-text content
2021-11-10 14:50:02 +00:00
Kevin Ansfield
2625199fb2 Removed duplication of "delete if empty" card logic
no issue

The logic for "delete if empty" was duplicated in two places:

1. when `createComponentCard` is used to register a card, this option method was used when cleaning up a post when first rendering (cards in empty state can be saved before the editor auto-removes them but we don't want to show them again)
2. inside of card's own delete-if-empty handling on certain actions such as deselection or leaving edit mode

- added an `ifEmpty` property to each card component
  - used by the editor's first-render cleanup routing if the property is present
  - can be re-used internally for the card's own deselect/exit-edit-mode behaviour
- updated the cleanup routine in `<KoenigEditor>`
  - added a `allComponentCardsRegistered` property that will return `true` when the `.component` property is set on every card (the property is set during card component initialisation so we're at the mercy of Ember's render process so not all card components will be immediately registered)
  - swapped `_cleanup` for `_cleanupTask` that will wait for `allComponentCardsRegistered` to be `true` before performing cleanup, ensuring that we always have access to the card component's `isEmpty` property even when Ember renders cards across multiple render batches
  - checks for `isEmpty` being a boolean and will delete the card if it's value is `true`
- updated all cards that had delete-if-empty behaviour
  - added `isEmpty` properties
  - removed duplicated logic in the `createComponentCard` calls
2021-11-10 14:46:00 +00:00
Peter Zimon
13b9145a01 Set audience capitalized in Email CTA options 2021-11-10 15:44:21 +01:00
Peter Zimon
68d599f4a9 Updated link styles in Button and Email CTA cards 2021-11-10 15:42:35 +01:00
Peter Zimon
091e44a562 Adjusted button card Koenig styles 2021-11-10 14:46:23 +01:00
Rishabh
f3c8f1cac8 Updated edit mode design for accordion card
refs https://github.com/TryGhost/Team/issues/1209

- adds inline content and heading editing as html input
- refines style
2021-11-10 13:44:03 +05:30
Rishabh
da4641f9b3 Added first version for accordion card
refs https://github.com/TryGhost/Team/issues/1209

Added first version for toggle cards with heading and content input and basic rendering in Editor
2021-11-10 13:44:03 +05:30
Sanne de Vries
93d16dfe56 Fixed action toolbar not working in callout-card 2021-11-09 15:29:13 +01:00
Sanne de Vries
347bd47f77 Fixed callout placeholder not taking full width 2021-11-09 15:17:36 +01:00
Sanne de Vries
ff39c776b2 Added basic styling to callout-card
Refs https://github.com/TryGhost/Team/issues/1205
2021-11-09 15:09:28 +01:00
Peter Zimon
5183ea41ca Added empty NFT component 2021-11-09 13:56:24 +01:00
Thibaut Patel
7441f8df07 Added first pass of callout card
refs https://github.com/TryGhost/Team/issues/1205

- adds card that contains a static emoji and configurable text
2021-11-09 10:39:51 +01:00
Kevin Ansfield
794ed83032 Added first pass of button card
no issue

- adds card that contains a single button with alignment options and configurable text and url
2021-11-08 15:50:05 +00:00
Kevin Ansfield
c6f1bbc918 Removed unused @style args from email+email-cta cards
no issue

- the `@style` arguments passed to `<KoenigCard>` in these components doesn't exist
2021-11-08 13:53:57 +00:00
Kevin Ansfield
085ef1646c Converted hr card component to glimmer syntax
no issue

- switching to Ember "Octane" patterns
2021-11-08 13:10:39 +00:00
Kevin Ansfield
0b360c3383 Converted paywall component to glimmer syntax
no issue

- switching to Ember "Octane" patterns
2021-11-08 13:08:58 +00:00
Kevin Ansfield
aae6e32494 Added basic drag-to-move handling to card setting panels
no issue

- adds `{{movable}}` render modifier that sets up basic mouse/touch event handlers that adjust the element's `translate` style when click/touched+dragged so it can be moved around the screen
2021-11-03 16:51:24 +00:00
Kevin Ansfield
999d69af4d Switched back to explicit edit mode for settings panel prototype
no issue

- added the edit toolbar icon back to the email-cta card
- switched back to displaying the non-editable version of the card when not in edit mode
- removed unused `showSettingsPanel` property from `<KoenigCard>` component, cards can now control display of settings panel using `@isEditing`
- removed unused `@visible` argument for `<KoenigSettingsPanel>` component
2021-11-03 14:52:05 +00:00
Kevin Ansfield
ed4efdb0c0 Fixed linting
refs f4c50fb3a5

- removed errant console.log
2021-11-02 16:29:58 +00:00
Kevin Ansfield
f4c50fb3a5 First prototype for card settings panel
no issue

UI experiment (behind the `cardSettingsPanel` labs flag) for pulling card settings out into a separate side-panel. Prototyping against the email-cta card.

- shows panel immediately when selected unless selected by keyboard in which case it will wait for mouse input
- panel position is fixed so it's always on screen
- initial position tries to be as close to centered right of the card as possible
  - ensures all of the panel is on-screen, will overlap the card if there's no enough horizontal width
- re-positions after window resize
- card no longer has a separate edit mode, the text replacement field is directly editable
2021-11-02 16:25:54 +00:00
Rishabh
1b25dfbd67 Updated offers list in email cta to include only active
closes https://github.com/TryGhost/Team/issues/1134

- filters offer urls available on email cta card to only include active offers
2021-10-18 14:48:01 +05:30
Rishabh
aefc762a20 Added offer urls to email cta card
refs https://github.com/TryGhost/Team/issues/1134

- allows site owners to easily include offer URLs in their email CTA
- will be updated to include active offers only
2021-10-12 17:03:45 +05:30
Kevin Ansfield
8b5c18d6e5 Hid email specific cards from card menus when editing pages
no issue

Pages can not be sent by email so by hiding email-specific cards when editing pages we can reduce confusion and clutter.

- added a `@postType` argument to editor components that can be passed through to sub components
- set `@postType` to `post.displayName` which is either `post` or `page`
- updated `{{card-is-available}}` helper to compare a `postType` property on card menu items to the passed in `postType`
2021-09-10 09:24:38 +01:00
Kevin Ansfield
c97e06751e Added additional logging for Sentry issue.id:2451728694
no issue

- Sentry was showing `card` being undefined at times when attempting to select/edit a card after it's inserted in `replaceWithCardSection()` (called by card menus and text expansions) but it's not been reproducible in local environments
- it's unclear if the problem occurs due to the card render not happening in the immediate render queue or if it's some other problem
- added a retry if the card is not found after the first render plus logs to Sentry and console when the unexpected state occurs for better insight
2021-09-09 12:58:38 +01:00
Kevin Ansfield
f9d97bdc35 Added group heading to existing snippets in dropdown
no issue

- wrapped dropdown options in an options group so the heading can provide more context
- fixed styling so there isn't double padding around grouped options
2021-09-08 09:54:06 +01:00
Kevin Ansfield
a5fc45d169 🐛 Fixed crash when newly created images are dragged into a gallery
closes https://github.com/TryGhost/Team/issues/1020

- image card payloads should have a valid `src` attribute, use that instead of relying on the associated `img` element which won't be found/have an unexpected `src` when it's newly created because the image card will still be using the blob url generated for a preview whilst uploading
2021-09-06 14:30:13 +01:00
Kevin Ansfield
9993f02ffa 🎨 Added ability to drop an image card onto an empty gallery
closes https://github.com/TryGhost/Team/issues/1013

Image cards could be dropped into a gallery when at least one image was already present but there was no handling for image cards being dropped onto an empty gallery.

- added `data-gallery` attribute to the placeholder element so it gets picked up by the drag-and-drop container registration
- added drag enter/leave event handlers so we can show the same dropzone indicator as when a standard file is being dropped onto an empty gallery
- updated the drop handling to handle insertion when no images already exist by forcing insertion at index `0`
- updated the register or refresh handler to switch between different drag-and-drop container elements as needed and switched to `scheduleOnce` to prevent duplicate containers being created if the function is called twice before render occurs
2021-09-06 11:57:42 +01:00
Kevin Ansfield
e9a8361687 Fixed errors when pasting non-markup into basic html fields
no issue

- the editor range was getting out of sync between pasting and the subsequent `didUpdatePost` callback which cleans up content to conform to our "basic html" expectations resulting in errors in the console and potentially lost content if the paste occurred with the cursor inside existing text
- updated `handlePaste` to perform the same parse as the default paste handler but then cleanup the post before inserting so there's no mismatch of content across the editor callbacks
2021-09-03 10:51:45 +01:00
Peter Zimon
0b7d1b1946 Fixed gallery delete icon color bug 2021-09-03 11:45:29 +02:00
Kevin Ansfield
5eb817373f 🐛 Fixed captions becoming uneditable when they have a trailing space
closes https://github.com/TryGhost/Team/issues/1023
closes https://github.com/TryGhost/Ghost/issues/11424

- we were comparing the caption editor's contenteditable inner html vs the passed in html in order to reset the editor if the bound value changed upstream, this was causing problems because the editor and external html cleaning were treating trailing whitespace slightly differently which resulted in the editor being reset every time it gained focus when a trailing space was present
- removed reliance on inspecting the editor's inner html and instead switched to comparing a changed `html` value to that which was passed in during initialisation or was last passed upstream from the editor so there's no chance of unexpected deviance
2021-09-03 09:00:14 +01:00
Kevin Ansfield
922c304e3b Added "Email call to action" card for an email-only CTA targeting free or paid members (#2080)
refs https://github.com/TryGhost/Team/issues/993

The new editor card allows you to add styled content along with an optional button that will only be visible to free or paid members when the post is emailed. Useful for encouraging free members to sign up to a paid account for example.

- removed labs flag and conditionals to make the feature is available by default
- cleaned up CSS that re-used the `.email-card` class or was referencing `labs`
2021-09-02 13:11:15 +01:00