Add Node design (#209)

* add margin

* WIP

* WIP

* fix icon color

* add toggle icon

* add bg color

* add description

* add buttons

* fix color

* add actions

fontello/config.json

@@ -180,22 +180,6 @@
         "help"
       ]
     },
-    {
-      "uid": "b8cda949fdf07ca659bc8253f4b6f424",
-      "css": "collapse",
-      "code": 59415,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M337.5 804.2C354.2 820.8 379.2 820.8 395.8 804.2L500 700 604.2 804.2C620.8 820.8 645.8 820.8 662.5 804.2 679.2 787.5 679.2 762.5 662.5 745.8L529.2 612.5C512.5 595.8 487.5 595.8 470.8 612.5L337.5 745.8C320.8 762.5 320.8 787.5 337.5 804.2L337.5 804.2ZM662.5 195.8C645.8 179.2 620.8 179.2 604.2 195.8L500 300 395.8 195.8C379.2 179.2 354.2 179.2 337.5 195.8 320.8 212.5 320.8 237.5 337.5 254.2L470.8 387.5C487.5 404.2 512.5 404.2 529.2 387.5L662.5 254.2C679.2 237.5 679.2 212.5 662.5 195.8L662.5 195.8Z",
-        "width": 1000
-      },
-      "search": [
-        "unfold",
-        "less",
-        "collapse"
-      ]
-    },
     {
       "uid": "02e1df47910afd54fdd1aabe4d5abe6a",
       "css": "rewind",
@@ -396,6 +380,22 @@
       "search": [
         "add-node"
       ]
+    },
+    {
+      "uid": "b626a9d1b7f5581d9a6b6837ce07ea96",
+      "css": "collapse",
+      "code": 59393,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M305 865C325 885 355 885 375 865L500 740 625 865C645 885 675 885 695 865S715 815 695 795L535 635C515 615 485 615 465 635L305 795C285 815 285 845 305 865L305 865ZM695 135C675 115 645 115 625 135L500 260 375 135C355 115 325 115 305 135 285 155 285 185 305 205L465 365C485 385 515 385 535 365L695 205C715 185 715 155 695 135L695 135Z",
+        "width": 1000
+      },
+      "search": [
+        "unfold",
+        "less",
+        "collapse"
+      ]
     }
   ]
 }

fontello/css/structure_icons-codes.css

@@ -1,5 +1,6 @@
 
 .icon-structure_logo:before { content: '\e800'; } /* '' */
+.icon-collapse:before { content: '\e801'; } /* '' */
 .icon-github:before { content: '\e808'; } /* '' */
 .icon-add-node:before { content: '\e809'; } /* '' */
 .icon-cancel:before { content: '\e80a'; } /* '' */
@@ -15,7 +16,6 @@
 .icon-parent:before { content: '\e814'; } /* '' */
 .icon-save:before { content: '\e815'; } /* '' */
 .icon-help:before { content: '\e816'; } /* '' */
-.icon-collapse:before { content: '\e817'; } /* '' */
 .icon-rewind:before { content: '\e818'; } /* '' */
 .icon-confirm:before { content: '\e819'; } /* '' */
 .icon-checkbox-unchecked:before { content: '\e81a'; } /* '' */

fontello/css/structure_icons-ie7-codes.css

