Menus wip

2018-01-05 19:35:02 -06:00
parent a01067220c
commit aabdb73c77
11 changed files with 278 additions and 430 deletions
--- a/app/assets/templates/frontend/directives/contextual-menu.html.haml
+++ b/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}}
--- a/app/assets/templates/frontend/directives/editor-menu.html.haml
+++ b/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()"}
--- a/app/assets/templates/frontend/directives/menu-row.html.haml
+++ b/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
--- a/app/assets/templates/frontend/editor.html.haml
+++ b/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
--- a/app/assets/templates/frontend/notes.html.haml
+++ b/app/assets/templates/frontend/notes.html.haml
@@ -14,45 +14,28 @@
            %label
              Options
              %span.subtitle {{ctrl.optionsSubtitle()}}
-          .sectioned-menu.dropdown-menu.full-width{"ng-if" => "ctrl.showMenu"}
-            %ul
-              .header
-                .title Sort By
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
-                  By Date Added
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
-                  By Date Modified
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓
-                  By Title
-            %ul{"ng-if" => "!ctrl.tag.archiveTag"}
-              .header
-                .title Display
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓
-                  Show Archived Notes
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hidePinned == true"} ✓
-                  Hide Pinned Notes
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideNotePreview == true"} ✓
-                  Hide Note Preview
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideDate == true"} ✓
-                  Hide Date
-              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
-                %label
-                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.hideTags == true"} ✓
-                  Hide Tags
+
+          .sn-component
+            .menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+              .section
+                .header
+                  %h4.title Sort By
+
+                %menu-row{"title" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
+                %menu-row{"title" => "'Date Modified'", "circle" => "ctrl.sortBy == 'updated_at' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
+                %menu-row{"title" => "'Title'", "circle" => "ctrl.sortBy == 'title' && 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
+
+              .section{"ng-if" => "!ctrl.tag.archiveTag"}
+                .header
+                  %h4.title Display
+
+                %menu-row{"title" => "'Archived Notes'", "circle" => "ctrl.showArchived ? 'success' : 'danger'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('showArchived')"}
+                %menu-row{"title" => "'Pinned Notes'", "circle" => "ctrl.hidePinned ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hidePinned')"}
+
+                %menu-row{"title" => "'Note Preview'", "circle" => "ctrl.hideNotePreview ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideNotePreview')"}
+                %menu-row{"title" => "'Date'", "circle" => "ctrl.hideDate ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideDate')"}
+                %menu-row{"title" => "'Tags'", "circle" => "ctrl.hideTags ? 'danger' : 'success'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('hideTags')"}
+

    .scrollable
      .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}