Commit Graph

734 Commits

Author SHA1 Message Date
Kevin Ansfield
8e9748131c Cleaned up fileCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals as feature is GA
2022-01-04 14:57:01 +00:00
Kevin Ansfield
6c18628b8b Cleaned up audioCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 13:08:50 +00:00
Kevin Ansfield
b8b40fafef Cleaned up productCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 13:04:26 +00:00
Kevin Ansfield
aeb0cb60e8 Cleaned up accordionCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 13:03:08 +00:00
Kevin Ansfield
a9a82107ed Cleaned up videoCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 12:57:42 +00:00
Kevin Ansfield
7a270de050 Cleaned up calloutCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 12:56:25 +00:00
Kevin Ansfield
0fcf89b1fa Cleaned up nftCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 12:55:04 +00:00
Kevin Ansfield
99e2db76dc 🐛 Fixed Spotify and Soundcloud embeds having overly long containers in editor
closes https://github.com/TryGhost/Team/issues/871

- when determining the size of the iframe containing a nested iframe in the embed card we were incorrectly treating a `100%` width attribute as a `100px` attribute and ending up with a completely incorrect ratio calculation
- added a conditional to ignore %-width attributes when calculating a ratio for a nested iframe
- if we have a nested iframe with a %-width but a fixed height, use that fixed height for the outer container iframe
2022-01-04 10:00:21 +00:00
Thibaut Patel
5056401c13 Renamed the header styles
refs https://github.com/TryGhost/Team/issues/1253

- The naming is easier to understand for theme developers
2021-12-16 18:22:08 +01:00
Peter Zimon
b6da19df65 Updated header card placeholders 2021-12-16 16:11:50 +01:00
James Morris
dcb5d2ad0a Fixed a merge with the header card settings
refs https://github.com/TryGhost/Team/issues/1253
2021-12-16 14:39:50 +00:00
Thibaut Patel
05af5cdcd4 Removed width and alignment configuration from the header card
refs https://github.com/TryGhost/Team/issues/1253

- We're simplifying the header card from a design point of view to ease integration with themes
2021-12-16 15:10:57 +01:00
Peter Zimon
c4c728d7a1 Refined header image styles 2021-12-16 12:59:03 +01:00
Peter Zimon
c4b4a6b2a4 Put back header style options 2021-12-16 12:26:15 +01:00
Peter Zimon
9afb0c7a94 Updated style picker for header 2021-12-16 12:25:01 +01:00
Thibaut Patel
1e16b92f52 Updated the header card file selector
refs https://github.com/TryGhost/Team/issues/1253

- Selecting the `image` style opens the file selector right away
- Avoids an extra click to the user
- Moved `GhFileInput` so that it's always rendered, which enables triggering it right when selecting the `image` style
2021-12-16 11:09:14 +01:00
Peter Zimon
d33ef9944e Added 'upload' term to file card menu access 2021-12-16 10:08:44 +01:00
Sanne de Vries
21a1b3a1aa 🐛 Fixed audio file duration missing digit in editor
Closes https://github.com/TryGhost/Ghost/issues/13894
2021-12-16 09:17:45 +01:00
Naz
575623f5be Added support for additional wav MIME types
refs f882ebc58e
refs https://github.com/TryGhost/Toolbox/issues/95

- The `audio/x-wav`, `audio/wav`, and `audio/wave` are also commonly used MIME types for the .wav files.
2021-12-16 11:11:43 +04:00
James Morris
47e77ddcdc Little tweaks for header settings panel and added add icon
refs https://github.com/TryGhost/Team/issues/1253
2021-12-15 19:09:17 +00:00
djordje vlaisavljevic
ffc22f520a Updated before/after card editor template
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 20:06:00 +01:00
djordje vlaisavljevic
2a19d3bb74 Updated before/after card editor template
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 20:03:03 +01:00
Fabien egg O'Carroll
ee410a08c1 Updated slider for before/after to match frontend
refs https://github.com/TryGhost/Team/issues/1249

