Improved post preview design #22113
Improved post preview design #22113
Conversation
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Added view options for anonymous visitors, free members, and paid members on web. - Updated preview toggles to accommodate for web and mobile previews in email. - Removed social preview as these are duplicating the functionality in the PSM. They are also not strictly previews, but rather settings. - Moved all preview actions (send test email, copy preview URL, open in new tab) to the top bar of the preview to make them more explicit and discoverable.
WalkthroughThe pull request introduces modifications to user interface elements and styling across various admin components. The terminology “Logged out visitors” has been updated to “Anonymous visitors” in both UI labels and configuration arrays. Significant structural changes have been made to the preview modal components, including header adjustments, the addition of new dropdowns, and the removal of certain interactive elements. New actions for focusing inputs and copying preview URLs have also been implemented. Additionally, multiple CSS files have been updated to refine dimensions, margins, paddings, borders, and background colors, while the underlying business logic remains unchanged. Possibly related PRs
Suggested labels
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ghost/admin/app/styles/app-dark.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
ghost/admin/app/styles/layouts/post-preview.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
ghost/admin/app/components/editor/modals/preview.js (1)
38-43: Consider using ember-concurrency for the focusInput action.Using setTimeout directly can be unreliable and harder to test. Consider converting this to an ember-concurrency task for better control and testability.
-@action -focusInput() { - setTimeout(() => { - document.querySelector('[data-post-preview-email-input]')?.focus(); - }, 100); -} +@task +*focusInput() { + yield timeout(100); + document.querySelector('[data-post-preview-email-input]')?.focus(); +}ghost/admin/app/styles/layouts/post-preview.css (2)
11-13: Refine Post Preview Header LayoutThe header section has undergone several updates:
- The header now has no external margin and uses
padding: 12px 24px;with a new background color (var(--grey-50)) (lines 11–13).- The left section now explicitly positions its content with
left: 20px;and uses flex alignment (lines 17–21).- The right section similarly uses
right: 20px;, along withalign-items: center;and agap: 8px;for better spacing (lines 28–34).- The
.gh-btn-editorbutton now uses a neutral background which changes tovar(--whitegrey)on hover (lines 36–42).These adjustments enhance the visual hierarchy and ensure the header remains balanced across various screen sizes.
Also applies to: 17-21, 28-34, 36-42
448-468: Evaluate Social Preview StylesThe CSS for the social preview section (e.g.
.gh-post-preview-social-containerand its child elements) is still present. Since the PR objectives mention that the social preview feature was removed due to functional duplication, please consider whether these styles can also be removed to simplify the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
ghost/admin/public/assets/icons/arrow-top-right.svgis excluded by!**/*.svgghost/admin/public/assets/icons/external.svgis excluded by!**/*.svgghost/admin/public/assets/icons/laptop.svgis excluded by!**/*.svgghost/admin/public/assets/icons/link.svgis excluded by!**/*.svgghost/admin/public/assets/icons/mobile-phone.svgis excluded by!**/*.svgghost/admin/public/assets/icons/send-email.svgis excluded by!**/*.svg
📒 Files selected for processing (16)
apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx(1 hunks)ghost/admin/app/components/editor/modals/preview.hbs(2 hunks)ghost/admin/app/components/editor/modals/preview.js(4 hunks)ghost/admin/app/components/editor/modals/preview/browser.hbs(0 hunks)ghost/admin/app/components/editor/modals/preview/email.hbs(0 hunks)ghost/admin/app/styles/components/browser-preview.css(1 hunks)ghost/admin/app/styles/components/publishmenu.css(1 hunks)ghost/admin/app/styles/components/settings-menu.css(2 hunks)ghost/admin/app/styles/layouts/content.css(1 hunks)ghost/admin/app/styles/layouts/editor.css(2 hunks)ghost/admin/app/styles/layouts/post-preview.css(10 hunks)ghost/admin/app/styles/layouts/preview-email.css(2 hunks)ghost/admin/app/styles/patterns/buttons.css(1 hunks)ghost/admin/app/styles/patterns/forms.css(1 hunks)ghost/admin/app/utils/stats.js(1 hunks)ghost/announcement-bar-settings/lib/AnnouncementVisibilityValues.js(1 hunks)
💤 Files with no reviewable changes (2)
- ghost/admin/app/components/editor/modals/preview/email.hbs
- ghost/admin/app/components/editor/modals/preview/browser.hbs
✅ Files skipped from review due to trivial changes (2)
- ghost/announcement-bar-settings/lib/AnnouncementVisibilityValues.js
- apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx
🔇 Additional comments (27)
ghost/admin/app/components/editor/modals/preview.js (3)
2-2: LGTM!The new imports are correctly added and will be used by the new functionality.
Also applies to: 5-5
20-20: LGTM!Good initialization of previewEmailAddress with the user's email from the session.
58-62: LGTM!The copyPreviewUrl task is well implemented with proper timeout handling based on the testing environment.
ghost/admin/app/utils/stats.js (1)
31-31: LGTM!The terminology change from "Logged out visitors" to "Anonymous visitors" is consistent with the PR objectives.
ghost/admin/app/components/editor/modals/preview.hbs (3)
21-39: LGTM!The member type selection dropdown is well implemented with:
- Clear separation between email and web preview options
- Proper value paths and labels
- Accessible structure
43-88: LGTM!The email preview functionality is well implemented with:
- Proper form structure
- Good error handling
- Appropriate accessibility attributes
- Clear user feedback states
90-102: LGTM!The URL actions are well implemented with:
- Clear copy feedback
- Proper external link handling
- Good use of icons for visual clarity
ghost/admin/app/styles/components/browser-preview.css (1)
22-22: LGTM!The border-radius addition provides a consistent rounded appearance to the preview container.
ghost/admin/app/styles/layouts/preview-email.css (2)
212-213: Update Background Color for Mobile ContainerThe background for the
.fullscreen-modal-total-overlay .gh-pe-mobile-containeris now set tovar(--whitegrey-l2). This update should help distinguish the mobile preview container from other UI elements. Please verify that the contrast and overall appearance meet the new design guidelines.
220-225: Update Background Color for Mobile BezelThe
.gh-pe-mobile-bezelnow usesbackground: var(--white);instead of the previous value. This creates a cleaner separation between the bezel and its container. Confirm that this change integrates well with the new color scheme and maintains consistency across mobile previews.ghost/admin/app/styles/components/settings-menu.css (2)
9-12: Refine Settings Menu Toggle ButtonThe
.settings-menu-togglenow hastop: 24px;and an explicitheight: 34px;. This adjustment improves vertical alignment and ensures a consistent touch area across devices. Please check that these dimensions work well across the different screen sizes defined in the media queries.
117-124: Adjust Header Dimensions for Better LayoutThe header styling in
.settings-menu-headerhas been updated with a fixed height of82pxand reduced padding (padding: 24px;). These changes aim to streamline the header’s appearance. Verify that the new dimensions blend harmoniously with the rest of the interface and remain responsive on smaller screens.ghost/admin/app/styles/patterns/buttons.css (1)
441-442: Update Button Group Text ColorWithin the
.gh-btn-group .gh-btnrule, the text color has been changed tovar(--midgrey-l1). This update should subtly improve the contrast and visual hierarchy of grouped buttons. Please ensure that this color adjustment aligns with the overall theme across different UI components.ghost/admin/app/styles/layouts/post-preview.css (7)
56-83: Enhance Post Preview Button Group and Segment StylingThe control group for post preview actions has been reworked:
- The container (.gh-post-preview-btn-group) now uses flex layout with a defined
gap: 8px;(lines 56–61).- Nested button groups have adjusted spacing via
gap: .2rem;and a slight margin (lines 64–67).- The inner button spans now have updated padding (
0 10px;), fixed height (34px) with a matching line-height, and a hover state that applies a background ofvar(--whitegrey)(lines 69–79).- Additionally, any extraneous margins are reset (lines 81–83).
This creates a more uniform, responsive button arrangement.
85-105: Update Web Preview Segment Select StylingThe
.gh-web-preview-segmentelement and its contained<select>control have been restyled:
- The segment is now fixed at a height of 34px with defined horizontal margins (lines 85–89).
- The select input now has customized padding (
0 28px 0 14px), no border, and rounded corners (lines 91–101).- On hover, the background changes to
var(--whitegrey)to indicate interactivity (lines 103–105).These changes are expected to yield a clearer and more user-friendly selection interface.
107-115: Adjust Preview Select Icon AppearanceThe SVG icon inside the
.gh-select.gh-web-preview-segmenthas been resized and restyled:
- The icon's height is set to 5px with a slight negative top margin (lines 107–110).
- The path stroke is now 4px wide and colored
var(--black)for improved visibility (lines 112–115).These updates help ensure that the icon is crisp and noticeable within the control.
117-124: Refine New Tab Preview Button StylingUpdates to the new tab preview functionality include:
.gh-post-preview-mode svgis now uniformly sized at 18px (lines 117–124).- The
.gh-publish-preview-newtabbutton has been defined with a fixed height (34px), transparent background, and a right margin; its hover state now appliesvar(--whitegrey)(lines 126–134).- The span inside the button receives
0 10pxpadding, and any contained SVG is adjusted to 18px (lines 136–142).These changes ensure that the new tab preview button is both visually consistent and responsive.
Also applies to: 126-134, 136-142
163-171: Improve Post Preview Browser Container LayoutThe browser container for the post preview now features:
- A higher
z-index(9999) for proper layering,- A margin of
0 .8remfor spacing,- Rounded top corners (
border-radius: 8px 8px 0 0),- And a subtle box-shadow as defined by
var(--shadow-1)(lines 163–171).This revamped design should make the browser preview stand out appropriately.
185-212: Streamline Preview URL and Email Trigger ControlsThe controls for copying the preview URL and triggering an email preview have been updated:
- Both use a consistent flex layout with a fixed height (34px) and no border (lines 185–192).
- Their internal text spans have uniform horizontal padding (lines 198–201).
- A hover effect sets the background to
var(--whitegrey)(lines 203–206).- Associated SVG icons are sized at 18px (lines 208–212).
These refinements offer a cleaner and more intuitive user interface for preview actions.
268-274: Refine Email Preview Section StylingSeveral elements within the email preview area have been updated:
- The
.gh-post-preview-email-headernow has a padding of16px 20pxand a white background for clarity (lines 268–272).- The email test button group now employs a defined gap (
gap: .8rem;, lines 385–387).- The dropdown for test emails has been repositioned (using
top: calc(100% + 6px);, etc.), with added padding, border-radius, and box-shadow for visual prominence (lines 406–412).- The email input field is now set to a width of 220px (lines 425–427).
- Additionally, the test email button has updated dimensions and a border-radius of 8px for a more modern touch (lines 392–397).
These changes collectively aim to streamline and enhance the interactivity of the email preview workflow.
Also applies to: 385-412, 425-427, 392-397
ghost/admin/app/styles/patterns/forms.css (1)
182-184: Update SVG Icon Rendering in Input FieldThe rule for
.gh-input-icon.gh-icon-link svghas been updated to enforcefill: none;(removing any fill that might be inherited by its<path>elements). This change should ensure that the link icon appears as intended per the design. Please confirm that no unintended visual side effects occur across browsers.ghost/admin/app/styles/components/publishmenu.css (2)
4-8: Standardized Button Height for Publish Triggers
Setting the height for both the.gh-publish-triggerand.gh-unpublish-triggerto34pxensures consistency across button elements. This adjustment should help maintain uniformity in the UI regardless of content.
247-259: Consistent Height for the Publish Back Button
The.gh-publish-back-buttonnow explicitly uses aheightof34px, aligning it with the trigger buttons. This consistency will improve visual harmony in the publish menu.ghost/admin/app/styles/layouts/editor.css (3)
314-318: Adjusted Header Margin for the Editor
Changing the margin in.gh-editor-headerto24px(previously larger) helps to better utilize the available space and aligns with the revised spacing strategy for the preview area.
1013-1021: New Editor Preview Trigger Style Added
The new definition for.gh-editor-preview-triggersettingheight: 34pxalong with other clear, accessible button styling (background, font settings, and a smooth transition) creates a consistent design with the publish menu buttons.
1023-1025: Introducing Preview Header-Specific Trigger Adjustment
Adding a specific rule for.gh-post-preview-header .gh-editor-preview-triggerwith amargin-left: 4pxensures appropriate separation from preceding elements in the preview header. This localized spacing tweak complements the overall design improvements.ghost/admin/app/styles/layouts/content.css (1)
167-172: New Content Filter Divider Component
The added.gh-contentfilter-dividerclass introduces a simple vertical divider (1px width, 16px height) with a lightgrey background. This new element can improve the visual separation in content filter components. It might be useful to test its responsiveness and appearance across different devices.
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Made the newsletter dropdown and the subject edit field more explicit/discoverable
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ghost/admin/app/components/editor/modals/preview/email.hbs (1)
30-31: Consider semantic separator.Instead of using an
<hr>tag, consider using CSS borders or a more semantic way to separate sections.-<hr> +<div class="gh-email-preview-section-separator" role="separator"></div>Add to your CSS:
.gh-email-preview-section-separator { border-top: 1px solid var(--whitegrey); margin: 1.2rem 0; }ghost/admin/app/styles/layouts/post-preview.css (1)
448-497: Review of Social Preview Styles
Although the PR objectives indicate the removal of the social preview feature, this section (covering.gh-post-preview-social-containerand related classes up to the beginning of the social Twitter and OG containers) remains in the CSS. If these styles are no longer in use, consider removing them to reduce code clutter and improve maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
ghost/admin/app/components/editor/modals/preview/email.hbs(2 hunks)ghost/admin/app/components/editor/modals/preview/email/email-subject.hbs(1 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)ghost/admin/app/styles/layouts/preview-email.css(4 hunks)ghost/admin/app/styles/patterns/forms.css(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- ghost/admin/app/styles/layouts/preview-email.css
- ghost/admin/app/styles/patterns/forms.css
⏰ Context from checks skipped due to timeout of 90000ms (11)
- GitHub Check: Regression tests (Node 20.11.1, sqlite3)
- GitHub Check: Ghost-CLI tests
- GitHub Check: Regression tests (Node 20.11.1, mysql8)
- GitHub Check: Admin-X Settings tests
- GitHub Check: Unit tests (Node 20.11.1)
- GitHub Check: Database tests (Node 20.11.1, sqlite3)
- GitHub Check: Unit tests (Node 18.12.1)
- GitHub Check: Database tests (Node 20.11.1, mysql8)
- GitHub Check: Database tests (Node 18.12.1, mysql8)
- GitHub Check: Admin tests - Chrome
- GitHub Check: Lint
🔇 Additional comments (42)
ghost/admin/app/components/editor/modals/preview/email/email-subject.hbs (1)
2-10: LGTM! Good accessibility improvements.The changes simplify the UI while improving accessibility through the explicit aria-label. The use of consistent styling classes and maintaining core functionality (blur and Enter key handlers) is good.
ghost/admin/app/components/editor/modals/preview/email.hbs (2)
6-7: Good use of semantic HTML and accessibility improvements.Converting divs to form elements and adding explicit labels improves accessibility. However, ensure these forms don't trigger unintended submissions.
Add
@submit={{this.preventDefault}}or equivalent to prevent default form submission:-<form class="gh-email-preview-newsletter-select" data-test-email-preview-newsletter-select-section> +<form class="gh-email-preview-newsletter-select" data-test-email-preview-newsletter-select-section {{on "submit" this.preventDefault}}>Also applies to: 32-33
14-15: Verify dropdown accessibility with new styling classes.The updated dropdown classes (
gh-dropdown-x,gh-publish-newsletter-dropdown) should maintain proper accessibility, including sufficient color contrast and focus states.ghost/admin/app/styles/layouts/post-preview.css (39)
11-13: Header Container Update: Revised Margin, Padding, and Background
The update removes the previous margin and introduces a new padding and background (var(--grey-50)) for the header. This aligns with the refreshed post preview design.
18-20: Left Section Alignment Enhancement
The.gh-post-preview-header .leftblock now uses aleft: 20pxoffset and flex layout with aligned items, ensuring proper positioning of the header’s left-aligned elements.
23-25: Header Title Styling Adjustment
The header title (h2) now has its margin reset and font-size set to2rem, which supports a cleaner and more modern appearance.
30-34: Right Section Position and Spacing Update
Updating the.gh-post-preview-header .rightblock to useright: 20px, flex-based alignment, and agap: 8pxensures the right-aligned elements are spaced consistently and visually balanced with the left side.
36-38: Button Editor Base Style Refinement
The removal of the background (usingbackground: none !important;) in the.gh-post-preview-header .gh-btn-editorclass helps maintain a minimalist style for editor buttons.
40-41: Enhanced Hover State for Editor Button
The hover effect now applies avar(--whitegrey)background, providing users with clear interactive feedback when hovering over the editor button.
56-60: Introduction of Post Preview Button Group Layout
The new.gh-post-preview-btn-grouprule establishes a flex layout with spaced content, which is essential for a tidy arrangement of multiple preview action buttons.
64-65: Button Group Spacing Adjustments
Applying a smallgapand margin to the.gh-post-preview-btn-group .gh-btn-groupimproves the consistency and appearance of button clusters.
69-75: Consistent Button Span Sizing and Padding
The span elements within the button groups now have a fixed height of34px, a horizontal padding of10px, and no background or shadow, ensuring uniform appearance across buttons.
77-79: Button Hover Feedback in Group
Defining a hover state (with background change tovar(--whitegrey)) for the span elements improves user experience by clearly indicating interactivity.
81-83: Removal of Unwanted Margins on Buttons
The update explicitly resets the margin on.gh-post-preview-btn-group .gh-btnto ensure proper alignment with other elements.
85-89: Web Preview Segment Introduction
A new.gh-web-preview-segmentclass is added with defined height, margin, and a transparent background. This creates a clear, consistent layout for the web preview section.
91-101: Selective Styling for Dropdown in Web Preview
The styling for.gh-web-preview-segment selectnow sets height, padding, transparent background, no border, and clear typography with a rounded border. These changes ensure that the dropdown integrates seamlessly with the overall design.
103-105: Dropdown Hover State for Web Preview
The hover state for the select element changes the background tovar(--whitegrey), enhancing usability by providing visible feedback on user interaction.
107-110: SVG Icon Adjustment in Web Preview Dropdown
SVG icons within.gh-select.gh-web-preview-segmentnow have a fixed height and a slight upward margin tweak (margin-top: -.1em) to ensure proper vertical alignment.
112-114: SVG Path Stroke Enhancement
Setting astroke-widthof4pxand the stroke color asvar(--black)on SVG paths improves the clarity and consistency of icons within the web preview controls.
118-122: Preview Mode Icon Sizing Update
Adjusting the icon size within.gh-post-preview-modeto18pxby18pxensures a balanced and modern visual alignment in preview mode.
125-130: Publish New Tab Button Style Overhaul
The.gh-publish-preview-newtabbutton now has an explicit height, transparent background, no border, and amargin-rightadjustment, which aligns it with the overall updated design language.
132-133: Refined Hover for Publish New Tab Button
A hover state has been added that applies avar(--whitegrey)background, enhancing user awareness of interactivity of the new tab action.
136-138: Consistent Padding for New Tab Button Text
Ensuring that the<span>within the publish preview button has consistent horizontal padding guarantees an adequate clickable area and balanced visual appearance.
140-142: SVG Sizing for New Tab Action
The SVG icon within the publish preview button is now consistently sized to 18px, ensuring visual harmony within the header.
167-170: Browser Container Visual Enhancements
The browser container now includes an increasedz-index, margin adjustments, rounded top corners (border-radius: 8px 8px 0 0), and a subtle box-shadow. These changes help the preview pane stand out while remaining well integrated in the layout.
185-192: URL & Email Trigger Element Styling
The newly styled.gh-post-preview-urland.gh-post-preview-email-triggerclasses now adopt a flex layout with a set height and clear typography. This ensures that interactive elements are consistently sized and positioned within the post preview header.
198-201: Padding for URL and Email Trigger Text Elements
The span elements inside URL and email triggers now receive standard horizontal padding (0 10px), ensuring textual content remains comfortably spaced.
203-206: Interactive Hover States for URL & Email Triggers
Defining a hover effect that changes the background tovar(--whitegrey)provides clear user feedback on these interactive elements.
208-212: Uniform SVG Icon Dimensions for URL and Email Trigger
Ensuring that SVGs within these triggers are sized uniformly (18px by 18px) maintains consistency and clarity in the interface.
269-276: Email Header Section Redesign
The updated.gh-post-preview-email-headernow uses a column flex layout with a defined gap, a bottom border, ample padding, and a white background to better segment and highlight the email preview header.
277-279: Consistent Label Sizing in Email Header
Specifying a minimum width for labels ensures that form elements in the email header maintain uniformity, enhancing overall readability.
281-284: Smooth Transitions for Email Input Fields
Applying a transparent background along with a transition (all .15s ease) to.gh-input-xprovides a subtle animation on hover, enhancing the user experience without being distracting.
286-288: Interactive Hover State for Email Inputs
The hover effect on inputs (excluding focus) now changes their background tovar(--whitegrey), offering users immediate feedback while preserving form clarity.
290-293: Consistent Horizontal Rule Styling in Email Header
Resetting margins and applying a uniform border color for<hr>elements in the email header maintains visual consistency with the rest of the interface.
301-305: Newsletter Preview Selection Layout
The new.gh-email-preview-newsletter-selectrules use flex layout with defined gaps and alignment, ensuring that newsletter selection elements are spaced predictably and neatly.
307-309: Uniform Label Width in Newsletter Selector
The labels in the newsletter selection are explicitly set to a width of56px, promoting consistency across the form elements.
311-314: Icon Spacing for Newsletter Trigger
Adjusting the margin-left for the newsletter trigger SVG ensures that icons are spaced correctly relative to adjacent text, supporting a cleaner UI layout.
405-412: Email Test Dropdown Positioning and Styling
The styling for.gh-post-preview-email-test-dropdownnow features precise positioning (usingtop: calc(100% + 6px),right: 0,left: auto), padding, rounded corners, and a box-shadow to differentiate the dropdown from the background.
426-428: Email Input Width Adjustment
Setting the.gh-post-preview-email-inputwidth to220pximproves readability and provides a consistent input experience within the email preview form.
384-387: Optimized Spacing in the Test Email Section
The updated.gh-post-preview-email-testnow uses a defined gap (.8rem) between elements, ensuring that controls are neither too cramped nor excessively spaced.
393-398: Responsive Styling for Test Email Buttons
The test email buttons have been updated with full width, a minimum width, adjusted margins, and rounded corners, enhancing usability and consistency with the new design.
371-371: Email Mockup Styling Enhancements
Within the.gh-post-preview-email-mockupblock, adjustments to margin, border-radius, and box-shadow create a visually appealing and clearly delineated email preview area that fits the refreshed design aesthetic.Also applies to: 374-375
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Aligned the publish and update modals header style with the preview modal header style
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
ghost/admin/app/components/editor/modals/publish-flow.hbs(2 hunks)ghost/admin/app/components/editor/modals/update-flow.hbs(1 hunks)ghost/admin/app/styles/components/publishmenu.css(3 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- ghost/admin/app/styles/components/publishmenu.css
- ghost/admin/app/styles/layouts/post-preview.css
🔇 Additional comments (4)
ghost/admin/app/components/editor/modals/publish-flow.hbs (3)
3-3: LGTM! Header title change improves modal consistency.The addition of the h2 element aligns with the design improvements across modal components.
6-6: LGTM! Button group class change improves semantics.The new
gh-btn-group-rightclass provides better semantic meaning compared to utility classes.
17-22: LGTM! Button changes improve clarity and consistency.The simplified button class and updated text better reflect the button's purpose.
ghost/admin/app/components/editor/modals/update-flow.hbs (1)
7-8: LGTM! Button changes improve clarity and consistency.The simplified button attributes and updated text better reflect the button's purpose.
| <button class="gh-btn-editor gh-publish-back-button" title="Close" type="button" {{on "click" @close}}> | ||
| <span>{{svg-jar "arrow-left"}} Editor</span> | ||
| </button> | ||
| <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>> |
There was a problem hiding this comment.
Fix syntax error in header title.
Remove the extra ">" character at the end of the line.
- <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>>
+ <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2>> | |
| <h2>{{if post.isScheduled "Unschedule" "Unpublish"}}</h2> |
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Added a new tooltip component, because the data-tooltip attribute doesn't allow for styling inner content such as shortcuts. - Aligned tooltip styles with the Koenig shortcut tooltip - Made some further tweaks to the preview modal
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (10)
ghost/admin/app/components/gh-tooltip.hbs (2)
1-4: Add ARIA attributes for accessibility.The tooltip should be accessible to screen readers.
<span class="gh-tooltip" + role="tooltip" + aria-hidden="true" ...attributes >
7-9: Consider adding aria-label for keyboard shortcuts.When shortcuts are present, they should be announced properly by screen readers.
- {{#each @shortcut as |key|}} - <p class="gh-shortcut-key">{{html-safe key}}</p> - {{/each}} + {{#each @shortcut as |key|}} + <p class="gh-shortcut-key" aria-label="Keyboard shortcut: {{key}}">{{html-safe key}}</p> + {{/each}}ghost/admin/app/components/editor/publish-buttons.hbs (1)
5-11: Add aria-label to buttons for better accessibility.The buttons would benefit from descriptive labels that include the keyboard shortcuts.
class="gh-btn gh-btn-editor gh-editor-preview-trigger gh-tooltip-trigger tooltip-bottom no-text" + aria-label="Preview (⌘P)" {{on "click" @publishManagement.openPreview}}Also applies to: 25-31, 36-43
ghost/admin/app/styles/spirit/_custom-styles.css (1)
271-295: Consider reducing z-index and transition delay.The current implementation has some potential issues:
- z-index of 99999 is extremely high and might cause layering issues
- 800ms transition delay might feel slow for power users
- z-index: 99999; + z-index: 1000; /* ... other properties ... */ - transition: opacity 200ms ease 0s; + transition: opacity 150ms ease 0s;ghost/admin/app/components/editor/modals/preview.js (3)
20-20: Consider adding validation for email address.The tracked property initializes with user's email but lacks validation.
- @tracked previewEmailAddress = this.session.user.email; + @tracked previewEmailAddress = ''; + + constructor() { + super(...arguments); + this.saveFirstTask.perform(); + this.previewEmailAddress = this.validateEmail(this.session.user.email) + ? this.session.user.email + : ''; + } + + validateEmail(email) { + return email && email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/); + }
38-43: Consider using Ember's run loop for DOM manipulation.The
setTimeoutusage for focusing input could be replaced with Ember's run loop for better integration.- @action - focusInput() { - setTimeout(() => { - document.querySelector('[data-post-preview-email-input]')?.focus(); - }, 100); - } + @action + focusInput() { + import { schedule } from '@ember/runloop'; + schedule('afterRender', () => { + document.querySelector('[data-post-preview-email-input]')?.focus(); + }); + }
64-64: Remove unused noop method.The
noopmethod appears to be used only in the template for PowerSelect's onChange. Consider using an actual handler or removing if truly not needed.- noop() {} + @action + handlePreviewTypeChange(selection) { + // Handle preview type change if needed + // or remove if truly not needed + }ghost/admin/app/components/editor/modals/preview.hbs (2)
21-43: Consider adding aria-label to PowerSelect.The PowerSelect component for user types should have an aria-label for better accessibility.
<PowerSelect + @ariaLabel="Select preview type" @selected={{hash value="free" label="Free member"}} @options={{if (eq this.tab "email")
128-128: Consider adding loading state to Publish button.The Publish button should show a loading state while the action is in progress.
- class="gh-btn gh-btn-primary" + class="gh-btn gh-btn-primary {{if this.publishTask.isRunning 'gh-btn-loading'}}" {{on "click" @data.togglePreviewPublish}} disabled={{this.publishTask.isRunning}}Also applies to: 131-131
ghost/admin/app/styles/layouts/post-preview.css (1)
455-485: Obsolete Social Preview Styles:
This file still contains extensive styling for social preview elements (starting at line 455), yet the PR objectives state that the social preview feature has been removed due to duplicated functionality. Consider cleaning up these styles to eliminate unused CSS and simplify maintenance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
ghost/admin/app/components/editor/modals/preview.hbs(2 hunks)ghost/admin/app/components/editor/modals/preview.js(4 hunks)ghost/admin/app/components/editor/publish-buttons.hbs(2 hunks)ghost/admin/app/components/gh-tooltip.hbs(1 hunks)ghost/admin/app/styles/layouts/editor.css(3 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)ghost/admin/app/styles/patterns/global.css(1 hunks)ghost/admin/app/styles/spirit/_custom-styles.css(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- ghost/admin/app/styles/patterns/global.css
🚧 Files skipped from review as they are similar to previous changes (1)
- ghost/admin/app/styles/layouts/editor.css
⏰ Context from checks skipped due to timeout of 90000ms (10)
- GitHub Check: Ghost-CLI tests
- GitHub Check: Unit tests (Node 20.11.1)
- GitHub Check: Regression tests (Node 20.11.1, sqlite3)
- GitHub Check: Unit tests (Node 18.12.1)
- GitHub Check: Regression tests (Node 20.11.1, mysql8)
- GitHub Check: Admin-X Settings tests
- GitHub Check: Database tests (Node 20.11.1, sqlite3)
- GitHub Check: Database tests (Node 20.11.1, mysql8)
- GitHub Check: Database tests (Node 18.12.1, mysql8)
- GitHub Check: Admin tests - Chrome
🔇 Additional comments (19)
ghost/admin/app/components/editor/modals/preview.js (2)
2-2: LGTM: New imports support enhanced functionality.The addition of
copyTextToClipboardandtimeoutimports support the new preview URL copying feature and improved task management.Also applies to: 5-5
58-62: LGTM: Well-implemented copy URL functionality.The task properly handles copying and provides visual feedback with a timeout.
ghost/admin/app/components/editor/modals/preview.hbs (2)
1-4: LGTM: Improved modal structure.The new modal structure with semantic HTML (
<h2>for header) improves accessibility.
94-108: LGTM: Well-implemented preview actions.The preview actions (copy URL, open in new tab) are properly implemented with:
- Visual feedback for copy action
- Tooltips for better UX
- Proper security attributes for external links
ghost/admin/app/styles/layouts/post-preview.css (15)
1-6: Modal and Header Container Updates:
A new.gh-post-preview-modalclass has been introduced (lines 1–6) to define a flex container with a column layout and a consistent background. Additionally, the header’s spacing and background—via the updated margin (line 13), padding (line 14), and background (line 15)—plus adjustments for the left section (lines 20–23) and header title (lines 25–27) help align the modal’s overall layout with the new design.Also applies to: 13-15, 20-27
32-44: Header Action Area Enhancements:
The styling for the header’s right section (lines 32–35) and the.gh-btn-editorbutton (lines 38–40), along with its hover effect (lines 42–44), has been updated. These changes support the relocation of preview actions to the top bar and ensure a clear, interactive area for user actions.
58-85: Button Group Styling Improvements:
The newly defined.gh-post-preview-btn-group(lines 58–62) and its nested elements—including the spans inside.gh-btn-group(lines 71–77) and their hover state (lines 79–81), as well as resetting margins for.gh-btn(lines 83–85)—create a more balanced and responsive button layout for toggling between web and mobile previews.
87-107: Web Preview Segment Definition:
The new.gh-web-preview-segmentclass (lines 87–91) and its child,.gh-preview-segment-trigger(lines 93–103), set fixed dimensions and clear padding for the preview segment. The hover effect (lines 105–107) further enhances interactivity.
109-117: SVG Icon Styling in Preview Segments:
Adjustments to the SVG inside the PowerSelect trigger (lines 109–112) and its path styling (lines 114–117) ensure that icons have the correct size and stroke properties, contributing to a cleaner, more refined visual presentation.
119-125: Preview Mode Icon Sizing:
The icon within.gh-post-preview-mode(lines 119–125) now has updated dimensions that help it blend harmoniously with adjacent UI elements. Double-check that these sizes work well across different devices.
127-147: Publish Preview New Tab Button Styling:
Revised styles for.gh-publish-preview-newtab(lines 127–134), including proper height, transparent background, border settings, margin, cursor, and color, along with its hover (lines 136–138), span (lines 140–142), and SVG (lines 144–147) adjustments, contribute to a more intuitive and accessible action for opening previews in a new tab.
167-175: Browser Container Enhancements:
The.gh-post-preview-browser-container(lines 167–175) now features a higher z-index, adjusted horizontal margins, rounded top corners, and a subtle box-shadow. These changes help it stand out as a distinct and prioritized element in the modal hierarchy.
189-220: Action Button & Trigger Styling for URL and Email:
The combined styles for.gh-post-preview-urland.gh-post-preview-email-trigger(lines 189–200) as well as for their inner span elements (lines 202–205) and hover states (lines 207–210), plus the open state for the email trigger (lines 212–214) and the SVG settings (lines 216–220), create a cohesive design that ensures these interactive elements have consistent sizing, padding, and color.
276-300: Email Header Layout Refinements:
The updated.gh-post-preview-email-header(lines 276–283) now uses a column flex layout with a defined gap, padding, and a white background. Complementary modifications to the label (lines 285–287) and the horizontal rule (lines 298–300) further streamline the email preview header for clarity and usability.
310-323: Newsletter Select Component Styling:
Styling improvements for.gh-email-preview-newsletter-select(lines 310–313) and its label (lines 315–317), along with the adjusted margin for the trigger’s SVG icon (lines 319–323), help ensure that newsletter selection elements are neatly aligned and legible.
354-362: Email Container Consistency:
By setting the email container’s height to 100% (line 356) and maintaining a consistent background color (line 361), the.gh-post-preview-email-container(lines 354–362) aligns with the revised layout expectations for the email preview.
371-383: Email Mockup Visual Enhancements:
The adjustments to.gh-post-preview-email-mockup(lines 371–383) — such as zeroing out the margin at the bottom (line 378), setting a white background (line 380), and applying a border-radius and box-shadow (lines 381–382) — sharpen the visual presentation of the email preview, making it appear more modern and refined.
391-405: Test Email Section Improvements:
Changes in the.gh-post-preview-email-testblock (lines 391–394) and the button styling (lines 400–405) enhance the usability of the test email interface. With well-defined spacing, full-width buttons, and appropriate margins and border-radius values, the test area is more accessible and visually appealing.
412-421: Dropdown and Email Input Refinements:
The updated styles for the test email dropdown (lines 412–421) — including top positioning, right/left settings, padding, border-radius, and box-shadow — along with the new width for the email input (lines 432–434), foster a cleaner and more intuitive interaction in the test email workflow.Also applies to: 432-434
| *:hover > .gh-tooltip { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| transform: translate(-50%, 0); | ||
| transition: opacity 200ms ease .8s; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add keyboard focus styles for accessibility.
Tooltips should be visible when elements are focused via keyboard navigation.
-*:hover > .gh-tooltip {
+*:hover > .gh-tooltip,
+*:focus > .gh-tooltip,
+*:focus-within > .gh-tooltip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
- transition: opacity 200ms ease .8s;
+ transition: opacity 150ms ease .5s;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| *:hover > .gh-tooltip { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(-50%, 0); | |
| transition: opacity 200ms ease .8s; | |
| } | |
| *:hover > .gh-tooltip, | |
| *:focus > .gh-tooltip, | |
| *:focus-within > .gh-tooltip { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(-50%, 0); | |
| transition: opacity 150ms ease .5s; | |
| } |
| <div class="gh-post-test-email-group"> | ||
| <GhDropdownButton | ||
| @dropdownName="post-preview-test-email" | ||
| @classNames="gh-btn gh-post-preview-email-trigger" | ||
| data-test-button="post-preview-test-email" | ||
| > | ||
| <span>{{svg-jar "send-email"}}</span> | ||
| </GhDropdownButton> | ||
| <GhDropdown | ||
| @name="post-preview-test-email" | ||
| @classNames="dropdown-menu gh-post-preview-email-test-dropdown" | ||
| @onOpen={{this.focusInput}} | ||
| > | ||
| <div class="gh-post-preview-email-test"> | ||
| <form class="form-group"> | ||
| <label for="post-preview-email-input">Send test email</label> | ||
| <Input | ||
| @value={{this.previewEmailAddress}} | ||
| class="gh-input gh-input-x gh-post-preview-email-input" | ||
| placeholder="[email protected]" | ||
| aria-label="Email address to receive preview" | ||
| aria-invalid={{if this.sendPreviewEmailError "true"}} | ||
| aria-describedby={{if this.sendPreviewEmailError "sendError"}} | ||
| data-post-preview-email-input | ||
| autofocus="true" | ||
| {{on-key "Enter" (perform this.sendPreviewEmailTask)}} | ||
| /> | ||
| <p class="description">You'll receive this as a free member.</p> | ||
| <GhTaskButton | ||
| @task={{this.sendPreviewEmailTask}} | ||
| @buttonText="Send" | ||
| @successText="Sent" | ||
| @runningText="Sending..." | ||
| @class="gh-btn gh-btn-icon gh-btn-primary" | ||
| data-test-button="send-test-email" | ||
| /> | ||
| </form> | ||
| </div> | ||
|
|
||
| {{#if this.sendPreviewEmailError}} | ||
| <div class="gh-post-preview-email-error"> | ||
| <span class="response" id="sendError">{{this.sendPreviewEmailError}}</span> | ||
| </div> | ||
| {{/if}} | ||
| </GhDropdown> | ||
| </div> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify error handling in email preview.
The email preview form includes error handling but ensure:
- Error messages are properly displayed
- Network errors are handled gracefully
- Rate limiting is considered
🏁 Script executed:
#!/bin/bash
# Search for email-related error handling
rg -A 5 "sendPreviewEmailError|sendPreviewEmailTask" --type jsLength of output: 2959
Email Preview Error Handling Verification
- Error Messages Displayed: The template in
ghost/admin/app/components/editor/modals/preview.hbsproperly renders the error state via thesendPreviewEmailErrorproperty. - Network Errors Handling: The
sendPreviewEmailTaskinemail.jsuses a try-catch block to capture errors and assigns the error message tosendPreviewEmailError, ensuring that network issues are communicated. - Rate Limiting: There is no explicit handling or differentiation for rate limiting (e.g. detecting HTTP 429 responses) in the task. If rate limiting is expected, consider adding specific logic to identify and manage such responses.
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Added label for affordance
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
ghost/admin/app/styles/layouts/post-preview.css (1)
456-928: Remove unused social preview styles.Since the social preview functionality has been removed (as mentioned in the PR objectives), these styles are no longer needed and should be removed to maintain a clean codebase.
🧹 Nitpick comments (2)
ghost/admin/app/components/editor/modals/preview.hbs (1)
22-24: Consider making the default member type dynamic.The member type selector's default value is hardcoded to "Free member". Consider making this dynamic based on the current user's context or the most common use case.
- @selected={{hash value="free" label="Free member"}} + @selected={{this.defaultMemberType}}ghost/admin/app/styles/layouts/post-preview.css (1)
168-169: Review z-index values for consistency.The z-index value of 999 seems arbitrary. Consider using a z-index scale variable for better maintainability and consistency across the application.
- z-index: 999; + z-index: var(--z-index-modal-content);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
ghost/admin/app/components/editor/modals/preview.hbs(2 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)
🔇 Additional comments (3)
ghost/admin/app/components/editor/modals/preview.hbs (2)
86-90: Email preview error handling looks good.The error handling implementation for the email preview is well-structured with proper error display and ARIA attributes.
Consider adding specific error messages for rate limiting scenarios:
{{#if this.sendPreviewEmailError}} <div class="gh-post-preview-email-error"> - <span class="response" id="sendError">{{this.sendPreviewEmailError}}</span> + <span class="response" id="sendError"> + {{#if this.isRateLimitError}} + Too many attempts. Please try again in a few minutes. + {{else}} + {{this.sendPreviewEmailError}} + {{/if}} + </span> </div> {{/if}}
140-163: Preview content changes look good.The removal of the social preview and the clear conditional rendering for different preview modes align well with the PR objectives. The code is clean and maintainable.
ghost/admin/app/styles/layouts/post-preview.css (1)
119-454: Preview mode styles look good.The styles are well-organized with consistent spacing, proper hover states, and good accessibility considerations.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
ghost/admin/app/components/editor/modals/preview/email.hbs (1)
54-54: Consider making the member type message dynamic.The hardcoded message "You'll receive this as a free member" might be misleading if the preview can be sent as different member types.
Consider making this message dynamic based on the selected member type:
- <p class="description">You'll receive this as a free member.</p> + <p class="description">You'll receive this as {{this.selectedMemberType}} member.</p>ghost/admin/app/styles/app-dark.css (3)
391-393: Publish Header Hover Enhancement
The hover style for buttons within.gh-publish-headernow changes the background tovar(--grey-900)using!important. While this ensures consistency, consider if the use of!importantis absolutely necessary or if cascading specificity can be improved instead.
890-892: Button Group Hover State
When hovering over spans inside the.gh-post-preview-btn-group, the background is forced tovar(--grey-900)using!important. As with previous similar uses, consider if this level of specificity is required or if it can be achieved through improved selector design.
917-921: Email Trigger on Hover/Open State
When hovered or active (open), the email trigger now sets both its background and border tovar(--grey-850)(using!important). This clear state change enhances usability. As before, if possible, consider if the use of!importantcan be minimized.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
ghost/admin/app/components/editor/modals/preview.hbs(2 hunks)ghost/admin/app/components/editor/modals/preview/email.hbs(2 hunks)ghost/admin/app/styles/app-dark.css(5 hunks)ghost/admin/app/styles/layouts/editor.css(3 hunks)ghost/admin/app/styles/layouts/post-preview.css(11 hunks)ghost/admin/app/styles/layouts/preview-email.css(4 hunks)ghost/admin/app/styles/patterns/global.css(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- ghost/admin/app/components/editor/modals/preview.hbs
- ghost/admin/app/styles/layouts/preview-email.css
- ghost/admin/app/styles/layouts/editor.css
- ghost/admin/app/styles/layouts/post-preview.css
🔇 Additional comments (24)
ghost/admin/app/components/editor/modals/preview/email.hbs (3)
6-7: Great accessibility improvements!The changes enhance accessibility by:
- Using semantic form elements
- Adding explicit labels
- Maintaining proper ARIA attributes
Also applies to: 14-15, 26-26
27-72: Well-structured test email implementation!The new test email functionality is well-implemented with:
- Proper form semantics and labeling
- Clear error handling
- Keyboard accessibility
76-84: Good visual separation and accessibility improvements!The changes enhance both the visual design and accessibility:
- Added horizontal rule for better section separation
- Improved form semantics with proper labeling
ghost/admin/app/styles/patterns/global.css (2)
68-68: New Grey Variable Added
The new variable--grey-850: #444c55;is a clear addition to the grey palette. This aids in consistent theming, especially since later preview components reference similar tones.
195-195: Updated Shadow Definition
The updated definition of--shadow-1increases the opacity values of the shadow layers, which should provide a more pronounced depth effect. Please ensure that this visual change is acceptable across all contexts where shadows are used.ghost/admin/app/styles/app-dark.css (19)
261-264: Generic Button Border Styling
The new style on generic buttons (that do not have specific color classes) applies a border of1px solid var(--grey-900)and sets the text color tovar(--black). This clearly defines their look in dark mode. Verify consistency with similar button variants.
266-269: Generic Button Hover State
Defining the hover state for generic buttons with a background ofvar(--lightgrey-d1)and text colorvar(--black)provides a subtle interactive cue. Double-check that the contrast meets accessibility standards.
781-789: Editor Button Styling Adjustments
The.gh-btn-editornow explicitly sets its background tovar(--white), and its hover state (shared with.gh-post-preview-url:hoverand.gh-post-preview-header .gh-btn-editor:hover) changes tovar(--grey-900). This update harmonizes the interactive states with the overall design.
846-851: Post Preview Modal Styling
The new rules for.gh-post-preview-modal,.gh-post-preview-header, and.fullscreen-modal-total-overlay .gh-pe-mobile-containerset the background tovar(--white). This ensures a clean and consistent backdrop for the post preview components, which is essential for readability.
852-854: Email Header Background Update
The.gh-post-preview-email-headernow usesbackground: var(--grey-925), providing a distinct separation from the main preview modal. This subtle adjustment should help users visually differentiate between sections.
856-859: Email Header Input Styling
The styling for.gh-post-preview-email-header .gh-input-xis updated with abackground: var(--grey-850)and a transparent border, ensuring that the input blends correctly within the header while still remaining interactive.
861-863: Email Header Input Hover State
A hover (non-focus) state has been added for.gh-post-preview-email-header .gh-input-xto change the background tovar(--grey-900). This provides clear user feedback on interaction while maintaining consistency with other hover states.
865-868: Newsletter Trigger State Styling
The new rules for.gh-preview-newsletter-trigger.gh-input-x.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true]and the focus state ensure that the background color remainsvar(--grey-850). This makes the interactive states predictable, which is particularly important in dropdown contexts.
870-872: Divider in Email Header
Updating the<hr>element within the email header to useborder-color: var(--midlightgrey-d2)aligns it with the overall color palette, enhancing visual harmony.
874-876: Preview New Tab Hover Effect
The hover state for.gh-publish-preview-newtabnow usesbackground: var(--grey-900), providing a consistent interactive effect with other elements.
878-880: Content Filter Divider Update
The updated styling for.gh-contentfilter-dividersets the background tovar(--midlightgrey-d1), which should better delineate content sections.
882-884: Button Group Text Color in Preview
The rule for.gh-post-preview-btn-group .gh-btn-group span:not(.gh-btn-group .gh-btn-group-selected span)now sets the text color tovar(--middarkgrey), ensuring a clear differentiation between selected and non-selected states within the button group.
886-888: SVG Icon Color in Preview Mode
Adjusting the color of SVG icons within.gh-post-preview-modetovar(--middarkgrey)provides improved visual integration with the surrounding text and elements.
894-897: Web Preview Segment Default Styling
The.gh-select.gh-web-preview-segmentand its trigger now have a transparent background by default, preparing them for a dynamic hover state. This minimalist approach can help the component integrate more seamlessly into different layouts.
899-901: Web Preview Segment Hover State
On hover, the background changes tovar(--grey-900), providing a clear interactive cue. This change should be tested to ensure that the transparency-to-solid transition feels smooth for users.
903-905: Dropdown Options Background Update
The dropdown options within.gh-preview-segment-dropdownnow usebackground: var(--grey-950). This darker shade should help the options stand out against the rest of the modal.
907-910: Dropdown Option Hover and Selection
The hover state (and current selection) for options in the preview segment dropdown is updated tobackground: var(--grey-900), ensuring that interactive states are immediately noticeable.
912-915: Email Trigger Default Style
The.gh-post-preview-email-triggeris styled to have a transparent background and a transparent border by default. This unobtrusive styling is ideal for elements that should only show borders or backgrounds on interaction.
1591-1594: Dropdown Trigger Expanded/Focus Styling
The rule for.gh-input-x.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true]along with its focus state now enforcesbackground-color: var(--grey-900). This adjustment ensures that the element’s state is prominently visible when active.
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design - Combined copy and open in new tab actions into a dropdown to make it less cluttered and ambiguous
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
ghost/admin/app/components/editor/modals/preview.hbs (1)
46-68: Add visual feedback for copy action.Consider adding a success toast or temporary button state change when the preview URL is copied to provide user feedback.
- <button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-btn gh-btn-icon gh-btn-preview gh-post-copy-url"> - <span>{{svg-jar "link"}}Copy draft link</span> - </button> + <button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-btn gh-btn-icon gh-btn-preview gh-post-copy-url" disabled={{this.copyPreviewUrl.isRunning}}> + <span>{{svg-jar "link"}}{{if this.copyPreviewUrl.isRunning "Copied!" "Copy draft link"}}</span> + </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
ghost/admin/public/assets/icons/copy.svgis excluded by!**/*.svgghost/admin/public/assets/icons/external.svgis excluded by!**/*.svgghost/admin/public/assets/icons/share.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
ghost/admin/app/components/editor/modals/preview.hbs(2 hunks)ghost/admin/app/styles/app-dark.css(5 hunks)ghost/admin/app/styles/layouts/post-preview.css(10 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- ghost/admin/app/styles/layouts/post-preview.css
⏰ Context from checks skipped due to timeout of 90000ms (11)
- GitHub Check: Database tests (Node 20.11.1, sqlite3)
- GitHub Check: Regression tests (Node 20.11.1, sqlite3)
- GitHub Check: Database tests (Node 20.11.1, mysql8)
- GitHub Check: Regression tests (Node 20.11.1, mysql8)
- GitHub Check: Ghost-CLI tests
- GitHub Check: Database tests (Node 18.12.1, mysql8)
- GitHub Check: Admin-X Settings tests
- GitHub Check: Unit tests (Node 20.11.1)
- GitHub Check: Unit tests (Node 18.12.1)
- GitHub Check: Lint
- GitHub Check: Admin tests - Chrome
🔇 Additional comments (31)
ghost/admin/app/styles/app-dark.css (27)
261-264: Consistent Border and Text Color for Button Styling
The new style ensures that buttons (excluding several variants) now consistently use a1pxborder withvar(--grey-900)and the text color is set tovar(--black). This improves visual uniformity across button components.
266-269: Button Hover State Update
The hover styling for these buttons has been updated to apply a background ofvar(--lightgrey-d1)while keeping the text color consistent. This subtle update aligns with the enhanced design language.
391-393: Publish Header Button Hover Effect
The hover state for buttons in the publish header now usesbackground: var(--grey-900) !important. Please verify that the use of!importantis essential and does not lead to unintended overrides in other contexts.
781-783: Editor Button Base Styling Enhancement
The.gh-btn-editornow has a background set tovar(--white), which should improve contrast in the editor environment. This change appears to support a cleaner look consistent with the overall theme.
785-789: Editor Button Hover State Enhancement
On hover, the.gh-btn-editoralongside related elements such as.gh-post-preview-urland.gh-post-preview-header .gh-btn-editornow switch to a background ofvar(--grey-900). This provides clear interactive feedback and is in line with design improvements.
846-850: Post Preview Modal Background Update
The background for.gh-post-preview-modal,.gh-post-preview-header, and.fullscreen-modal-total-overlay .gh-pe-mobile-containerhas been set tovar(--white). This should contribute to a clean and consistent modal presentation for post previews.
852-854: Email Preview Header Styling
The email header for post previews now usesbackground: var(--grey-925), providing a distinct and polished appearance that differentiates it from the main preview modal.
856-859: Email Header Input Field Styling
The input fields within the email header (.gh-post-preview-email-header .gh-input-x) now feature a background ofvar(--grey-850)with a transparent border. This modernizes the input appearance and enhances visual cohesion.
861-863: Input Field Hover State in Email Preview
When hovered (and not focused), the input field within the email header now updates its background tovar(--grey-900). This provides users with clear hover feedback while preserving design consistency.
865-868: Newsletter Trigger Focus and Expanded Styling
The newsletter trigger, when in its expanded or focused state (via dropdown trigger classes), now has its background-color updated tovar(--grey-850). This change supports a more uniform interactive experience.
870-872: Email Header Divider Styling
The<hr>element within the email header has been updated to useborder-color: var(--midlightgrey-d2), which complements the updated color scheme in this area.
874-876: Preview New Tab Button Hover Update
The hover state for the post preview new tab button now adoptsbackground: var(--grey-900), ensuring that this interactive element stays consistent with similar hover effects elsewhere in the interface.
878-880: Content Filter Divider Background Update
The content filter divider now features a background ofvar(--midlightgrey-d1), offering a subtle yet clear visual separation in layouts.
882-884: Post Preview Button Group Text Color Adjustment
The text color for spans within the post preview button group (excluding selected elements) has been updated tovar(--middarkgrey). This adjustment helps maintain a consistent and muted color scheme for inactive states.
886-888: Icon Color in Post Preview Mode
The SVG icons within.gh-post-preview-modenow adopt thevar(--middarkgrey)color, ensuring a cohesive look with the surrounding interactive elements.
890-892: Hover State for Post Preview Button Group
When hovering over spans in the post preview button group, the background now switches tovar(--grey-900) !important. Please confirm that the use of!importantis necessary to enforce this behavior without conflicting with other styles.
894-897: Web Preview Segment Base Styling
The base styling for.gh-select.gh-web-preview-segmentand its child trigger is now set to a transparent background. This allows for better integration with various container backgrounds in both web and mobile previews.
899-901: Web Preview Segment Hover State
On hover, the trigger within the web preview segment now updates its background tovar(--grey-900), thereby providing a clear interactive signal while adhering to the overall dark theme.
903-905: Dropdown Options for Preview Segment
The dropdown options in the preview segment now have a unified dark background (var(--grey-950)), which should improve the visual clarity when selecting different segments.
907-910: Dropdown Option Hover and Active State Styling
Hovering over dropdown options—or when an option is active (aria-current)—now results in abackground: var(--grey-900). This update creates a clearer, uniform feedback mechanism for user interactions.
912-915: Base Styling for Post Preview Email Trigger
The post preview email trigger now has a transparent background with a border set to transparent via!important, ensuring that it blends well with varying backgrounds until activated.
917-921: Email Trigger Hover & Open State Styling
When hovered or active (open), the email trigger updates tobackground: var(--grey-850)and a matching border. This consistent styling aids in signaling interactive status to the user.
923-925: Preview Button Border Update
The preview button now explicitly sets its border color tovar(--grey-900), reinforcing visual consistency across preview-related controls.
927-929: Preview Button Hover State Enhancement
The hover state for.gh-btn.gh-btn-previewnow applies a background ofvar(--grey-900), mirroring similar interactive elements for a unified experience.
931-934: Tooltip Background and Text Color Update
The tooltip triggered by.gh-tooltip-triggernow usesbackground: var(--grey-900)and sets the text color tovar(--black), ensuring optimal readability in dark mode.
936-938: Shortcut Key Tooltip Background Styling
The background for shortcut key hints within tooltips has been updated tovar(--grey-950), better delineating them from other tooltip elements.
1608-1611: Input Focus State for Dropdown Triggers
For input fields acting as dropdown triggers (.gh-input-xwith specific classes), the focus state now usesbackground-color: var(--grey-900), which enhances consistency with other focus indicators in the UI.ghost/admin/app/components/editor/modals/preview.hbs (4)
1-5: Great improvements to modal structure!The changes enhance accessibility by adding a proper heading and follow BEM naming conventions with the
gh-post-preview-modalclass.
7-14: Improved button labeling for better clarity!The change from icon-only to text labels ("Web" and "Email") improves accessibility and user understanding.
97-124: Clean preview rendering with proper error handling!The preview rendering logic properly handles loading states and different preview modes. The email preview includes proper error handling as previously verified.
21-43: Verify the PowerSelect onChange handler implementation.The PowerSelect component's
onChangeis set tothis.noop, which suggests the member type selection might not be functional yet.Run this script to check for member type selection handling:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for member type selection handling rg -A 5 "noop|memberTypeChanged|previewMemberType" --type jsLength of output: 27844
Member type selection in the preview modal is currently a no-op.
- In ghost/admin/app/components/editor/modals/preview.js, the
noop()method is defined as an empty function. This confirms that theonChangefor the PowerSelect remains a placeholder with no functionality.- Our search did not reveal any alternative handler (e.g.,
memberTypeChangedorpreviewMemberType), so the member type selection logic isn’t implemented yet.If member type selection functionality is expected in the future, you’ll need to replace the current
noopwith an actual implementation.
Ref https://linear.app/ghost/issue/PLG-343/improve-the-preview-modal-design