From 538f03aa66324a151371c2c194a97a2829f59418 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Thu, 1 Mar 2018 13:07:07 -0600 Subject: [PATCH] Note locking support --- .../javascripts/app/controllers/editor.js | 6 +++++ app/assets/javascripts/app/models/api/item.js | 4 ++++ app/assets/stylesheets/app/_editor.scss | 4 ++++ app/assets/stylesheets/app/_footer.scss | 4 ++-- app/assets/templates/editor.html.haml | 23 +++++++++++++++---- app/assets/templates/footer.html.haml | 2 +- 6 files changed, 35 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/app/controllers/editor.js b/app/assets/javascripts/app/controllers/editor.js index 42f403470..668460c3b 100644 --- a/app/assets/javascripts/app/controllers/editor.js +++ b/app/assets/javascripts/app/controllers/editor.js @@ -283,6 +283,12 @@ angular.module('app') this.changesMade(); } + this.toggleLockNote = function() { + this.note.setAppDataItem("locked", !this.note.locked); + this.note.setDirty(true); + this.changesMade(); + } + this.toggleArchiveNote = function() { this.note.setAppDataItem("archived", !this.note.archived); this.note.setDirty(true); diff --git a/app/assets/javascripts/app/models/api/item.js b/app/assets/javascripts/app/models/api/item.js index 7671b061e..324628f21 100644 --- a/app/assets/javascripts/app/models/api/item.js +++ b/app/assets/javascripts/app/models/api/item.js @@ -193,6 +193,10 @@ class Item { return this.getAppDataItem("archived"); } + get locked() { + return this.getAppDataItem("locked"); + } + /* During sync conflicts, when determing whether to create a duplicate for an item, we can omit keys that have no meaningful weight and can be ignored. For example, if one component has active = true and another component has active = false, diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss index a1afdd7bb..5eecad5b0 100644 --- a/app/assets/stylesheets/app/_editor.scss +++ b/app/assets/stylesheets/app/_editor.scss @@ -7,6 +7,10 @@ $heading-height: 75px; background-color: white; } +.locked { + opacity: 0.8; +} + #editor-title-bar { width: 100%; diff --git a/app/assets/stylesheets/app/_footer.scss b/app/assets/stylesheets/app/_footer.scss index 950331dea..de48f2244 100644 --- a/app/assets/stylesheets/app/_footer.scss +++ b/app/assets/stylesheets/app/_footer.scss @@ -41,8 +41,8 @@ a.disabled { margin-left: 3px; } -.icon.ion-locked { +#footer-lock-icon { margin-left: 5px; - border-left: 1px solid gray; padding-left: 8px; + border-left: 1px solid gray; } diff --git a/app/assets/templates/editor.html.haml b/app/assets/templates/editor.html.haml index 31c4a0a6c..ec754e59a 100644 --- a/app/assets/templates/editor.html.haml +++ b/app/assets/templates/editor.html.haml @@ -1,9 +1,17 @@ .section.editor#editor-column - #editor-title-bar.section-title-bar{"ng-show" => "ctrl.note && !ctrl.note.errorDecrypting"} + .sn-component + .app-bar.no-edges{"ng-if" => "ctrl.note.locked", "ng-init" => "ctrl.lockText = 'Note Locked'", "ng-mouseover" => "ctrl.lockText = 'Unlock'", "ng-mouseleave" => "ctrl.lockText = 'Note Locked'"} + .left + .item{"ng-click" => "ctrl.toggleLockNote()"} + .label.warning + %i.icon.ion-locked + {{ctrl.lockText}} + + #editor-title-bar.section-title-bar{"ng-show" => "ctrl.note && !ctrl.note.errorDecrypting", "ng-class" => "{'locked' : ctrl.note.locked }"} .title %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)", "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()", - "select-on-click" => "true"} + "select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"} #save-status{"ng-class" => "{'red bold': ctrl.saveError, 'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"} @@ -12,7 +20,7 @@ %component-view.component-view{ "component" => "ctrl.tagsComponent"} %input.tags-input{"ng-if" => "!(ctrl.tagsComponent && ctrl.tagsComponent.active)", "type" => "text", "ng-keyup" => "$event.keyCode == 13 && $event.target.blur();", "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)", - "spellcheck" => "false"} + "spellcheck" => "false", "ng-disabled" => "ctrl.note.locked"} .sn-component{"ng-if" => "ctrl.note"} .app-bar.no-edges @@ -25,6 +33,7 @@ %h4.title Note Options %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.togglePin()"} %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleArchiveNote()"} + %menu-row{"title" => "ctrl.note.locked ? 'Unlock' : 'Lock'", "ng-click" => "ctrl.selectedMenuItem($event, true); ctrl.toggleLockNote()"} %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"} .section{"ng-if" => "!ctrl.selectedEditor"} @@ -42,12 +51,16 @@ %actions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"} .editor-content#editor-content{"ng-if" => "ctrl.noteReady && !ctrl.note.errorDecrypting"} + %panel-resizer.left{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "property" => "'left'", "hoverable" => "true"} - %component-view.component-view{"ng-if" => "ctrl.selectedEditor", "component" => "ctrl.selectedEditor"} - %textarea.editable#note-text-editor{"ng-if" => "!ctrl.selectedEditor", "ng-model" => "ctrl.note.text", + + %component-view.component-view{"ng-if" => "ctrl.selectedEditor", "component" => "ctrl.selectedEditor", "ng-style" => "ctrl.note.locked && {'pointer-events' : 'none'}", "ng-class" => "{'locked' : ctrl.note.locked }"} + + %textarea.editable#note-text-editor{"ng-if" => "!ctrl.selectedEditor", "ng-model" => "ctrl.note.text", "ng-disabled" => "ctrl.note.locked", "ng-change" => "ctrl.contentChanged()", "ng-trim" => "false", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()", "dir" => "auto", "ng-attr-spellcheck" => "{{ctrl.spellcheck}}"} {{ctrl.onSystemEditorLoad()}} + %panel-resizer{"panel-id" => "'editor-content'", "on-resize-finish" => "ctrl.onPanelResizeFinish","control" => "ctrl.resizeControl", "min-width" => 300, "hoverable" => "true", "property" => "'right'"} %section.section{"ng-if" => "ctrl.note.errorDecrypting"} diff --git a/app/assets/templates/footer.html.haml b/app/assets/templates/footer.html.haml index 07c4de532..30e56daac 100644 --- a/app/assets/templates/footer.html.haml +++ b/app/assets/templates/footer.html.haml @@ -38,4 +38,4 @@ .item#lock-item{"ng-if" => "ctrl.hasPasscode()"} .label - %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"} + %i.icon.ion-locked#footer-lock-icon{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}