[test-studio] Improve DeveloperPreview appearance + small screen fixes

sanity-io · Nov 19, 2019 · 8bb8464 · 8bb8464
1 parent 8998ce7
commit 8bb8464
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/packages/test-studio/src/deskStructure.js b/packages/test-studio/src/deskStructure.js
@@ -1,34 +1,14 @@
-/* eslint-disable react/prop-types */
 import React from 'react'
 import RefreshIcon from 'part:@sanity/base/sync-icon'
 import EyeIcon from 'part:@sanity/base/eye-icon'
 import EditIcon from 'part:@sanity/base/edit-icon'
-import Spinner from 'part:@sanity/components/loading/spinner'
-import JSONPretty from 'react-json-pretty'
-import monikai from 'react-json-pretty/dist/monikai'
 import JsonDocumentDump from './components/JsonDocumentDump'
+import {DeveloperPreview} from './previews/developer'
 import S from '@sanity/desk-tool/structure-builder'
 
 // For testing. Bump the timeout to introduce som lag
 const delay = (val, ms = 10) => new Promise(resolve => setTimeout(resolve, ms, val))
 
-function Preview(props) {
-  const {history, draft, published} = props
-  const {snapshot: historical, isLoading} = history.document
-
-  if (!historical && isLoading) {
-    return <Spinner center message="Loading document" />
-  }
-
-  return (
-    <JSONPretty
-      data={historical || draft || published}
-      theme={monikai}
-      mainStyle="white-space: pre-wrap"
-    />
-  )
-}
-
 export default () =>
   S.list()
     .id('root')
@@ -143,7 +123,13 @@ export default () =>
               S.document()
                 .documentId(documentId)
                 .schemaType('author')
-                .views([S.view.form().icon(EditIcon), S.view.component(Preview).icon(EyeIcon)])
+                .views([
+                  S.view.form().icon(EditIcon),
+                  S.view
+                    .component(DeveloperPreview)
+                    .icon(EyeIcon)
+                    .title('Preview')
+                ])
             )
       }),
 

diff --git a/packages/test-studio/src/previews/developer/DeveloperPreview.js b/packages/test-studio/src/previews/developer/DeveloperPreview.js
@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react'
+import Spinner from 'part:@sanity/components/loading/spinner'
+import JSONPretty from 'react-json-pretty'
+import monikai from 'react-json-pretty/dist/monikai'
+import styles from './DeveloperPreview.module.css'
+
+function DeveloperPreview(props) {
+  const {history, draft, published} = props
+  const {snapshot: historical, isLoading: isLoadingHistorical} = history.document
+
+  return (
+    <div className={styles.root}>
+      {isLoadingHistorical && <Spinner center message="Loading revision" />}
+
+      <JSONPretty
+        data={historical || draft || published}
+        theme={monikai}
+        mainStyle="white-space: pre-wrap"
+      />
+    </div>
+  )
+}
+
+export default DeveloperPreview
diff --git a/packages/test-studio/src/previews/developer/DeveloperPreview.module.css b/packages/test-studio/src/previews/developer/DeveloperPreview.module.css
@@ -0,0 +1,12 @@
+.root {
+  background: #272822;
+  margin: 0;
+  padding: 1em;
+  min-height: 100%;
+  box-sizing: border-box;
+  word-break: break-word;
+
+  @nest & > div > pre {
+    margin: 0;
+  }
+}
diff --git a/packages/test-studio/src/previews/developer/index.js b/packages/test-studio/src/previews/developer/index.js
@@ -0,0 +1 @@
+export {default as DeveloperPreview} from './DeveloperPreview'