Merge pull request #17873 from storybookjs/17808-fix-mobile-fullscreen

Fix mobile fullscreen UI
storybookjs · Apr 6, 2022 · e973eea · e973eea
2 parents 5698bd5 + c07e5d1
commit e973eea
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/lib/ui/src/app.tsx b/lib/ui/src/app.tsx
@@ -61,7 +61,13 @@ const App = React.memo<AppProps>(
     if (!width || !height) {
       content = <div />;
     } else if (width < 600) {
-      content = <Mobile {...props} viewMode={viewMode} options={layout} docsOnly={docsOnly} />;
+      content =
+        <Mobile
+          {...props}
+          viewMode={viewMode}
+          options={layout}
+          docsOnly={docsOnly}
+        />;
     } else {
       content = (
         <Desktop

diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
@@ -83,25 +83,28 @@ const Pane = styled.div<{ index: number; active: ActiveTabsType }>(
   }
 );
 
-const Panels = React.memo((({ children, active }) => (
-  <PanelsContainer>
+const Panels = React.memo((({ children, active, isFullscreen }) => (
+  <PanelsContainer isFullscreen={isFullscreen}>
     {Children.toArray(children).map((item, index) => (
       // eslint-disable-next-line react/no-array-index-key
       <Pane key={index} index={index} active={active}>
         {item}
       </Pane>
     ))}
   </PanelsContainer>
-)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode }>);
+)) as FunctionComponent<{ active: ActiveTabsType; children: ReactNode, isFullscreen: boolean }>);
 Panels.displayName = 'Panels';
 
-const PanelsContainer = styled.div({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '100vw',
-  height: 'calc(100% - 40px)',
-});
+const PanelsContainer = styled.div<{ isFullscreen: boolean }>(
+  {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+  }, ({ isFullscreen }) => ({
+    height: isFullscreen ? '100vh' : 'calc(100% - 40px)',
+  })
+);
 
 const Bar = styled.nav(
   {
@@ -132,6 +135,7 @@ export interface MobileProps {
   options: {
     initialActive: ActiveTabsType;
     isToolshown: boolean;
+    isFullscreen: boolean;
   };
   Sidebar: ComponentType<any>;
   Preview: ComponentType<any>;
@@ -172,7 +176,7 @@ class Mobile extends Component<MobileProps, MobileState> {
           }}
         />
 
-        <Panels active={active}>
+        <Panels active={active} isFullscreen={options.isFullscreen}>
           <Sidebar />
           <div>
             <div hidden={!viewMode}>
@@ -186,22 +190,24 @@ class Mobile extends Component<MobileProps, MobileState> {
           </div>
           <Panel hidden={!viewMode} />
         </Panels>
-        <Bar>
-          <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
-            Sidebar
-          </TabButton>
-          <TabButton onClick={() => this.setState({ active: CANVAS })} active={active === CANVAS}>
-            {viewMode ? 'Canvas' : null}
-            {pages.map(({ key, route: Route }) => (
-              <Route key={key}>{key}</Route>
-            ))}
-          </TabButton>
-          {viewMode && !docsOnly ? (
-            <TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
-              Addons
+        {!options.isFullscreen && (
+          <Bar>
+            <TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
+              Sidebar
+            </TabButton>
+            <TabButton onClick={() => this.setState({ active: CANVAS })} active={active === CANVAS}>
+              {viewMode ? 'Canvas' : null}
+              {pages.map(({ key, route: Route }) => (
+                <Route key={key}>{key}</Route>
+              ))}
             </TabButton>
-          ) : null}
-        </Bar>
+            {viewMode && !docsOnly ? (
+              <TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
+                Addons
+              </TabButton>
+            ) : null}
+          </Bar>
+        )}
       </Root>
     );
   }

diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
@@ -56,15 +56,13 @@ export const fullScreenTool: Addon = {
     <Consumer filter={fullScreenMapper}>
       {({ toggle, value, shortcut, hasPanel, singleStory }) =>
         (!singleStory || (singleStory && hasPanel)) && (
-          <S.DesktopOnly>
-            <IconButton
-              key="full"
-              onClick={toggle as any}
-              title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
-            >
-              <Icons icon={value ? 'close' : 'expand'} />
-            </IconButton>
-          </S.DesktopOnly>
+          <IconButton
+            key="full"
+            onClick={toggle as any}
+            title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
+          >
+            <Icons icon={value ? 'close' : 'expand'} />
+          </IconButton>
         )
       }
     </Consumer>