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
2016-12-19 14:07:04 -08:00 · 2016-12-19 14:07:04 -08:00 · a5d304da2b
commit a5d304da2b
parent 0f17633f79
16 changed files with 111 additions and 58 deletions
--- a/client/images/folder.svg
+++ b/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>
--- a/client/modules/IDE/components/Console.jsx
+++ b/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>
--- a/client/modules/IDE/components/Editor.jsx
+++ b/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;
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/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,
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/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>
--- a/client/styles/abstracts/_variables.scss
+++ b/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,
--- a/client/styles/base/_base.scss
+++ b/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 ;
--- a/client/styles/components/_console.scss
+++ b/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;
--- a/client/styles/components/_editor.scss
+++ b/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;
--- a/client/styles/components/_modal.scss
+++ b/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 {
--- a/client/styles/components/_nav.scss
+++ b/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 {
--- a/client/styles/components/_sidebar.scss
+++ b/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;
-  min-height: #{47 / $base-font-size}rem;
+  height: #{29 / $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;
 }

--- a/client/styles/components/_sketch-list.scss
+++ b/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;
--- a/client/styles/components/_toolbar.scss
+++ b/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%;
--- a/client/styles/layout/_fullscreen.scss
+++ b/client/styles/layout/_fullscreen.scss
@ -13,4 +13,5 @@
  width: 100%;
  flex: 1 0 0%;
  position: relative;
-}
+}
+
--- a/client/styles/layout/_ide.scss
+++ b/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%;
 }