frontend: hide sidebar during setup

Tadashi Jeffrey Okazaki · Tadashi Jeffrey Okazaki · commit ea756e04149a · 2019-09-19T14:11:09.000+09:00
diff --git a/frontends/web/src/components/backups/backups.css b/frontends/web/src/components/backups/backups.css
@@ -9,7 +9,7 @@
 
 .listContainer {
     margin-top: var(--space-default);
-    max-height: 480px;
+    max-height: 380px;
     overflow: scroll;
 }
 
diff --git a/frontends/web/src/components/devices/bitbox02/bitbox02.tsx b/frontends/web/src/components/devices/bitbox02/bitbox02.tsx
@@ -34,7 +34,7 @@ import { store as panelStore } from '../../guide/guide';
 import { SwissMadeOpenSource } from '../../icon/logo';
 import { Footer } from '../../layout/footer';
 import { Header } from '../../layout/header';
-import { toggleForceHide } from '../../sidebar/sidebar';
+import { setSidebarStatus } from '../../sidebar/sidebar';
 import Status from '../../status/status';
 import WaitDialog from '../../wait-dialog/wait-dialog';
 import { BackupsV2 } from './backups';
@@ -108,8 +108,9 @@ class BitBox02 extends Component<Props, State> {
     private unsubscribe!: () => void;
 
     public componentWillMount() {
-        if (!panelStore.state.forceHiddenSidebar) {
-            toggleForceHide();
+        const { sidebarStatus } = panelStore.state;
+        if (['', 'forceCollapsed'].includes(sidebarStatus)) {
+            setSidebarStatus('forceHidden');
         }
     }
 
@@ -156,12 +157,13 @@ class BitBox02 extends Component<Props, State> {
     }
 
     private onStatusChanged = () => {
-        const { showWizard, unlockOnly } = this.state;
+        const { showWizard, unlockOnly, appStatus } = this.state;
+        const { sidebarStatus } = panelStore.state;
         apiGet(this.apiPrefix() + '/status').then(status => {
-            if (status !== 'initialized' && !panelStore.state.forceHiddenSidebar) {
-                toggleForceHide();
-            } else if (status === 'initialized' && panelStore.state.forceHiddenSidebar) {
-                toggleForceHide();
+            if (status !== 'initialized' && ['', 'forceCollapsed'].includes(sidebarStatus)) {
+                setSidebarStatus('forceHidden');
+            } else if (status === 'initialized' && !['createWallet', 'restoreBackup'].includes(appStatus) && sidebarStatus !== '') {
+                setSidebarStatus('');
             }
             if (!showWizard && ['connected', 'unpaired', 'pairingFailed', 'uninitialized', 'seeded'].includes(status)) {
                 this.setState({ showWizard: true });
@@ -183,8 +185,9 @@ class BitBox02 extends Component<Props, State> {
     }
 
     public componentWillUnmount() {
-        if (this.state.status === 'initialized' && panelStore.state.forceHiddenSidebar) {
-            toggleForceHide();
+        const { sidebarStatus } = panelStore.state;
+        if (this.state.status === 'initialized' && ['forceHidden', 'forceCollapsed'].includes(sidebarStatus)) {
+            setSidebarStatus('');
         }
         this.unsubscribe();
     }
@@ -514,7 +517,7 @@ class BitBox02 extends Component<Props, State> {
                                                     Continue
                                                 </Button>
                                                 <Button
-                                                    secondary
+                                                    transparent
                                                     onClick={() => this.setState({ appStatus: '' })}>
                                                     Go Back
                                                 </Button>
diff --git a/frontends/web/src/components/guide/guide.tsx b/frontends/web/src/components/guide/guide.tsx
@@ -26,14 +26,14 @@ import * as style from './guide.css';
 export interface SharedProps {
     shown: boolean;
     activeSidebar: boolean;
-    forceHiddenSidebar: boolean;
+    sidebarStatus: string;
     guideExists: boolean;
 }
 
 export const store = new Store<SharedProps>({
     shown: false,
     activeSidebar: false,
-    forceHiddenSidebar: false,
+    sidebarStatus: '',
     guideExists: false,
 });
 
diff --git a/frontends/web/src/components/layout/header.css b/frontends/web/src/components/layout/header.css
@@ -82,6 +82,10 @@
     width: 20px;
 }
 
+.forceHidden .sidebarToggler {
+    display: none !important;
+}
+
 .guideIconContainer {
     margin-left: var(--space-half);
 }
diff --git a/frontends/web/src/components/layout/header.tsx b/frontends/web/src/components/layout/header.tsx
@@ -29,12 +29,11 @@ interface HeaderProps {
 type Props = HeaderProps & SharedPanelProps;
 
 function Header(
-    { title, narrow, children, guideExists, shown }: RenderableProps<Props>,
+    { title, narrow, children, guideExists, shown, sidebarStatus }: RenderableProps<Props>,
 ): JSX.Element {
     const hasChildren = Array.isArray(children) && children.length > 0;
-    const forceCollapsed = panelStore.state.forceHiddenSidebar;
     return (
-        <div className={[style.container, forceCollapsed ? style.forceCollapsed : ''].join(' ')}>
+        <div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
             <div className={[style.header, narrow ? style.narrow : ''].join(' ')}>
                 <div className={style.sidebarToggler} onClick={toggleSidebar}>
                     <img src={MenuIcon} />
@@ -46,14 +45,31 @@ function Header(
                         guideExists && (
                             shown ? (
                                 <a href="#" onClick={toggleGuide} className={style.guideIconContainer}>
-                                    <svg className={style.guideIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <svg
+                                        className={style.guideIcon}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round">
                                         <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                         <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                                     </svg>
                                 </a>
                             ) : (
                                 <a href="#" onClick={toggleGuide} className={style.guideIconContainer}>
-                                    <svg className={style.guideIcon} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <svg
+                                        className={style.guideIcon}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                         <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                                         <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                                     </svg>
diff --git a/frontends/web/src/components/sidebar/sidebar.tsx b/frontends/web/src/components/sidebar/sidebar.tsx
@@ -50,9 +50,8 @@ export function toggleSidebar() {
     panelStore.setState({ activeSidebar: toggled });
 }
 
-export function toggleForceHide() {
-    const toggleHide = !panelStore.state.forceHiddenSidebar;
-    panelStore.setState({ forceHiddenSidebar: toggleHide });
+export function setSidebarStatus(status: string) {
+    panelStore.setState({ sidebarStatus: status });
 }
 
 class Sidebar extends Component<Props> {
@@ -152,11 +151,12 @@ class Sidebar extends Component<Props> {
             accountsInitialized,
             shown,
             activeSidebar,
+            sidebarStatus,
         }: RenderableProps<Props>,
     ) {
-        const forceHide = panelStore.state.forceHiddenSidebar;
+        const hidden = ['forceHidden', 'forceCollapsed'].includes(sidebarStatus);
         return (
-            <div className={['sidebarContainer', forceHide ? 'forceHide' : ''].join(' ')}>
+            <div className={['sidebarContainer', hidden ? 'forceHide' : ''].join(' ')}>
                 <div className={['sidebarOverlay', activeSidebar ? 'active' : ''].join(' ')} onClick={toggleSidebar}></div>
                 <nav className={['sidebar', activeSidebar ? 'forceShow' : '', shown ? 'withGuide' : ''].join(' ')}>
                     <div className="sidebarLogoContainer">
diff --git a/frontends/web/src/routes/device/device.jsx b/frontends/web/src/routes/device/device.jsx
@@ -29,7 +29,7 @@ import SeedRestore from './setup/seed-restore';
 import { Initialize } from './setup/initialize';
 import Success from './setup/success';
 import Settings from './settings/settings';
-import { store as panelStore } from '../../components/guide/guide';
+import { setSidebarStatus } from '../../components/sidebar/sidebar';
 
 const DeviceStatus = Object.freeze({
     BOOTLOADER: 'bootloader',
@@ -100,10 +100,12 @@ export default class Device extends Component {
     onDeviceStatusChanged = () => {
         if (this.state.deviceRegistered) {
             apiGet('devices/' + this.props.deviceID + '/status').then(deviceStatus => {
-                this.setState({ deviceStatus });
                 if (deviceStatus === 'seeded') {
-                    panelStore.setState({ forceHiddenSidebar: false });
+                    setSidebarStatus('');
+                } else {
+                    setSidebarStatus('forceHidden');
                 }
+                this.setState({ deviceStatus });
             });
         }
     }
diff --git a/frontends/web/src/routes/device/waiting.tsx b/frontends/web/src/routes/device/waiting.tsx
@@ -20,7 +20,7 @@ import { Guide } from '../../components/guide/guide';
 import { store as panelStore } from '../../components/guide/guide';
 import { AppLogo, SwissMadeOpenSource } from '../../components/icon/logo';
 import { Footer, Header } from '../../components/layout';
-import { toggleForceHide } from '../../components/sidebar/sidebar';
+import { setSidebarStatus } from '../../components/sidebar/sidebar';
 import { load } from '../../decorators/load';
 import { translate, TranslateProps } from '../../decorators/translate';
 import { debug } from '../../utils/env';
@@ -35,8 +35,9 @@ type WaitingProps = TestingProps & TranslateProps;
 
 class Waiting extends Component<WaitingProps> {
     public componentWillMount() {
-        if (!panelStore.state.forceHiddenSidebar) {
-            toggleForceHide();
+        const { sidebarStatus } = panelStore.state;
+        if (sidebarStatus === '') {
+            setSidebarStatus('forceCollapsed');
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`
`10`	`10`	`.listContainer {`
`11`	`11`	`margin-top: var(--space-default);`
`12`		`- max-height: 480px;`
	`12`	`+ max-height: 380px;`
`13`	`13`	`overflow: scroll;`
`14`	`14`	`}`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -82,6 +82,10 @@`
`82`	`82`	`width: 20px;`
`83`	`83`	`}`
`84`	`84`
	`85`	`+.forceHidden .sidebarToggler {`
	`86`	`+ display: none !important;`
	`87`	`+}`
	`88`	`+`
`85`	`89`	`.guideIconContainer {`
`86`	`90`	`margin-left: var(--space-half);`
`87`	`91`	`}`