Add some editor toolbar buttons.

tropy · Mar 16, 2017 · 4ab136d · 4ab136d
1 parent bc8ce05
commit 4ab136d
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 17 deletions.
diff --git a/src/components/editor/view.js b/src/components/editor/view.js
@@ -5,7 +5,8 @@ const shallow = require('react/lib/shallowCompare')
 const { Component, PropTypes } = React
 const { func, bool, object, number } = PropTypes
 
-const { IconB } = require('../icons')
+const { IconB, IconI, IconU, IconQ, IconLink, IconBulletList, IconNumberedList,
+  IconSink, IconLift } = require('../icons')
 const { IconButton } = require('../button')
 const { EditorState } = require('prosemirror-state')
 const { EditorView } = require('prosemirror-view')
@@ -74,8 +75,20 @@ class Editor extends Component {
       <div className="editor">
         <div className="toolbar">
           <div className="toolbar-left">
-            <div className="toolgroup">
+            <div className="tool-group">
               <IconButton icon={<IconB/>}/>
+              <IconButton icon={<IconI/>}/>
+              <IconButton icon={<IconU/>}/>
+              <IconButton icon={<IconQ/>}/>
+            </div>
+            <div className="tool-group">
+              <IconButton icon={<IconBulletList/>}/>
+              <IconButton icon={<IconNumberedList/>}/>
+              <IconButton icon={<IconSink/>}/>
+              <IconButton icon={<IconLift/>}/>
+            </div>
+            <div className="tool-group">
+              <IconButton icon={<IconLink/>}/>
             </div>
           </div>
         </div>

diff --git a/src/components/icons.js b/src/components/icons.js
@@ -40,6 +40,14 @@ i('B', (
   </svg>
 ))
 
+i('BulletList', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <path d="M4,3.5A1.5,1.5,0,1,1,2.5,2,1.5,1.5,0,0,1,4,3.5ZM2.5,10A1.5,1.5,0,1,0,4,11.5,1.5,1.5,0,0,0,2.5,10ZM15,2H6V3h9Zm0,2H6V5h9ZM13,6H6V7h7Zm2,4H6v1h9Zm0,2H6v1h9Zm-2,2H6v1h7Z"/>
+    </g>
+  </svg>
+))
+
 i('Chevron7', (
   <svg width="16" height="16">
     <g className="line" fill="currentColor">
@@ -89,6 +97,30 @@ i('GridSmall', (
   </svg>
 ))
 
+i('I', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <polygon points="6 1 6 3 8 3 6 13 4 13 4 15 10 15 10 13 8 13 10 3 12 3 12 1 6 1"/>
+    </g>
+  </svg>
+))
+
+i('Lift', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <path d="M7,2H8V15H7ZM9,3V4h7V3ZM9,8h7V7H9Zm0,4h7V11H9Zm5-7H9V6h5Zm0,4H9v1h5ZM9,14h5V13H9ZM3,6.707,2.293,6l-2.5,2.5,2.5,2.5L3,10.293,1.707,9H6V8H1.707Z"/>
+    </g>
+  </svg>
+))
+
+i('Link', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <path d="M12.5,13h-4a3.5,3.5,0,0,1,0-7h.408a1.4,1.4,0,0,1,0,1H8.5a2.5,2.5,0,0,0,0,5h4a2.5,2.5,0,0,0,0-5h-.547A4.394,4.394,0,0,0,12,6.5a4.394,4.394,0,0,0-.047-.5H12.5a3.5,3.5,0,0,1,0,7ZM0,6.5A3.5,3.5,0,0,0,3.5,10h.547A4.394,4.394,0,0,1,4,9.5,4.394,4.394,0,0,1,4.047,9H3.5a2.5,2.5,0,0,1,0-5h4a2.5,2.5,0,0,1,0,5H7.092a1.4,1.4,0,0,0,0,1H7.5a3.5,3.5,0,0,0,0-7h-4A3.5,3.5,0,0,0,0,6.5Z"/>
+    </g>
+  </svg>
+))
+
 i('List', (
   <svg width="16" height="16">
     <g className="line" fill="currentColor">
@@ -138,6 +170,14 @@ i('Note', (
   </svg>
 ))
 
+i('NumberedList', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <path d="M.97,10.828v-.052a.925.925,0,0,1,.983-.935.888.888,0,0,1,.965.884,1.93,1.93,0,0,1-.664,1.241L.069,14.358V15H4v-.853H1.427v-.052L2.879,12.5A2.764,2.764,0,0,0,3.9,10.634,1.717,1.717,0,0,0,1.974,9a1.783,1.783,0,0,0-1.94,1.78v.047ZM15,3H6V2h9Zm0,2H6V4h9ZM13,7H6V6h7Zm2,4H6V10h9Zm0,2H6V12h9Zm-2,2H6V14h7ZM3,7V1H2L0,2.717v1L1.96,2H2V7Z"/>
+    </g>
+  </svg>
+))
+
 i('Photo', (
   <svg width="16" height="16" viewBox="0 0 16 16">
     <g className="line" fill="currentColor">
@@ -155,6 +195,15 @@ i('Plus', (
   </svg>
 ))
 
+i('Q', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <path d="M14,9.25V5.75A4.793,4.793,0,0,0,9,1,4.793,4.793,0,0,0,4,5.75v3.5A4.793,4.793,0,0,0,9,14a5.4,5.4,0,0,0,2.025-.393L12,15h2l-1.577-2.253A4.579,4.579,0,0,0,14,9.25ZM10.5,10h-2l1.444,2.063A3.51,3.51,0,0,1,9,12.2,2.788,2.788,0,0,1,6,9.45V5.55A2.788,2.788,0,0,1,9,2.8a2.788,2.788,0,0,1,3,2.75v3.9a2.627,2.627,0,0,1-.656,1.756Z"/>
+      <rect x="1" y="1" width="1" height="14"/>
+    </g>
+  </svg>
+))
+
 i('Search', (
   <svg width="16" height="16">
     <g className="line" fill="currentColor">
@@ -163,6 +212,14 @@ i('Search', (
   </svg>
 ))
 
+i('Sink', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <path d="M7,2H8V15H7ZM9,3V4h7V3ZM9,8h7V7H9Zm0,4h7V11H9Zm6-7H9V6h6Zm0,4H9v1h6ZM9,14h6V13H9ZM3,6.707,4.293,8H0V9H4.293L3,10.293,3.707,11l2.5-2.5L3.707,6Z"/>
+    </g>
+  </svg>
+))
+
 i('Spin', (
   <svg width="16" height="16">
     <g className="line" fill="none" stroke="currentColor">
@@ -191,6 +248,15 @@ i('Trash', (
   </svg>
 ))
 
+i('U', (
+  <svg width="16" height="16">
+    <g className="line" fill="currentColor">
+      <rect x="2" y="15" width="12" height="1"/>
+      <path d="M8,14c-2.944,0-5-1.851-5-4.5V1H5V9.7c0,1.846,1.616,2.5,3,2.5s3-.654,3-2.5V1h2V9.5C13,12.149,10.944,14,8,14Z"/>
+    </g>
+  </svg>
+))
+
 i('X', (
   <svg width="16" height="16">
     <g className="line" fill="currentcolor">

diff --git a/src/stylesheets/components/_toolbar.scss b/src/stylesheets/components/_toolbar.scss
@@ -36,6 +36,16 @@
     align-items: center;
   }
 
+  .tool-group {
+    & + .tool-group {
+      margin-left: $space-xs;
+
+      .panel & {
+        margin-left: $space-min;
+      }
+    }
+  }
+
   .icon + h4 {
     margin-left: $space-xs;
   }

diff --git a/src/stylesheets/components/editor/_toolbar.scss b/src/stylesheets/components/editor/_toolbar.scss
@@ -9,5 +9,37 @@
     border-bottom: 1px solid $editor-toolbar-border;
     margin-bottom: 0; // Dev
     cursor: default;
+
+    .tool-group {
+      position: relative;
+
+      & + .tool-group {
+        margin-left: $space-md + 1px;
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: -$space-xs - 1px;
+          top: 2px;
+          width: 1px;
+          bottom: 2px;
+          background: $editor-separator-color;
+        }
+      }
+    }
+
+    .btn {
+      &:hover {
+        background: $editor-btn-hover-bg;
+      }
+
+      &.active {
+        background: $editor-btn-active-bg;
+      }
+
+      & + .btn {
+        margin-left: $space-min / 2;
+      }
+    }
   }
 }
diff --git a/src/stylesheets/partials/_tool-group.scss b/src/stylesheets/partials/_tool-group.scss
diff --git a/src/stylesheets/themes/_light.scss b/src/stylesheets/themes/_light.scss
@@ -245,4 +245,7 @@ $progress-cancel-color: $shade-1;
 $progress-cancel-bg:    $shade-5;
 
 // Editor
-$editor-toolbar-border: $shade-2;
+$editor-toolbar-border:  $shade-2;
+$editor-separator-color: $shade-2;
+$editor-btn-hover-bg:    $shade-1;
+$editor-btn-active-bg:   $shade-2;
diff --git a/src/stylesheets/windows/_project.scss b/src/stylesheets/windows/_project.scss
@@ -70,7 +70,6 @@
 @import
   "../partials/window-controls",
   "../partials/forms",
-  "../partials/tool-group",
   "../partials/badge",
   "../partials/tile",
   "../partials/sort-indicator",