Note flags

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

@@ -41,6 +41,13 @@ angular.module('app')
       this.loadPreferences();
     });
 
+    modelManager.addItemSyncObserver("note-list", "Note", (allItems, validItems, deletedItems, source, sourceKey) => {
+      // Note has changed values, reset its flags
+      for(var note of allItems) {
+        note.flags = null;
+      }
+    });
+
     this.loadPreferences = function() {
       let prevSortValue = this.sortBy;
 
@@ -156,6 +163,46 @@ angular.module('app')
       return base;
     }
 
+    this.getNoteFlags = (note) => {
+      if(note.flags) {
+        return note.flags;
+      }
+
+      let flags = [];
+
+      if(note.pinned) {
+        flags.push({
+          text: "Pinned",
+          class: "info"
+        })
+      }
+
+      if(note.archived) {
+        flags.push({
+          text: "Archived",
+          class: "warning"
+        })
+      }
+
+      if(note.content.protected) {
+        flags.push({
+          text: "Protected",
+          class: "success"
+        })
+      }
+
+      if(note.locked) {
+        flags.push({
+          text: "Locked",
+          class: "neutral"
+        })
+      }
+
+      note.flags = flags;
+
+      return flags;
+    }
+
     this.toggleKey = function(key) {
       this[key] = !this[key];
       authManager.setUserPrefValue(key, this[key]);
@@ -344,7 +391,7 @@ angular.module('app')
       }
 
       if(this.tag.all) {
-        return true;
+        return note.tags && note.tags.length > 0;
       }
 
       // Inside a tag, only show tags string if note contains tags other than this.tag

app/assets/stylesheets/app/_notes.scss

@@ -115,17 +115,8 @@
     }
 
     .tags-string {
-      margin-bottom: 4px;
+      margin-top: 4px;
-      font-size: 13px;
+      font-size: 12px;
-    }
-
-    .pinned {
-      .icon {
-        display: inline-block;
-        vertical-align: top;
-        margin-top: 2px;
-        margin-right: 2px;
-      }
     }
 
     .note-preview {
@@ -163,9 +154,45 @@
       display: flex;
       flex-direction: row;
       align-items: center;
+      margin-bottom: 8px;
 
-      .note-flag {
+      .flag {
-        margin-right: 10px;
+        padding: 4px;
+        padding-left: 6px;
+        padding-right: 6px;
+        border-radius: 2px;
+        margin-right: 4px;
+
+        &.info {
+          background-color: var(--sn-stylekit-info-color);
+          color: var(--sn-stylekit-info-contrast-color);
+        }
+
+        &.success {
+          background-color: var(--sn-stylekit-success-color);
+          color: var(--sn-stylekit-success-contrast-color);
+        }
+
+        &.warning {
+          background-color: var(--sn-stylekit-warning-color);
+          color: var(--sn-stylekit-warning-contrast-color);
+        }
+
+        &.neutral {
+          background-color: var(--sn-stylekit-neutral-color);
+          color: var(--sn-stylekit-neutral-contrast-color);
+        }
+
+        &.danger {
+          background-color: var(--sn-stylekit-danger-color);
+          color: var(--sn-stylekit-danger-contrast-color);
+        }
+
+        .label {
+          font-size: 10px;
+          font-weight: bold;
+          text-align: center;
+        }
       }
     }
 
@@ -186,8 +213,9 @@
       background-color: var(--sn-stylekit-info-color);
       color: var(--sn-stylekit-info-contrast-color);
 
-      .note-flag {
+      .note-flags .flag {
-        color: var(--sn-stylekit-info-contrast-color);
+        background-color: var(--sn-stylekit-info-contrast-color);
+        color: var(--sn-stylekit-info-color);
       }
 
       progress {

app/assets/templates/notes.html.haml

@@ -49,23 +49,11 @@
           %strong.red.medium-text{"ng-if" => "note.conflict_of"} Conflicted copy
           %strong.red.medium-text{"ng-if" => "note.errorDecrypting"} Unable to Decrypt
 
-          .note-flags
+          .note-flags{"ng-show" => "ctrl.getNoteFlags(note).length > 0"}
-            .pinned.note-flag{"ng-if" => "note.pinned"}
+            .flag{"ng-repeat" => "flag in ctrl.getNoteFlags(note)", "ng-class" => "flag.class"}
-              %i.icon.ion-bookmark
+              .label {{flag.text}}
-              %strong.medium-text Pinned
 
-            .archived.note-flag{"ng-if" => "note.archived && !ctrl.tag.isSmartTag()"}
+          .name{"ng-show" => "note.title"}
-              %i.icon.ion-ios-box
-              %strong.medium-text Archived
-
-          .tags-string{"ng-if" => "ctrl.shouldShowTags(note)"}
-            .faded {{note.savedTagsString || note.tagsString()}}
-
-          .name{"ng-if" => "note.title"}
-            %span.note-flag{"ng-show" => "note.locked"}
-              %i.icon.ion-locked.medium-text
-            %span.note-flag{"ng-show" => "note.content.protected"}
-              %i.icon.ion-eye-disabled
             {{note.title}}
 
           .note-preview{"ng-if" => "!ctrl.hideNotePreview && !note.content.hidePreview && !note.content.protected"}
@@ -73,8 +61,11 @@
             .plain-preview{"ng-if" => "!note.content.preview_html && note.content.preview_plain"} {{note.content.preview_plain}}
             .default-preview{"ng-if" => "!note.content.preview_html && !note.content.preview_plain"} {{note.text}}
 
-          .date.faded{"ng-if" => "!ctrl.hideDate"}
+          .date.faded{"ng-show" => "!ctrl.hideDate"}
-            %span{"ng-if" => "ctrl.sortBy == 'client_updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
+            %span{"ng-show" => "ctrl.sortBy == 'client_updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
-            %span{"ng-if" => "ctrl.sortBy != 'client_updated_at'"} {{note.createdAtString() || 'Now'}}
+            %span{"ng-show" => "ctrl.sortBy != 'client_updated_at'"} {{note.createdAtString() || 'Now'}}
+
+          .tags-string{"ng-show" => "ctrl.shouldShowTags(note)"}
+            .faded {{note.savedTagsString || note.tagsString()}}
 
   %panel-resizer{"panel-id" => "'notes-column'", "default-width" => 300, "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}