diff --git a/packages/story-editor/src/app/layout/useZoomSetting.js b/packages/story-editor/src/app/layout/useZoomSetting.js index 2b271e730bfb..c31a8ef7d52b 100644 --- a/packages/story-editor/src/app/layout/useZoomSetting.js +++ b/packages/story-editor/src/app/layout/useZoomSetting.js @@ -32,6 +32,7 @@ import { ZOOM_SETTING, PAGE_NAV_WIDTH, PAGE_WIDTH_FACTOR, + MAX_EXTRA_PAGES, } from '../../constants'; // Beware, that these are slightly magic numbers, that just happens to look good @@ -167,7 +168,7 @@ function calculateViewportProperties(workspaceSize, zoomSetting, zoomLevel) { const extraPageWidth = Math.round(0.9 * pageWidth); const hasExtraPages = !hasAnyOverflow && hasPageNavigation && extraSpace > 50; const extraPageCount = hasExtraPages - ? Math.ceil(extraSpace / extraPageWidth) + ? Math.min(MAX_EXTRA_PAGES, Math.ceil(extraSpace / extraPageWidth)) : 0; return { pageWidth, diff --git a/packages/story-editor/src/components/canvas/extraPages.js b/packages/story-editor/src/components/canvas/extraPages.js index 2bf9356a6e31..ab3668a77740 100644 --- a/packages/story-editor/src/components/canvas/extraPages.js +++ b/packages/story-editor/src/components/canvas/extraPages.js @@ -23,6 +23,7 @@ import { PAGE_RATIO } from '@googleforcreators/units'; import PropTypes from 'prop-types'; import { __, sprintf } from '@googleforcreators/i18n'; import { useFeature } from 'flagged'; +import { useTransform } from '@googleforcreators/transform'; /** * Internal dependencies @@ -44,7 +45,6 @@ const ExtraPageList = styled.ol` display: flex; flex-direction: ${({ isPrevious }) => (isPrevious ? 'row-reverse' : 'row')}; width: ${({ listWidth }) => listWidth}px; - height: ${({ extraPageHeight }) => extraPageHeight}px; margin: 0; padding: 0 ${GAP}px; gap: ${GAP}px; @@ -56,11 +56,14 @@ const ExtraPage = styled.li` border-radius: 4px; background-color: white; - opacity: 0.5; + // First extra page is at 60% opacity, then 45, 30, and 15 + opacity: ${({ $distance }) => 0.6 - $distance * 0.15}; transition: opacity 0.2s ease; &:hover { opacity: 1; } + + ${({ $inert }) => $inert && 'pointer-events: none;'} `; const ExtraPagePreview = styled(PagePreview)` cursor: pointer; @@ -107,6 +110,10 @@ function ExtraPages({ isPrevious = false }) { extraPageCount, }) ); + const isAnythingTransforming = useTransform( + ({ state: { isAnythingTransforming } }) => isAnythingTransforming + ); + const isExtraPagesEnabled = useFeature('extraPages'); const pageCount = pages?.length; if (!pageCount || !isExtraPagesEnabled) { @@ -134,8 +141,13 @@ function ExtraPages({ isPrevious = false }) { listWidth={listWidth} extraPageHeight={extraPageHeight} > - {pagesToShow.map((pageNum) => ( - + {pagesToShow.map((pageNum, index) => ( + ))} diff --git a/packages/story-editor/src/components/footer/carousel/constants.js b/packages/story-editor/src/components/footer/carousel/constants.js index 2a9a03ffe0ff..15508d86248b 100644 --- a/packages/story-editor/src/components/footer/carousel/constants.js +++ b/packages/story-editor/src/components/footer/carousel/constants.js @@ -32,9 +32,9 @@ export const DRAWER_BUTTON_GAP_COLLAPSED = 2; // Thumbnail size varies with available carousel size - over or under this limit export const WIDE_CAROUSEL_LIMIT = 400; -export const WIDE_THUMBNAIL_WIDTH = 40; -export const WIDE_THUMBNAIL_HEIGHT = 60; +export const WIDE_THUMBNAIL_WIDTH = 45; +export const WIDE_THUMBNAIL_HEIGHT = 80; export const NARROW_THUMBNAIL_WIDTH = 36; -export const NARROW_THUMBNAIL_HEIGHT = 54; +export const NARROW_THUMBNAIL_HEIGHT = 64; export const THUMBNAIL_MARGIN = 16; export const THUMBNAIL_LINE_WIDTH = 4; diff --git a/packages/story-editor/src/components/footer/gridview/gridView.js b/packages/story-editor/src/components/footer/gridview/gridView.js index b7174dcc3bb8..816fa1617a5b 100644 --- a/packages/story-editor/src/components/footer/gridview/gridView.js +++ b/packages/story-editor/src/components/footer/gridview/gridView.js @@ -26,7 +26,7 @@ import { useResizeEffect, } from '@googleforcreators/react'; import { __, sprintf } from '@googleforcreators/i18n'; -import { PAGE_RATIO } from '@googleforcreators/units'; +import { FULLBLEED_RATIO } from '@googleforcreators/units'; import { Slider, Button, @@ -177,7 +177,7 @@ function GridView({ onClose }) { const pageGridGap = Math.floor( (availableWidth - actualPageWidths) / (pagesPerRow - 1) ); - const pageHeight = pageWidth / PAGE_RATIO; + const pageHeight = pageWidth / FULLBLEED_RATIO; const handleClickPage = (page) => () => setCurrentPage({ pageId: page.id }); diff --git a/packages/story-editor/src/components/footer/pagepreview/index.js b/packages/story-editor/src/components/footer/pagepreview/index.js index 30f579994524..8a67fcd3862f 100644 --- a/packages/story-editor/src/components/footer/pagepreview/index.js +++ b/packages/story-editor/src/components/footer/pagepreview/index.js @@ -21,7 +21,11 @@ import styled, { css } from 'styled-components'; import { rgba } from 'polished'; import PropTypes from 'prop-types'; import { generatePatternStyles } from '@googleforcreators/patterns'; -import { UnitsProvider } from '@googleforcreators/units'; +import { + PAGE_RATIO, + FULLBLEED_RATIO, + UnitsProvider, +} from '@googleforcreators/units'; import { useState, useEffect, @@ -81,6 +85,11 @@ const Page = styled.button` `} `; +const PageOffset = styled.div` + position: relative; + top: ${({ $top }) => $top}px; +`; + const PreviewWrapper = styled.div` height: 100%; position: relative; @@ -105,7 +114,11 @@ const Image = styled.img` function PagePreview({ page, label, ...props }) { const { backgroundColor } = page; - const { width, height, isActive } = props; + const { width, isActive } = props; + + const height = Math.round(width / PAGE_RATIO); + const fullHeight = Math.round(width / FULLBLEED_RATIO); + const pageYOffset = (fullHeight - height) / 2; const { pageCanvas, generateDeferredPageCanvas } = usePageCanvas( ({ state, actions }) => ({ @@ -130,13 +143,10 @@ function PagePreview({ page, label, ...props }) { // Grab image off of canvas if we got a canvas // from the cache - const pageImage = useMemo(() => { - if (!pageCanvas) { - return null; - } - - return pageCanvas.toDataURL('image/png'); - }, [pageCanvas]); + const pageImage = useMemo( + () => pageCanvas?.toDataURL('image/png'), + [pageCanvas] + ); usePerformanceTracking({ node: pageNode, @@ -146,18 +156,30 @@ function PagePreview({ page, label, ...props }) { return ( - + {pageImage ? ( - {label} + {label} ) : ( - page.elements.map((element) => ( - - )) + + {page.elements.map((element) => ( + + ))} + )} @@ -170,7 +192,6 @@ PagePreview.propTypes = { page: StoryPropTypes.page.isRequired, label: PropTypes.string, width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, isInteractive: PropTypes.bool, isActive: PropTypes.bool, tabIndex: PropTypes.number, diff --git a/packages/story-editor/src/components/thumbnail/constants.js b/packages/story-editor/src/components/thumbnail/constants.js index 2da68794c293..7942a5be2b33 100644 --- a/packages/story-editor/src/components/thumbnail/constants.js +++ b/packages/story-editor/src/components/thumbnail/constants.js @@ -19,8 +19,8 @@ import { __ } from '@googleforcreators/i18n'; export const THUMBNAIL_DIMENSIONS = { - WIDTH: 52, - HEIGHT: 78, + WIDTH: 54, + HEIGHT: 96, NESTED_ICON: 32, THUMBNAIL_SHAPE: 36, }; diff --git a/packages/story-editor/src/constants/index.js b/packages/story-editor/src/constants/index.js index 2f07319172cd..2b1b5eaeb7db 100644 --- a/packages/story-editor/src/constants/index.js +++ b/packages/story-editor/src/constants/index.js @@ -46,6 +46,7 @@ export const CAROUSEL_STATE = { export const CAROUSEL_TRANSITION_DURATION = 300; export const PAGE_WIDTH_FACTOR = 12; +export const MAX_EXTRA_PAGES = 4; export const DESIGN_SPACE_MARGIN = 48;