diff --git a/Gruntfile.js b/Gruntfile.js index cd3c452c8..7aecbdebc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ module.exports = function(grunt) { watch: { haml: { files: ['app/assets/templates/**/*.haml'], - tasks: ['newer:haml', 'ngtemplates', 'concat'], + tasks: ['newer:haml', 'ngtemplates', 'concat:app', 'babel', 'browserify', 'concat:dist'], options: { spawn: false, }, diff --git a/app/assets/javascripts/app/frontend/controllers/editor.js b/app/assets/javascripts/app/frontend/controllers/editor.js index d822e089d..789f58a9c 100644 --- a/app/assets/javascripts/app/frontend/controllers/editor.js +++ b/app/assets/javascripts/app/frontend/controllers/editor.js @@ -516,17 +516,22 @@ angular.module('app.frontend') var handleTab = function (event) { if (!event.shiftKey && event.which == 9) { event.preventDefault(); - var start = this.selectionStart; - var end = this.selectionEnd; - var spaces = " "; - // Insert 4 spaces - this.value = this.value.substring(0, start) - + spaces + this.value.substring(end); + // Using document.execCommand gives us undo support + if(!document.execCommand("insertText", false, "\t")) { + // document.execCommand works great on Chrome/Safari but not Firefox + var start = this.selectionStart; + var end = this.selectionEnd; + var spaces = " "; - // Place cursor 4 spaces away from where - // the tab key was pressed - this.selectionStart = this.selectionEnd = start + 4; + // Insert 4 spaces + this.value = this.value.substring(0, start) + + spaces + this.value.substring(end); + + // Place cursor 4 spaces away from where + // the tab key was pressed + this.selectionStart = this.selectionEnd = start + 4; + } parent.note.text = this.value; parent.changesMade(); diff --git a/app/assets/javascripts/app/frontend/controllers/home.js b/app/assets/javascripts/app/frontend/controllers/home.js index 5692bbc2f..074aa5152 100644 --- a/app/assets/javascripts/app/frontend/controllers/home.js +++ b/app/assets/javascripts/app/frontend/controllers/home.js @@ -9,12 +9,8 @@ angular.module('app.frontend') } $rootScope.lockApplication = function() { - // Render first to show lock screen immediately, then refresh - $scope.needsUnlock = true; // Reloading wipes current objects from memory - setTimeout(function () { - window.location.reload(); - }, 100); + window.location.reload(); } function load() { diff --git a/app/assets/javascripts/app/frontend/controllers/notes.js b/app/assets/javascripts/app/frontend/controllers/notes.js index a7225a764..7d72813da 100644 --- a/app/assets/javascripts/app/frontend/controllers/notes.js +++ b/app/assets/javascripts/app/frontend/controllers/notes.js @@ -34,6 +34,7 @@ angular.module('app.frontend') .controller('NotesCtrl', function (authManager, $timeout, $rootScope, modelManager, storageManager) { this.sortBy = storageManager.getItem("sortBy") || "created_at"; + this.showArchived = storageManager.getBooleanValue("showArchived") || false; this.sortDescending = this.sortBy != "title"; $rootScope.$on("editorFocused", function(){ @@ -53,15 +54,26 @@ 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 || !this.tag.archiveTag)) { + base += " | Including archived" + } + + return base; + } + + this.toggleShowArchived = function() { + this.showArchived = !this.showArchived; + storageManager.setBooleanValue("showArchived", this.showArchived); } this.tagDidChange = function(tag, oldTag) { @@ -114,11 +126,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/authManager.js b/app/assets/javascripts/app/services/authManager.js index 26ddd6ec8..6e07e67b2 100644 --- a/app/assets/javascripts/app/services/authManager.js +++ b/app/assets/javascripts/app/services/authManager.js @@ -24,6 +24,8 @@ angular.module('app.frontend') this.user = {uuid: idData}; } } + + this.checkForSecurityUpdate(); } this.offline = function() { @@ -152,6 +154,8 @@ angular.module('app.frontend') this.handleAuthResponse(response, email, url, authParams, keys); storageManager.setModelStorageMode(ephemeral ? StorageManager.Ephemeral : StorageManager.Fixed); + this.checkForSecurityUpdate(); + callback(response); }.bind(this), function(response){ console.error("Error logging in", response); @@ -267,8 +271,6 @@ angular.module('app.frontend') } } - this.checkForSecurityUpdate(); - this.staticifyObject = function(object) { return JSON.parse(JSON.stringify(object)); } diff --git a/app/assets/javascripts/app/services/directives/views/accountMenu.js b/app/assets/javascripts/app/services/directives/views/accountMenu.js index 96a7a70ff..1cc918216 100644 --- a/app/assets/javascripts/app/services/directives/views/accountMenu.js +++ b/app/assets/javascripts/app/services/directives/views/accountMenu.js @@ -185,15 +185,24 @@ class AccountMenu { $scope.importData.loading = true; // allow loading indicator to come up with timeout $timeout(function(){ - $scope.importJSONData(data, password, function(response){ + $scope.importJSONData(data, password, function(response, errorCount){ $timeout(function(){ $scope.importData.loading = false; $scope.importData = null; - if(!response) { - alert("There was an error importing your data. Please try again."); - } else { - alert("Your data was successfully imported.") - } + + // Update UI before showing alert + setTimeout(function () { + if(!response) { + alert("There was an error importing your data. Please try again."); + } else { + if(errorCount > 0) { + var message = `Import complete. ${errorCount} items were not imported because there was an error decrypting them. Make sure the password is correct and try again.`; + alert(message); + } else { + alert("Your data was successfully imported.") + } + } + }, 10); }) }) }) @@ -225,7 +234,7 @@ class AccountMenu { } $scope.importJSONData = function(data, password, callback) { - var onDataReady = function() { + var onDataReady = function(errorCount) { var items = modelManager.mapResponseItemsToLocalModels(data.items); items.forEach(function(item){ item.setDirty(true); @@ -233,7 +242,9 @@ class AccountMenu { item.markAllReferencesDirty(); }) - syncManager.sync(callback, {additionalFields: ["created_at", "updated_at"]}); + syncManager.sync((response) => { + callback(response, errorCount); + }, {additionalFields: ["created_at", "updated_at"]}); }.bind(this) if(data.auth_params) { @@ -244,8 +255,19 @@ class AccountMenu { data.items.forEach(function(item){ item.enc_item_key = null; item.auth_hash = null; + }); + + var errorCount = 0; + // Don't import items that didn't decrypt properly + data.items = data.items.filter(function(item){ + if(item.errorDecrypting) { + errorCount++; + return false; + } + return true; }) - onDataReady(); + + onDataReady(errorCount); } catch (e) { console.log("Error decrypting", e); @@ -490,9 +512,12 @@ class AccountMenu { $scope.formData.showPasscodeForm = false; var offline = authManager.offline(); - var message = "You've succesfully set an app passcode."; - if(offline) { message += " Your items will now be encrypted using this passcode."; } - alert(message); + // Allow UI to update before showing alert + setTimeout(function () { + var message = "You've succesfully set an app passcode."; + if(offline) { message += " Your items will now be encrypted using this passcode."; } + alert(message); + }, 10); if(offline) { syncManager.markAllItemsDirtyAndSaveOffline(); diff --git a/app/assets/javascripts/app/services/storageManager.js b/app/assets/javascripts/app/services/storageManager.js index 6540470e3..5c34e4e15 100644 --- a/app/assets/javascripts/app/services/storageManager.js +++ b/app/assets/javascripts/app/services/storageManager.js @@ -111,6 +111,14 @@ class StorageManager { return storage.getItem(key); } + setBooleanValue(key, value, vault) { + this.setItem(key, JSON.stringify(value), vault); + } + + getBooleanValue(key, vault) { + return JSON.parse(this.getItem(key, vault)); + } + removeItem(key, vault) { var storage = this.getVault(vault); storage.removeItem(key); diff --git a/app/assets/stylesheets/app/_menus.scss b/app/assets/stylesheets/app/_menus.scss index b46ba2bf9..7ca7660f9 100644 --- a/app/assets/stylesheets/app/_menus.scss +++ b/app/assets/stylesheets/app/_menus.scss @@ -25,6 +25,34 @@ 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; + + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; /* number of lines to show */ + $line-height: 18px; + line-height: $line-height; /* fallback */ + max-height: calc(#{$line-height} * 1); /* fallback */ + } + } + + &.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..d0b5ba927 100644 --- a/app/assets/templates/frontend/directives/account-menu.html.haml +++ b/app/assets/templates/frontend/directives/account-menu.html.haml @@ -124,11 +124,11 @@ %p Add an app passcode to lock the app and encrypt on-device key storage. %a.block.mt-5{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} Add Passcode - .mt-5{"ng-if" => "formData.showPasscodeForm"} + %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"} %p.bold Choose a passcode: %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"} %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} - %button.standard.ui-button.block.tinted.mt-5{"ng-click" => "submitPasscodeForm()"} Set Passcode + %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode %div{"ng-if" => "hasPasscode()"} %p Passcode lock is enabled. @@ -149,16 +149,17 @@ %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"} Decrypted - %a.block.mt-5{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} Download Data Archive + %a.block.mt-5{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} Export Data Archive %label.block.mt-5 %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"} .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()}} diff --git a/config/application.rb b/config/application.rb index 29c28a298..6fdfc84d3 100644 --- a/config/application.rb +++ b/config/application.rb @@ -50,7 +50,7 @@ module Neeto block_all_mixed_content: false, # see http://www.w3.org/TR/mixed-content/ child_src: ["*"], connect_src: ["*"], - font_src: %w('self'), + font_src: %w(* 'self'), form_action: %w('self'), frame_ancestors: %w('none'), img_src: %w('self' data:),