refs https://github.com/TryGhost/Team/issues/1290
- renamed `@updateExcludedEvents` to `@onChange` and updated associated action name so we have consistent naming for our select-like components
- added `<MembersActivity::MemberFilter>` component
- utilises `<PowerSelect>` with a custom trigger component and and a debounced search via the member's API
- does not use `<PowerSelect>`'s default "selected" behaviour in favor of replacing the select with a button to provide a clearer "reset filter" UX that's easier to build/style outside of the power-select components
- added `.ember-power-select-trigger-reset` class to reset margins, paddings, borders, and heights so that it's easier for a custom trigger's contents to control the display
Updated email newsletter settings
- Added toggle to disable email newsletters
- Hides email related UI when email is completely turned off
- Rearranged email newsletter settings
- Added publish-menu preview in
- Changed default-recipients setting
- Updated publish-menu to show Publish as default action
- Removed the confirmation modal during publishing when no emails are intended to be sent
- adjusted min and max widths of various elements in audio card in What's New only to stop it from visually breaking when at specific viewport widths
- quick fixes for z-index of certain elements across cards in What's New only so they didn't appear above the page header
no issue
- the branding modal was a hangover from before the design settings screen that hadn't been fully removed after the newer settings screen was released
- double scrollbars showing at certain widths
- strange resizing of search members text box
- borders showing through when scrolling
- tidying table horizontal scrolling when viewport is narrower
refs https://github.com/TryGhost/Team/issues/1164
- removed flag and labs screen toggle
- removed all conditionals
- removed all old/unused route/controller/component files
- renamed labs components and classes to non-labs naming
refs https://github.com/TryGhost/Team/issues/1253
Using text-align: left will shift our cursor to the left of the editor,
but this does not match up with the placeholder text, so we need to use
media queries and some CSS calculations for that.
Zimo did the CSS magics for this
refs https://github.com/TryGhost/Team/issues/1249
When images are used which do not fill the space of the card - e.g. when
using a fullwidth card the slider is positioned to the left and doesn't
look good.
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.
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
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
no issue
- when buttons and button-like links were mixed in a modal footer, the link did not inherit the expected button styles and if the link followed a button the two became smushed together because of missing left margins
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
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
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
- 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
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/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/1209
- adds new `KoenigHtmlTextarea` component for entering multi line html in cards
- updates accordion card to use html text area component
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
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
refs https://github.com/TryGhost/Team/issues/1149
- added fixed width of the main menu to the tablet-size media queries so it doesn't snap back to a smaller width after animating
refs https://github.com/TryGhost/Team/issues/1149
- added `ember-css-transitions` library that provides a modifier that adds/removes classes used for animating elements in and out, automatically creating a clone for destroyed elements
- added a wrapper class around the `main` and `design` nav menu contents so they could be individually animated
- used the new `{{css-transition}}` modifier to animate the sidebar menus in/out
- ensured main menu doesn't animate on first render of the parent `<GhNavMenu>` component so there's no animation when Admin is loaded
refs https://github.com/TryGhost/Team/issues/1149
- changed `current-when` for the design settings title to only be active on the index screen which corresponds to the setting groups being active/usable
- updated styles to use the `.active` class rather than just `:focus`
- added empty archive screen
- added indication of archive offer on detail page
- set default dropdown style to non-selected
- removed archive button for new offers
refs https://github.com/TryGhost/Team/issues/1136
- adds dropdown for active/archived offers selection
- wires active/archived offers on list screen to API
- filters offers list on archived/active based on selection
no issue
- icons seemed to disappear when sections above are opened, or they lost attachment when scrolling
- added `position: relative` to the nav item container so the `position: absolute` children are correctly contained
refs https://github.com/TryGhost/Team/issues/1084
- updates shareable offer link UI to to open directly instead of route
- calculates offer url from code and updates in link modal
- wires copy button on link modal
- removes route based link code for modal
no issue
- CSS that was used to fix positioning of the dropdown menus on the labs theme list was too liberal. Fixed by adding a specific class for the theme list dropdowns
refs https://github.com/TryGhost/Team/issues/1111
Extracted functionality for listing, downloading, activating, and deleting from the theme controller/template into separate components and services so that they are more composable/reusable in different situations.
- moved theme activation to a new `theme-management` service that uses the `modals` service to open the theme warnings modal or limits upgrade modal as required
- the activate process is a task so that consumers can store a reference to the task instance and cancel it to close any related warning/limit modals (eg, when navigating away from the route or closing the modal that kicked off the process)
- created new-pattern modals for custom theme limit upgrade, theme errors, and delete confirmation so that we can treat them as promises and close where needed from parent
- duplicated theme table component as `<GhThemeTableLabs>` with an actions redesign and a refactor to handle download, activation, and deletion itself making use of the new theme-management service and modals
- fixed some oddities with design modal's transition/modal close handling by simplifying the async behaviour and being more explicit
- added advanced design modal that contains the new theme table component and linked to it from footer of design modal's sidebar
refs https://github.com/TryGhost/Team/issues/1111
refs https://github.com/TryGhost/Team/issues/1103
- moved customize modal from a link on the design screen to the main design screen
- changed modal design to be a full-screen overlay with side bar that emulates standard Admin design
- added toggled groups of settings in sidebar
- added `{{set-has}}` helper for use in conditionals matching when a Set contains an object
- added grouping of theme settings
- dropped unfinished advanced/change theme modals
refs https://github.com/TryGhost/Team/issues/559
- moved the modal component class, template, and sub-components into a `components/modals/` directory to keep the top-level dir cleaner
- migrated component class to full glimmer syntax
refs https://github.com/TryGhost/Team/issues/559
We want to get rid of our existing modals implementation because it doesn't play well with Glimmer compoments and the animation library it uses is now unmaintained and blocking our Ember.js upgrades.
- installed addon using customised fork
- fork allows passthrough of `allowOutsideClick` to `focus-trap` so we can allow clicks on dropdowns and other wormholed content inside of a modal
- extended the `modals` service locally so we can customise click-outside-to-close behaviour and tie in with our `dropdowns` service
- set up styles in `modals-new.css`, mostly copied from `modals.css` with a few specific overrides
- once all modals are converted we can drop the old `modals.css` and rename `modals-new.css`
closes https://github.com/TryGhost/Team/issues/977
A new label input dropdown was added behind filtering labs flag along with new filtering UI on members list screen, which includes member editing directly via the dropdown. This adds the same editing function to the members detail screen too behind the flag
Updated empty state of members detail screen.
- Added appropriate messaging to Analytics, Events and Subscriptions blocks about what's supposed to be in them once there's sufficient data.
- Updated tooltip for average open rate when there isn't significant data yet.
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
closes https://github.com/TryGhost/Team/issues/971
reverts abe5c6d681
We use vertical-collection to allow infinite loading + scrolling for members list instead of loading and rendering all members at once. The behavior was not working correctly with updated list for filtering feature, as we dynamically update columns. This change fixes the scroll behavior and members loading together by updating the containerSelector for vertical collection.
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`
- Updated Portal preview in Membership settings and Portal settings so that the preview is scrollable in all browsers.
Note: Only when Tiers is turned on.
refs https://github.com/TryGhost/Team/issues/993
- added calls to `onFocus()` and `onBlur()` arguments inside the trigger when the input is focused/blurred so that the active class is correctly applied by ember-power-select
- removed unnecessary mousedown propagation cancellation, it was a copied from `<GhTokenInput>` where extra mouse handling is necessary for buttons inside tokens
- updated `.gh-input-with-select` styles to add the border when active
refs https://github.com/TryGhost/Team/issues/954
- The email icon is signalling there was a newsletter sent with the post and allows to identify the "email only" posts easier
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
refs https://github.com/TryGhost/Team/issues/992
- swapped input element for `<GhInputWithSelect>`
- added `config.getSiteUrl()` method for generating front-end URLs including subdomain
- added example suggested URLs to email-cta card to pass as options to button url input
refs https://github.com/TryGhost/Team/issues/987
- `<GhInputWithSelect>` acts as a typical text input element but will also show options that are filtered whilst typing. Useful for inputs where there should be suggestions or the ability to choose an existing option
- updated `<GhSearchInput>` to use the renamed and slightly modified trigger
refs https://github.com/TryGhost/Team/issues/971
We use vertical-collection to allow infinite loading + scrolling for members list instead of loading and rendering all members at once. Since the members list behind filtering flag had a child container with fixed height, the list was not automatically loaded on scroll.
refs https://github.com/TryGhost/Team/issues/966
With introduction of members filtering, the current way of editing member labels needed an upgrade. This change updates the member label input component to include editing option which allows triggering label edit modal directly from the filtering menu when working with labels. The long term idea is to make this a consistent global pattern with labels dropdown, extending to member details screen as well.
refs https://github.com/TryGhost/Team/issues/943
The filter UI behind labs in Admin allows filtering members list across several filters. Since each filter type can have its own specific set of values to choose from, this change adds custom UI based on filter type to select filter value.
Refs https://github.com/TryGhost/Team/issues/928
- Added icons for top and bottom border
- Updated spacing for hr element when not in edit mode
- Got rid of hr element when in edit mode
- Got rid of left border for email, html and markdown cards and feature image
refs https://github.com/TryGhost/Team/issues/928
- added btn group for selecting left/center alignment of CTA button
- updated rendered view to center the button when center alignment is selected
refs https://github.com/TryGhost/Team/issues/927
- added CTA `button and url inputs to email-cta card
- added `textColorForBackgroundColor` color util and used it to add a white/black text color variable that can be used when the accent color is used as a background color
- added `{{hex-adjust}}` helper for modifying lightness and saturation of a hex color
- adjusted inline power-select dropdown styling
refs https://github.com/TryGhost/Team/issues/926
- updated `<KoenigEditor>` so it creates default card payloads as TrackedObject instances so that getters in glimmer component based cards can track changes to payload properties
- added dropdown free/paid selector to email-cta card that sets the `segment` payload property to the respective filter
- updated design to show the footer outside of edit mode too so that the selected segment is always visible
refs https://github.com/TryGhost/Team/issues/884
- add `[data-user-is-dragging]` to `body` element when any drag is occurring so that we can make drop zones active
- added dropzone and drop handling to feature image component
- added max height to theme uploader modal container to avoid long list of errors leaning out of screen
- added shadow on top of footer to indicate long list of errors
