Note panel options menu with archived

app/assets/javascripts/app/frontend/controllers/notes.js

@@ -53,15 +53,25 @@ angular.module('app.frontend')
       this.notesToDisplay += 20
     }
 
-    this.sortByTitle = function() {
-      var base = "Sort |";
+    this.optionsSubtitle = function() {
+      var base = "Sorting by";
       if(this.sortBy == "created_at") {
-        return base + " Date added";
+        base += " date added";
       } else if(this.sortBy == "updated_at") {
-        return base + " Date modifed";
+        base += " date modifed";
       } else if(this.sortBy == "title") {
-        return base + " Title";
+        base += " title";
       }
+
+      if(this.showArchived && !this.tag.archiveTag) {
+        base += " | Including archived"
+      }
+
+      return base;
+    }
+
+    this.toggleShowArchived = function() {
+      this.showArchived = !this.showArchived;
     }
 
     this.tagDidChange = function(tag, oldTag) {
@@ -114,11 +124,13 @@ angular.module('app.frontend')
 
     this.filterNotes = function(note) {
       if(this.tag.archiveTag) {
-        return note.archived;
+        note.visible = note.archived;
+        return note.visible;
       }
 
-      if(note.archived) {
-        return false;
+      if(note.archived && !this.showArchived) {
+        note.visible = false;
+        return note.visible;
       }
 
       var filterText = this.noteFilter.text.toLowerCase();

app/assets/javascripts/app/services/filters/sortBy.js

@@ -35,6 +35,7 @@ angular.module('app.frontend')
       }
 
       items = items || [];
+      console.log("Sorting", items.length, "items");
       return items.sort(function(a, b){
         return sortValueFn(a, b);
       })

app/assets/stylesheets/app/_menus.scss

@@ -25,6 +25,25 @@ ul.section-menu-bar {
     font-weight: bold;
     user-select: none;
 
+    &.full-width {
+      width: 100%;
+    }
+
+    &.item-with-subtitle {
+      label {
+        // float: left;
+        margin-right: 8px;
+      }
+
+      .subtitle {
+        margin-top: 1px;
+        opacity: 0.5;
+        font-weight: normal;
+        font-size: 12px;
+      }
+    }
+
+
     &.selected {
       background-color: $blue-color;
       border-radius: 1px;

app/assets/stylesheets/app/_notes.scss

@@ -6,7 +6,7 @@
   max-width: 350px;
   min-width: 170px;
 
-  $notes-title-bar-height: 130px;
+  $notes-title-bar-height: 147px;
 
   #notes-title-bar {
     color: rgba(black, 0.40);
@@ -26,11 +26,11 @@
     right: 14px;
   }
 
-  #tag-menu-bar {
+  #notes-menu-bar {
     position: relative;
     margin: 0 -14px;
     margin-top: 14px;
-    // padding-left: 4px;
+    height: 45px;
     width: auto;
   }
 

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

@@ -156,9 +156,10 @@
         .fake-link.tinted Import Data from Archive
 
       %div{"ng-if" => "importData.requestPassword"}
-        %p Enter the account password associated with the import file.
-        %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
-        %button.standard.ui-button.block.tinted.mt-5{"ng-click" => "submitImportPassword()"} Decrypt & Import
+        %form{"ng-submit" => "submitImportPassword()"}
+          %p Enter the account password associated with the import file.
+          %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
+          %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import
 
       %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted".
 

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

@@ -7,23 +7,35 @@
       .filter-section
         %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
           #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
-      %ul.section-menu-bar#tag-menu-bar
-        %li{"ng-class" => "{'selected' : ctrl.showMenu}"}
-          %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} {{ctrl.sortByTitle()}}
+      %ul.section-menu-bar#notes-menu-bar
+        %li.item-with-subtitle{"ng-class" => "{'selected' : ctrl.showMenu}"}
+          .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
+            %label Options
+            .subtitle {{ctrl.optionsSubtitle()}}
 
-          %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"}
-            %li
-              %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"}
-                %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
-                By date added
-            %li
-              %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"}
-                %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
-                By date modified
-            %li
-              %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"}
-                %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓
-                By title
+          .sectioned-menu.dropdown-menu{"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 Archives
+              %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleShowArchived()"}
+                %label
+                  %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓
+                  Show archived notes
 
     .scrollable
       .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
@@ -36,6 +48,10 @@
             %i.icon.ion-ios-flag
             %strong.medium Pinned
 
+          .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
+            %i.icon.ion-ios-box
+            %strong.medium Archived
+
           .tags-string{"ng-if" => "ctrl.tag.all"}
             .faded {{note.tagsString()}}