[desk-tool] update sparkline design

sanity-io · Oct 6, 2020 · 532824f · 532824f
1 parent 9dd4635
commit 532824f
Show file tree

Hide file tree

Showing 24 changed files with 537 additions and 370 deletions.
diff --git a/packages/@sanity/components/src/badges/DefaultBadge.css b/packages/@sanity/components/src/badges/DefaultBadge.css
@@ -3,26 +3,26 @@
 .root {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--border-radius-small);
+  border-radius: calc(var(--border-radius-medium) * 3);
   /* Optimised for 11px */
-  padding: 1px 3px;
-  line-height: calc(12 / 11);
+  padding: 2px 6px;
+  line-height: calc(12 / 10);
   text-transform: uppercase;
   font-weight: 600;
   box-sizing: border-box;
   white-space: nowrap;
   text-align: center;
-  border: 1px solid transparent;
+  /* border: 1px solid transparent; */
   transform: translateZ(0);
   cursor: default;
   background-color: var(--gray);
   border-color: var(--gray);
   color: var(--white);
+  font-size: var(--font-size-xsmall);
 
   @nest &[data-color='success'] {
-    background-color: var(--state-success-color);
-    border-color: var(--state-success-color);
-    color: var(--state-success-color--inverted);
+    background: color(var(--state-success-color) l(86%) s(65%));
+    color: color(var(--state-success-color) s(45%) b(30%));
   }
 
   @nest &[data-color='info'] {
@@ -42,4 +42,9 @@
     border-color: var(--state-danger-color);
     color: var(--state-danger-color--inverted);
   }
+
+  @nest &[data-color='default'] {
+    background: var(--gray-lightest);
+    color: var(--gray-dark);
+  }
 }
diff --git a/packages/@sanity/desk-tool/src/badges/DraftStatusBadge.ts b/packages/@sanity/desk-tool/src/badges/DraftStatusBadge.ts
@@ -1,11 +1,8 @@
-import EditIcon from './icons/edit'
-
 export function DraftStatusBadge(props) {
   return props.draft
     ? {
         label: 'Draft',
-        color: 'warning',
-        icon: EditIcon
+        color: 'warning'
       }
     : null
 }
diff --git a/packages/@sanity/desk-tool/src/badges/LiveEditBadge.ts b/packages/@sanity/desk-tool/src/badges/LiveEditBadge.ts
@@ -1,11 +1,8 @@
-import LiveIcon from './icons/live'
-
 export function LiveEditBadge(props) {
   return props.liveEdit
     ? {
         label: 'Live document',
-        color: 'success',
-        icon: LiveIcon
+        color: 'success'
       }
     : null
 }
diff --git a/packages/@sanity/desk-tool/src/badges/PublishedStatusBadge.ts b/packages/@sanity/desk-tool/src/badges/PublishedStatusBadge.ts
@@ -1,11 +1,8 @@
-import PublishIcon from './icons/publish'
-
 export function PublishedStatusBadge(props) {
   return props.published
     ? {
         label: 'Published',
-        color: 'success',
-        icon: PublishIcon
+        color: 'success'
       }
     : null
 }
diff --git a/packages/@sanity/desk-tool/src/badges/icons/create.tsx b/packages/@sanity/desk-tool/src/badges/icons/create.tsx
@@ -1,17 +1,15 @@
-// part:@sanity/base/create-icon
-
 import React from 'react'
 
 const strokeStyle = {
   stroke: 'currentColor',
   strokeWidth: 1
 }
 
-export default function CreateIcon() {
+export function CreateIcon() {
   return (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M3 8.5H14" style={strokeStyle}/>
-        <path d="M8.5 3L8.5 14" style={strokeStyle}/>
+      <path d="M3 8.5H14" style={strokeStyle} />
+      <path d="M8.5 3L8.5 14" style={strokeStyle} />
     </svg>
   )
-}
+}
diff --git a/packages/@sanity/desk-tool/src/badges/icons/delete.tsx b/packages/@sanity/desk-tool/src/badges/icons/delete.tsx
@@ -1,20 +1,24 @@
-// part:@sanity/base/delete-icon
-
 import React from 'react'
 
 const strokeStyle = {
   stroke: 'currentColor',
   strokeWidth: 1
 }
 
