[default-layout] Visual improvements - create screen (#489)

* [default-layout] New create new modal * [test-studio] Adding icons to types * [form-builder] Delete wth simple confirm on edit item dialog * [form-builder] Removing console.log
sanity-io · Jan 30, 2018 · e2f6cfe · e2f6cfe
1 parent 2b6e682
commit e2f6cfe
Show file tree

Hide file tree

Showing 32 changed files with 162 additions and 26 deletions.
diff --git a/packages/@sanity/data-aspects/src/DataAspectsResolver.js b/packages/@sanity/data-aspects/src/DataAspectsResolver.js
@@ -88,6 +88,10 @@ class DataAspectsResolver {
     return typeOption.displayName || type.title || startCase(typeName)
   }
 
+  getIcon(typeName) {
+    return this.getType(typeName).icon
+  }
+
   // TODO: limit and offset is not yet implemented i gradient and only works partly because of a fluke
   // fix this when gql support limit, offset and order
   getListConstraints(typeName) {

diff --git a/packages/@sanity/default-layout/src/components/ActionModal.js b/packages/@sanity/default-layout/src/components/ActionModal.js
@@ -1,29 +1,39 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import {IntentLink} from 'part:@sanity/base/router'
-import FullScreenDialog from 'part:@sanity/components/dialogs/fullscreen'
+import Dialog from 'part:@sanity/components/dialogs/default'
 import styles from './styles/ActionModal.css'
+import QuestionIcon from 'part:@sanity/base/question-icon'
 
 function ActionModal(props) {
   return (
-    <FullScreenDialog className={styles.modal} title={props.title} onClose={props.onClose} isOpen>
+    <Dialog className={styles.modal} title={props.title} onClose={props.onClose} isOpen>
       <div className={styles.content}>
+        <h1>Create new item</h1>
         <ul className={styles.list}>
-          {props.actions.map(action =>
-            <li className={styles.listItem} key={action.title}>
-              <IntentLink
-                onClick={props.onClose}
-                className={styles.actionLink}
-                intent="create"
-                params={action.params}
-              >
-                {action.title}
-              </IntentLink>
-            </li>
-          )}
+          {
+            props.actions.map(action => {
+              const Icon = action.params && action.params.icon
+              return (
+                <li className={styles.listItem} key={action.title}>
+                  <IntentLink
+                    onClick={props.onClose}
+                    className={styles.actionLink}
+                    intent="create"
+                    params={action.params}
+                  >
+                    <span className={styles.icon}>
+                      {Icon ? <Icon /> : <QuestionIcon />}
+                    </span>
+                    <span>{action.title}</span>
+                  </IntentLink>
+                </li>
+              )
+            })
+          }
         </ul>
       </div>
-    </FullScreenDialog>
+    </Dialog>
   )
 }
 

diff --git a/packages/@sanity/default-layout/src/components/DefaultLayout.js b/packages/@sanity/default-layout/src/components/DefaultLayout.js
@@ -109,16 +109,18 @@ export default withRouterHOC(
       const TYPE_ITEMS = dataAspects.getInferredTypes().map(typeName => ({
         key: typeName,
         name: typeName,
-        title: dataAspects.getDisplayName(typeName)
+        title: dataAspects.getDisplayName(typeName),
+        icon: dataAspects.getIcon(typeName)
       }))
 
       const modalActions = TYPE_ITEMS.map(item => {
         return {
           title: item.title,
-          params: {type: item.name}
+          params: {type: item.name, icon: item.icon}
         }
       })
 
+
       return (
         <div
           className={`${styles.defaultLayout} ${mobileMenuIsOpen ? styles.mobileMenuIsOpen : ''}`}>

diff --git a/packages/@sanity/default-layout/src/components/story.js b/packages/@sanity/default-layout/src/components/story.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import {storiesOf, action} from 'part:@sanity/storybook'
+import TagsTextField from 'part:@sanity/components/tags/textfield'
+import {withKnobs, array, text} from 'part:@sanity/storybook/addons/knobs'
+import Sanity from 'part:@sanity/storybook/addons/sanity'
+
+storiesOf('Tags')
+  .addDecorator(withKnobs)
+  .add(
+    'Create new',
+    () => {
+      return (
+        <div>Test</div>
+      )
+    }
+  )
diff --git a/packages/@sanity/default-layout/src/components/styles/ActionModal.css b/packages/@sanity/default-layout/src/components/styles/ActionModal.css
@@ -5,26 +5,59 @@
 }
 
 .content {
-  columns: 3;
+  background-color: var(--main-navigation-background-color);
+  color: #fff;
+  padding: var(--large-padding);
+  padding-bottom: calc(var(--large-padding) * 4);
+  min-width: 80vw;
+  box-sizing: border-box;
+
+  @nest & > h1 {
+    margin: 0;
+    padding: 0;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    font-weight: 100;
+    text-align: center;
+    color: inherit;
+    font-size: 3em;
+  }
 }
 
 .list {
-  display: block;
+  display: grid;
+  grid-gap: var(--large-padding);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
   padding: 0;
   margin: 0;
-  font-size: 1.2em;
+  font-size: 1em;
+  color: inherit;
+  max-width: 100%;
 }
 
 .listItem {
   display: block;
+  color: inherit;
+}
+
+.icon {
+  flex-basis: 4rem;
+  font-size: 3rem;
+  margin-bottom: 1rem;
 }
 
 .actionLink {
   text-decoration: none;
   color: inherit;
-  display: block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0.8;
+  text-align: center;
+  font-weight: 300;
 
   @nest &:hover {
+    opacity: 1;
     color: var(--brand-primary);
   }
 }
diff --git a/packages/@sanity/form-builder/src/inputs/Array/ItemValue.js b/packages/@sanity/form-builder/src/inputs/Array/ItemValue.js
@@ -120,15 +120,13 @@ export default class RenderItemValue extends React.Component<Props> {
   }
 
   handleDialogAction = action => {
-    if (!action) {
-      console.error('no action')
-    }
     if (action.name === 'close') {
       this.handleEditStop()
     }
     if (action.name === 'delete') {
-      //this.handleRemove
-      console.log('delete')
+      if (window.confirm("Do you really want to delete?")) {
+        this.handleRemove()
+      }
     }
   }
 

diff --git a/packages/test-studio/schemas/arrays.js b/packages/test-studio/schemas/arrays.js
@@ -1,8 +1,10 @@
 import React from 'react'
+import icon from 'react-icons/lib/md/format-list-numbered'
 export default {
   name: 'arraysTest',
   type: 'document',
   title: 'Arrays test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/author.js b/packages/test-studio/schemas/author.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/person'
+
 export default {
   name: 'author',
   type: 'document',
   title: 'Author',
+  icon,
   description: 'This represents an author',
   preview: {
     select: {

diff --git a/packages/test-studio/schemas/blocks.js b/packages/test-studio/schemas/blocks.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/rate-review'
+
 export default {
   name: 'blocksTest',
   title: 'Blocks test',
   type: 'document',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/book.js b/packages/test-studio/schemas/book.js
@@ -1,3 +1,5 @@
+import BookIcon from 'react-icons/lib/fa/book'
+
 function formatSubtitle(book) {
   if (book.authorName && book.publicationYear) {
     return `By ${book.authorName} (${book.publicationYear})`
@@ -10,6 +12,7 @@ export default {
   type: 'document',
   title: 'Book',
   description: 'This is just a simple type for generating some test data',
+  icon: BookIcon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/booleans.js b/packages/test-studio/schemas/booleans.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/check-box'
+
 export default {
   name: 'booleansTest',
   type: 'document',
   title: 'Booleans test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/code.js b/packages/test-studio/schemas/code.js
@@ -1,8 +1,10 @@
+import icon from 'react-icons/lib/md/code'
 
 export default {
   name: 'codeTest',
   type: 'document',
   title: 'Code test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/color.js b/packages/test-studio/schemas/color.js
@@ -1,10 +1,12 @@
 /* eslint-disable react/display-name */
 import React from 'react'
+import icon from 'react-icons/lib/md/format-color-fill'
 
 export default {
   name: 'colorTest',
   type: 'document',
   title: 'Color',
+  icon,
   preview: {
     select: {
       title: 'title',

diff --git a/packages/test-studio/schemas/customInputs.js b/packages/test-studio/schemas/customInputs.js
@@ -1,11 +1,13 @@
 import CustomStringInput from '../src/components/CustomStringInput'
 import CustomMyObjectInput from '../src/components/CustomMyObjectInput'
 import CustomFontStringInput from '../src/components/CustomFontStringInput'
+import icon from 'react-icons/lib/md/extension'
 
 export default {
   name: 'customInputsTest',
   title: 'Custom input tests',
   type: 'document',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/datetime.js b/packages/test-studio/schemas/datetime.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/fa/calendar'
+
 export default {
   name: 'datetimeTest',
   type: 'document',
   title: 'Datetime test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/emails.js b/packages/test-studio/schemas/emails.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/email'
+
 export default {
   name: 'emailsTest',
   type: 'document',
   title: 'Emails test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/fieldsets.js b/packages/test-studio/schemas/fieldsets.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/fa/tasks'
+
 export default {
   name: 'fieldsetsTest',
   type: 'document',
   title: 'Fieldsets test',
+  icon,
   preview: {
     select: {
       title: 'myObject.first'

diff --git a/packages/test-studio/schemas/files.js b/packages/test-studio/schemas/files.js
@@ -1,8 +1,10 @@
+import icon from 'react-icons/lib/fa/file-o'
 
 export default {
   name: 'filesTest',
   type: 'document',
   title: 'Files test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/focus.js b/packages/test-studio/schemas/focus.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/center-focus-weak'
+
 export default {
   name: 'focusTest',
   type: 'document',
   title: 'Focus test',
+  icon,
   fields: [
     {
       name: 'first',

diff --git a/packages/test-studio/schemas/geopoint.js b/packages/test-studio/schemas/geopoint.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/pin-drop'
+
 export default {
   name: 'geopointTest',
   type: 'document',
   title: 'Geopoint test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/images.js b/packages/test-studio/schemas/images.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/photo-library'
+
 export const myImage = {
   name: 'myImage',
   title: 'Some image type',
   type: 'image',
+  icon,
   fields: [
     {
       name: 'caption',

diff --git a/packages/test-studio/schemas/numbers.js b/packages/test-studio/schemas/numbers.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/ti/sort-numerically'
+
 export default {
   name: 'numbersTest',
   type: 'document',
   title: 'Numbers test',
+  icon,
   fields: [
     {
       name: 'title',

diff --git a/packages/test-studio/schemas/objects.js b/packages/test-studio/schemas/objects.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/go/puzzle'
+
 export const myObject = {
   type: 'object',
   name: 'myObject',
   title: 'My object',
+  icon,
   fields: [
     {
       name: 'first',

diff --git a/packages/test-studio/schemas/previewMediaTest.js b/packages/test-studio/schemas/previewMediaTest.js
@@ -1,7 +1,10 @@
+import icon from 'react-icons/lib/md/tv'
+
 export default {
   name: 'previewMediaTest',
   type: 'document',
   title: 'Preview: Using media in preview',
+  icon,
   preview: {
     select: {
       title: 'title',