implement sidebar design #234 (#235)

* removing avenir, replacing with montserrat

* sidebar tweaks

* sidebar positioning

* resolving merge conflict

* working on sidebar

* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* design formatting for sidebar closes #234

client/images/folder.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="13px" height="12px" viewBox="0 0 9 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="12px" height="11px" viewBox="0 0 9 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
     <title>"." project folder</title>
     <desc>Created with Sketch.</desc>

client/modules/IDE/components/Console.jsx

@@ -81,7 +81,7 @@ class Console extends React.Component {
     return (
       <div ref="console" className={consoleClass} role="main" tabIndex="0" title="console">
         <div className="preview-console__header">
-          <h2 className="preview-console__header-title">console</h2>
+          <h2 className="preview-console__header-title"><span className="preview-console__icon">>_</span>console</h2>
           <button className="preview-console__collapse" onClick={this.props.collapseConsole} aria-label="collapse console">
             <InlineSVG src={downArrowUrl} />
           </button>

client/modules/IDE/components/Editor.jsx

@@ -30,6 +30,9 @@ import classNames from 'classnames';
 import { debounce } from 'lodash';
 import Timer from '../components/Timer';
 
+const rightArrowUrl = require('../../../images/right-arrow.svg');
+const leftArrowUrl = require('../../../images/left-arrow.svg');
+
 class Editor extends React.Component {
   constructor(props) {
     super(props);
@@ -178,6 +181,7 @@ class Editor extends React.Component {
   render() {
     const editorSectionClass = classNames({
       editor: true,
+      'sidebar--contracted': !this.props.isExpanded,
       'editor--options': this.props.editorOptionsVisible
     });
 
@@ -187,6 +191,20 @@ class Editor extends React.Component {
         role="main"
         className={editorSectionClass}
       >
+        <button
+          aria-label="collapse file navigation"
+          className="sidebar__contract"
+          onClick={this.props.collapseSidebar}
+        >
+          <InlineSVG src={leftArrowUrl} />
+        </button>
+        <button
+          aria-label="expand file navigation"
+          className="sidebar__expand"
+          onClick={this.props.expandSidebar}
+        >
+          <InlineSVG src={rightArrowUrl} />
+        </button>
         <div className="editor__file-name">
           <span>{this.props.file.name}
           {this.props.unsavedChanges ? '*' : null}</span>
@@ -253,7 +271,10 @@ Editor.propTypes = {
   theme: PropTypes.string.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
   projectSavedTime: PropTypes.string.isRequired,
-  files: PropTypes.array.isRequired
+  files: PropTypes.array.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
+  collapseSidebar: PropTypes.func.isRequired,
+  expandSidebar: PropTypes.func.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/Sidebar.jsx

@@ -2,8 +2,6 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
 // import SidebarItem from './SidebarItem';
-const rightArrowUrl = require('../../../images/right-arrow.svg');
-const leftArrowUrl = require('../../../images/left-arrow.svg');
 const folderUrl = require('../../../images/folder.svg');
 const downArrowUrl = require('../../../images/down-arrow.svg');
 import ConnectedFileNode from './FileNode';
@@ -60,20 +58,6 @@ class Sidebar extends React.Component {
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="collapse file navigation"
-              className="sidebar__contract"
-              onClick={this.props.collapseSidebar}
-            >
-              <InlineSVG src={leftArrowUrl} />
-            </button>
-            <button
-              aria-label="expand file navigation"
-              className="sidebar__expand"
-              onClick={this.props.expandSidebar}
-            >
-              <InlineSVG src={rightArrowUrl} />
-            </button>
           </div>
         </div>
         { /* <ul className="sidebar__file-list" title="project files">
@@ -105,8 +89,6 @@ Sidebar.propTypes = {
   isExpanded: PropTypes.bool.isRequired,
   projectOptionsVisible: PropTypes.bool.isRequired,
   newFile: PropTypes.func.isRequired,
-  collapseSidebar: PropTypes.func.isRequired,
-  expandSidebar: PropTypes.func.isRequired,
   showFileOptions: PropTypes.func.isRequired,
   hideFileOptions: PropTypes.func.isRequired,
   deleteFile: PropTypes.func.isRequired,

client/modules/IDE/pages/IDEView.jsx

@@ -54,7 +54,7 @@ class IDEView extends React.Component {
     }
 
     this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
-    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 25;
+    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 160 : 20;
     this.forceUpdate();
 
     this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
@@ -79,7 +79,7 @@ class IDEView extends React.Component {
     }
 
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
-      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 200 : 25;
+      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 160 : 20;
     }
 
     if (nextProps.params.project_id && !this.props.params.project_id) {
@@ -266,8 +266,6 @@ class IDEView extends React.Component {
               setSelectedFile={this.props.setSelectedFile}
               newFile={this.props.newFile}
               isExpanded={this.props.ide.sidebarIsExpanded}
-              expandSidebar={this.props.expandSidebar}
-              collapseSidebar={this.props.collapseSidebar}
               showFileOptions={this.props.showFileOptions}
               hideFileOptions={this.props.hideFileOptions}
               deleteFile={this.props.deleteFile}
@@ -293,6 +291,7 @@ class IDEView extends React.Component {
                 ref="consolePane"
                 onDragFinished={this._handleConsolePaneOnDragFinished}
                 allowResize={this.props.ide.consoleIsExpanded}
+                className="editor-preview-subpanel"
               >
                 <Editor
                   lintWarning={this.props.preferences.lintWarning}
@@ -320,6 +319,9 @@ class IDEView extends React.Component {
                   autorefresh={this.props.preferences.autorefresh}
                   unsavedChanges={this.props.ide.unsavedChanges}
                   projectSavedTime={this.props.ide.projectSavedTime}
+                  isExpanded={this.props.ide.sidebarIsExpanded}
+                  expandSidebar={this.props.expandSidebar}
+                  collapseSidebar={this.props.collapseSidebar}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -330,7 +332,7 @@ class IDEView extends React.Component {
                   stopSketch={this.props.stopSketch}
                 />
               </SplitPane>
-              <div>
+              <div className="preview-frame-holder">
                 <div className="preview-frame-overlay" ref="overlay">
                 </div>
                 <div>

client/styles/abstracts/_variables.scss

@@ -1,4 +1,4 @@
-$base-font-size: 16;
+$base-font-size: 12;
 
 //colors
 $p5js-pink: #ed225d;
@@ -15,6 +15,7 @@ $themes: (
     secondary-text-color: #6b6b6b,
     inactive-text-color: #b5b5b5,
     background-color: #fbfbfb,
+    preview-placeholder-color: #dcdcdc,
     button-background-color: #f4f4f4,
     button-color: $black,
     button-border-color: #979797,
@@ -45,8 +46,9 @@ $themes: (
     modal-button-color: $white,
     heading-text-color: $white,
     secondary-text-color: #c2c2c2,
-    inactive-text-color: #7d7d7d,
+    inactive-text-color: #b5b5b5,
     background-color: #333,
+    preview-placeholder-color: #dcdcdc,
     button-background-color: $white,
     button-color: $black,
     button-border-color: #979797,

client/styles/base/_base.scss

@@ -34,6 +34,10 @@ input, button {
 	font-size: 1rem;
 }
 
+button:focus {
+	outline: none;
+}
+
 input {
 	padding: #{5 / $base-font-size}rem;
 	border: 1px solid ;

client/styles/components/_console.scss

@@ -55,10 +55,14 @@
 }
 
 .preview-console__header-title {
-	font-size: #{16 / $base-font-size}rem;
+	font-size: #{12 / $base-font-size}rem;
 	font-weight: normal;
 }
 
+.preview-console__icon {
+	padding-right: #{20 / $base-font-size}rem;
+}
+
 .preview-console__messages {
 	display: flex;
 	flex-direction: column;

client/styles/components/_editor.scss

@@ -8,10 +8,15 @@
 
 .CodeMirror-linenumbers {
 	padding-right: #{10 / $base-font-size}rem;
+
 }
 
 .CodeMirror-linenumber {
-	width: #{35 / $base-font-size}rem;
+	width: #{32 / $base-font-size}rem;
+  left: 0 !important;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+  }
 }
 
 .CodeMirror-lines {
@@ -30,7 +35,7 @@
 
 .CodeMirror-lint-marker-warning, .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-multiple {
   background-image: none;
-  width: 70px;
+  width: #{48 / $base-font-size}rem;
   position: absolute;
   height: 100%;
 }
@@ -50,7 +55,7 @@
 
 .CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
   opacity: 0.3;
-  width: 70px !important;
+  width: #{48 / $base-font-size}rem !important;
   height: 100%;
   // background-color: rgb(255, 95, 82);
 }
@@ -72,8 +77,10 @@
     border-color: getThemifyVariable('ide-border-color');
   }
   // left: 0 !important;
+  width: #{48 / $base-font-size}rem;
 }
 
+
 .editor__options-button {
   @include themify() {
     @extend %icon;
@@ -84,6 +91,7 @@
   z-index: 1;
 }
 
+
 .editor__options {
   display: none;
   @extend %modal;
@@ -99,9 +107,10 @@
 
 .editor__file-name {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable('secondary-text-color');
   }
-  padding: 0 0 #{7 / $base-font-size}rem #{76 / $base-font-size}rem;
+  height: #{29 / $base-font-size}rem;
+  padding: #{7 / $base-font-size}rem 0 0 #{56 / $base-font-size}rem;
   font-size: #{12 / $base-font-size}rem;
   display: flex;
   justify-content: space-between;

client/styles/components/_modal.scss

@@ -3,6 +3,7 @@
   top: #{60 / $base-font-size}rem;
   right: #{400 / $base-font-size}rem;
   z-index: 100;
+  outline: none;
 }
 
 .modal-content {

client/styles/components/_nav.scss

@@ -5,7 +5,6 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	font-size: #{12 / $base-font-size}rem; 
 }
 
 .nav__items-left, .nav__items-right {

client/styles/components/_sidebar.scss

@@ -1,23 +1,20 @@
 .sidebar {
-  @include themify() {
-    border: 1px solid map-get($theme-map, 'ide-border-color');
-  }
   display: flex;
   flex-flow: column;
 
 }
 
 .sidebar__header {
-  padding: #{10 / $base-font-size}rem #{6 / $base-font-size}rem;
+  padding: 0 #{6 / $base-font-size}rem 0 #{19 / $base-font-size}rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: #{47 / $base-font-size}rem;
+  height: #{29 / $base-font-size}rem;
-  min-height: #{47 / $base-font-size}rem;
+  min-height: #{29 / $base-font-size}rem;
 }
 
 .sidebar__title {
-  font-size: #{16 / $base-font-size}rem;
+  font-size: #{12 / $base-font-size}rem;
   display: inline-block;
   .sidebar--contracted & {
     display: none;
@@ -33,6 +30,9 @@
   .sidebar--contracted & {
     display: none;
   }
+  & svg {
+    width: #{10 / $base-font-size}rem;
+  }
 }
 
 .sidebar__file-list {
@@ -52,7 +52,8 @@
 }
 
 .sidebar__file-item {
-  font-size: #{16 / $base-font-size}rem;
+  height: #{20 / $base-font-size}rem;
+  font-size: #{12 / $base-font-size}rem;
   cursor: pointer;
   @include themify() {
     color: map-get($theme-map, 'inactive-text-color');
@@ -70,15 +71,15 @@
 // it won't work if the file tree is too nested
 .file-item__spacer {
   .sidebar__file-item & {
-    width: #{20 / $base-font-size}rem;
+    width: #{33 / $base-font-size}rem;
     .sidebar__file-item & {
-      width: #{40 / $base-font-size}rem;
+      width: #{53 / $base-font-size}rem;
       .sidebar__file-item & {
-        width: #{60 / $base-font-size}rem;
+        width: #{73 / $base-font-size}rem;
         .sidebar__file-item & {
-          width: #{80 / $base-font-size}rem;
+          width: #{93 / $base-font-size}rem;
           .sidebar__file-item & {
-            width: #{100 / $base-font-size}rem;
+            width: #{113 / $base-font-size}rem;
           }
         }
       }
@@ -100,7 +101,7 @@
 }
 
 .sidebar__file-item-name {
-  padding: #{8 / $base-font-size}rem 0;
+  padding: #{4 / $base-font-size}rem 0;
   .sidebar__file-item--editing & {
     display: none;
   }
@@ -109,14 +110,17 @@
 .sidebar__file-item-show-options {
   @include themify() {
     @extend %icon;
-    padding: #{8 / $base-font-size}rem 0;
+    padding: #{4 / $base-font-size}rem 0;
   }
   display: none;
   position: absolute;
-  right: #{26 / $base-font-size}rem;
+  right: #{6 / $base-font-size}rem;
   .sidebar__file-item--selected > .file-item__content & {
     display: inline-block;
   }
+  & svg {
+    width: #{10 / $base-font-size}rem;
+  }
 }
 
 .sidebar__file-item-options {
@@ -130,7 +134,7 @@
   right: #{15 / $base-font-size}rem;
   display: none;
   z-index: 100;
-  padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+  padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
   z-index: 100;
   .sidebar__file-item--open > .file-item__content & {
     display: block;
@@ -151,6 +155,9 @@
   @include themify() {
     @extend %icon;
   }
+  position: absolute;
+  top: #{7 / $base-font-size}rem;
+  left: #{1 / $base-font-size}rem;
   height: #{14 / $base-font-size}rem;
   & svg {
     height: #{14 / $base-font-size}rem;
@@ -165,7 +172,9 @@
   @include themify() {
     @extend %icon;
   }
-  margin-left: #{10 / $base-font-size}rem;
+  position: absolute;
+  top: #{7 / $base-font-size}rem;
+  left: #{34 / $base-font-size}rem;
   height: #{14 / $base-font-size}rem;
   & svg {
     height: #{14 / $base-font-size}rem;
@@ -182,23 +191,29 @@
 }
 
 .sidebar__folder-icon {
-  padding: #{8 / $base-font-size}rem 0;
+  padding: #{4 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {
       fill: map-get($theme-map, 'primary-text-color');
     }
   }
+  & svg {
+    width: #{10 / $base-font-size}rem;
+  }
 }
 
 .sidebar__file-item-icon {
-  padding: #{8 / $base-font-size}rem 0;
+  padding: #{4 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {
       fill: getThemifyVariable('inactive-text-color');
     }
   }
+  & svg {
+    height: #{10 / $base-font-size}rem;
+  }
 }
 
 .sidebar__file-item-closed {
@@ -226,7 +241,7 @@
   }
   top: 100%;
   right: #{-70 / $base-font-size}rem;
-  padding: #{8 / $base-font-size}rem;
+  padding: #{4 / $base-font-size}rem;
   width: #{110 / $base-font-size}rem;
 }
 

client/styles/components/_sketch-list.scss

@@ -22,6 +22,10 @@
   font-size: #{21 / $base-font-size}rem;
 }
 
+.sketch-list__header h2 {  
+  font-size: #{21 / $base-font-size}rem;
+}
+
 .sketches-table-container {
   flex: 1 0 0%;
   overflow-y: scroll;

client/styles/components/_toolbar.scss

@@ -69,7 +69,6 @@
 	@include themify() {
 		border-color: getThemifyVariable('inactive-text-color');
 	}
-	border-left: 2px dashed;
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
 	height: 70%;

client/styles/layout/_fullscreen.scss

@@ -13,4 +13,5 @@
   width: 100%;
   flex: 1 0 0%;
   position: relative;
-}
+}
+

client/styles/layout/_ide.scss

@@ -47,6 +47,7 @@
   position: absolute;
 }
 
+
 .preview-frame-overlay {
   height: 100%;
   width: 100%;
@@ -55,6 +56,15 @@
   display: none;
 }
 
+.preview-frame-placeholder {
+  width: #{400 / $base-font-size}rem;
+  height: #{400 / $base-font-size}rem;
+  position: absolute;
+  @include themify() {
+    background: getThemifyVariable('preview-placeholder-color');
+  }
+}
+
 .toolbar {
 	width: 100%;
 }