Menus wip

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

@@ -1,18 +1,17 @@
-%ul.dropdown-menu.sectioned-menu
-  .extension{"ng-repeat" => "extension in extensions"}
-    .header{"ng-click" => "extension.hide = !extension.hide"}
-      .title {{extension.name}}
-      .subtitle
-        Will submit your note
-        %strong {{accessTypeForExtension(extension)}}
-      .spinner.loading{"ng-if" => "extension.loading"}
-      %div{"ng-if" => "extension.hide"} …
-    %ul{"ng-if" => "!extension.hide"}
-      %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
-      "ng-class" => "{'faded' : !isActionEnabled(action, extension)}"}
-        %label.menu-item-title {{action.label}}
-        .menu-item-subtitle {{action.desc}}
+.sn-component
+  .menu-panel.dropdown-menu
+    .section{"ng-repeat" => "extension in extensions"}
+      .header{"ng-click" => "extension.hide = !extension.hide"}
+        .column
+          %h4.title {{extension.name}}
+          .subtitle
+            Will submit your note
+            %strong {{accessTypeForExtension(extension)}}
+          .spinner.loading{"ng-if" => "extension.loading"}
+          %div{"ng-if" => "extension.hide"} …
 
+      %menu-row{"ng-if" => "!extension.hide", "ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
+      "ng-class" => "{'faded' : !isActionEnabled(action, extension)}", "title" => "action.label", "subtitle" => "action.desc"}
         .small.normal{"ng-if" => "!isActionEnabled(action, extension)"}
           Requires {{action.access_type}} access to this note.
 
@@ -27,7 +26,7 @@
         %span{"ng-if" => "action.running"}
           .spinner{"style" => "margin-top: 3px;"}
 
-.extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
-  .content
-    %h2 {{renderData.title}}
-    %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}
+  .extension-render-modal{"ng-if" => "renderData.showRenderModal", "ng-click" => "renderData.showRenderModal = false"}
+    .content
+      %h2 {{renderData.title}}
+      %p.normal{"style" => "white-space: pre-wrap; font-family: monospace; font-size: 16px;"} {{renderData.text}}

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

@@ -1,20 +1,13 @@
-%ul.dropdown-menu.sectioned-menu
-  .header
-    .title System Editor
-  %ul
-    %li.menu-item{"ng-click" => "selectEditor($event, null)"}
-      %span.pull-left.mr-10{"ng-if" => "selectedEditor == null"} ✓
-      %label.menu-item-title.pull-left Plain
-
-  %div{"ng-if" => "editors.length > 0"}
-    .header
-      .title External Editors
-    %ul
-      %li.menu-item{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)"}
+.sn-component
+  .menu-panel.dropdown-menu
+    .section
+      .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
-        %label.menu-item-title
-          %span.inline.tinted.mr-10{"ng-if" => "selectedEditor === editor"} ✓
-          {{editor.name}}
         .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

@@ -0,0 +1,10 @@
+.row
+  .column{"ng-if" => "circle"}
+    .circle.small{"ng-class" => "circle"}
+  .column
+    .label
+      {{title}}
+    .sublabel{"ng-if" => "subtitle"}
+      {{subtitle}}
+
+    %ng-transclude