ember-cli · Gaurav0 · Mar 1, 2020 · Feb 29, 2020 · Oct 20, 2016 · Oct 20, 2016
diff --git a/app/components/editor-mode-menu.js b/app/components/editor-mode-menu.js
@@ -2,7 +2,7 @@ import Component from '@ember/component';
 
 export default Component.extend({
   tagName: 'li',
-  classNames: ['dropdown'],
+  classNames: ['dropdown', 'dropup'],
 
   actions: {
     setKeyMap(keyMap) {

diff --git a/app/components/file-editor-column.js b/app/components/file-editor-column.js
@@ -27,10 +27,6 @@ export default Component.extend({
 
   isFirstColumn: equal('col', '1'),
 
-  showFileTreeOpenIcon: computed('isFirstColumn', 'fileTreeShown', function() {
-    return this.isFirstColumn && !this.fileTreeShown;
-  }),
-
   focusIn () {
     this.focusEditor(this);
   },

diff --git a/app/components/file-menu.js b/app/components/file-menu.js
@@ -4,7 +4,7 @@ import DropdownSubmenuFixMixin from "../mixins/dropdown-submenu-fix";
 
 export default Component.extend(DropdownSubmenuFixMixin, {
   tagName: 'li',
-  classNames: ['dropdown'],
+  classNames: ['dropdown', 'dropup'],
 
   // show fork option only if does not belong to user and is not a revision, otherwise show copy
   // Github api does not permit forking if you own the gist already

diff --git a/app/components/file-tree.js b/app/components/file-tree.js
@@ -99,22 +99,18 @@ export default Component.extend({
       this.jsTreeActionReceiver.send('toggleNode', node.id);
     },
 
-    didBecomeReady() {
+    didBecomeReadyOptional() {
       if(this.didBecomeReady) {
         this.didBecomeReady();
       }
     },
 
-    didChange() {
+    didChangeOptional() {
       if (this.didChange) {
         this.didChange();
       }
     },
 
-    hideFileTree() {
-      this.hideFileTree();
-    },
-
     expandAll() {
       this.jsTreeActionReceiver.send('openAll');
     },

diff --git a/app/components/twiddle-panes.js b/app/components/twiddle-panes.js
@@ -5,6 +5,7 @@ import { run } from '@ember/runloop';
 export default Component.extend({
   resizeableColumns: service(),
   classNames: ['row', 'twiddle-panes'],
+  classNameBindings: ['fileTreeShown'],
 
   init() {
     this._super(...arguments);

diff --git a/app/components/user-menu.js b/app/components/user-menu.js
@@ -5,7 +5,7 @@ import config from '../config/environment';
 
 export default Component.extend({
   tagName: 'ul',
-  classNames: ['nav', 'nav-pills', 'user-menu'],
+  classNames: ['user-menu', 'dropup'],
 
   userName: readOnly('session.currentUser.login'),
 

diff --git a/app/components/versions-menu.js b/app/components/versions-menu.js
@@ -6,7 +6,7 @@ import DropdownSubmenuFixMixin from "../mixins/dropdown-submenu-fix";
 export default Component.extend(DropdownSubmenuFixMixin, {
   dependencyResolver: service(),
   tagName: 'li',
-  classNames: ['dropdown', 'versions-menu'],
+  classNames: ['dropdown', 'dropup', 'versions-menu'],
 
   versions: readOnly('dependencyResolver.emberVersions'),
   dataVersions: readOnly('dependencyResolver.emberDataVersions')

diff --git a/app/styles/_toolbar.scss b/app/styles/_toolbar.scss
@@ -1,9 +1,4 @@
 .toolbar {
-
-  hr {
-    display: none;
-  }
-
   .nav-pills > li > a {
     display: block;
     text-decoration: none;
@@ -14,70 +9,36 @@
     height: $topbar-height;
   }
 
-  @media (max-width: $screen-md-min) {
-    position: relative;
-    z-index: 100;
-    opacity: 1;
-
-    >div, >ul {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .nav-pills > li {
-      float: none;
-    }
-
-    .nav-pills > li + li {
-      margin-left: 0;
-    }
-
-    .dropdown-toggle {
-      display: block;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .dropdown-menu {
-      position: static;
-      float: none;
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      background: inherit;
-
-      .dropdown-submenu > .dropdown-menu {
-        margin-left: 1em;
-        margin-top: 0;
-      }
-
-      .divider {
-        background-color: lighten($burnt-orange, 10%);
-      }
+  .dropdown .caret {
+    position: absolute;
+    right: 10px;
+    top: 13px;
+  }
 
-      a {
-        color: #fff;
 
-        &:hover {
-          background-color: lighten($burnt-orange, 10%);
-        }
-      }
-    }
-
-    hr {
-      display: block;
-      border-color: $burnt-orange;
-      margin: 1em 0;
+  .dropdown-menu {
+    .dropdown-submenu > .dropdown-menu {
+      top: auto;
+      margin-bottom: -31px;
     }
   }
+
   color: #fff;
   font-size: $font-size;
   background: $header-bg;
   background-image: url(/images/header.svg);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
-  padding: 1rem 0;
+
+  hr {
+    display: block;
+    border-color: $burnt-orange;
+    margin: 1em 0;
+    position: absolute;
+    bottom: 82px;
+    width: 250px;
+  }
 
   @media (max-width: $screen-md-min) {
     padding: 0;
@@ -109,22 +70,31 @@
     padding-left: 0;
   }
 
-  .user-menu {
-    text-align: right;
+  .file-tree {
+    position: absolute;
+    top: 70px;
+    bottom: 207px;
+    width: 250px;
+    overflow: auto;
 
-    @media (min-width: $screen-md-min) {
-      position: absolute;
-      right: 0;
-      top: ($topbar-height - $topbar-control-height) / 2;
+    .jstree-default .jstree-hovered {
+        background: rgba(0, 0, 0, 0.13);
+        box-shadow: none;
     }
 
-    @media (max-width: $screen-md-min) {
-      float: none;
-      text-align: left;
+    .jstree-default .jstree-clicked {
+        background: #b95252;
+        box-shadow: none;
+    }
+  }
 
-      .user-dropdown > .dropdown-toggle {
-        padding-left: 1em;
-      }
+  .user-menu {
+    position: absolute;
+    bottom: 5px;
+    width: 250px;
+
+    a {
+      display: block;
     }
 
     .user-avatar {
@@ -133,7 +103,7 @@
       height: 100%;
       overflow: hidden;
       float: left;
-      margin-right: 10px;
+      margin-right: 5px;
       line-height: normal;
       border-radius: 3px;
 
@@ -144,22 +114,19 @@
 
       &.unauthenticated {
         background: url("../images/github32-inverse-faf2ee.svg");
+        height: 32px;
       }
     }
   }
 
   .main-menu {
     text-align: left;
-    height: 60px;
+    bottom: 100px;
+    position: absolute;
+    width: 250px;
 
-    @media (min-width: $screen-md-min) {
-      position: absolute;
-      left: 0;
-      top: ($topbar-height - $topbar-control-height) / 2;
-    }
-
-    @media (max-width: $screen-md-min) {
-      height: auto;
+    a {
+      display: block;
     }
   }
 
@@ -169,18 +136,9 @@
     display: inline-block;
     margin-left: auto;
     margin-right: auto;
-
-    @media (min-width: $screen-md-min) {
-      position: absolute;
-      top: 6px;
-      left: 50%;
-      margin-left: -400px;
-      width: 800px;
-    }
-
-    @media (max-width: $screen-md-min) {
-      margin-left: 15px;
-    }
+    position: absolute;
+    top: 6px;
+    width: 250px;
 
     h1 {
       margin: 10px;
@@ -276,7 +234,7 @@
 
   .sign-in {
     cursor: pointer;
-    padding: 0 .5em 0 0;
+    padding: 0 .5em;
   }
 
   .signing-in {

diff --git a/app/styles/_twiddle-panes.scss b/app/styles/_twiddle-panes.scss
@@ -2,10 +2,15 @@
   margin: 0;
   margin-left: 0;
   position: absolute;
-  top: $topbar-height;
+  top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  transition: left 0.2s;
+
+  &.file-tree-shown {
+    left: 250px;
+  }
 
   @media (min-width: $screen-md-min) {
     display: -webkit-flex;
@@ -185,12 +190,21 @@
 }
 
 .gist-header {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 250px;
+
+  @media (min-width: $screen-md-min) {
+    bottom: $footer-height;
+  }
+
+  @media (max-width: $screen-md-min) {
+    top: $footer-height;
+  }
 
   > .visible-toolbar {
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height: 100%;
   }
 }
diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs
@@ -1,8 +1,12 @@
 <div class="header">
-  {{#if showFileTreeOpenIcon}}
+  {{#if this.isFirstColumn}}
     <span class="nav-left">
-      <span class="hint--bottom hint--rounded" data-hint="Show project files" >
-        <span class="glyphicon glyphicon-chevron-right" {{action 'showFileTree'}}></span>
+      <span class="hint--bottom hint--rounded" data-hint="{{if @fileTreeShown "Hide" "Show"}} project files and settings" >
+        {{#if @fileTreeShown}}
+          <button class="glyphicon glyphicon-chevron-left" aria-label="Hide Sidebar" {{action @hideFileTree}}></button>
+        {{else}}
+          <button class="glyphicon glyphicon-chevron-right" aria-label="Show Sidebar" {{action @showFileTree}}></button>
+        {{/if}}
       </span>
     </span>
   {{/if}}

diff --git a/app/templates/components/file-menu.hbs b/app/templates/components/file-menu.hbs
@@ -2,7 +2,7 @@
   File <b class="caret"></b>
 </a>
 
-<ul class="dropdown-menu">
+<ul class="dropdown-menu dropdown-menu-right">
   <li>{{#link-to 'gist.new' class="test-new-twiddle" }}New Twiddle{{/link-to}}</li>
   {{#if model}}
     <li role="presentation" class="divider"></li>

diff --git a/app/templates/components/file-tree.hbs b/app/templates/components/file-tree.hbs
@@ -9,15 +9,12 @@
       <span class="twiddlicon twiddlicon-collapse-all" {{action 'collapseAll'}}></span>
     </span>
   </div>
-  <div class="nav-right">
-    <span class="hint--bottom hint--rounded" data-hint="Hide project files">
-      <span class="glyphicon glyphicon-chevron-left" {{action 'hideFileTree'}}></span>
-    </span>
-  </div>
 </div>
-{{ember-jstree data=fileTreeData
-               actionReceiver=jsTreeActionReceiver
-               eventDidSelectNode=(action "handleSelectTreeNode")
-               eventDidBecomeReady=(action "didBecomeReady")
-               eventDidChange=(action "didChange")
-}}
+
+<EmberJstree
+  @data={{this.fileTreeData}}
+  @actionReceiver={{this.jsTreeActionReceiver}}
+  @eventDidSelectNode={{action "handleSelectTreeNode"}}
+  @eventDidBecomeReady={{action "didBecomeReadyOptional"}}
+  @eventDidChange={{action "didChangeOptional"}}
+/>