Sidebar

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) {

app/components/file-editor-column.js

@@ -27,35 +27,19 @@ export default Component.extend({
 
   isFirstColumn: equal('col', '1'),
 
-  showFileTreeOpenIcon: computed('isFirstColumn', 'fileTreeShown', function() {
-    return this.isFirstColumn && !this.fileTreeShown;
-  }),
-
   focusIn () {
     this.focusEditor(this);
   },
 
   actions: {
-    selectFile(file) {
+    selectAndSetFile(file) {
       this.set('file', file);
       this.selectFile(file);
     },
 
     valueUpdated(value, __, changeObj) {
       const isUserChange = changeObj.origin !== 'setValue';
       this.contentChanged(isUserChange, value);
-    },
-
-    removeColumn(col) {
-      this.removeColumn(col);
-    },
-
-    addColumn() {
-      this.addColumn();
-    },
-
-    showFileTree() {
-      this.showFileTree();
     }
   }
 });

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

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');
     },

app/components/gist-body.js

@@ -2,5 +2,6 @@ import { equal } from '@ember/object/computed';
 import Component from '@ember/component';
 
 export default Component.extend({
+  classNames: ['gist-body'],
   noColumns: equal('numColumns', 0)
 });

app/components/gist-header.js

@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['gist-header'],
+  classNameBindings: ['open'],
+  tagName: 'nav',
+  open: true
+});

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);

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'),
 

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')

app/helpers/not.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function not([val]/*, hash*/) {
+  return !val;
+});

app/styles/_toolbar.scss

@@ -1,86 +1,44 @@
 .toolbar {
+  display: flex;
+  flex-direction: column;
+  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;
 
-  hr {
-    display: none;
+  @media (max-width: $screen-md-min) {
+    padding: 0;
+  }
+
+  @media (min-width: $screen-md-min) {
+    height: $topbar-height;
   }
 
   .nav-pills > li > a {
     display: block;
     text-decoration: none;
   }
 
-
-  @media (min-width: $screen-md-min) {
-    height: $topbar-height;
+  .dropdown .caret {
+    position: absolute;
+    right: 10px;
+    top: 13px;
   }
 
-  @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%);
-      }
-
-      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;
 
-  @media (max-width: $screen-md-min) {
-    padding: 0;
+  hr {
+    display: block;
+    border-color: $burnt-orange;
+    margin: 1em 0;
   }
 
   button.navbar-toggle {
@@ -109,22 +67,24 @@
     padding-left: 0;
   }
 
-  .user-menu {
-    text-align: right;
+  .file-tree {
+    flex: 1.5;
+    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 {
+    a {
+      display: block;
     }
 
     .user-avatar {
@@ -133,7 +93,7 @@
       height: 100%;
       overflow: hidden;
       float: left;
-      margin-right: 10px;
+      margin-right: 5px;
       line-height: normal;
       border-radius: 3px;
 
@@ -144,22 +104,16 @@
 
       &.unauthenticated {
         background: url("../images/github32-inverse-faf2ee.svg");
+        height: 32px;
       }
     }
   }
 
   .main-menu {
     text-align: left;
-    height: 60px;
 
-    @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;
     }
   }
 
@@ -170,18 +124,6 @@
     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;
-    }
-
     h1 {
       margin: 10px;
     }
@@ -276,7 +218,7 @@
 
   .sign-in {
     cursor: pointer;
-    padding: 0 .5em 0 0;
+    padding: 0 .5em;
   }
 
   .signing-in {