Commit Graph

152 Commits

Author SHA1 Message Date
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
Sanne de Vries
2fe1ee2729 Fixed audio card responsive and dark mode issues
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 09:09:27 +01:00
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
ead37ff8c7 Refined audio card player slider design
refs https://github.com/TryGhost/Team/issues/1230

- updates seek position on audio player to 0 to match the current duration
2021-12-10 01:26:18 +05:30
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
djordje vlaisavljevic
c605d92843 Updated editor styles for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-09 13:40:52 +01:00
Rishabh
69b06c49d2 Fixed title editing not working on audio card
refs https://github.com/TryGhost/Team/issues/1230
2021-12-09 00:38:19 +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
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
djordje vlaisavljevic
773d43697c Updated editor styles for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 14:05:57 +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
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
djordje vlaisavljevic
6ffa22a6aa Updated editor style for product card
refs https://github.com/TryGhost/Team/issues/1233
2021-12-07 17:36:01 +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
djordje vlaisavljevic
9fd8ba431c Updated editor product card styles
refs https://github.com/TryGhost/Team/issues/1245
2021-12-07 13:14:37 +01:00
James Morris
65dc4b1d5d Adjusted alternative quote spacing in editor
refs https://github.com/TryGhost/Team/issues/1239
2021-12-07 11:34:07 +00: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
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
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
James Morris
6eff87bf9c Editor changes for multiple quotes 2021-12-02 12:53:07 +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
Peter Zimon
0a700cd10a Gif browser UI refinements 2021-11-30 17:07:07 -04: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
djordje vlaisavljevic
92165f56d2 Added initial Product card editor styles refs https://github.com/TryGhost/Team/issues/1233 2021-11-29 19:22:53 +01:00
Peter Zimon
7dcb11e741 GIF browser refinements 2021-11-25 13:22:27 +01:00
Kevin Ansfield
67a10184dc Added scroll-into-view when opening media selector
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
2021-11-23 16:35:44 +00:00
Peter Zimon
591d5442e5 GIF browser refinements 2021-11-23 16:03:53 +01:00
Kevin Ansfield
516ad8297a Added media selector pattern to editor and used it for gifs
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
2021-11-23 09:20:30 +00:00
Sanne de Vries
4e767c90f8 Fixed links not displaying in accent-color callout cards
Refs https://github.com/TryGhost/Team/issues/1206
2021-11-22 10:43:58 +01:00
djordje vlaisavljevic
9227b8b3c9 Updated accordion editor styles 2021-11-19 18:35:27 +01:00
djordje vlaisavljevic
f4cc458551 Updated accordion editor styles 2021-11-19 18:35:27 +01:00
Kevin Ansfield
2f110c2e8e Fixed caption inputs inheriting callout card placeholder style 2021-11-19 09:58:47 +00:00
djordje vlaisavljevic
d83d6124ba Updated accordion editor view 2021-11-18 21:51:56 +01:00
Kevin Ansfield
3fcbd75efb Fixed callout card text input placeholder
no issue

