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()}}

dist/assets/ionicons.svg

@@ -1,16 +1,16 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
-2018-1-19: Created with FontForge (http://fontforge.org)
+2018-12-13: Created with FontForge (http://fontforge.org)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20170925 at Fri Jan 19 12:18:20 2018
+Created by FontForge 20170925 at Thu Dec 13 12:01:05 2018
  By mo
 Copyright (c) 2018, mo
 </metadata>
 <defs>
-<font id="Ionicons" horiz-adv-x="192" >
+<font id="Ionicons" horiz-adv-x="384" >
   <font-face 
     font-family="Ionicons"
     font-weight="400"
@@ -25,11 +25,15 @@ Copyright (c) 2018, mo
     unicode-range="U+F200-F3EC"
   />
     <missing-glyph />
-    <glyph glyph-name="ion-bookmark" unicode="&#xf26b;" 
-d="M184 384c4 0 8 -4 8 -8v-56h-192v56c0 4 4 8 8 8h176zM0 0v304h192v-304l-96 96z" />
     <glyph glyph-name="ion-ios-box" unicode="&#xf3ec;" horiz-adv-x="320" 
 d="M16 48v192h288v-192h-288zM128 208c-9 0 -16 -7 -16 -16s7 -16 16 -16h64c9 0 16 7 16 16s-7 16 -16 16h-64zM0 336h320v-80h-16h-288h-16v80z" />
-    <glyph glyph-name="ion-locked" unicode="&#xf200;" horiz-adv-x="384" 
+    <glyph glyph-name="ion-arrow-return-right" unicode="&#xf266;" 
+d="M384 256l-128 -96v64h-192v-128h248c4 0 8 -4 8 -8v-48c0 -4 -4 -8 -8 -8h-304c-4 0 -8 4 -8 8v240c0 4 4 8 8 8h248v64z" />
+    <glyph glyph-name="ion-arrow-return-left" unicode="&#xf265;" 
+d="M128 352v-64h248c4 0 8 -4 8 -8v-240c0 -4 -4 -8 -8 -8h-304c-4 0 -8 4 -8 8v48c0 4 4 8 8 8h248v128h-192v-64l-128 96z" />
+    <glyph glyph-name="ion-bookmark" unicode="&#xf26b;" horiz-adv-x="192" 
+d="M184 384c4 0 8 -4 8 -8v-56h-192v56c0 4 4 8 8 8h176zM0 0v304h192v-304l-96 96z" />
+    <glyph glyph-name="ion-locked" unicode="&#xf200;" 
 d="M22 -32c-12 0 -22 10 -22 22v212c0 12 10 22 22 22h3h19v31c0 42 17 87 43 115s64 46 105 46v0v0c41 0 79 -18 105 -46s43 -73 43 -115v-31h22c12 0 22 -10 22 -22v-212c0 -12 -10 -22 -22 -22h-340zM97 255v-31h17h155h18v31c0 27 -10 61 -28 80v0v1
 c-18 19 -42 29 -67 29v0v0c-25 0 -49 -10 -67 -29v-1v0c-18 -19 -28 -53 -28 -80z" />
   </font>