Editor: Multipage redesign (#11934)

GoogleForCreators · Jul 20, 2022 · 4a93ee5 · 4a93ee5
1 parent 4c50ff4
commit 4a93ee5
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 32 deletions.
diff --git 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
@@ -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) => (
-          <ExtraPage key={pageNum} extraPageWidth={extraPageWidth}>
+        {pagesToShow.map((pageNum, index) => (
+          <ExtraPage
+            key={pageNum}
+            extraPageWidth={extraPageWidth}
+            $inert={isAnythingTransforming}
+            $distance={index}
+          >
             <ExtraPagePreview
               page={pages[pageNum]}
               onClick={clickPage(pages[pageNum].id)}
@@ -145,7 +157,6 @@ function ExtraPages({ isPrevious = false }) {
                 pageNum + 1
               )}
               width={extraPageWidth - GAP}
-              height={extraPageHeight}
             />
           </ExtraPage>
         ))}

diff --git 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
@@ -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
@@ -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 (
     <UnitsProvider pageSize={{ width, height }}>
       <TransformProvider>
-        <Page ref={setPageRef} aria-label={label} {...props}>
+        <Page
+          ref={setPageRef}
+          aria-label={label}
+          height={fullHeight}
+          {...props}
+        >
           <PreviewWrapper background={backgroundColor}>
             {pageImage ? (
-              <Image src={pageImage} alt={label} decoding="async" />
+              <Image
+                draggable="false"
+                src={pageImage}
+                alt={label}
+                decoding="async"
+              />
             ) : (
-              page.elements.map((element) => (
-                <DisplayElement
-                  key={element.id}
-                  previewMode
-                  element={element}
-                />
-              ))
+              <PageOffset $top={pageYOffset}>
+                {page.elements.map((element) => (
+                  <DisplayElement
+                    key={element.id}
+                    previewMode
+                    element={element}
+                  />
+                ))}
+              </PageOffset>
             )}
           </PreviewWrapper>
         </Page>
@@ -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
@@ -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
@@ -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;