From 0838f927ab3407819b6b785dbc1f445bd9f281c4 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Sun, 15 Oct 2017 17:39:51 -0500 Subject: [PATCH] Note panel options menu with archived --- .../app/frontend/controllers/notes.js | 28 +++++++---- .../app/services/filters/sortBy.js | 1 + app/assets/stylesheets/app/_menus.scss | 19 ++++++++ app/assets/stylesheets/app/_notes.scss | 6 +-- .../directives/account-menu.html.haml | 7 +-- app/assets/templates/frontend/notes.html.haml | 48 ++++++++++++------- 6 files changed, 79 insertions(+), 30 deletions(-) diff --git a/app/assets/javascripts/app/frontend/controllers/notes.js b/app/assets/javascripts/app/frontend/controllers/notes.js index a7225a764..751716119 100644 --- a/app/assets/javascripts/app/frontend/controllers/notes.js +++ b/app/assets/javascripts/app/frontend/controllers/notes.js @@ -53,15 +53,25 @@ angular.module('app.frontend') this.notesToDisplay += 20 } - this.sortByTitle = function() { - var base = "Sort |"; + this.optionsSubtitle = function() { + var base = "Sorting by"; if(this.sortBy == "created_at") { - return base + " Date added"; + base += " date added"; } else if(this.sortBy == "updated_at") { - return base + " Date modifed"; + base += " date modifed"; } else if(this.sortBy == "title") { - return base + " Title"; + base += " title"; } + + if(this.showArchived && !this.tag.archiveTag) { + base += " | Including archived" + } + + return base; + } + + this.toggleShowArchived = function() { + this.showArchived = !this.showArchived; } this.tagDidChange = function(tag, oldTag) { @@ -114,11 +124,13 @@ angular.module('app.frontend') this.filterNotes = function(note) { if(this.tag.archiveTag) { - return note.archived; + note.visible = note.archived; + return note.visible; } - if(note.archived) { - return false; + if(note.archived && !this.showArchived) { + note.visible = false; + return note.visible; } var filterText = this.noteFilter.text.toLowerCase(); diff --git a/app/assets/javascripts/app/services/filters/sortBy.js b/app/assets/javascripts/app/services/filters/sortBy.js index c3902604b..beced415e 100644 --- a/app/assets/javascripts/app/services/filters/sortBy.js +++ b/app/assets/javascripts/app/services/filters/sortBy.js @@ -35,6 +35,7 @@ angular.module('app.frontend') } items = items || []; + console.log("Sorting", items.length, "items"); return items.sort(function(a, b){ return sortValueFn(a, b); }) diff --git a/app/assets/stylesheets/app/_menus.scss b/app/assets/stylesheets/app/_menus.scss index b46ba2bf9..5c2916bcb 100644 --- a/app/assets/stylesheets/app/_menus.scss +++ b/app/assets/stylesheets/app/_menus.scss @@ -25,6 +25,25 @@ ul.section-menu-bar { font-weight: bold; user-select: none; + &.full-width { + width: 100%; + } + + &.item-with-subtitle { + label { + // float: left; + margin-right: 8px; + } + + .subtitle { + margin-top: 1px; + opacity: 0.5; + font-weight: normal; + font-size: 12px; + } + } + + &.selected { background-color: $blue-color; border-radius: 1px; diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss index 2b3c39232..6e0dcd9fd 100644 --- a/app/assets/stylesheets/app/_notes.scss +++ b/app/assets/stylesheets/app/_notes.scss @@ -6,7 +6,7 @@ max-width: 350px; min-width: 170px; - $notes-title-bar-height: 130px; + $notes-title-bar-height: 147px; #notes-title-bar { color: rgba(black, 0.40); @@ -26,11 +26,11 @@ right: 14px; } - #tag-menu-bar { + #notes-menu-bar { position: relative; margin: 0 -14px; margin-top: 14px; - // padding-left: 4px; + height: 45px; width: auto; } diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml index 38cca022c..b07e95635 100644 --- a/app/assets/templates/frontend/directives/account-menu.html.haml +++ b/app/assets/templates/frontend/directives/account-menu.html.haml @@ -156,9 +156,10 @@ .fake-link.tinted Import Data from Archive %div{"ng-if" => "importData.requestPassword"} - %p Enter the account password associated with the import file. - %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"} - %button.standard.ui-button.block.tinted.mt-5{"ng-click" => "submitImportPassword()"} Decrypt & Import + %form{"ng-submit" => "submitImportPassword()"} + %p Enter the account password associated with the import file. + %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"} + %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted". diff --git a/app/assets/templates/frontend/notes.html.haml b/app/assets/templates/frontend/notes.html.haml index 976548ed5..f4d83b032 100644 --- a/app/assets/templates/frontend/notes.html.haml +++ b/app/assets/templates/frontend/notes.html.haml @@ -7,23 +7,35 @@ .filter-section %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"} #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕ - %ul.section-menu-bar#tag-menu-bar - %li{"ng-class" => "{'selected' : ctrl.showMenu}"} - %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} {{ctrl.sortByTitle()}} + %ul.section-menu-bar#notes-menu-bar + %li.item-with-subtitle{"ng-class" => "{'selected' : ctrl.showMenu}"} + .wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} + %label Options + .subtitle {{ctrl.optionsSubtitle()}} - %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"} - %li - %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"} - %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓ - By date added - %li - %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"} - %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓ - By date modified - %li - %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"} - %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓ - By title + .sectioned-menu.dropdown-menu{"ng-if" => "ctrl.showMenu"} + %ul + .header + .title Sort by + %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()"} + %label + %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'created_at'"} ✓ + By date added + %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()"} + %label + %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'updated_at'"} ✓ + By date modified + %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.selectedSortByTitle()"} + %label + %span.top.mt-5.mr-5{"ng-if" => "ctrl.sortBy == 'title'"} ✓ + By title + %ul{"ng-if" => "!ctrl.tag.archiveTag"} + .header + .title Archives + %li{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleShowArchived()"} + %label + %span.top.mt-5.mr-5{"ng-if" => "ctrl.showArchived == true"} ✓ + Show archived notes .scrollable .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"} @@ -36,6 +48,10 @@ %i.icon.ion-ios-flag %strong.medium Pinned + .archived.tinted{"ng-if" => "note.archived && !ctrl.tag.archiveTag", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"} + %i.icon.ion-ios-box + %strong.medium Archived + .tags-string{"ng-if" => "ctrl.tag.all"} .faded {{note.tagsString()}}