make UX of closing sidebar button nicer

WorldBrain · May 11, 2024 · 6a48caf · 6a48caf
1 parent dd08b22
commit 6a48caf
Showing 1 changed file with 94 additions and 38 deletions.
diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
@@ -71,6 +71,8 @@ import { PageSearchCopyPaster } from 'src/copy-paster'
 import BulkEditCopyPaster from 'src/copy-paster/BulkEditCopyPaster'
 import { OverlayModals } from '@worldbrain/memex-common/lib/common-ui/components/overlay-modals'
 import IconBox from '@worldbrain/memex-common/lib/common-ui/components/icon-box'
+import { TooltipBox } from '@worldbrain/memex-common/lib/common-ui/components/tooltip-box'
+import KeyboardShortcuts from '@worldbrain/memex-common/lib/common-ui/components/keyboard-shortcuts'
 
 export type Props = DashboardDependencies & {
     getRootElement: () => HTMLElement
@@ -517,30 +519,43 @@ export class DashboardContainer extends StatefulUIElement<
                     />
                 </SearchSection>
 
-                <RightHeader>
-                    {!this.props.inPageMode && (
-                        <ActionWrapper>
-                            <PrimaryAction
-                                onClick={() =>
-                                    this.processEvent(
-                                        'setSyncStatusMenuDisplayState',
-                                        {
-                                            isShown: syncMenu.isDisplayed,
-                                        },
-                                    )
-                                }
-                                size={'medium'}
-                                icon={getSyncStatusIcon(syncStatusIconState)}
-                                type={'tertiary'}
-                                iconColor={getSyncIconColor(
-                                    syncStatusIconState,
-                                )}
-                                spinningIcon={syncStatusIconState === 'yellow'}
-                                innerRef={this.syncStatusButtonRef}
-                            />
-                        </ActionWrapper>
-                    )}
-                    <>
+                <RightHeader notesSidebarShown={this.state.isNoteSidebarShown}>
+                    <LeftSideRightHeader>
+                        {!this.props.inPageMode && (
+                            <ActionWrapper>
+                                <TooltipBox
+                                    tooltipText={'Sync Status'}
+                                    placement="bottom"
+                                    getPortalRoot={this.props.getRootElement}
+                                >
+                                    <PrimaryAction
+                                        onClick={() =>
+                                            this.processEvent(
+                                                'setSyncStatusMenuDisplayState',
+                                                {
+                                                    isShown:
+                                                        syncMenu.isDisplayed,
+                                                },
+                                            )
+                                        }
+                                        size={'medium'}
+                                        icon={getSyncStatusIcon(
+                                            syncStatusIconState,
+                                        )}
+                                        type={'tertiary'}
+                                        iconColor={getSyncIconColor(
+                                            syncStatusIconState,
+                                        )}
+                                        spinningIcon={
+                                            syncStatusIconState === 'yellow'
+                                        }
+                                        innerRef={this.syncStatusButtonRef}
+                                        padding="6px"
+                                    />
+                                    {this.renderStatusMenu(syncStatusIconState)}
+                                </TooltipBox>
+                            </ActionWrapper>
+                        )}
                         <Icon
                             onClick={() =>
                                 this.props.inPageMode
@@ -551,18 +566,37 @@ export class DashboardContainer extends StatefulUIElement<
                             padding={'6px'}
                             filePath={icons.settings}
                         />
-                        {this.renderStatusMenu(syncStatusIconState)}
-                        {this.state.isNoteSidebarShown && (
-                            <Icon
-                                icon="arrowRight"
-                                heightAndWidth="22px"
-                                padding="6px"
-                                onClick={() =>
-                                    this.notesSidebarRef.current.hideSidebar()
+                    </LeftSideRightHeader>
+                    {this.state.isNoteSidebarShown && (
+                        <RightSideRightHeader>
+                            <TooltipBox
+                                tooltipText={
+                                    <TooltipContent>
+                                        Close Sidebar
+                                        <KeyboardShortcuts
+                                            size={'small'}
+                                            keys={['Esc']}
+                                            getRootElement={
+                                                this.props.getRootElement
+                                            }
+                                        />
+                                    </TooltipContent>
                                 }
-                            />
-                        )}
-                    </>
+                                placement="bottom"
+                                getPortalRoot={this.props.getRootElement}
+                            >
+                                <PrimaryAction
+                                    icon="arrowRight"
+                                    padding="6px"
+                                    onClick={() =>
+                                        this.notesSidebarRef.current.hideSidebar()
+                                    }
+                                    type="glass"
+                                    size="medium"
+                                />
+                            </TooltipBox>
+                        </RightSideRightHeader>
+                    )}
                 </RightHeader>
             </HeaderContainer>
         )
@@ -1964,7 +1998,6 @@ export class DashboardContainer extends StatefulUIElement<
                                 )
                             }
                             onNotesSidebarClose={() => {
-                                console.log('onnotes close')
                                 this.processEvent('toggleNoteSidebarOff', null)
                                 this.processEvent('setActivePage', {
                                     activeDay: undefined,
@@ -2534,19 +2567,27 @@ const SearchSection = styled(Margin)`
     }
 `
 
-const RightHeader = styled.div`
+const RightHeader = styled.div<{
+    notesSidebarShown: boolean
+}>`
     width: min-content;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     flex: 1;
     position: absolute;
     right: 30px;
-    grid-gap: 10px;
+    grid-gap: 15px;
 
     @media screen and (max-width: 900px) {
         right: 15px;
     }
+
+    ${(props) =>
+        props.notesSidebarShown &&
+        css`
+            right: 10px;
+        `}
 `
 
 const InPageBackground = styled.div`
@@ -2562,3 +2603,18 @@ const InPageBackground = styled.div`
     position: fixed;
     z-index: 10000;
 `
+
+const TooltipContent = styled.div`
+    display: flex;
+    align-items: center;
+    grid-gap: 10px;
+    flex-direction: row;
+    justify-content: center;
+`
+
+const LeftSideRightHeader = styled.div`
+    display: flex;
+    align-items: center;
+    grid-gap: 5px;
+`
+const RightSideRightHeader = styled.div``