- updated placeholder styles so they work with the basic input as well as the textarea input inside the editor
2021-11-18 19:54:30 +00:00
Peter Zimon
5c5fd1cff4 Added NFT icon to card menu 2021-11-18 17:38:28 +01:00
Peter Zimon
07b1ac62dd NFT card refinements 2021-11-18 17:29:16 +01:00
Peter Zimon
f69930f0af Added Opensea logo to NFT cards 2021-11-18 17:29:16 +01:00
djordje vlaisavljevic
43d1981d73 Updated Accordion card styles in editor 2021-11-18 09:58:32 +01:00
Sanne de Vries
74f808f934 Update emoji picker in callout card 2021-11-18 09:23:33 +01:00
Peter Zimon
67ec0318a2 NFT card refinements 2021-11-17 14:05:55 +01:00
djordje vlaisavljevic
afe40c8792 Update Accordion editor styles 2021-11-17 12:14:10 +01:00
Sanne de Vries
a87cfe0ebc Fixed emoji hover state in callout
Refs https://github.com/TryGhost/Team/issues/1206
2021-11-16 19:57:05 +01:00
Sanne de Vries
8f6b1aa61a Updated callout card
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
2021-11-16 18:32:27 +01:00
Sanne de Vries
3ec39ae255 Styled emoji picker in callout card 2021-11-16 13:34:44 +01: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
Rishabh
a5c0116e0b Updated design for toggle card in edit mode
refs https://github.com/TryGhost/Team/issues/1209
2021-11-15 16:50:53 +05:30
Sanne de Vries
c621fe0843 Updated padding for callout cards 2021-11-15 11:17:21 +01:00
Peter Zimon
f112bd06c9 NFT card style refinements 2021-11-12 15:55:35 +01:00
Peter Zimon
690d34eebb Updated NFT card styles 2021-11-12 14:02:15 +01:00
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
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
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
Sanne de Vries
93d16dfe56 Fixed action toolbar not working in callout-card 2021-11-09 15:29:13 +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
87a91ae10a Fixed email CTA card bottom spacing 2021-11-04 08:47:22 +01: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
Peter Zimon
937a6a7e4e Settings panel style refinements 2021-11-03 14:32:41 +01:00
Peter Zimon
52d71be3d8 Updated styles for settings panel 2021-11-03 14:25:44 +01: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
Sanne de Vries
0013ff0980 Fixed editor header display on mobile 2021-09-20 17:36:43 +02:00
Peter Zimon
0b7d1b1946 Fixed gallery delete icon color bug 2021-09-03 11:45:29 +02:00
Kevin Ansfield
ba5b5f7935 Fixed email-only card help text overlapping card border
no issue

