Sort reverse option

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

@@ -44,6 +44,7 @@ angular.module('app')
       let prevSortValue = this.sortBy;
 
       this.sortBy = authManager.getUserPrefValue("sortBy", "created_at");
+      this.sortReverse = authManager.getUserPrefValue("sortReverse", false);
 
       if(this.sortBy == "updated_at") {
         // use client_updated_at instead
@@ -55,7 +56,6 @@ angular.module('app')
           this.selectFirstNote();
         })
       }
-      this.sortDescending = this.sortBy != "title";
 
       this.showArchived = authManager.getUserPrefValue("showArchived", false);
       this.hidePinned = authManager.getUserPrefValue("hidePinned", false);
@@ -301,17 +301,21 @@ angular.module('app')
 
     this.selectedSortByCreated = function() {
       this.setSortBy("created_at");
-      this.sortDescending = true;
     }
 
     this.selectedSortByUpdated = function() {
       this.setSortBy("client_updated_at");
-      this.sortDescending = true;
     }
 
     this.selectedSortByTitle = function() {
       this.setSortBy("title");
-      this.sortDescending = false;
+    }
+
+    this.toggleReverseSort = function() {
+      this.selectedMenuItem();
+      this.sortReverse = !this.sortReverse;
+      authManager.setUserPrefValue("sortReverse", this.sortReverse);
+      authManager.syncUserPreferences();
     }
 
     this.setSortBy = function(type) {

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

@@ -1,6 +1,6 @@
 angular.module('app')
   .filter('sortBy', function ($filter) {
-    return function(items, sortBy) {
+    return function(items, sortBy, reverse) {
       let sortValueFn = (a, b, pinCheck = false) => {
         if(!pinCheck) {
           if(a.pinned && b.pinned) {
@@ -14,6 +14,11 @@ angular.module('app')
         var bValue = b[sortBy] || "";
 
         let vector = 1;
+
+        if(reverse) {
+          vector *= -1;
+        }
+
         if(sortBy == "title") {
           aValue = aValue.toLowerCase();
           bValue = bValue.toLowerCase();
@@ -21,11 +26,11 @@ angular.module('app')
           if(aValue.length == 0 && bValue.length == 0) {
             return 0;
           } else if(aValue.length == 0 && bValue.length != 0) {
-            return 1;
+            return 1 * vector;
           } else if(aValue.length != 0 && bValue.length == 0) {
-            return -1;
+            return -1 * vector;
           } else  {
-            vector = -1;
+            vector *= -1;
           }
         }
 

app/assets/stylesheets/app/_ionicons.scss

@@ -11,14 +11,25 @@
   Modified icons to fit ionicon’s grid from original.
 */
 @font-face { font-family: "Ionicons"; src: url("../assets/ionicons.eot?v=2.0.0"); src: url("../assets/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../assets/ionicons.ttf?v=2.0.1") format("truetype"), url("../assets/ionicons.woff?v=2.0.1") format("woff"), url("../assets/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
-.ion, .ionicons, .ion-ios-box:before, .ion-bookmark:before, .ion-locked:before { display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+
+.ion, .ionicons,
+.ion-ios-box:before,
+.ion-bookmark:before,
+.ion-locked:before,
+.ion-arrow-return-left:before,
+.ion-arrow-return-right:before
+{
+  display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+}
 
 .ion-ios-box:before { content: "\f3ec"; }
 
 .ion-locked:before { content: "\f200"; }
 
-.ion-bookmark:before {
-  content: "\f26b";
-}
+.ion-bookmark:before { content: "\f26b"; }
+
+.ion-arrow-return-left:before { content: "\f265"; }
+
+.ion-arrow-return-right:before { content: "\f266"; }
 
 /*# sourceMappingURL=ionicons.css.map */

app/assets/stylesheets/app/_notes.scss

@@ -153,6 +153,17 @@
       opacity: 0.6;
     }
 
+    .note-flags {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .pinned, .archived {
+        color: var(--sn-stylekit-info-color);
+        margin-right: 10px;
+      }
+    }
+
     progress {
       background-color: var(--sn-stylekit-contrast-background-color);
       color: var(--sn-stylekit-info-color);
@@ -170,7 +181,7 @@
       background-color: var(--sn-stylekit-info-color);
       color: var(--sn-stylekit-info-contrast-color);
 
-      .pinned {
+      .pinned, .archived {
         color: var(--sn-stylekit-info-contrast-color);
       }
 

app/assets/templates/notes.html.haml

@@ -24,6 +24,9 @@
             .sk-menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
               .sk-menu-panel-header
                 .sk-menu-panel-header-title Sort By
+                .sk-button.sk-secondary-contrast{"ng-click" => "ctrl.toggleReverseSort()"}
+                  .sk-label
+                    %i.icon{"ng-class" => "{'ion-arrow-return-left' : ctrl.sortReverse == false, 'ion-arrow-return-right' : ctrl.sortReverse == true }"}
 
               %menu-row{"label" => "'Date Added'", "circle" => "ctrl.sortBy == 'created_at' && 'success'", "action" => "ctrl.selectedMenuItem(); ctrl.selectedSortByCreated()", "desc" => "'Sort notes by newest first'"}
               %menu-row{"label" => "'Date Modified'", "circle" => "ctrl.sortBy == 'client_updated_at' && 'success'", "action" => "ctrl.selectedMenuItem(); ctrl.selectedSortByUpdated()", "desc" => "'Sort notes with the most recently updated first'"}
@@ -41,18 +44,19 @@
 
     .scrollable
       .infinite-scroll#notes-scrollable{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
-        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | sortBy: ctrl.sortBy | limitTo:ctrl.notesToDisplay)) track by note.uuid",
+        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | sortBy: ctrl.sortBy:ctrl.sortReverse | limitTo:ctrl.notesToDisplay)) track by note.uuid",
             "ng-click" => "ctrl.selectNote(note, true)", "ng-class" => "{'selected' : ctrl.selectedNote == note}"}
           %strong.red.medium-text{"ng-if" => "note.conflict_of"} Conflicted copy
           %strong.red.medium-text{"ng-if" => "note.errorDecrypting"} Unable to Decrypt
 
-          .pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
-            %i.icon.ion-bookmark
-            %strong.medium-text Pinned
+          .note-flags
+            .pinned{"ng-if" => "note.pinned"}
+              %i.icon.ion-bookmark
+              %strong.medium-text Pinned
 
-          .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.isSmartTag()", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
-            %i.icon.ion-ios-box
-            %strong.medium-text Archived
+            .archived{"ng-if" => "note.archived && !ctrl.tag.isSmartTag()"}
+              %i.icon.ion-ios-box
+              %strong.medium-text Archived
 
           .tags-string{"ng-if" => "ctrl.shouldShowTags(note)"}
             .faded {{note.savedTagsString || note.tagsString()}}