Adds a new element to use as the slider handle to match how we're doing
it in the frontend
2021-12-15 20:27:39 +02:00
Thibaut Patel
6d8fc32d77 Updated the header card
refs https://github.com/TryGhost/Team/issues/1253

- added a default `cardWidth`
2021-12-15 18:28:41 +01:00
Thibaut Patel
1db6e175fd Updated the header card
refs https://github.com/TryGhost/Team/issues/1253

- removed the accent class in the edit mode
2021-12-15 18:26:47 +01:00
Thibaut Patel
1194a553e8 Updated the header card
refs https://github.com/TryGhost/Team/issues/1253

- added the card width back (only regular or full options)
- removed the accent class from the button
- fixed a bug happening when the subheader was empty
2021-12-15 18:25:05 +01:00
Peter Zimon
4f005f0ef5 Updated file card Koenig styles 2021-12-15 17:45:04 +01:00
djordje vlaisavljevic
49df6dde1b Added icon for before/after card
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 16:23:35 +01:00
djordje vlaisavljevic
ac33996c08 Updated editor styles for before/after card
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 11:10:05 +01:00
Fabien egg O'Carroll
cb24aa1914 Added replace image functionality
refs https://github.com/TryGhost/Team/issues/1249

This can resuse the image selection as after a successful upload the
image is replaced.
2021-12-15 12:06:46 +02:00
Thibaut Patel
e1bbc63bb3 Updated header card class names
refs https://github.com/TryGhost/Team/issues/1253
2021-12-15 10:02:17 +01:00
Fabien egg O'Carroll
804da37926 Removed requirement for matchign aspect ratio
refs https://github.com/TryGhost/Team/issues/1249

Based on design feedback so that users are able to use the card with
less friciton.
2021-12-15 10:35:38 +02:00
djordje vlaisavljevic
1d19f74ba8 Updated editor styles for before/after card
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 09:32:09 +01:00
Sanne de Vries
b640a023f7 Refined video card in editor
Refs https://github.com/TryGhost/Team/issues/1229

- Fixed glitch on load
- Fixed error state
- Hid custom thumbnail when video is looped
2021-12-14 19:49:29 +01:00
Peter Zimon
526c92bad7 Refined file Koenig styles 2021-12-14 17:55:27 +01:00
Peter Zimon
09b221543f Updated file upload Koenig styles 2021-12-14 17:41:41 +01:00
Fabien egg O'Carroll
1a772b13c1 Removed option & logic for setting orientation
refs https://github.com/TryGhost/Team/issues/1249

Based on design feedback from Djordje & Zimo.
2021-12-14 18:39:28 +02:00
Thibaut Patel
3742502f2d Updated the header card based
refs https://github.com/TryGhost/Team/issues/1253

- follows the latest design
2021-12-14 16:00:59 +01:00
Fabien egg O'Carroll
7d7d856e77 Removed edit option from toolbar
https://github.com/TryGhost/Team/issues/1249

We have no floating settings now so we can remove the menu item and
display the toolbar always when the card is selected
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
1338ddd12b Removed usage of MutationObserver
refs https://github.com/TryGhost/Team/issues/1249

We now want to update the element which we are observing, which means we
end up in a loop. Instead we can listen to resize events and manually
update the dimensions when images are changed.
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
d3ee36e45d Moved image upload and slider settings into card
refs https://github.com/TryGhost/Team/issues/1249

Based on design wirefames
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
993fdf9a10 Moved layout and orientation settings to toolbar
refs https://github.com/TryGhost/Team/issues/1249

Based on the design wireframes we're not going to be using a floating
panel for settings, this moves the functionality into the toolbar
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
d18e6006f9 Removed unused wordCount
refs https://github.com/TryGhost/Team/issues/1249

This isn't used anywhere at the moment.
2021-12-14 16:40:46 +02:00
Rishabh
324e6e95d0 Added duration data in video card
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 16:42:56 +05:30
Thibaut Patel
06a83f81b7 Updated the header card width selector
refs https://github.com/TryGhost/Team/issues/1253

