[desk-tool] Add support for collapse/expand

sanity-io · Oct 6, 2020 · c5830c2 · c5830c2
1 parent 06b7d82
commit c5830c2
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx
@@ -37,6 +37,7 @@ interface DocumentPaneProps {
 // eslint-disable-next-line complexity
 export function DocumentPane(props: DocumentPaneProps) {
   const {
+    connectionState,
     documentId,
     documentIdRaw,
     documentType,
@@ -47,10 +48,8 @@ export function DocumentPane(props: DocumentPaneProps) {
     markers,
     menuItemGroups = [],
     onChange,
-    // onCollapse,
-    connectionState,
-    // onExpand,
-    // options,
+    onCollapse,
+    onExpand,
     paneKey,
     title: paneTitle,
     schemaType,
@@ -143,6 +142,8 @@ export function DocumentPane(props: DocumentPaneProps) {
           menuItemGroups={menuItemGroups}
           onChange={onChange}
           onCloseView={handleClosePane}
+          onCollapse={onCollapse}
+          onExpand={onExpand}
           onSetActiveView={handleSetActiveView}
           onSplitPane={handleSplitPane}
           paneTitle={paneTitle}
@@ -153,7 +154,7 @@ export function DocumentPane(props: DocumentPaneProps) {
         />
       </div>
 
-      {isHistoryOpen && (
+      {!isCollapsed && isHistoryOpen && (
         <div className={styles.changesContainer}>
           <ChangesPanel documentId={documentId} schemaType={schemaType} />
         </div>

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css
@@ -7,16 +7,27 @@
 
 .headerContainer {
   background: #fff;
-  border-bottom: 1px solid #ddd;
+
+  @nest .root:not(.isCollapsed) & {
+    border-bottom: 1px solid #ddd;
+  }
 }
 
 .documentViewerContainer {
   flex: 1;
   min-height: 0;
   overflow: auto;
+
+  @nest .isCollapsed & {
+    display: none;
+  }
 }
 
 .footerContainer {
   background: #fff;
   border-top: 1px solid #ddd;
+
+  @nest .isCollapsed & {
+    display: none;
+  }
 }
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import Snackbar from 'part:@sanity/components/snackbar/default'
 import React, {createElement, useCallback, useMemo, useRef} from 'react'
 import {useDocumentHistory} from '../documentHistory'
@@ -26,6 +27,8 @@ interface DocumentPanelProps {
   menuItemGroups: MenuItemGroup[]
   onChange: (patches: any[]) => void
   onCloseView: () => void
+  onCollapse?: () => void
+  onExpand?: () => void
   onSetActiveView: (id: string | null) => void
   onSplitPane: () => void
   paneTitle?: string
@@ -87,7 +90,7 @@ export function DocumentPanel(props: DocumentPanelProps) {
   )
 
   return (
-    <div className={styles.root}>
+    <div className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
       <div className={styles.headerContainer}>
         <DocumentPanelHeader
           activeViewId={props.activeViewId}
@@ -98,7 +101,9 @@ export function DocumentPanel(props: DocumentPanelProps) {
           menuItemGroups={props.menuItemGroups}
           menuItems={menuItems}
           onCloseView={props.onCloseView}
+          onCollapse={props.onCollapse}
           onContextMenuAction={handleContextMenuAction}
+          onExpand={props.onExpand}
           onSetActiveView={props.onSetActiveView}
           onSplitPane={props.onSplitPane}
           schemaType={props.schemaType}

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.css b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.css
@@ -13,19 +13,38 @@
   min-width: 0;
   padding: 1em;
   line-height: 17px;
+  cursor: default;
+
+  @nest .isCollapsed & {
+    transform: rotate(90deg);
+    transform-origin: calc(49px / 2) calc(49px / 2);
+    min-width: 100vh;
+  }
 }
 
 .paneFunctions {
   padding: 8px;
+
+  @nest .isCollapsed & {
+    display: none;
+  }
 }
 
 .contextMenuContainer {
   padding: 8px;
+
+  @nest .isCollapsed & {
+    display: none;
+  }
 }
 
 .viewNav {
   margin-top: calc(0 - var(--small-padding));
   display: flex;
+
+  @nest .isCollapsed & {
+    display: none;
+  }
 }
 
 .tabsContainer {

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import {negate} from 'lodash'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import SplitHorizontalIcon from 'part:@sanity/base/split-horizontal-icon'
@@ -21,6 +22,8 @@ export interface DocumentPanelHeaderProps {
   menuItemGroups: MenuItemGroup[]
   onCloseView: () => void
   onContextMenuAction: (action: MenuAction) => void
+  onCollapse?: () => void
+  onExpand?: () => void
   onSetActiveView: (id: string | null) => void
   onSplitPane: () => void
   schemaType: any
@@ -58,10 +61,15 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
     setValidationOpen(!isValidationOpen)
   }, [isValidationOpen])
 
+  const handleTitleClick = useCallback(() => {
+    if (props.isCollapsed && props.onExpand) props.onExpand()
+    if (!props.isCollapsed && props.onCollapse) props.onCollapse()
+  }, [props.isCollapsed, props.onExpand, props.onCollapse])
+
   return (
-    <div className={styles.root}>
+    <div className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
       <div className={styles.mainNav}>
-        <div className={styles.title}>
+        <div className={styles.title} onClick={handleTitleClick}>
           <strong>{props.title}</strong>
         </div>