Merge pull request #692 from knownasilya/fix/file-menu

fix file menu in mobile and medium sizes
ember-cli · Mar 2, 2020 · 07f11b6 · 07f11b6
2 parents 90f40c4 + 408b471
commit 07f11b6
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 39 deletions.
diff --git a/app/components/file-menu.js b/app/components/file-menu.js
@@ -3,8 +3,7 @@ import { computed } from '@ember/object';
 import DropdownSubmenuFixMixin from "../mixins/dropdown-submenu-fix";
 
 export default Component.extend(DropdownSubmenuFixMixin, {
-  tagName: 'li',
-  classNames: ['dropdown', 'dropup'],
+  classNames: ['file-menu', 'dropdown'],
 
   // 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/styles/_toolbar.scss b/app/styles/_toolbar.scss
@@ -30,8 +30,12 @@
 
   .dropdown-menu {
     .dropdown-submenu > .dropdown-menu {
-      top: auto;
+      top: 5px;
       margin-bottom: -31px;
+
+      @media (max-width: $screen-md-min) {
+        left: 80px;
+      }
     }
   }
 
@@ -69,7 +73,33 @@
 
   .file-tree {
     flex: 1.5;
-    overflow: auto;
+
+    .tree {
+      height: 100%;
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .controls {
+          padding: 0.5rem;
+        }
+
+        .file-menu {
+          flex: 0.5;
+
+          .dropdown-toggle {
+            display: block;
+          }
+        }
+      }
+
+      .ember-jstree {
+        height: 100%;
+        overflow: auto;
+      }
+    }
 
     .jstree-default .jstree-hovered {
         background: rgba(0, 0, 0, 0.13);

diff --git a/app/styles/_twiddle-panes.scss b/app/styles/_twiddle-panes.scss
@@ -18,7 +18,6 @@
     bottom: $footer-height;
   }
   @media (max-width: $screen-md-min) {
-    // padding-top: $footer-height;
     position: static;
   }
 
@@ -33,6 +32,10 @@
     @media (max-width: $screen-md-min) {
       margin-bottom: 60px;
       min-height: 100vh;
+
+      .file-tree-toggle {
+        display: none;
+      }
     }
   }
 
@@ -220,8 +223,14 @@
     .toggle-mobile {
       display: block;
       border: none;
+      border-radius: 0;
       background-color: transparent;
       color: white;
+
+      &:active:hover {
+        background-color: transparent;
+        color: white;
+      }
     }
   }
 

diff --git a/app/templates/components/editor-mode-menu.hbs b/app/templates/components/editor-mode-menu.hbs
@@ -2,7 +2,7 @@
   Keystroke - {{selectedKeyMap}} <b class="caret"></b>
 </a>
 
-<ul class="dropdown-menu dropdown-menu-right">
+<ul class="dropdown-menu dropdown-menu-left">
   <li><a {{action 'setKeyMap' 'default'}} class="key-map-option default">Default</a></li>
   <li><a {{action 'setKeyMap' 'basic'}} class="key-map-option basic">Basic</a></li>
   <li><a {{action 'setKeyMap' 'vim'}} class="key-map-option vim">Vim</a></li>

diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs
@@ -1,6 +1,6 @@
 <div class="header">
   {{#if this.isFirstColumn}}
-    <span class="nav-left">
+    <span class="file-tree-toggle nav-left">
       <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>

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 dropdown-menu-right">
+<ul class="dropdown-menu dropdown-menu-left">
   <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
@@ -1,5 +1,6 @@
 <div class="header">
-  <div class="nav-left">
+  {{yield}}
+  <div class="controls">
     &nbsp;
     <span class="hint--bottom hint--rounded" data-hint="Expand All">
       <span class="twiddlicon twiddlicon-expand-all" {{action 'expandAll'}}></span>
@@ -12,6 +13,7 @@
 </div>
 
 <EmberJstree
+  class="ember-jstree"
   @data={{this.fileTreeData}}
   @actionReceiver={{this.jsTreeActionReceiver}}
   @eventDidSelectNode={{action "handleSelectTreeNode"}}

diff --git a/app/templates/components/gist-header.hbs b/app/templates/components/gist-header.hbs
@@ -11,36 +11,37 @@
   {{#if this.open}}
     <div class="file-tree">
       <FileTree
+        class="tree"
         @model={{@model}}
         @openFile={{@openFile}}
-      />
+      >
+        {{file-menu model=@model
+                  session=@session
+                  activeEditorCol=@activeEditorCol
+                  activeFile=@activeFile
+                  isRevision=@isRevision
+                  addFile=@addFile
+                  addHelper=@addHelper
+                  addComponent=@addComponent
+                  addUnitTestFile=@addUnitTestFile
+                  addIntegrationTestFile=@addIntegrationTestFile
+                  addAcceptanceTestFile=@addAcceptanceTestFile
+                  renameFile=@renameFile
+                  removeFile=@removeFile
+                  deleteGist=(route-action "deleteGist")
+                  saveGist=(route-action "saveGist")
+                  fork=(route-action "fork")
+                  copy=(route-action "copy")
+                  signInViaGithub=(route-action "signInViaGithub")
+                  showRevision=(route-action "showRevision")
+                  showCurrentVersion=(route-action "showCurrentVersion")
+                  downloadProject=(route-action "downloadProject")
+        }}
+      </FileTree>
     </div>
 
     <div class="menus">
       <ul class="main-menu">
-        {{file-menu model=@model
-                    session=@session
-                    activeEditorCol=@activeEditorCol
-                    activeFile=@activeFile
-                    isRevision=@isRevision
-                    addFile=@addFile
-                    addHelper=@addHelper
-                    addComponent=@addComponent
-                    addUnitTestFile=@addUnitTestFile
-                    addIntegrationTestFile=@addIntegrationTestFile
-                    addAcceptanceTestFile=@addAcceptanceTestFile
-                    renameFile=@renameFile
-                    removeFile=@removeFile
-                    deleteGist=(route-action "deleteGist")
-                    saveGist=(route-action "saveGist")
-                    fork=(route-action "fork")
-                    copy=(route-action "copy")
-                    signInViaGithub=(route-action "signInViaGithub")
-                    showRevision=(route-action "showRevision")
-                    showCurrentVersion=(route-action "showCurrentVersion")
-                    downloadProject=(route-action "downloadProject")
-        }}
-
         {{editor-mode-menu selectedKeyMap=@selectedKeyMap setKeyMap=@setEditorKeyMap}}
         {{versions-menu versionSelected=@versionSelected}}
       </ul>

diff --git a/app/templates/components/user-menu.hbs b/app/templates/components/user-menu.hbs
@@ -10,7 +10,7 @@
         </span>
         {{userName}} <b class="caret"></b>
       </a>
-      <ul class="dropdown-menu dropdown-menu-right">
+      <ul class="dropdown-menu dropdown-menu-left">
         <li><a {{action 'showTwiddles'}} class="test-show-twiddles">My Saved Twiddles</a></li>
         <li role="presentation" class="divider"></li>
         <li><a {{action 'signOut'}} class="test-sign-out">Sign out</a></li>
@@ -29,7 +29,7 @@
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     Help <b class="caret"></b>
   </a>
-  <ul class="dropdown-menu dropdown-menu-right">
+  <ul class="dropdown-menu dropdown-menu-left">
     {{#if currentVersionLink}}
       <li><a href={{currentVersionLink}} target="_blank" rel="noopener" class="test-current-version-link">Ember Twiddle {{v}}{{version}}</a></li>
     {{/if}}

diff --git a/app/templates/components/versions-menu.hbs b/app/templates/components/versions-menu.hbs
@@ -2,7 +2,7 @@
   Dependencies <b class="caret"></b>
 </a>
 
-<ul class="dropdown dropdown-menu dropdown-menu-right">
+<ul class="dropdown dropdown-menu dropdown-menu-left">
   <li class="dropdown-submenu">
     <a tabindex="-1" data-toggle="dropdown">Ember.js</a>
 

diff --git a/tests/acceptance/gist-test.js b/tests/acceptance/gist-test.js
@@ -22,8 +22,8 @@ const firstColumn = () => find('.code');
 const firstFilePicker = () => firstColumn().querySelector('.dropdown-toggle');
 const secondFile = () => firstColumn().querySelector('.dropdown-menu li:nth-child(2) a');
 const anyFile = () => firstColumn().querySelector('.dropdown-menu li:nth-child(1) a');
-const fileMenu = '.main-menu .dropdown-toggle';
-const deleteAction = '.main-menu .test-remove-action';
+const fileMenu = '.file-menu .dropdown-toggle';
+const deleteAction = '.file-menu .test-remove-action';
 const addTemplateAction = '.test-template-action';
 const firstFilePickerFiles = () => firstColumn().querySelectorAll('.dropdown-menu>li');
 const firstColumnTextarea = () => firstColumn().querySelector('.CodeMirror textarea');

diff --git a/tests/acceptance/use-pods-test.js b/tests/acceptance/use-pods-test.js
@@ -8,7 +8,7 @@ import outputContents from '../helpers/output-contents';
 
 const firstColumn = '.code';
 const firstFilePicker = firstColumn + ' .dropdown-toggle';
-const fileMenu = '.main-menu .dropdown-toggle';
+const fileMenu = '.file-menu .dropdown-toggle';
 const addTemplateAction = '.test-template-action';
 
 module('Acceptance | use pods', function(hooks) {