-export default function DeleteIcon() {
+export function DeleteIcon() {
   return (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10.605 13.5H6.39504C5.88549 13.5 5.45743 13.1169 5.40116 12.6104L4.5 4.5H12.5L11.5988 12.6104C11.5426 13.1169 11.1145 13.5 10.605 13.5Z" style={strokeStyle}/>
-        <path d="M7 12L6.375 6M10 12L10.625 6" style={strokeStyle}/>
-        <path d="M8.5 6V12" style={strokeStyle}/>
-        <path d="M3 4.5H14" style={strokeStyle}/>
-        <path d="M6.5 4.5V3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H9.5C10.0523 2.5 10.5 2.94772 10.5 3.5V4.42" style={strokeStyle}/>
+      <path
+        d="M10.605 13.5H6.39504C5.88549 13.5 5.45743 13.1169 5.40116 12.6104L4.5 4.5H12.5L11.5988 12.6104C11.5426 13.1169 11.1145 13.5 10.605 13.5Z"
+        style={strokeStyle}
+      />
+      <path d="M7 12L6.375 6M10 12L10.625 6" style={strokeStyle} />
+      <path d="M8.5 6V12" style={strokeStyle} />
+      <path d="M3 4.5H14" style={strokeStyle} />
+      <path
+        d="M6.5 4.5V3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H9.5C10.0523 2.5 10.5 2.94772 10.5 3.5V4.42"
+        style={strokeStyle}
+      />
     </svg>
   )
 }
diff --git a/packages/@sanity/desk-tool/src/badges/icons/edit.tsx b/packages/@sanity/desk-tool/src/badges/icons/edit.tsx
@@ -1,17 +1,15 @@
-// part:@sanity/base/edit-icon
-
 import React from 'react'
 
 const strokeStyle = {
   stroke: 'currentColor',
   strokeWidth: 1
 }
 
-export default function EditIcon() {
+export function EditIcon() {
   return (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M4.5 10.5L4 13L6.5 12.5L14 5L12 3L4.5 10.5Z" style={strokeStyle}/>
-      <path d="M10 5L12 7" style={strokeStyle}/>
+      <path d="M4.5 10.5L4 13L6.5 12.5L14 5L12 3L4.5 10.5Z" style={strokeStyle} />
+      <path d="M10 5L12 7" style={strokeStyle} />
     </svg>
   )
 }
diff --git a/packages/@sanity/desk-tool/src/badges/icons/history.tsx b/packages/@sanity/desk-tool/src/badges/icons/history.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+const strokeStyle = {
+  stroke: 'currentColor',
+  strokeWidth: 1.2
+}
+
+export function HistoryIcon() {
+  return (
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3.10209 9.18006C3.07431 8.95729 3.06 8.73035 3.06 8.50006C3.06 5.49563 5.49557 3.06006 8.5 3.06006C11.5044 3.06006 13.94 5.49563 13.94 8.50006C13.94 11.5045 11.5044 13.9401 8.5 13.9401C6.63022 13.9401 4.98076 12.9967 4.00158 11.5601"
+        style={strokeStyle}
+      />
+      <path d="M4.75999 7.47998L3.10207 9.17998L1.35999 7.47998" style={strokeStyle} />
+      <path d="M8.5 5.43994V8.49994L10.54 10.5399" style={strokeStyle} />
+    </svg>
+  )
+}
diff --git a/packages/@sanity/desk-tool/src/badges/icons/index.ts b/packages/@sanity/desk-tool/src/badges/icons/index.ts
@@ -0,0 +1,7 @@
+export * from './create'
+export * from './edit'
+export * from './delete'
+export * from './history'
+export * from './live'
+export * from './publish'
+export * from './unpublish'
diff --git a/packages/@sanity/desk-tool/src/badges/icons/live.tsx b/packages/@sanity/desk-tool/src/badges/icons/live.tsx
@@ -1,13 +1,11 @@
-// part:@sanity/base/create-icon
-
 import React from 'react'
 
 const strokeStyle = {
   stroke: 'currentColor',
   strokeWidth: 1
 }
 
-export default function LiveIcon() {
+export function LiveIcon() {
   return (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M6.12 12.9201V4.08008L12.92 8.50008L6.12 12.9201Z" style={strokeStyle} />

diff --git a/packages/@sanity/desk-tool/src/badges/icons/publish.tsx b/packages/@sanity/desk-tool/src/badges/icons/publish.tsx
@@ -1,18 +1,16 @@
-// part:@sanity/base/publish-icon
-
 import React from 'react'
 
 const strokeStyle = {
   stroke: 'currentColor',
   strokeWidth: 1
 }
 
-export default function PublishIcon() {
+export function PublishIcon() {
   return (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M3 3.5H14" style={strokeStyle}/>
-        <path d="M8.5 6V14" style={strokeStyle}/>
-        <path d="M5 9.5L8.5 6L12 9.5" style={strokeStyle}/>
+      <path d="M3 3.5H14" style={strokeStyle} />
+      <path d="M8.5 6V14" style={strokeStyle} />
+      <path d="M5 9.5L8.5 6L12 9.5" style={strokeStyle} />
     </svg>
   )
 }
diff --git a/packages/@sanity/desk-tool/src/badges/icons/unpublish.tsx b/packages/@sanity/desk-tool/src/badges/icons/unpublish.tsx
@@ -1,18 +1,16 @@
-// part:@sanity/base/unpublish-icon
-
 import React from 'react'
 
 const strokeStyle = {
   stroke: 'currentColor',
   strokeWidth: 1
 }
 
-export default function UnpublishIcon() {
+export function UnpublishIcon() {
   return (
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14 13.5L3 13.5" style={strokeStyle}/>
-        <path d="M8.5 11L8.5 3" style={strokeStyle}/>
-        <path d="M12 7.5L8.5 11L5 7.5" style={strokeStyle}/>
+      <path d="M14 13.5L3 13.5" style={strokeStyle} />
+      <path d="M8.5 11L8.5 3" style={strokeStyle} />
+      <path d="M12 7.5L8.5 11L5 7.5" style={strokeStyle} />
     </svg>
   )
 }
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/constants.ts b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/constants.ts
@@ -0,0 +1,3 @@
+export const MAX_SESSIONS = 3
+export const SESSION_BADGE_SIZE = 25
+export const SESSION_BADGE_MARGIN = 15
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentBadges.css b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentBadges.css
@@ -0,0 +1,11 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  display: flex;
+  align-items: center;
+  margin: 0 var(--medium-padding);
+
+  @nest & .documentBadge {
+    margin-right: var(--small-padding);
+  }
+}
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentBadges.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentBadges.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react'
+import {RenderBadgeCollectionState} from 'part:@sanity/base/actions/utils'
+import DocumentBadge from 'part:@sanity/components/badges/default'
+import styles from './documentBadges.css'
+import {Badge} from './types'
+
+interface Props {
+  states: Badge[]
+}
+
+function DocumentBadgesInner({states}: Props) {
+  // TODO: filter out higher up
+  const customDocumentBadges = states.filter(
+    badge => badge.label && !['Published', 'Draft', 'Live document'].includes(badge.label)
+  )
+  return (
+    <div className={styles.root}>
+      {customDocumentBadges.length > 0 && (
+        <div className={styles.customDocumentBadges}>
+          {customDocumentBadges.map((badge, index) => (
+            <div className={styles.documentBadge} key={String(index)}>
+              <DocumentBadge color={(badge.color as any) || 'default'} title={badge.title}>
+                {badge.label}
+              </DocumentBadge>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function DocumentBadges(props: {badges: Badge[]; editState: any}) {
+  return props.badges ? (
+    <RenderBadgeCollectionState
+      component={DocumentBadgesInner}
+      badges={props.badges}
+      badgeProps={props.editState}
+    />
+  ) : null
+}