App bar
This commit is contained in:
Mo Bitar
@@ -65,13 +65,14 @@
|
||||
|
||||
|
||||
|
||||
%a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"}
|
||||
%p.bold Change Password (Beta)
|
||||
%p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
|
||||
%p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
|
||||
%p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
|
||||
%p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
|
||||
%a.panel-row{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
|
||||
.notification.default{"ng-if" => "newPasswordData.changePassword"}
|
||||
%h1.title Change Password (Beta)
|
||||
.text
|
||||
%p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
|
||||
%p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
|
||||
%p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
|
||||
%p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
|
||||
%div.mt-10{"ng-if" => "!newPasswordData.status"}
|
||||
%a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue
|
||||
%a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
|
||||
@@ -79,17 +80,18 @@
|
||||
%form
|
||||
%input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
|
||||
%input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
|
||||
%button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit
|
||||
.button-group.stretch.panel-row.form-submit
|
||||
.button.info{"type" => "submit", "ng-click" => "submitPasswordChange()"}
|
||||
.label Submit
|
||||
%p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}
|
||||
|
||||
|
||||
|
||||
|
||||
%a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
|
||||
%a.panel-row{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
|
||||
%div{"ng-if" => "showAdvanced"}
|
||||
%a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
|
||||
%a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
|
||||
%a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
|
||||
%a.panel-row{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
|
||||
%a.panel-row{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
|
||||
%a.panel-row{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
|
||||
%section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"}
|
||||
%label.block
|
||||
Encryption key:
|
||||
@@ -118,10 +120,10 @@
|
||||
|
||||
.panel-section
|
||||
%h3.title Encryption
|
||||
%h5.subtitle{"ng-if" => "encryptionEnabled()"}
|
||||
{{encryptionStatusForNotes()}}
|
||||
%p
|
||||
{{encryptionStatusString()}}
|
||||
%div.mt-5{"ng-if" => "encryptionEnabled()"}
|
||||
%i {{encryptionStatusForNotes()}}
|
||||
|
||||
.panel-section
|
||||
%h3.title Passcode Lock
|
||||
@@ -129,12 +131,14 @@
|
||||
.button.info{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"}
|
||||
.label Add Passcode
|
||||
|
||||
%p Add an app passcode to lock the app and encrypt on-device key storage.
|
||||
|
||||
%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{"type" => "submit"} Set Passcode
|
||||
%p Add an app passcode to lock the app and encrypt on-device key storage.
|
||||
.button-group.stretch.panel-row.form-submit
|
||||
.button.info{"type" => "submit"}
|
||||
.label Set Passcode
|
||||
%div{"ng-if" => "hasPasscode()"}
|
||||
%p
|
||||
Passcode lock is enabled.
|
||||
@@ -147,13 +151,14 @@
|
||||
|
||||
.panel-section{"ng-if" => "!importData.loading"}
|
||||
%h3.title Data Backups
|
||||
%div{"ng-if" => "encryptedBackupsAvailable()"}
|
||||
%label.normal.inline
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
|
||||
Encrypted
|
||||
%label.normal.inline
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
|
||||
Decrypted
|
||||
%form.panel-form{"ng-if" => "encryptedBackupsAvailable()"}
|
||||
.input-group
|
||||
%label
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
|
||||
Encrypted
|
||||
%label
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
|
||||
Decrypted
|
||||
|
||||
.button-group
|
||||
.button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"}
|
||||
@@ -164,7 +169,7 @@
|
||||
.label Import From Backup
|
||||
|
||||
%div{"ng-if" => "importData.requestPassword"}
|
||||
%form{"ng-submit" => "submitImportPassword()"}
|
||||
%form.panel-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
|
||||
|
||||
@@ -12,32 +12,33 @@
|
||||
%iframe#note-tags-iframe{"ng-src" => "{{ctrl.componentManager.urlForComponent(ctrl.tagsComponent) | trusted}}", "frameBorder" => "0", "sandbox" => "allow-scripts", "data-component-id" => "{{ctrl.tagsComponent.uuid}}"}
|
||||
%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)"}
|
||||
%ul.section-menu-bar{"ng-if" => "ctrl.note"}
|
||||
%li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
|
||||
%label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
|
||||
|
||||
.sn-component
|
||||
.menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
|
||||
.section
|
||||
.header
|
||||
%h4.title Note
|
||||
%menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
|
||||
%menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
|
||||
%menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
|
||||
%menu-row{"ng-if" => "ctrl.hasDisabledComponents()", "title" => "'Restore Disabled Components'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"}
|
||||
.sn-component{"ng-if" => "ctrl.note"}
|
||||
.app-bar.no-edges
|
||||
.left
|
||||
.item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
|
||||
.label Menu
|
||||
.menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
|
||||
.section
|
||||
.header
|
||||
%h4.title Note
|
||||
%menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
|
||||
%menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
|
||||
%menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
|
||||
%menu-row{"ng-if" => "ctrl.hasDisabledComponents()", "title" => "'Restore Disabled Components'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"}
|
||||
|
||||
.section{"ng-if" => "!ctrl.editor"}
|
||||
.header
|
||||
%h4.title Display
|
||||
%menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
|
||||
.section{"ng-if" => "!ctrl.editor"}
|
||||
.header
|
||||
%h4.title Display
|
||||
%menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"}
|
||||
|
||||
%li{"ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
|
||||
%label{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;"} Editor
|
||||
%editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editorComponent"}
|
||||
.item{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
|
||||
.label Editor
|
||||
%editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.editorComponent"}
|
||||
|
||||
%li{"ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
|
||||
%label{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;"} Actions
|
||||
%contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
|
||||
.item{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
|
||||
.label Actions
|
||||
%contextual-extensions-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"}
|
||||
|
||||
@@ -1,33 +1,40 @@
|
||||
#footer-bar
|
||||
.pull-left
|
||||
.footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
|
||||
%a.label{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
|
||||
.sn-component
|
||||
#footer-bar.app-bar.no-edges
|
||||
.left
|
||||
.item{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
|
||||
.column
|
||||
.circle.small.info
|
||||
.column
|
||||
.label.title{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
|
||||
|
||||
.footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
|
||||
%a.label{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
|
||||
.item{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
|
||||
.label.title{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
|
||||
|
||||
.footer-bar-link
|
||||
%a.label{"href" => "https://standardnotes.org/help", "target" => "_blank"}
|
||||
Help
|
||||
.item
|
||||
.label.title{"href" => "https://standardnotes.org/help", "target" => "_blank"}
|
||||
Help
|
||||
|
||||
%room-bar#room-bar
|
||||
%room-bar#room-bar
|
||||
|
||||
.pull-right
|
||||
.right
|
||||
|
||||
.footer-bar-link{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
|
||||
%span.tinted.normal New update downloaded. Installs on app restart.
|
||||
.item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
|
||||
%span.tinted.normal New update downloaded. Installs on app restart.
|
||||
|
||||
.footer-bar-link{"style" => "margin-right: 5px;"}
|
||||
%span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
|
||||
%span.label{"ng-if" => "!ctrl.isRefreshing"}
|
||||
Last refreshed {{ctrl.lastSyncDate | appDateTime}}
|
||||
%span{"ng-if" => "ctrl.isRefreshing"}
|
||||
.spinner{"style" => "margin-top: 2px;"}
|
||||
.item{"ng-if" => "ctrl.lastSyncDate"}
|
||||
.label
|
||||
%span{"ng-if" => "!ctrl.isRefreshing"}
|
||||
Last refreshed {{ctrl.lastSyncDate | appDateTime}}
|
||||
%span{"ng-if" => "ctrl.isRefreshing"}
|
||||
.spinner
|
||||
|
||||
%strong.label{"ng-if" => "ctrl.offline"} Offline
|
||||
%a.label{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
|
||||
.item{"ng-if" => "ctrl.offline"}
|
||||
.label Offline
|
||||
.item{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"}
|
||||
.label Refresh
|
||||
|
||||
%span.label{"ng-if" => "ctrl.hasPasscode()"}
|
||||
%i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
|
||||
.item{"ng-if" => "ctrl.hasPasscode()"}
|
||||
.label
|
||||
%i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
|
||||
|
||||
@@ -8,15 +8,18 @@
|
||||
.filter-section
|
||||
%input.filter-bar#search-bar.mousetrap{"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#notes-menu-bar.no-h-padding
|
||||
%li.item-with-subtitle.full-width{"ng-class" => "{'selected' : ctrl.showMenu}"}
|
||||
.wrapper{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"}
|
||||
%label
|
||||
Options
|
||||
%span.subtitle {{ctrl.optionsSubtitle()}}
|
||||
.sn-component#notes-menu-bar
|
||||
.app-bar.no-edges
|
||||
.left
|
||||
.item{"ng-click" => "ctrl.showMenu = !ctrl.showMenu", "ng-class" => "{'selected' : ctrl.showMenu}"}
|
||||
.column
|
||||
.label
|
||||
Options
|
||||
.column
|
||||
.sublabel {{ctrl.optionsSubtitle()}}
|
||||
|
||||
.sn-component
|
||||
.menu-panel.dropdown-menu{"ng-if" => "ctrl.showMenu"}
|
||||
.sn-component{"ng-if" => "ctrl.showMenu"}
|
||||
.menu-panel.dropdown-menu
|
||||
.section
|
||||
.header
|
||||
%h4.title Sort By
|
||||
|
||||
Reference in New Issue
Block a user