- Follows the same pattern as the video card
2021-12-14 12:02:05 +01:00
Sanne de Vries
69aa98f9ca Updated video card and media player classes
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 11:49:33 +01:00
Sanne de Vries
a011ee2d97 Updated video card settings panel
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 09:37:45 +01:00
Thibaut Patel
f8caa3adce Added a first pass of the header card
refs https://github.com/TryGhost/Team/issues/1253
2021-12-13 19:31:23 +01:00
Sanne de Vries
6df5708c7f Refined audio and bookmark cards in editor
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 19:09:00 +01:00
Rishabh
c9c602f839 Fixed settings panel behavior for video card thumbnail replace
refs https://github.com/TryGhost/Team/issues/1229
2021-12-13 21:46:09 +05:30
Sanne de Vries
06cb582fc0 Refined audio cards in editor
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 16:18:32 +01:00
Fabien egg O'Carroll
12582c6cf4 Added initial Before/After card UI
refs https://github.com/TryGhost/Team/issues/1249

This adds a WIP for the Before/After card UI - behind an alpha flag.
It's completely missing design input and is intented to serve as a base
to work from.
2021-12-13 15:57:29 +02:00
Sanne de Vries
f788cd6dfa Removed unnecessary hidden audio player buttons
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 14:09:39 +01:00
Sanne de Vries
828786212c Fixed audio card error state
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 12:36:38 +01:00
Thibaut Patel
a879beb09d Hid the product card button fields when button is disabled
refs https://github.com/TryGhost/Team/issues/1245
2021-12-13 11:48:21 +01:00
Sanne de Vries
26265b6a11 Updated video card in editor
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-13 11:43:11 +01:00
Rishabh
48e64a47be Updated thumbnail replace for audio card with thumbnail delete option
refs https://github.com/TryGhost/Team/issues/1230

- allowing users to delete the thumbnail and upload another is a better flow as it allows removing a thumbnail as well if not needed
2021-12-13 16:10:29 +05:30
Rishabh
c3cb7dde47 Updated card edit flow for audio and file cards
refs https://github.com/TryGhost/Team/issues/1230

- Updated the audio and file card to follow - 1st click → select, 2nd click → edit pattern, which is consistent with other cards
2021-12-13 15:58:25 +05:30
Kevin Ansfield
59def266de Fixed video card aspect ration change when uploading custom thumbnail
refs https://github.com/TryGhost/Team/issues/1229

