Add a toggle to display menus wide

A toggle is displayed at the upper right corner, when triggered display menu are eitehr displayed as dropdown menu, or like a toolbar
maildev · Oct 6, 2019 · 37842d3 · 37842d3
1 parent ad6b59c
commit 37842d3
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 3 deletions.
diff --git a/app/index.html b/app/index.html
@@ -78,6 +78,12 @@
                     <ul class="toolbar toolbar-right" ng-controller="NavCtrl">
 
                         <li>
+                            <a ng-click="changeMenuDisplayMode('menu')" href="" ng-if="menuDisplayMode=='wide'">
+                                <i class="toggle on"></i>
+                            </a>
+                            <a ng-click="changeMenuDisplayMode('wide')" href="" ng-if="menuDisplayMode=='menu'">
+                                <i class="toggle off"></i>
+                            </a>
                             <a href="#/">
                                 <i class="fa fa-info-circle"></i>
                                 Info

diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
@@ -12,6 +12,11 @@ app.controller('MainCtrl', [
     $scope.currentItemId = null
     $scope.autoShow = false
     $scope.unreadItems = 0
+    $scope.menuDisplayMode = 'menu'
+
+    $rootScope.$on('menuDisplayMode', function (event, mode) {
+      $scope.menuDisplayMode = mode
+    })
 
     var countUnread = function () {
       $scope.unreadItems = $scope.items.filter(function (email) {
@@ -117,5 +122,15 @@ app.controller('NavCtrl', [
     $scope.deleteAll = function () {
       Email.delete({ id: 'all' })
     }
+
+    $scope.changeMenuDisplayMode = function (mode) {
+      $rootScope.$emit('menuDisplayMode', mode)
+      localStorage.setItem('menuDisplayMode', mode)
+    }
+
+    const menuDisplayMode = localStorage.getItem('menuDisplayMode')
+    if (menuDisplayMode) {
+      $rootScope.$emit('menuDisplayMode', menuDisplayMode)
+    }
   }
 ])
diff --git a/app/styles/icons/iconmonstr-control-panel-21.svg b/app/styles/icons/iconmonstr-control-panel-21.svg
diff --git a/app/styles/icons/iconmonstr-control-panel-23.svg b/app/styles/icons/iconmonstr-control-panel-23.svg
diff --git a/app/styles/style.css b/app/styles/style.css
diff --git a/app/views/item.html b/app/views/item.html
@@ -1,6 +1,6 @@
 <ul class="toolbar email-toolbar on-light">
 
-    <li class="dropdown-container">
+    <li class="dropdown-container" ng-if="menuDisplayMode=='menu'">
       <a href="" class="dropdown-trigger"
         ng-click="toggleDropdown($event, 'display')"
         ng-class="{ open: dropdownOpen == 'display' }">
@@ -42,8 +42,45 @@
         </li>
       </ul>
     </li>
+    <li ng-if="menuDisplayMode=='wide'">
+      <ul class="toolbar">
+        <li>
+            <a href="" class=""
+               ng-click="show('html')"
+               ng-class="{ active: panelVisibility == 'html', disabled: !item.html }"
+               title="HTML">
+              <i class="fa fa-code"></i>
+            </a>
+        </li>
+        <li>
+            <a href="" class=""
+               ng-click="show('plain')"
+               ng-class="{ active: panelVisibility == 'plain' }"
+               title="Plain Text">
+              <i class="fa fa-file-text-o"></i>
+            </a>
+        </li>
+        <li>
+            <a href="" class=""
+               ng-click="show('headers')"
+               ng-class="{ active: panelVisibility == 'headers' }"
+               title="Headers">
+              <i class="fa fa-list"></i>
+            </a>
+        </li>
+        <li>
+            <a href="" class=""
+               ng-click="show('source')"
+               ng-class="{ active: panelVisibility == 'source' }"
+               title="Source">
+              <i class="fa fa-file"></i>
+            </a>
+        </li>
+        <li class="disabled">|</li>
+      </ul>
+    </li>
 
-    <li class="dropdown-container">
+    <li class="dropdown-container" ng-if="menuDisplayMode=='menu'">
       <a href="" class="dropdown-trigger"
         ng-click="toggleDropdown($event, 'viewport')"
         ng-class="{ open: dropdownOpen == 'viewport' }">
@@ -86,6 +123,44 @@
       </ul>
     </li>
 
+    <li ng-if="menuDisplayMode=='wide'">
+        <ul class="toolbar">
+          <li>
+            <a href="" class=""
+               ng-click="resize('320px')"
+               ng-class="{ active: iframeSize == '320px' }"
+               title="320px">
+              <i class="fa fa-mobile fa-mobile-smaller"></i>
+            </a>
+          </li>
+          <li>
+            <a href="" class=""
+               ng-click="resize('480px')"
+               ng-class="{ active: iframeSize == '480px' }"
+               title="480px">
+              <i class="fa fa-mobile"></i>
+            </a>
+          </li>
+          <li>
+            <a href="" class=""
+               ng-click="resize('600px')"
+               ng-class="{ active: iframeSize == '600px' }"
+               title="600px">
+              <i class="fa fa-tablet"></i>
+            </a>
+          </li>
+          <li>
+            <a href="" class=""
+               ng-click="resize()"
+               ng-class="{ active: iframeSize == null }"
+               title="full">
+              <i class="fa fa-desktop"></i>
+            </a>
+          </li>
+          <li class="disabled">|</li>
+        </ul>
+    </li>
+
 
     <li>
         <a href="" class=""

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
@@ -390,3 +390,17 @@ code {
   color: white;
   padding-top: 3px;
 }
+
+.toggle {
+    display: inline-block;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    filter: brightness(0) invert(1);
+    &.on {
+        background: url('./icons/iconmonstr-control-panel-21.svg');
+    }
+    &.off {
+        background: url('./icons/iconmonstr-control-panel-23.svg');
+    }
+}