refs: https://github.com/TryGhost/Team/issues/1531
- investigated how to make the layout not break on resize
- using a width 99% hack to make chartjs react properly
- redid the markup for the minicharts for more stable loading
- added in a subtle gradient for the mrr minichart
refs: https://github.com/TryGhost/Team/issues/1556
- working implementation of all the parts of the dashboard
- now includes the what's new section again
- has dynamic, yet basic, newsletters
refs: https://github.com/TryGhost/Team/issues/1548
- this moves from a secondary dropdown to it being the main title one
- includes a few style fixes including fixing resources box in dark mode
refs: https://github.com/TryGhost/Team/issues/1531
- css grid was good when the layout was more complex but it's less needed now
- tried out some subtle gradients for the resource box
- tidied and cleaned up some css that wasn't needed anymore
refs: https://github.com/TryGhost/Team/issues/1547
- moved to horizontal bar chart
- made the tooltips work differently for this
- added in a simple legend for the cadence chart
- style issues remain but wanted to get functionality in there first
* Subtle tweaks to the recent posts
refs: https://github.com/TryGhost/Team/issues/1531
* Combining Recent Posts and Members Activity together and other layout tweaks
refs: https://github.com/TryGhost/Team/issues/1531
- attempting to combine recent posts and members activity together
- various layout tweaks to make this work better
- tons of tiny style tweaks
refs https://github.com/TryGhost/Team/issues/1542
- adds `<EditorLabs::PublishManagement>` component that displays the relevant button for triggering publishing flows and will eventually store publish options for the editing session duration and manage the saving flow
- displays a "Publish" button that triggers the publish flow modal
- adds `editor-labs/publish-flow` full-screen modal containing a static mockup of the desired sentence-structure publish options design
refs: https://github.com/TryGhost/Team/issues/1531
- broke apart the combined chart
- added back in the paid mix chart
- separated out the mini charts into separate components
- made top chart work with total, paid and free
- added in an overview section back at the top for total, paid, free
- made metric labels and values larger and easier to parse
Co-authored-by: Simon Backx <simon@ghost.org>
no issue
When multiple newsletters existed, the actions dropdown menus were all rendered on top of each other but hidden with CSS. This resulted in clicks that you expected to open an actions menu immediately triggering actions on a newsletter higher up in the list.
- switched from `<GhDropdown>` to `<GhBasicDropdown>` which adds/removes the dropdown content elements rather than rendering everything and hiding with CSS
- updated styling to match previous implementation
- added `.anim-fade-in-scale` classes for use with `{{css-transition}}` so we can keep the open/close animation
- `ember-basic-dropdown` does have support for transitioning in/out CSS classes but they are only triggered on the first open/close for each menu which resulted in oddly inconsistent behaviour with multiple menus in a list
- close animation doesn't actually work because the outer elements are removed by `ember-basic-dropdown` preventing `css-transitions` from performing it's animation
refs: https://github.com/TryGhost/Team/issues/1462
- moved the delta graph into the revenue graph of the main combined graph
- made the secondary dropdown work again
- updated some chart titles
- tidied up the code and styles to make it work well
refs: https://github.com/TryGhost/Team/issues/1462
- added back in the main title to the top chart
- brought back the main metric background and centered buttons
- adjusted lots of spacing
- made the chart ticks for main graph dynamic
- improved the look of the breakdown graph
refs https://github.com/TryGhost/Team/issues/1302
* Tweaked the getIcon() function to better support the new event data variable for cancelled
* Added back in info for events across all activity lists
Co-authored-by: James Morris <moreofmorris@users.noreply.github.com>
closes https://github.com/TryGhost/Team/issues/1475
- updated new+edit newsletter routes to open a confirmation modal if the form modal is closed or the route is exited
- added z-index to modal background so the layering behaves as expected when modals are stacked
refs: https://github.com/TryGhost/Team/issues/1462
- added in dynamic dark mode grid lines for the charts
- added in some subtle other dark mode tweaks for borders
- limited the recent posts to 3 instead of 5
refs: https://github.com/TryGhost/Team/issues/1507
- changed the layout over to use css grids instead of the random flex and divs
- cleaned up the based dashboard-v5 file so its rendering much cleaner components
- refactored and took out a ton of old css that wasn't needed anymore
- moved the dashboard-v5 css into it's own css file to keep things cleaner
- includes a few stylistic changes along the way
closes https://github.com/TryGhost/Team/issues/1483
- updated newsletters list to use `<SortableObjects>` and `<DraggableObject>`
- swapped the `filteredNewsletters` reactive getter for a tracked property because `<SortableObjects>` replaces the value with a new array when re-ordering which isn't compatible with a getter
- required explicit update of the list any time the list should change through filter swap, archive, unarchive
- required explicit update of the list via router event when leaving the "new newsletter" route so any newly added newsletter can be displayed
- added action for handling update of `sort_order` properties when a re-order occurs
- updates every newsletter setting `sort_order` of the active newsletters first based on the new order, followed by all archived newsletters following their existing order
- disabled sorting of newsletters in the archived newsletters list
- hides the grab handle and disables the resize on hover
- allowing re-order of archived newsletters would complicate the re-order+save algorithm and re-ordering archived newsletters doesn't have a use-case
refs https://github.com/TryGhost/Team/issues/1487
- Fetches the staff picks from the RSS feed
- Shows the first 5 staff picks (amount is adjustable)
- Adds utm_source=ghost to external links
- Includes a temporary CSS class to keep it a bit orderly
refs https://github.com/TryGhost/Team/issues/1488
- Includes a new component that fetches the latest X newsletters.
- Displays these newsletters using design from old dashboard.
- Currently shows 10 newsletters, but we'll want to change that later.
- Temporary CSS class added.
* Trying out a tooltip alternative for combined graph in new dashboard
refs: https://github.com/TryGhost/Team/issues/1467
* Trying out a different type of interaction with the combined graph for the new dashboard that includes different style
refs: https://github.com/TryGhost/Team/issues/1467
* Working through the interface and code to majorly clean up for the new Dashboard
refs: https://github.com/TryGhost/Team/issues/1462
- lots of moving around css
- trying out some different layouts
- refactoring lots of code
- known bug: paid graphs don't work
- known bug: without newsletters, layout breaks
* Finishing up the basic styling of the new dashboard to be more presentable
refs: https://github.com/TryGhost/Team/issues/1462
- add an animation between the top metrics on combined graph
- ensure all graphs are responsive to parent container
- refactor many of the components and tidy up the styles
- tighten up spacing, headers, chart heights and more
- make the tooltip hovers a little more presentable
- balance the colors to be more muted, for the moment
- a million other tiny tweaks
closes https://github.com/TryGhost/Ghost/issues/14416
refs 1357390ac5
- after switching to a proper package version of our `ember-promise-modals` fork the addon's CSS was injected into the vendor file causing conflicts with our own modal styling
- added `align-items: unset` style override on `.epm-modal-container` so we're not fighting the addon's default `align-items: center;` style
closes https://github.com/TryGhost/Ghost/issues/14415
- after switching to a proper package version of our `ember-promise-modals` fork the addon's CSS was injected into the vendor file causing conflicts with our own modal styling
- added `transform: none` style override on `.epm-modal` so we're not fighting the addon's default `translate(0, -30vh) scale(1.1);` transform
* Basic work to combine the three line graphs for the new dashboard
refs: https://github.com/TryGhost/Team/issues/1467
- combined three line graphs into one main one at the top
- still working on this, so some code is a little rough
* Tidying up a few bits of consolidated graph in new dashboard
refs: https://github.com/TryGhost/Team/issues/1467
* Updated chart anchor component for removed member counts
no issue
* Updated chart paid members to not reload on days change
no refs
* Moved did-insert to top element in chart-anchor
* Fixed chart anchor to use filled member data
* Replaced chart anchor divs with buttons
* Tweaking up the paid graphs below anchor to improve visuals
refs: https://github.com/TryGhost/Team/issues/1467
* Fixed missing type attributes on buttons in chart anchor
* Updated MMR to MRR for the new consolidated graph
refs: https://github.com/TryGhost/Team/issues/1467
* Added real MRR to chart anchor
* Added open rate percentage data to chart email
Co-authored-by: Simon Backx <simon@ghost.org>
refs: https://github.com/TryGhost/Team/issues/1462
- remove dummy percentages where not necessary
- trying out a narrower width for the dashboard
- added in a basic layout for the various charts
- added more specific styles to each of the graphs
- tried out a different way of displaying metrics
- different way to show headers for each module
- made the grid and flex layouts a little more flexible
- there are some bits to still clean up with code
refs: https://github.com/TryGhost/Team/issues/1445
- threw in some static generic resources modules based off offers styling
- these will be dynamic but adding them to pad out prototype
Refs https://github.com/TryGhost/Team/issues/1441
- Rearranged the page: publish-menu preview is removed because the publish flow will change.
- Email addresses setting removed because it will be set on an individual newsletter level
refs https://github.com/TryGhost/Team/issues/1432
- Added very basic state selection at the bottom of dashboard 5.0
- Added a dashboard stats service, who is responsible for fetching and returning stats data
- Added POC for days dropdown with communication and reload between ember components
- Added proper automatic number and plural formatting for member counts
refs https://github.com/TryGhost/Team/issues/1141
Showing canceled subscriptions provide a more complete picture of the activity of a member.
- Given there is no `member.product` object when a subscription is canceled, use the `member.subscriptions.price.product` objects instead of `member.products`.
- applied boy-scout rule for linter errors and and code formatting
- removed `multipleTiers` flag conditionals as it's now GA
- set up subscriptions as a separate mirage resource so they are easier to work with
- updated `PUT /members/:id/` endpoint to match real API's complimentary subscription behaviour
- modified mirage member serializer to match API output
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
refs: https://github.com/TryGhost/Team/issues/1373
- Simplify the member details link on single member activity
- Adjust all the activity scrolling to work better at all sizes
- Make the header work properly with truncating at narrower viewports
- Remove unnecessary CSS and classes
- Remove the top line from the member detail box
- Move the member detail box so it stays when scrolling
- Make the empty state work with new member detail box position
- Better scrolling full width whilst not having full width like members
- Fix the subscriptions event icon which was a white box in dark mode
- Adjustments to global gh-list-scrolling styles at narrower viewports
- Test fully on narrower viewports and major browsers
refs: https://github.com/TryGhost/Team/issues/1373
- reduced from 10 to 5 to keep things visually simpler
- sneaked in a little colour tweak to link on activity member detail header
refs: https://github.com/TryGhost/Team/issues/1373
- nothing much here, just changing where the member detail header renders on activity
- added a little padding to empty states to better vertically center
refs: https://github.com/TryGhost/Team/issues/1373
- changed searched name clear to say Clear Member as there was duplicates across the screen
- tried to tidy up the Member Detail link when filtered by members in Activity
- few tiny CSS tweaks
refs https://github.com/TryGhost/Team/issues/1418
- drops the block usage of `<GhDatePicker>` for the "Last seen" input that added shortcut buttons
- not a full revert of https://github.com/TryGhost/Admin/pull/2291 as allowing block usage of the component is still useful for other component customisation
- removes CSS related to the calendar-with-shortcut buttons as we don't have any other use-cases for it at the moment
refs https://github.com/TryGhost/Team/issues/1410
- added block invocation support to `<GhDatePicker>` that exposes the calendar components used inside the datepicker dropdown allowing for customisation of the dropdown content
- updated "last seen" datepicker to use the block invocation support to add buttons that select typical "time ago" dates
Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
refs: https://github.com/TryGhost/Team/issues/1376
- adjust line heights for paragraphs
- vertical align content
- added subheader for actions
- added import members link
- updated action for customise site
refs https://github.com/TryGhost/Team/issues/1390
- added `membersTimeFilters` feature flag and labs toggle
- added `<GhDatePicker>` component that lifts functionality from the `<GhDateTimePicker>` component
- `<GhDateTimePicker>` has not yet been refactored to use the new component internally as there are some odd/complex interactions with error handling with it's existing use-cases and they are in critical publishing paths so the refactor doesn't belong as part of this change
- added "Created at" filter type to members filters
- uses new date picker component for input value
- has "before", "on or before", "after", "on or after" operators
- "on" and "not on" operators were skipped as they require two NQL statements to represent, breaking the current 1:1 statement:filter approach used in the NQL-based query param parsing
refs: https://github.com/TryGhost/Team/issues/1376
- renamed finishing touches file to done
- no last modal, just the done screen for first start
- added options for next steps
No issue
- Changed the Member details page to be more scalable and flexible, depending on whether creators are using subscriptions, emails, and stats.
* Hidden email stats on member detail page when subscriptions are off
* Hid subscription box on member details page when Stripe is not connected
* Updated copy and layout of member details page
* Updated old activity feed styles on member page
* Fixed padding issue for empty activity feed
* Fixed current and new activity feed
* Added Last seen to member details page behind feature flag
* Updated lint todo file
* Fixed spacing issue in member details
closes https://github.com/TryGhost/Team/issues/1029
- allows site owner to filter members on specific tier
- needs tiers beta flag enabled and site should have more than 1 paid tiers.
refs: https://github.com/TryGhost/Team/issues/1373
- added some additional styles to dropdown to better handle names and emails together
- widened the search box to better fit names and emails
No ref
- When memberships are set up but no members are present, we would display the email sending UI in a disabled state. We're now notifying the user why they can't send emails and how to start sending
Refs 72d3d6debc
- Fixed PSM error by moving the action on to the button and change the styling so the button is the main styled element that fills the whole area
- Hid the post-list-item error, which will warn in 30 and error in 60 days
no issue
- the members filtering is out of labs, we don't need to keep the labs component naming around
- renamed `-labs` components/classes to non-labs naming, replacing old and unused non-labs components where necessary
no issue
- softens the disappearance by fading out and collapsing the height when removing
- uses `{{css-transition}}` modifier from https://peec.github.io/ember-css-transitions/docs/insert-destroy
- max-height used in order to animate collapse of a `height: auto` panel, 350px starting point chosen as it's slightly bigger than the largest height of the panel at mobile widths
refs https://github.com/TryGhost/Team/issues/1310
We want to use parts of the "Brand setting" form in a separate streamlined settings screen after site setup but that wasn't possible without a lot of duplication.
- extracted individual form fields into separate components for re-use
- included minor refactors like using `uploader.registerFileInput` and `uploader.triggerFileDialog` instead of continually duplicating the same file input trigger method
- fixed accessibility issues
- changed input titles from `<div>` to `<label>` and associated with the component's input fields
- changed `<img {{on "click" upload}}>` to `<input type="image">` so they act as proper buttons and are linked to the label (required a styling change so `img` and `input[type="image"]` are treated equally)
- finished cleanup of `.description-container-labs` by renaming to `.description-container`
refs https://github.com/TryGhost/Team/issues/1303
- added rudimentary styling to the new onboarding modal
- added in three new icons to go with the new modal
- added the styling to the main.css for the moment
Updates Admin UX for Contributors
When logged in as a Contributor:
- removes sidebar, added floating account menu and dark-mode switch to right side. Updated mobile menu accordingly
- all post by the given user is listed in the Post list
- changed post filtering
- hides email columns in post list
- removes publishmenu for Contributors in Post preview modal
- visual tweaks
refs: https://github.com/TryGhost/Team/issues/1277
- added a z-index to fix breadcrumbs when filters overlap
- made the scrolling list longer on the member activity page to remove gap
refs https://github.com/TryGhost/Team/issues/1252
- allows site owners to (un)archive existing tiers via Admin UI
- adds option to switch between archived or active tiers view
Co-authored-by: Djordje Vlaisavljevic <dzvlais@gmail.com>
refs https://github.com/TryGhost/Team/issues/1277
- added new selected style to filters for activity
- added new subscription icon for filters for activity
- added in the GhMembersAvatar to events row
- fixed the green link for activity mini-view
refs https://github.com/TryGhost/Team/issues/1277
- changed breadcrumb for activity
- added back in three columns for activity when not filtered
- made adjustments to visual look and feel
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
no issue
- transitioning of all properties causes flickering when modals are animated in and out because the DOM elements are duplicated before fading out to account for Ember's component destruction
- applied same property transition list as used for `.gh-btn`
refs https://github.com/TryGhost/Team/issues/840
- added media queries so the image sizing doesn't take the sidebar width into account when it's acting as a popover rather than a sidebar
refs https://github.com/TryGhost/Team/issues/840
We wanted to switch to a settings menu that stays open to the right of the editor rather than a popover that blocks all other interaction with the post to solve two use-cases:
1. when editing it's fairly common to select some text from the post contents when setting excerpt and meta data text, with the previous design not letting you scroll or select whilst the menu got in the way of that
2. having the menu open with meta data visible before publishing can help you see everything is set as you want and help you feel confident when publishing/sending content
---
- removed `psmRedesign` labs flag
- swapped labs component/css for main component and deleted labs component
- cleaned up now-unused `ui.showSettingsMenu` property and related actions/classes
no issue
- the bottom nav bar sits on top of the side bar which meant you weren't able to scroll down far enough to access the bottom of the side bar
- added extra padding to the side bar when the mobile nav is displayed so bottom settings of the side nav sit above the bottom nav bar
no issue
- looks like we had an accidental merge of labs files and CSS back in after it was moved out of labs
- fixes odd font sizes in the settings modal
- fixed dark mode product card color bug
- fixed no. of benefits counter on product card
- removed "Available in Portal" badge (all products are available)
refs https://github.com/TryGhost/Team/issues/825
With multiple products, it's possible to link to any products from themes.
- updates links area in Portal to be able to handle multiple products
- the new product selector for links is behind the alpha flag
refs https://github.com/TryGhost/Team/issues/792
- updates product benefit to use `name` instead of `label` attribute for benefit text
- updates model/serializer/validator to correctly handle benefit attributes
- added `+` button for adding new labels as the enter behavior is closing the popup(needs fix)
no issue
- added `--editor-sidebar-width` CSS variable directly in `index.html` so it doesn't get removed by `postcss-custom-properties` (we use `preserve: false` to avoid problems with `postcss-color-mod-function`)
- adjusted editor CSS
- added max-width calc on container element to prevent browser from increasing the element's width beyond what would allow the sidebar to display at it's desired width
- adjusted the editor flex breakout styles to work with a non-100vw width by using the sidebar width variable
- updated labs post settings menu component to set the `--editor-sidebar-width` variable to the actual width of the sidebar element
- avoids need to have multiple classes with fixed widths to adjust editor and breakout sizes
refs https://github.com/TryGhost/Team/issues/786
Enabled through labs `psmRedesign` flag, rough implementation to help design direction.
- fixed rather than popover when opened by putting editor and sidebar inside a flex container
- settings toggle fixed in top right rather than separate close button
refs https://github.com/TryGhost/Team/issues/771
- added `<GhEditorFeatureImage>` for more flexibility than offered by `<GhImageUploaderWithPreview>`
- updated to more closely match intended designs
- removed alt/caption support from `<GhImageUploaderWithPreview>` as it's no longer used
- fixed upload/delete/upload not working due to file input references getting out of sync
refs https://github.com/TryGhost/Team/issues/771
- updated `<GhImageUploaderWithPreview>` to take an `@includeMetadata` argument that shows a basic html supporting caption field underneath (ready for toggle between caption/alt but not fully implemented)
- added feature image alt/caption properties to post model
- updated UI behind "featureImageMeta" labs flag
- added the feature image uploader to the top of `<GhKoenigEditor>` for display above the editor title
- removed feature image uploader from post settings menu
- added labs flag checkbox
refs https://github.com/TryGhost/Team/issues/755
reqs https://github.com/TryGhost/Ghost/pull/13006
- updated settings model to match new server-side settings
- updated email customisation modal behind the dev experiments flag
- adjusted layout to move to a fixed top bar and scrollable sidebar
- added image upload, toggles and selections for new settings
- updated preview to match selected settings
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
