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}}