feat(presentation): combine viewport buttons into single toggle (#1392)

* feat(presentation): combine viewport buttons into single toggle * feat(presentation): localize viewport toggle
sanity-io · Jun 14, 2024 · b871987 · b871987
1 parent d6d8df7
commit b871987
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 32 deletions.
diff --git a/packages/presentation/src/i18n/resources.ts b/packages/presentation/src/i18n/resources.ts
@@ -74,14 +74,12 @@ export default {
   /** Text describing the current status of the preview frame */
   'preview-frame.status_timeout':
     'Unable to connect, check the browser console for more information.',
-  /** The `aria-label` for the button that switches to a full viewport */
-  'preview-frame.viewport-full-button.aria-label': 'Full viewport',
-  /** The tooltip text for the button that switches to a full viewport */
-  'preview-frame.viewport-full-button.tooltip': 'Full viewport',
-  /** The `aria-label` for the button that switches to a narrow viewport */
-  'preview-frame.viewport-narrow-button.aria-label': 'Narrow viewport',
-  /** The tooltip text for the button that switches to a narrow viewport */
-  'preview-frame.viewport-narrow-button.tooltip': 'Narrow viewport',
+  /** The `aria-label` for the button that switches viewport size */
+  'preview-frame.viewport-button.aria-label': 'Toggle viewport size',
+  /** The viewport size button tooltip text when switching to a full width viewport */
+  'preview-frame.viewport-button.tooltip_full': 'Switch to full viewport',
+  /** The viewport size button tooltip text when switching to a narrow viewport */
+  'preview-frame.viewport-button.tooltip_narrow': 'Switch to narrow viewport',
   /** The validation error message shown when the preview location input is missing an origin */
   'preview-location-input.error_missing-origin': 'URL must start with ${{origin}}',
   /** The validation error message shown when the preview location input's base path matches that of the studio */

diff --git a/packages/presentation/src/preview/PreviewFrame.tsx b/packages/presentation/src/preview/PreviewFrame.tsx
@@ -120,6 +120,10 @@ export const PreviewFrame = forwardRef<HTMLIFrameElement, PreviewFrameProps>(
     const {devMode} = usePresentationTool()
     const prefersReducedMotion = usePrefersReducedMotion()
 
+    const toggleViewportSize = useCallback(
+      () => setViewport(viewport === 'desktop' ? 'mobile' : 'desktop'),
+      [setViewport, viewport],
+    )
     const loading = iframe.status === 'loading' || iframe.status === 'reloading'
     const [timedOut, setTimedOut] = useState(false)
     const refreshing = iframe.status === 'refreshing'
@@ -480,42 +484,28 @@ export const PreviewFrame = forwardRef<HTMLIFrameElement, PreviewFrameProps>(
                 />
               </Flex>
 
-              <Flex align="center" flex="none" gap={1} padding={1}>
-                <Tooltip
-                  animate
-                  content={<Text size={1}>{t('preview-frame.viewport-full-button.tooltip')}</Text>}
-                  fallbackPlacements={['bottom-start']}
-                  padding={2}
-                  placement="bottom"
-                  portal
-                >
-                  <Button
-                    aria-label={t('preview-frame.viewport-full-button.aria-label')}
-                    fontSize={1}
-                    icon={DesktopIcon}
-                    mode="bleed"
-                    onClick={() => setViewport('desktop')}
-                    padding={2}
-                    selected={viewport === 'desktop'}
-                  />
-                </Tooltip>
+              <Flex align="center" flex="none" gap={1}>
                 <Tooltip
                   animate
                   content={
-                    <Text size={1}>{t('preview-frame.viewport-narrow-button.tooltip')}</Text>
+                    <Text size={1}>
+                      {t('preview-frame.viewport-button.tooltip', {
+                        context: viewport === 'desktop' ? 'narrow' : 'full',
+                      })}
+                    </Text>
                   }
+                  fallbackPlacements={['bottom-start']}
                   padding={2}
                   placement="bottom"
                   portal
                 >
                   <Button
-                    aria-label={t('preview-frame.viewport-narrow-button.aria-label')}
+                    aria-label={t('preview-frame.viewport-button.aria-label')}
                     fontSize={1}
-                    icon={MobileDeviceIcon}
+                    icon={viewport === 'desktop' ? MobileDeviceIcon : DesktopIcon}
                     mode="bleed"
-                    onClick={() => setViewport('mobile')}
+                    onClick={toggleViewportSize}
                     padding={2}
-                    selected={viewport === 'mobile'}
                   />
                 </Tooltip>
               </Flex>