Menus wip

app/assets/templates/frontend/editor.html.haml

@@ -16,31 +16,20 @@
     %li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
       %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
 
-      .dropdown-menu.sectioned-menu{"ng-if" => "ctrl.showMenu"}
-        %ul
-          .header
-            .title Note
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
-            %label
-              %i.icon.ion-ios-flag
-              {{ctrl.note.pinned ? "Unpin" : "Pin"}}
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
-            %label
-              %i.icon.ion-ios-box
-              {{ctrl.note.archived ? "Unarchive" : "Archive"}}
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
-            %label
-              %i.icon.ion-trash-b
-              Delete
-          %li{"ng-if" => "ctrl.hasDisabledComponents()"}
-            %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"} Restore Disabled Components
-        %ul{"ng-if" => "!ctrl.editor"}
-          .header
-            .title Display
-          %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
-            %label
-              %span.top.mt-5.mr-5{"ng-if" => "ctrl.monospaceFont == true"} ✓
-              Monospace Font
+      .sn-component
+        .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+          .section
+            .header
+              %h4.title Note
+            %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
+            %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
+            %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
+            %menu-row{"ng-if" => "ctrl.hasDisabledComponents()", "title" => "'Restore Disabled Components'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"}
+
+          .section{"ng-if" => "!ctrl.editor"}
+            .header
+              %h4.title Display
+            %menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
 
     %li{"ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
       %label{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} Editor