- changed the video card image so it uses an aspect-ratio box set to the aspect ratio of the video, with the image using `object-fit: cover` to match the background image behavior in the front-end
2021-12-10 19:48:28 +00:00
Peter Zimon
6800a3fdb4 Updated file card styles in Koenig (#2175)
Added styles for file card in editor
2021-12-10 19:17:11 +01:00
Rishabh
0fb7a04bae Refined file upload card
refs https://github.com/TryGhost/Team/issues/1231

- updated upload endpoint for files
- cleanup
2021-12-10 18:01:25 +05:30
Rishabh
ee639625ad Cleaned up audio card file
refs https://github.com/TryGhost/Team/issues/1230
2021-12-10 17:25:55 +05:30
djordje vlaisavljevic
7b9c0319a6 Updated settings panel placeholders for product card
https://github.com/TryGhost/Team/issues/1245
2021-12-10 11:26:53 +01:00
Rishabh
dd8e770692 Updated audio card allowed extensions and payload
refs https://github.com/TryGhost/Team/issues/1230

- cleans up allowed payload attributes for audio card
2021-12-10 01:22:05 +05:30
Kevin Ansfield
c7925e6915 Fixed video card with adjustment not changing editor size
refs 00d9d200f7

- `concat` helper had been accidentally removed so width classes weren't being output correctly
2021-12-09 16:49:38 +00:00
Kevin Ansfield
e04422221f Switched to images API for video thumbnails with custom thumbnail override behaviour
refs https://github.com/TryGhost/Team/issues/1229

- using the images API lets us separate the auto-generated thumbnail and custom thumbnail
- added `customThumbnailSrc` to video card payload and switched settings panel uploader to store upload result there
- switched image display to fallback from custom thumbnail to auto-generated thumbnail
2021-12-09 16:38:05 +00:00
Sanne de Vries
00d9d200f7 Added static player UI to video card
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-09 16:22:58 +00:00
Rishabh
49aab60795 Added first version for new file card
refs https://github.com/TryGhost/Team/issues/1231
2021-12-09 20:30:28 +05:30
Rishabh
997862cf58 Allowed creating audio card directly on file drop in editor
refs https://github.com/TryGhost/Team/issues/1230
2021-12-09 20:30:28 +05:30
Kevin Ansfield
192c983975 First pass at custom thumbnail upload for video card
refs https://github.com/TryGhost/Team/issues/1229

- adds uploader to setting panel
- currently replaces the single/auto-generated thumbnail image
2021-12-09 14:58:28 +00:00
Thibaut Patel
7e48fcd06d Fixed a visual bug in the cards using KoenigBasicHtmlInput
refs https://github.com/TryGhost/Team/issues/1245

- When pressing backspace on an empty `KoenigBasicHtmlInput` that don't use `p` as the default tag, an empty paragraph was created by e21bde39e1/lib/koenig-editor/addon/options/key-commands.js (L171-L176), messing with the style while in edit mode.
- This was fixed by normalizing the tag to be the `defaultTag` in the `didUpdatePost` hook
- Because of this new normalization, we could remove the same normalization from `handlePaste`
2021-12-09 14:08:17 +01:00
Rishabh
f37c0f91d4 Added metadata extraction for audio file in card
refs https://github.com/TryGhost/Team/issues/1230

- extracts audio duration and mimeType metadata for uploaded file
2021-12-09 13:12:45 +05:30
Rishabh
4df58bb022 Fixed thumbnail replace not working on drop for audio cards
refs https://github.com/TryGhost/Team/issues/1230
2021-12-09 00:08:43 +05:30
djordje vlaisavljevic
e9c2942de5 Updated editor styles and template for product card
refs https://github.com/TryGhost/Team/issues/1209
2021-12-08 19:33:55 +01:00
Sanne de Vries
049fe97e7e Updated video card
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-08 17:29:22 +00:00
Thibaut Patel
16d242f763 Added image drag and drop to the product card
refs https://github.com/TryGhost/Team/issues/1245

- followed the pattern from the video card as the image card uses an older ember syntax
2021-12-08 18:28:42 +01:00
Thibaut Patel
b1d0c33c09 Added hover-over on product card stars in edit mode
refs https://github.com/TryGhost/Team/issues/1245

- Used onmouseover because a CSS-only approach wouldn't work
- CSS can only highligh next siblings on hover, while we want to highlight previous sibling in our case
- This adds a hover class on mouseover to the right stars and removes it onmouseout
2021-12-08 17:18:45 +01:00
Sanne de Vries
ed3b5e462f Updated audio card
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-08 15:34:25 +00:00
Kevin Ansfield
9218c72b86 Added an additional blockquote style
refs https://github.com/TryGhost/Team/issues/1239

Repeatedly clicking the quote icon in the editor toolbar or using the <kbd>Ctrl+Q</kbd> keyboard shortcut will cycle through standard-blockquote -> alternative-blockquot -> standard paragraph.
2021-12-08 15:19:39 +00:00
Kevin Ansfield
e21bde39e1 Updated CTRL+Q blockquote keyboard shortcut to cycle through alt style
refs https://github.com/TryGhost/Team/issues/1239

- updates keyboard shortcut behavior to match the quote icon behavior where it cycles through blockquote->aside->p
2021-12-08 15:19:39 +00:00
Thibaut Patel
811ca6d08e Allow multiple paragraphs in the product card description
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 16:00:49 +01:00
Thibaut Patel
b157bf7c34 Added enter/tab support to the product card title field
refs https://github.com/TryGhost/Team/issues/1245

- Enables keyboard-only title+description input
2021-12-08 15:08:40 +01:00
Thibaut Patel
120deae9b1 Allowed line-breaks in product card description
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 14:42:00 +01:00
Thibaut Patel
b03f72c59e 🐛 Fixed pasting html into a KoenigBasicHtmlInput
refs https://github.com/TryGhost/Team/issues/1245

- Several inputs where dismissing the content when pasting HTML without the expected input tag
- The inputs where: the caption of the feature image; the email footer; the caption in the bookmark, code, embed, gallery, image, video cards; the callout card title; the product card header and description; the toggle header
- This makes sure the wrapper html tag is the expected one.

Co-authored-by:
- Kevin Ansfield (@kevinansfield)
2021-12-08 14:22:33 +01:00
djordje vlaisavljevic
50516e47d5 Updated editor template and styles for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 13:55:18 +01:00
Rishabh
e2db69d265 Updated file name handling for audio card
refs https://github.com/TryGhost/Team/issues/1230

- adds a method to prettify filename from the audio file
- cleanup
2021-12-08 17:17:47 +05:30
Thibaut Patel
52530c2949 Updated the product card button in the editor
refs https://github.com/TryGhost/Team/issues/1245

- Disabled the button link to avoid leaving the editor
- Added disabled states when the button is incomplete
2021-12-08 12:07:46 +01:00
Thibaut Patel
3f16cec396 Fixed the image deletion action in the product card
refs https://github.com/TryGhost/Team/issues/1245

- The property `previewSrc` wasn't tracked so it wasn't updated when set to null
2021-12-08 11:29:53 +01:00
Thibaut Patel
6c81e9a182 Added the image placeholder for the product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 11:10:24 +01:00
Thibaut Patel
9a94dbe000 Enable the product card button when editing it
refs https://github.com/TryGhost/Team/issues/1245

- When editing the button text or url, the button is enabled
2021-12-08 10:36:24 +01:00
djordje vlaisavljevic
3b019b3b05 Updated editor template and styles for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 22:34:15 +01:00
Rishabh
2b2edf48ef Refined audio card player UI in edit mode
refs https://github.com/TryGhost/Team/issues/1230

- updates player ui in audio card to use same html as theme
- removes setting panel for audio card
2021-12-08 00:44:58 +05:30
Kevin Ansfield
c29adfb441 🐛 Fixed pasted image files appearing twice in editor
closes https://github.com/TryGhost/Team/issues/1254

- when switching over to a more generic file paste handling the prevention of the default paste behaviour was missed meaning an additional image element was added to the contenteditable area which was not rendered on the front-end and disappeared when reloading the post
2021-12-07 18:08:00 +00:00
Kevin Ansfield
59ee50735a 🐛 Fixed initial paste of Twitter URL not triggering full script load
no issue

- pasted URLs that are converted into an embed card were triggering the `convertUrl` task twice, once on insertion and then again on the immediate deselection that happens whilst the caret is adjusted
- a change in browsers or in Twitter's script meant that the double-fetch and iframe population started to become unreliable with the script not triggering, or the iframe contents being replaced interfering with script timing, resulting in un-styled Twitter embeds immediately after pasting a URL
- added `.drop()` to the `convertUrl` task so the second deselection call is ignored whilst the first call is still in progress
2021-12-07 17:26:58 +00:00
djordje vlaisavljevic
40fad51d05 Updated editor template for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 17:38:15 +01:00
Thibaut Patel
8e14a23fea Fixed the star rating in the product card
refs https://github.com/TryGhost/Team/issues/1245

- It wasn't hidden in the editor preview when disabled
2021-12-07 16:17:13 +01:00
djordje vlaisavljevic
9abe330714 Updated editor styles for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 15:39:42 +01:00
Thibaut Patel
636907f8f1 Removed duplicated star rating in product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 14:24:21 +01:00
Rishabh
3889163c8e Fixed caching of audio thumbnail when replaced
refs https://github.com/TryGhost/Team/issues/1230

- when updating a thumbnail for audio card, the thumbnail url doesn't change as its tied to the audio src. this can cause the old thumbnail to show in frontend due to browser caching
- this change adds a cache busting param at the end of url for each thumbnail upload, thus bypassing cache and showing the right thumbnail
2021-12-07 18:15:35 +05:30
djordje vlaisavljevic
9fd8ba431c Updated editor product card styles
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 13:14:37 +01:00