tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: improves live preview breakpoints and zoom options in dark mode (#4090)

Browse Source
This commit is contained in:
Quentin Beauperin
2023-11-16 06:10:33 -08:00
committed by GitHub
parent 191c13a409
commit b91711a74a
3 changed files with 90 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/payload/src/admin/components/views/LivePreview/Toolbar/Controls/index.scss
View File

@@ -51,4 +51,9 @@
justify-content: center;
padding: 6px 0;
}
.popup-button {
display: flex;
align-items: center;
}
}

102
packages/payload/src/admin/components/views/LivePreview/Toolbar/Controls/index.tsx
View File

@@ -2,13 +2,19 @@ import React from 'react'
import type { EditViewProps } from '../../../types'
import { X } from '../../../..'
import { Chevron, Popup, X } from '../../../..'
import * as PopupList from '../../../../elements/Popup/PopupButtonList'
import { ExternalLinkIcon } from '../../../../graphics/ExternalLink'
import { useLivePreviewContext } from '../../Context/context'
import { PreviewFrameSizeInput } from '../SizeInput'
import './index.scss'
const baseClass = 'live-preview-toolbar-controls'
const zoomOptions = [50,75,100,125,150,200]
const customOption = {
label: 'Custom', // TODO: Add i18n to this string
value: 'custom',
}
export const ToolbarControls: React.FC<EditViewProps> = () => {
const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =
@@ -17,23 +23,46 @@ export const ToolbarControls: React.FC<EditViewProps> = () => {
return (
<div className={baseClass}>
{breakpoints?.length > 0 && (
<select
<Popup
className={`${baseClass}__breakpoint`}
name="live-preview-breakpoint"
onChange={(e) => setBreakpoint(e.target.value)}
value={breakpoint}
>
{breakpoints.map((bp) => (
<option key={bp.name} value={bp.name}>
{bp.label}
</option>
))}
{breakpoint === 'custom' && (
// Dynamically add this option so that it only appears when the width and height inputs are explicitly changed
// TODO: Translate this string
<option value="custom">Custom</option>
button={(
<>
<span>{breakpoints.find(bp => bp.name == breakpoint)?.label ?? customOption.label}</span>
&nbsp;
<Chevron className={`${baseClass}__chevron`} />
</>
)}
</select>
render={({ close }) => (
<PopupList.ButtonGroup>
<React.Fragment>
{breakpoints.map((bp) => (
<PopupList.Button
key={bp.name}
active={bp.name == breakpoint}
onClick={() => {
setBreakpoint(bp.name)
close()
}}
>
{bp.label}
</PopupList.Button>
))}
{/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}
{breakpoint === 'custom' && (
<PopupList.Button active={breakpoint == customOption.value} onClick={() => {
setBreakpoint(customOption.value)
close()
}}>
{ customOption.label }
</PopupList.Button>
)}
</React.Fragment>
</PopupList.ButtonGroup>
)}
showScrollbar
verticalAlign="bottom"
horizontalAlign="right"
/>
)}
<div className={`${baseClass}__device-size`}>
<PreviewFrameSizeInput axis="x" />
@@ -42,18 +71,37 @@ export const ToolbarControls: React.FC<EditViewProps> = () => {
</span>
<PreviewFrameSizeInput axis="y" />
</div>
<select
<Popup
className={`${baseClass}__zoom`}
onChange={(e) => setZoom(Number(e.target.value) / 100)}
value={zoom * 100}
>
<option value={50}>50%</option>
<option value={75}>75%</option>
<option value={100}>100%</option>
<option value={125}>125%</option>
<option value={150}>150%</option>
<option value={200}>200%</option>
</select>
button={(
<>
<span>{zoom * 100}%</span>
&nbsp;
<Chevron className={`${baseClass}__chevron`} />
</>
)}
render={({close}) => (
<PopupList.ButtonGroup>
<React.Fragment>
{zoomOptions.map((zoomValue) => (
<PopupList.Button
key={zoomValue}
active={(zoom*100) == zoomValue}
onClick={() => {
setZoom(zoomValue / 100)
close()
}}
>
{zoomValue}%
</PopupList.Button>
))}
</React.Fragment>
</PopupList.ButtonGroup>
)}
showScrollbar
verticalAlign="bottom"
horizontalAlign="right"
/>
<a
className={`${baseClass}__external`}
href={url}

20
test/live-preview/e2e.spec.ts
View File

@@ -160,22 +160,22 @@ describe('Live Preview', () => {
await goToCollectionPreview(page)
expect(page.url()).toContain('/preview')
// Check that the breakpoint select is present
const breakpointSelector = page.locator(
'.live-preview-toolbar select[name="live-preview-breakpoint"]',
'.live-preview-toolbar-controls__breakpoint button.popup-button'
)
expect(breakpointSelector).toBeTruthy()
await breakpointSelector.selectOption({ label: mobileBreakpoint.label })
// check the select again to make sure the value has been set
// then check that the `label` is proper based on the config
// we already know the `name` is proper because its been selected
// Select the mobile breakpoint
await breakpointSelector.first().click()
await page.locator(`.live-preview-toolbar-controls__breakpoint button.popup-button-list__button`).filter({ hasText: mobileBreakpoint.label }).click()
// Make sure the value has been set
expect(breakpointSelector).toContainText(mobileBreakpoint.label)
const option = page.locator(
'.live-preview-toolbar select[name="live-preview-breakpoint"] option:checked',
'.live-preview-toolbar-controls__breakpoint button.popup-button-list__button--selected',
)
expect(option).toBeTruthy()
const optionLabel = await option.innerText()
expect(optionLabel).toBe(mobileBreakpoint.label)
expect(option).toHaveText(mobileBreakpoint.label)
// Measure the size of the iframe against the specified breakpoint
const iframe = page.locator('iframe')