Menu buttons

app/assets/javascripts/app/services/directives/views/editorMenu.js

@@ -9,7 +9,7 @@ class EditorMenu {
     };
   }
 
-  controller($scope, componentManager) {
+  controller($scope, componentManager, syncManager) {
     'ngInject';
 
     $scope.formData = {};
@@ -18,6 +18,8 @@ class EditorMenu {
 
     $scope.isDesktop = isDesktopApplication();
 
+    $scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0];
+
     $scope.selectEditor = function($event, editor) {
       if(editor) {
         editor.conflict_of = null; // clear conflict if applicable
@@ -29,8 +31,34 @@ class EditorMenu {
       $scope.callback()(editor);
     }
 
-    $scope.moreEditors = function() {
+    $scope.toggleDefaultForEditor = function(editor) {
+      console.log("Toggling editor", editor);
+      if($scope.defaultEditor == editor) {
+        $scope.removeEditorDefault(editor);
+      } else {
+        $scope.makeEditorDefault(editor);
+      }
+    }
 
+    $scope.makeEditorDefault = function(component) {
+      var currentDefault = componentManager.componentsForArea("editor-editor").filter((e) => {return e.isDefaultEditor()})[0];
+      if(currentDefault) {
+        currentDefault.setAppDataItem("defaultEditor", false);
+        currentDefault.setDirty(true);
+      }
+      component.setAppDataItem("defaultEditor", true);
+      component.setDirty(true);
+      syncManager.sync();
+
+      $scope.defaultEditor = component;
+    }
+
+    $scope.removeEditorDefault = function(component) {
+      component.setAppDataItem("defaultEditor", false);
+      component.setDirty(true);
+      syncManager.sync();
+
+      $scope.defaultEditor = null;
     }
 
   }

app/assets/javascripts/app/services/directives/views/globalExtensionsMenu.js

@@ -133,22 +133,6 @@ class GlobalExtensionsMenu {
       }
     }
 
-    $scope.makeEditorDefault = function(component) {
-      var currentDefault = componentManager.componentsForArea("editor-editor").filter((e) => {return e.isDefaultEditor()})[0];
-      if(currentDefault) {
-        currentDefault.setAppDataItem("defaultEditor", false);
-        currentDefault.setDirty(true);
-      }
-      component.setAppDataItem("defaultEditor", true);
-      component.setDirty(true);
-      syncManager.sync();
-    }
-
-    $scope.removeEditorDefault = function(component) {
-      component.setAppDataItem("defaultEditor", false);
-      component.setDirty(true);
-      syncManager.sync();
-    }
 
     // Installation
 

app/assets/javascripts/app/services/directives/views/menuRow.js

@@ -7,13 +7,22 @@ class MenuRow {
     this.scope = {
       circle: "=",
       title: "=",
-      subtite: "="
+      subtite: "=",
+      hasButton: "=",
+      buttonText: "=",
+      buttonClass: "=",
+      buttonAction: "&"
     };
   }
 
   controller($scope, componentManager) {
     'ngInject';
 
+    $scope.clickButton = function($event) {
+      $event.stopPropagation();
+      $scope.buttonAction();
+    }
+
   }
 }
 

app/assets/templates/frontend/directives/editor-menu.html.haml

@@ -4,10 +4,18 @@
       .header
         %h4.title Note Editor
       %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectEditor($event, null)"}
-      %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)", "title" => "editor.name", "circle" => "selectedEditor === editor && 'success'"}
-        %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
-        .sublabel{"ng-if" => "editor.local"}
-          Locally Installed
-        .sublabel.faded{"ng-if" => "editor.local && !isDesktop"} Unavailable in Web Browser
+
+      %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)", "title" => "editor.name",
+      "circle" => "selectedEditor === editor && 'success'",
+       "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'",
+       "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"}
+        .row
+          .column
+            %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
+            .sublabel{"ng-if" => "editor.local"}
+              Locally Installed
+
+            .sublabel.faded{"ng-if" => "editor.local && !isDesktop"} Unavailable in Web Browser
+
       %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"}
         %menu-row{"title" => "'Download More Editors'", "ng-click" => "moreEditors()"}

app/assets/templates/frontend/directives/menu-row.html.haml

@@ -1,10 +1,14 @@
 .row
-  .column{"ng-if" => "circle"}
-    .circle.small{"ng-class" => "circle"}
   .column
-    .label
-      {{title}}
-    .sublabel{"ng-if" => "subtitle"}
-      {{subtitle}}
-
-    %ng-transclude
+    .left
+      .column{"ng-if" => "circle"}
+        .circle.small{"ng-class" => "circle"}
+      .column
+        .label
+          {{title}}
+        .sublabel{"ng-if" => "subtitle"}
+          {{subtitle}}
+        %ng-transclude
+  .column{"ng-if" => "hasButton"}
+    .button.info{"ng-click" => "clickButton($event)", "ng-class" => "buttonClass"}
+      {{buttonText}}

vendor/assets/stylesheets/stylekit.css

@@ -111,16 +111,25 @@
   cursor: pointer;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
 }
 .sn-component .menu-panel .row .column {
   display: flex;
   justify-content: center;
   flex-direction: column;
+  /* Nested row */
 }
 .sn-component .menu-panel .row .column:not(:first-child) {
   padding-left: 1.0rem;
   padding-right: 0.15rem;
 }
+.sn-component .menu-panel .row .column .row {
+  padding: 0;
+  border-bottom: none;
+}
+.sn-component .menu-panel .row .column .left {
+  display: flex;
+}
 .sn-component .menu-panel .row .button .label, .sn-component .menu-panel .row .box .label, .sn-component .menu-panel .row .notification .label, .sn-component .menu-panel .row .circle .label, .sn-component .menu-panel .row .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .button .subtitle, .sn-component .menu-panel .row .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .box .subtitle, .sn-component .menu-panel .row .notification .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .notification .subtitle, .sn-component .menu-panel .row .circle .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .menu-panel .row .circle .subtitle {
   font-size: 0.8rem;
   font-weight: normal;
@@ -365,8 +374,8 @@
   border-radius: 50%;
 }
 .sn-component .circle.small {
-  width: 12px;
-  height: 12px;
+  width: 11px;
+  height: 11px;
 }
 .sn-component .spinner {
   border: 1px solid #515263;
@@ -402,5 +411,34 @@
     transform: rotate(360deg);
   }
 }
+.sn-component .app-bar {
+  display: flex;
+  width: 100%;
+  height: 2rem;
+  padding: 0.1rem 0.8rem;
+  background-color: #F6F6F6;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #DDDDDD;
+}
+.sn-component .app-bar .left, .sn-component .app-bar .right {
+  display: flex;
+}
+.sn-component .app-bar .item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sn-component .app-bar .item:not(:first-child) {
+  margin-left: 1rem;
+}
+.sn-component .app-bar .item .label, .sn-component .app-bar .item .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .app-bar .item .subtitle {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+.sn-component .app-bar .item .label:hover, .sn-component .app-bar .item .panel .content .panel-section .subtitle:hover, .sn-component .panel .content .panel-section .app-bar .item .subtitle:hover {
+  color: #086DD6;
+}
 
 /*# sourceMappingURL=stylekit.css.map */