[desk-tool] add container query to sparkline

sanity-io · Oct 6, 2020 · 7ee413d · 7ee413d
1 parent 3cb32f7
commit 7ee413d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 23 deletions.
diff --git a/packages/@sanity/components/src/containerQuery/containerQuery.tsx b/packages/@sanity/components/src/containerQuery/containerQuery.tsx
@@ -7,6 +7,8 @@ interface ContainerBreakpoint {
 }
 
 const CONTAINER_BREAKPOINTS: ContainerBreakpoint[] = [
+  {name: 'xsmall', minWidth: 220},
+  {name: 'small', minWidth: 320},
   {name: 'medium', minWidth: 512},
   {name: 'default', minWidth: 640},
   {name: 'large', minWidth: 960},

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentSparkline.css b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentSparkline.css
@@ -34,46 +34,62 @@
   background: var(--component-bg);
   height: 40px; /* same as reviewChangesButton button */
   border: 1px solid transparent;
-  margin-right: var(--large-padding);
+
+  @nest .root[data-container-min~='xsmall'] & {
+    margin-right: var(--medium-padding);
+  }
+
+  @nest & .statusDetails {
+    display: block;
+  }
 }
 
 .reviewChangesButton {
-  border: 1px solid var(--gray-lighter);
-  border-radius: var(--border-radius-medium);
   color: var(--text-muted);
   text-align: left;
   transform: translate3d(0, 0, 0);
   display: block;
   transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
   z-index: 0;
+  pointer-events: none;
+  cursor: not-allowed;
 
-  @nest & .inner {
-    display: flex;
-    align-items: center;
-    padding-right: var(--small-padding);
-  }
+  @nest .root[data-container-min~='xsmall'] & {
+    border: 1px solid var(--gray-lighter);
+    border-radius: var(--border-radius-medium);
+    pointer-events: unset;
+    cursor: unset;
 
-  @nest &:hover:not(:disabled) {
-    background: var(--gray-dark);
-    border-color: var(--gray-dark);
-    @nest & .statusDetails {
-      color: var(--white);
-    }
-    @nest & .badge {
-      background: var(--white);
-      color: var(--gray-dark);
+    @nest &:hover:not(:disabled) {
+      background: var(--gray-dark);
       border-color: var(--gray-dark);
 
-      @nest & .icon {
-        display: none;
+      @nest & .statusDetails {
+        color: var(--white);
       }
 
-      @nest & .hoverIcon {
-        display: flex;
+      @nest & .badge {
+        background: var(--white);
+        color: var(--gray-dark);
+        border-color: var(--gray-dark);
+
+        @nest &:last-of-type .hoverIcon {
+          display: flex;
+        }
+
+        @nest & .icon {
+          display: none;
+        }
       }
     }
   }
 
+  @nest & .inner {
+    display: flex;
+    align-items: center;
+    padding-right: var(--small-padding);
+  }
+
   @nest &[data-transition='in'] {
     transform: translate3d(0px, 0, 0);
   }
@@ -124,6 +140,10 @@
     display: none;
   }
 
+  @nest & .hoverIcon {
+    display: none;
+  }
+
   @nest &[data-type='publish'] {
     background-color: var(--timeline-event-enabled-icon-published-bg);
     color: var(--timeline-event-enabled-icon-published-fg);
@@ -160,12 +180,24 @@
   white-space: nowrap;
   margin-left: var(--small-padding);
   color: var(--text-muted);
+  display: none;
+
+  @nest .root[data-container-min~='xsmall'] .reviewChangesButton & {
+    display: block;
+  }
 }
 
 .label {
   font-weight: 500;
 }
 
+.documentBadgesContainer {
+  display: none;
+  @nest .root[data-container-min~='small'] & {
+    display: block;
+  }
+}
+
 .root[data-disabled='true'] {
   @nest & .reviewChangesButton {
     border-color: var(--disabled-container-bg);

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentSparkline.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentSparkline.tsx
@@ -7,6 +7,7 @@ import SyncIcon from 'part:@sanity/base/sync-icon'
 import {useSyncState} from '@sanity/react-hooks'
 import Button from 'part:@sanity/components/buttons/default'
 import {ChunkType} from '@sanity/field/lib/diff'
+import {ContainerQuery} from 'part:@sanity/components/container-query'
 import {useDocumentHistory} from '../documentHistory'
 import TimeAgo from '../../../components/TimeAgo'
 import {HistoryIcon, LiveIcon, PublishIcon} from '../../../badges/icons'
@@ -109,7 +110,7 @@ export function DocumentSparkline({type, badges, lastUpdated, editState}: Docume
     lastUnpublishOrPublishSession?.type === 'publish' && !isLiveDocument
 
   return (
-    <div className={styles.root} data-disabled={showingRevision}>
+    <ContainerQuery className={styles.root} data-disabled={showingRevision}>
       {showPublishedSessionBadge && (
         <div className={styles.primarySessionBadgeContainer}>
           <SessionBadge
@@ -189,6 +190,6 @@ export function DocumentSparkline({type, badges, lastUpdated, editState}: Docume
       >
         <DocumentBadges editState={editState} badges={badges} />
       </div>
-    </div>
+    </ContainerQuery>
   )
 }