diff --git a/app/assets/javascripts/app/frontend/controllers/editor.js b/app/assets/javascripts/app/frontend/controllers/editor.js index cdca7863e..547dbe0f4 100644 --- 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; diff --git a/app/assets/javascripts/app/frontend/controllers/home.js b/app/assets/javascripts/app/frontend/controllers/home.js index 5aa625a9a..0a87f0165 100644 --- 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); diff --git a/app/assets/javascripts/app/frontend/controllers/notes.js b/app/assets/javascripts/app/frontend/controllers/notes.js index 0d3106260..29081f840 100644 --- 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; diff --git a/app/assets/javascripts/app/frontend/controllers/tags.js b/app/assets/javascripts/app/frontend/controllers/tags.js index 422c308f2..22b0b17f7 100644 --- 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; diff --git a/app/assets/stylesheets/app/_tags.scss b/app/assets/stylesheets/app/_tags.scss index ba45efd89..aecf4dc00 100644 --- 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; diff --git a/app/assets/templates/frontend/home.html.haml b/app/assets/templates/frontend/home.html.haml index 28584401b..2b4ad06d7 100644 --- 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"} diff --git a/app/assets/templates/frontend/notes.html.haml b/app/assets/templates/frontend/notes.html.haml index 63a42b7f0..bc0c9e637 100644 --- 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"} diff --git a/app/assets/templates/frontend/tags.html.haml b/app/assets/templates/frontend/tags.html.haml index 7f28cfa24..496e080aa 100644 --- 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