- negative margin was pulling the card border up too far and causing it to run behind the grey help block
2021-09-01 17:56:29 +01:00
Sanne de Vries
6198019de1 Updated snippet replacement dropdown 2021-08-24 12:28:07 +02:00
Kevin Ansfield
8d136068f3 Moved koenig CSS out of spirit CSS (#2068)
no issue

- Koenig is making use of other Admin-provided components which meant that editor-specific styles for those components were increasingly needing to make use of `!important` to override those component styles (specific example is using power-select based components) due to the order that CSS was loaded
- Koenig styles don't really fit with the other generic utility classes inside spirit so it makes sense to elevate them to the same level as other component styles within Admin's CSS
2021-08-23 09:29:44 +01:00
Zimo
4c05d618bd Koenig - Replace custom CSS classes with Spirit
no issue
- Koenig container styles for Spirit
- Applying Spirit styles to card menu
- Applying Spirit styles to generic cards
- Replacing icon styles with Spirit
- Fix slash menu selected state
- Cleanup of unused files + fix empty HTML
2018-05-02 15:54:22 +01:00
Kevin Ansfield
a0169adbbc Koenig - Fix spaces in markdown card editor
refs https://github.com/TryGhost/Ghost/issues/9505
- without `white-space: pre-wrap` any trailing spaces will be ignored by the browser which messes with CodeMirror's cursor positioning
2018-04-25 14:57:57 +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
761e841875 Koenig - Enable line-wrapping for HTML card's CodeMirror instance
refs https://github.com/TryGhost/Ghost/issues/9505
- pass `lineWrapping` option through to CodeMirror in `{{gh-cm-editor}}`
- add cascade overrides for the `pre` line-wrapping styles needed by CodeMirror
2018-04-25 12:06:01 +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
b21e46aa39 Koenig - Keep MD card formatting toolbar visible when possible
refs https://github.com/TryGhost/Ghost/issues/9505
- use `{{gh-scroll-trigger}}` components at top and bottom of the markdown card when in edit mode so that styles can be applied to the `.editor-toolbar` element to keep the toolbar fixed at the bottom of the screen whilst scrolling
2018-04-24 13:10:20 +01:00
Peter Zimon
af03f8f516 Koenig - Improve styles (#1008)
refs https://github.com/TryGhost/Ghost/issues/9505
- Tweaking UI of link input
- Tweaking toolbar menu
- Tweaking image toolbar style
- Applying image width styles
- Tweaking list typography
- Fixing empty post placeholder
2018-04-24 10:15:54 +01:00
Kevin Ansfield
21007d0630 Koenig - Use our full markdown editor in markdown card
no issue
- remove jQuery usage in `{{gh-markdown-editor}}` (general cleanup)
- switch `koenig-card-markdown` to use `{{gh-markdown-editor}}`
- update markdown editor styles to fit within the card interface
- add `{{gh-editor}}` for handling image uploads and drag/drop
2018-04-20 15:43:44 +01:00
Peter Zimon
555758a372 Koenig - Basic styles for editor content (#1006)
refs https://github.com/TryGhost/Ghost/issues/9505
- paragraph and heading styles and vert rhythm
- blockquote and link styles
- list styles
- card styles
- markdown card styles
2018-04-20 15:43:20 +01:00
Kevin Ansfield
38048e0cc3 Koenig - First pass at image width styles
refs https://github.com/TryGhost/Ghost/issues/9505
- add image style buttons to the image card context menu
- still requires Spirit styles for image classes to work correctly
2018-04-10 18:39:30 +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
508cd31265 Koenig - Update toolbar to use Spirit classes
refs https://github.com/TryGhost/Ghost/issues/9505
- switch `{{koenig-toolbar}}` to use Spirit classes and icons
- wrap the toolbar `<ul>` in an absolutely positioned `<div>` rather than positioning the toolbar directly to improve animation behaviour
- remove old/unused Koenig SVG icons
2018-04-03 16:52:00 +01:00
Kevin Ansfield
6bff262849 Switch to packaged version of Spirit (#985)
no issue
- remove the manually copied Spirit CSS files
- remove the manually copied Spirit helpers
- install `ember-cli-ghost-spirit` addon
- remove manual postcss configuration
- update all `color()` functions in CSS to `color-mod()`
- fixed invalid `color-mod()` usage in `power-calendar.css`
- bump sub-dependencies
2018-04-03 11:52:18 +01:00
Kevin Ansfield
3ef3ebfd6b Koenig - Move list creation from card menus to toolbar
refs https://github.com/TryGhost/Ghost/issues/9505
- remove unordered and bullet list icons from the (+) and / menus
- add unordered and bullet list icons to the formatting toolbar
- reorder toolbar icons to match latest design specs
- remove now-unused `replaceWithListItem` actions
2018-03-15 14:35:39 +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
56490b7a5f Koenig - Add click overlay to embed card
refs https://github.com/TryGhost/Ghost/issues/9311
- adds an overlay element to the embed card so that clicks do not interact with any embedded iframes so that you can lazy click to enter edit mode
2018-02-15 17:14:30 +00:00
Kevin Ansfield
3f1e5b9fa9 Koenig - Update {{koenig-card-html}} to use new {{koenig-card}} container
refs https://github.com/TryGhost/Ghost/issues/9311
- wraps embed card in same container as the markdown card to handle mouse selection/edit toggles etc
- add render mode to embed card
- autofocus CodeMirror editor when switching to edit mode
- fix incorrect pointer on cards
2018-02-15 15:57:44 +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
Kevin Ansfield
6d4d6cbc51 Koenig - HTML card template
refs https://github.com/TryGhost/Ghost/issues/9311
- add a basic HTML card that renders a CodeMirror editor
- adjust styles so that CodeMirror styles for the markdown editor don't affect CodeMirror instances inside Koenig
2018-02-03 19:20:50 +01:00
Kevin Ansfield
5d4053dec2 Koenig - Slash menu
refs https://github.com/TryGhost/Ghost/issues/9311
- adds `{{koenig-slash-menu}}` component that renders a quick-access card/block menu when typing `/` at the beginning of a new paragraph
2018-02-03 17:54:57 +01:00
Kevin Ansfield
b2e8f2b631 Koenig - Fix whitespace above/below cards 2018-02-03 17:54:57 +01:00
Kevin Ansfield
2ddedb6005 Koenig - (+) card/list selection menu
refs https://github.com/TryGhost/Ghost/issues/9311
- re-implement the (+) card/list selection menu from the old Koenig alpha with improved positioning and event handling
- buttons work for the currently available cards - `<hr>` and `markdown`
2018-01-31 15:49:20 +01:00
Kevin Ansfield
521b9dbb99 Koenig - Textarea-only markdown card
refs https://github.com/TryGhost/Ghost/issues/9311
- add `{{koenig-card-markdown}}` component that renders an auto expanding textarea with the markdown card value
- add `{{card-markdown}}` that is an alias of `{{koenig-card-markdown}}` for backwards compatibility - all of our pre-1.0 alpha cards and our current markdown implementation do not have the `koenig-` prefix in their card names
2018-01-31 08:32:27 +00:00