Merge pull request #95 from standardnotes/tags-menu

Tags menu

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

@@ -46,6 +46,10 @@ angular.module('app.frontend')
       }
     }.bind(this), false);
 
+    $rootScope.$on("tag-changed", function(){
+      this.loadTagsString();
+    }.bind(this));
+
     this.setNote = function(note, oldNote) {
       var currentEditor = this.customEditor;
       this.customEditor = null;

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

@@ -91,18 +91,19 @@ angular.module('app.frontend')
 
     $scope.tagsSave = function(tag, callback) {
       if(!tag.title || tag.title.length == 0) {
-        $scope.notesRemoveTag(tag);
+        $scope.removeTag(tag);
         return;
       }
       tag.setDirty(true);
       syncManager.sync(callback);
+      $rootScope.$broadcast("tag-changed");
     }
 
     /*
     Notes Ctrl Callbacks
     */
 
-    $scope.notesRemoveTag = function(tag) {
+    $scope.removeTag = function(tag) {
       var validNotes = Note.filterDummyNotes(tag.notes);
       if(validNotes == 0) {
         modelManager.setItemToBeDeleted(tag);

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

@@ -4,8 +4,7 @@ angular.module('app.frontend')
       scope: {
         addNew: "&",
         selectionMade: "&",
-        tag: "=",
+        tag: "="
-        removeTag: "&"
       },
 
       templateUrl: 'frontend/notes.html',
@@ -69,11 +68,6 @@ angular.module('app.frontend')
       this.selectFirstNote(createNew);
     }
 
-    this.selectedTagDelete = function() {
-      this.showMenu = false;
-      this.removeTag()(this.tag);
-    }
-
     this.selectFirstNote = function(createNew) {
       var visibleNotes = this.sortedNotes.filter(function(note){
         return note.visible;

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

@@ -9,7 +9,8 @@ angular.module('app.frontend')
         save: "&",
         tags: "=",
         allTag: "=",
-        updateNoteTag: "&"
+        updateNoteTag: "&",
+        removeTag: "&"
       },
       templateUrl: 'frontend/tags.html',
       replace: true,
@@ -32,7 +33,7 @@ angular.module('app.frontend')
       }
     }
   })
-  .controller('TagsCtrl', function (modelManager) {
+  .controller('TagsCtrl', function (modelManager, $timeout) {
 
     var initialLoad = true;
 
@@ -98,6 +99,17 @@ angular.module('app.frontend')
       }.bind(this));
     }
 
+    this.selectedRenameTag = function($event, tag) {
+      this.editingTag = tag;
+      $timeout(function(){
+        document.getElementById("tag-" + tag.uuid).focus();
+      })
+    }
+
+    this.selectedDeleteTag = function(tag) {
+      this.removeTag()(tag);
+    }
+
     this.noteCount = function(tag) {
       var validNotes = Note.filterDummyNotes(tag.notes);
       return validNotes.length;

app/assets/stylesheets/app/_tags.scss

@@ -34,36 +34,42 @@
   }
 
   .tag {
-    height: 30px;
+    min-height: 30px;
     padding: 5px 12px;
     cursor: pointer;
     transition: height .1s ease-in-out;
     position: relative;
     font-size: 14px;
 
-    > .icon {
+    > .info {
-      float: left;
+      height: 20px;
-      padding-top: 6px;
+      > .title {
-      margin-right: 5px;
+        width: 80%;
+        background-color: transparent;
+        font-weight: 600;
+        float: left;
+        color: $main-text-color;
+        border: none;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        width: 75%;
+      }
+
+      > .count {
+        position: absolute;
+        right: 17px;
+        padding-top: 1px;
+        font-weight: bold;
+      }
     }
 
-    > .title {
+    > .menu {
-      width: 80%;
+      font-size: 11px;
-      background-color: transparent;
+      color: $blue-color;
-      font-weight: 600;
+      // opacity: 0.5;
-      float: left;
+      clear: both;
-      color: $main-text-color;
+      margin-top: 2px;
-      border: none;
+      margin-bottom: 2px;
-      cursor: pointer;
-      text-overflow: ellipsis;
-      width: 75%;
-    }
-
-    > .count {
-      position: absolute;
-      right: 17px;
-      padding-top: 1px;
-      font-weight: bold;
     }
 
     $tags-selected-color: #dbdbdb;

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

@@ -1,10 +1,9 @@
 .main-ui-view
   .app
     %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade", "all-tag" => "allTag",
-                    "tags" => "tags"}
+                    "tags" => "tags", "remove-tag" => "removeTag"}
 
-    %notes-section{"remove-tag" => "notesRemoveTag", "add-new" => "notesAddNew", "selection-made" => "notesSelectionMade",
+    %notes-section{"add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", "tag" => "selectedTag"}
-                      "tag" => "selectedTag"}
 
     %editor-section{"note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"}
 

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

@@ -10,7 +10,7 @@
         %ul.nav.nav-pills
           %li.dropdown
             %a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
-              Menu
+              Sort
               %span.caret
               %span.sr-only
 
@@ -18,13 +18,11 @@
               %li
                 %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedSortByCreated()"}
                   %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓
-                  Sort by date created
+                  Sort by date added
               %li
                 %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedSortByUpdated()"}
                   %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓
-                  Sort by date updated
+                  Sort by date modified
-              %li
-                %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedTagDelete()"} Delete Tag
 
     .scrollable
       .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}

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

@@ -7,12 +7,17 @@
 
     .scrollable
       .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}"}
-        %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.allTag.title"}
+        .info
-        .count {{ctrl.noteCount(ctrl.allTag)}}
+          %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.allTag.title"}
-      .tag{"ng-repeat" => "tag in ctrl.tags", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}",
+          .count {{ctrl.noteCount(ctrl.allTag)}}
-      "droppable" => true, "drop" => "ctrl.handleDrop", "tag" => "tag"}
+      .tag{"ng-repeat" => "tag in ctrl.tags", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}"}
-
+        .info
-        %input.title{"ng-disabled" => "tag != ctrl.selectedTag", "ng-model" => "tag.title",
+          %input.title{"ng-attr-id" => "tag-{{tag.uuid}}", "ng-disabled" => "ctrl.editingTag != tag", "ng-model" => "tag.title",
-        "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "mb-autofocus" => "true", "should-focus" => "ctrl.newTag",
+          "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "mb-autofocus" => "true", "should-focus" => "ctrl.newTag || ctrl.editingTag == tag",
-        "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-focus" => "ctrl.onTagTitleFocus(tag)", "ng-blur" => "ctrl.saveTag($event, tag)"}
+          "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-focus" => "ctrl.onTagTitleFocus(tag)", "ng-blur" => "ctrl.saveTag($event, tag)",
-        .count {{ctrl.noteCount(tag)}}
+          "spellcheck" => "false"}
+          .count {{ctrl.noteCount(tag)}}
+        .menu{"ng-if" => "ctrl.selectedTag == tag"}
+          %a{"ng-click" => "ctrl.selectedRenameTag($event, tag)", "ng-if" => "!ctrl.editingTag"} Rename
+          %a{"ng-click" => "ctrl.saveTag($event, tag)", "ng-if" => "ctrl.editingTag"} Save
+          %a{"ng-click" => "ctrl.selectedDeleteTag(tag)"} Delete