Merge pull request #95 from standardnotes/tags-menu

Tags menu
2017-03-10 11:56:55 -06:00
parent a6aa65d47b f9c01c0488
commit 3ce9af31ec
8 changed files with 69 additions and 50 deletions
--- a/app/assets/javascripts/app/frontend/controllers/editor.js
+++ b/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;
--- a/app/assets/javascripts/app/frontend/controllers/home.js
+++ b/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);
--- a/app/assets/javascripts/app/frontend/controllers/notes.js
+++ b/app/assets/javascripts/app/frontend/controllers/notes.js
@@ -4,8 +4,7 @@ angular.module('app.frontend')
      scope: {
        addNew: "&",
        selectionMade: "&",
-        tag: "=",
-        removeTag: "&"
+        tag: "="
      },

      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;
--- a/app/assets/javascripts/app/frontend/controllers/tags.js
+++ b/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;
--- a/app/assets/stylesheets/app/_tags.scss
+++ b/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 {
-      float: left;
-      padding-top: 6px;
-      margin-right: 5px;
+    > .info {
+      height: 20px;
+      > .title {
+        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 {
-      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;
+    > .menu {
+      font-size: 11px;
+      color: $blue-color;
+      // opacity: 0.5;
+      clear: both;
+      margin-top: 2px;
+      margin-bottom: 2px;
    }

    $tags-selected-color: #dbdbdb;
--- a/app/assets/templates/frontend/home.html.haml
+++ b/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",
-                      "tag" => "selectedTag"}
+    %notes-section{"add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", "tag" => "selectedTag"}

    %editor-section{"note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"}

--- a/app/assets/templates/frontend/notes.html.haml
+++ b/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
-              %li
-                %a.text{"ng-click" => "ctrl.selectedMenuItem(); ctrl.selectedTagDelete()"} Delete Tag
+                  Sort by date modified

    .scrollable
      .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
--- a/app/assets/templates/frontend/tags.html.haml
+++ b/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"}
-        .count {{ctrl.noteCount(ctrl.allTag)}}
-      .tag{"ng-repeat" => "tag in ctrl.tags", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}",
-      "droppable" => true, "drop" => "ctrl.handleDrop", "tag" => "tag"}
-
-        %input.title{"ng-disabled" => "tag != ctrl.selectedTag", "ng-model" => "tag.title",
-        "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTag($event, tag)", "mb-autofocus" => "true", "should-focus" => "ctrl.newTag",
-        "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-focus" => "ctrl.onTagTitleFocus(tag)", "ng-blur" => "ctrl.saveTag($event, tag)"}
-        .count {{ctrl.noteCount(tag)}}
+        .info
+          %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.allTag.title"}
+          .count {{ctrl.noteCount(ctrl.allTag)}}
+      .tag{"ng-repeat" => "tag in ctrl.tags", "ng-click" => "ctrl.selectTag(tag)", "ng-class" => "{'selected' : ctrl.selectedTag == tag}"}
+        .info
+          %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 || ctrl.editingTag == tag",
+          "ng-change" => "ctrl.tagTitleDidChange(tag)", "ng-focus" => "ctrl.onTagTitleFocus(tag)", "ng-blur" => "ctrl.saveTag($event, 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