@@ -1,5 +1,6 @@
 
 .icon-structure_logo { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-collapse { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-add-node { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -15,7 +16,6 @@
 .icon-parent { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-save { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-help { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-collapse { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-rewind { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-confirm { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-checkbox-unchecked { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

fontello/css/structure_icons-ie7.css

@@ -11,6 +11,7 @@
 }
 
 .icon-structure_logo { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-collapse { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-add-node { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -26,7 +27,6 @@
 .icon-parent { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-save { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-help { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-collapse { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-rewind { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-confirm { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-checkbox-unchecked { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

fontello/css/structure_icons.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'structure_icons';
-  src: url('../font/structure_icons.eot?53697802');
-  src: url('../font/structure_icons.eot?53697802#iefix') format('embedded-opentype'),
-       url('../font/structure_icons.woff2?53697802') format('woff2'),
-       url('../font/structure_icons.woff?53697802') format('woff'),
-       url('../font/structure_icons.ttf?53697802') format('truetype'),
-       url('../font/structure_icons.svg?53697802#structure_icons') format('svg');
+  src: url('../font/structure_icons.eot?55007836');
+  src: url('../font/structure_icons.eot?55007836#iefix') format('embedded-opentype'),
+       url('../font/structure_icons.woff2?55007836') format('woff2'),
+       url('../font/structure_icons.woff?55007836') format('woff'),
+       url('../font/structure_icons.ttf?55007836') format('truetype'),
+       url('../font/structure_icons.svg?55007836#structure_icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'structure_icons';
-    src: url('../font/structure_icons.svg?53697802#structure_icons') format('svg');
+    src: url('../font/structure_icons.svg?55007836#structure_icons') format('svg');
   }
 }
 */
@@ -56,6 +56,7 @@
 }
 
 .icon-structure_logo:before { content: '\e800'; } /* '' */
+.icon-collapse:before { content: '\e801'; } /* '' */
 .icon-github:before { content: '\e808'; } /* '' */
 .icon-add-node:before { content: '\e809'; } /* '' */
 .icon-cancel:before { content: '\e80a'; } /* '' */
@@ -71,7 +72,6 @@
 .icon-parent:before { content: '\e814'; } /* '' */
 .icon-save:before { content: '\e815'; } /* '' */
 .icon-help:before { content: '\e816'; } /* '' */
-.icon-collapse:before { content: '\e817'; } /* '' */
 .icon-rewind:before { content: '\e818'; } /* '' */
 .icon-confirm:before { content: '\e819'; } /* '' */
 .icon-checkbox-unchecked:before { content: '\e81a'; } /* '' */

fontello/demo.html

@@ -229,11 +229,11 @@
 }
 @font-face {
       font-family: 'structure_icons';
-      src: url('./font/structure_icons.eot?31932522');
-      src: url('./font/structure_icons.eot?31932522#iefix') format('embedded-opentype'),
-           url('./font/structure_icons.woff?31932522') format('woff'),
-           url('./font/structure_icons.ttf?31932522') format('truetype'),
-           url('./font/structure_icons.svg?31932522#structure_icons') format('svg');
+      src: url('./font/structure_icons.eot?46368476');
+      src: url('./font/structure_icons.eot?46368476#iefix') format('embedded-opentype'),
+           url('./font/structure_icons.woff?46368476') format('woff'),
+           url('./font/structure_icons.ttf?46368476') format('truetype'),
+           url('./font/structure_icons.svg?46368476#structure_icons') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -299,30 +299,30 @@ <h1>structure_icons <small>font demo</small></h1>
     <div class="container" id="icons">
       <div class="row">
         <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-structure_logo">&#xe800;</i> <span class="i-name">icon-structure_logo</span><span class="i-code">0xe800</span></div>
+        <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-collapse">&#xe801;</i> <span class="i-name">icon-collapse</span><span class="i-code">0xe801</span></div>
         <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-github">&#xe808;</i> <span class="i-name">icon-github</span><span class="i-code">0xe808</span></div>
         <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-add-node">&#xe809;</i> <span class="i-name">icon-add-node</span><span class="i-code">0xe809</span></div>
-        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-cancel">&#xe80a;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe80a</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-cancel">&#xe80a;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe80a</span></div>
         <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-focus">&#xe80b;</i> <span class="i-name">icon-focus</span><span class="i-code">0xe80b</span></div>
         <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-checkbox-checked">&#xe80c;</i> <span class="i-name">icon-checkbox-checked</span><span class="i-code">0xe80c</span></div>
         <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-edit">&#xe80d;</i> <span class="i-name">icon-edit</span><span class="i-code">0xe80d</span></div>
-        <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-delete">&#xe80e;</i> <span class="i-name">icon-delete</span><span class="i-code">0xe80e</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-delete">&#xe80e;</i> <span class="i-name">icon-delete</span><span class="i-code">0xe80e</span></div>
         <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-drag_handle">&#xe80f;</i> <span class="i-name">icon-drag_handle</span><span class="i-code">0xe80f</span></div>
         <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-expand">&#xe810;</i> <span class="i-name">icon-expand</span><span class="i-code">0xe810</span></div>
         <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-close">&#xe811;</i> <span class="i-name">icon-close</span><span class="i-code">0xe811</span></div>
-        <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-siblings">&#xe812;</i> <span class="i-name">icon-siblings</span><span class="i-code">0xe812</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-siblings">&#xe812;</i> <span class="i-name">icon-siblings</span><span class="i-code">0xe812</span></div>
         <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-children">&#xe813;</i> <span class="i-name">icon-children</span><span class="i-code">0xe813</span></div>
         <div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-parent">&#xe814;</i> <span class="i-name">icon-parent</span><span class="i-code">0xe814</span></div>
         <div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-save">&#xe815;</i> <span class="i-name">icon-save</span><span class="i-code">0xe815</span></div>
-        <div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-help">&#xe816;</i> <span class="i-name">icon-help</span><span class="i-code">0xe816</span></div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe817"><i class="demo-icon icon-collapse">&#xe817;</i> <span class="i-name">icon-collapse</span><span class="i-code">0xe817</span></div>
+        <div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-help">&#xe816;</i> <span class="i-name">icon-help</span><span class="i-code">0xe816</span></div>
         <div class="the-icons span3" title="Code: 0xe818"><i class="demo-icon icon-rewind">&#xe818;</i> <span class="i-name">icon-rewind</span><span class="i-code">0xe818</span></div>
         <div class="the-icons span3" title="Code: 0xe819"><i class="demo-icon icon-confirm">&#xe819;</i> <span class="i-name">icon-confirm</span><span class="i-code">0xe819</span></div>
         <div class="the-icons span3" title="Code: 0xe81a"><i class="demo-icon icon-checkbox-unchecked">&#xe81a;</i> <span class="i-name">icon-checkbox-unchecked</span><span class="i-code">0xe81a</span></div>

src/components/Layout/variables.css

@@ -3,6 +3,11 @@
   --bgColor: #4A90E2;
   --accentColor: #CC8110;
   --darkColor: #424242;
+   /*
+   TODO: group names;
+   */
+  --iconColor: rgba(66, 66, 66, .66);
+  --iconLightColor: rgba(66, 66, 66, .33);
   --headerHeight: 56px;
   --footerHeight: 64px;
   --columnHeight: 656px;
@@ -12,4 +17,6 @@
   --backgroundMiddleColor: rgba(242, 242, 242, .66);
   --backgroundMiddleColorHover: rgba(242, 242, 242, 1);
   --backgroundHighColor: rgba(255, 255, 255, .66);
+  --backgroundFullColor: rgba(242, 242, 242, 1);
+  --headerFontSize: 16px;
 }