b932e2a45e
* feat: add editor icon * refactor: remove 'any' type and format * refactor: move NotesOptions and add ChangeEditorOption * refactor: fix type for using regular RefObject<T> * feat: add hide-if-last-child util class * feat: add Change Editor option * feat: make radio btn gray if not checked * fix: accordion menu header and item sizing/spacing * feat: add Escape key to KeyboardKey enum * refactor: Remove Editor Menu * feat: add editor select functionality * refactor: move plain editor name to constant * feat: add premium editors with modal if no subscription refactor: simplify menu group creation * feat: show alert when switching to non-interchangeable editor * fix: change editor menu going out of bounds * feat: increase group header & editor item size * fix: change editor menu close on blur * refactor: Use KeyboardKey enum & remove else statement * feat: add keyboard navigation to change editor menu * fix: editor menu separators * feat: improve change editor menu sizing & spacing * feat: show alert only if editor is not interchangeable * feat: don't show alert when switching to/from plain editor * chore: bump snjs version * feat: temporarily remove change editor alert * feat: dynamically get footer height * refactor: move magic number to const * refactor: move constants to constants file * feat: use const instead of magic number
164 lines
6.8 KiB
Plaintext
164 lines
6.8 KiB
Plaintext
#editor-column.section.editor.sn-component(aria-label='Note')
|
|
protected-note-panel.h-full.flex.justify-center.items-center(
|
|
ng-if='self.state.showProtectedWarning'
|
|
app-state='self.appState'
|
|
has-protection-sources='self.application.hasProtectionSources()'
|
|
on-view-note='self.dismissProtectedWarning()'
|
|
)
|
|
.flex-grow.flex.flex-col(
|
|
ng-if='!self.appState.notes.showProtectedWarning'
|
|
)
|
|
.sn-component
|
|
.sk-app-bar.no-edges(
|
|
ng-if='self.noteLocked',
|
|
ng-init="self.lockText = 'Note Editing Disabled'; self.showLockedIcon = true",
|
|
ng-mouseleave="self.lockText = 'Note Editing Disabled'; self.showLockedIcon = true",
|
|
ng-mouseover="self.lockText = 'Enable editing'; self.showLockedIcon = false"
|
|
)
|
|
.sk-app-bar-item(
|
|
ng-click='self.appState.notes.setLockSelectedNotes(!self.noteLocked)'
|
|
)
|
|
.sk-label.warning.flex.items-center
|
|
icon.flex(
|
|
type="pencil-off"
|
|
class-name="fill-current mr-2"
|
|
ng-if="self.showLockedIcon"
|
|
)
|
|
| {{self.lockText}}
|
|
#editor-title-bar.section-title-bar.w-full(
|
|
ng-show='self.note && !self.note.errorDecrypting'
|
|
)
|
|
div.flex.items-center.justify-between.h-8
|
|
div.flex-grow(
|
|
ng-class="{'locked' : self.noteLocked}"
|
|
)
|
|
.title.overflow-auto
|
|
input#note-title-editor.input(
|
|
ng-change='self.onTitleChange()',
|
|
ng-disabled='self.noteLocked',
|
|
ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)',
|
|
ng-model='self.editorValues.title',
|
|
select-on-focus='true',
|
|
spellcheck='false'
|
|
)
|
|
div.flex.items-center
|
|
#save-status
|
|
.message(
|
|
ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
|
|
) {{self.state.noteStatus.message}}
|
|
.desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
|
|
pin-note-button(
|
|
class='mr-3'
|
|
app-state='self.appState',
|
|
ng-if='self.appState.notes.selectedNotesCount > 0'
|
|
)
|
|
notes-options-panel(
|
|
application='self.application',
|
|
app-state='self.appState',
|
|
ng-if='self.appState.notes.selectedNotesCount > 0'
|
|
)
|
|
note-tags-container(
|
|
app-state='self.appState'
|
|
)
|
|
.sn-component(ng-if='self.note')
|
|
#editor-menu-bar.sk-app-bar.no-edges
|
|
.left
|
|
.sk-app-bar-item(
|
|
click-outside=`self.setMenuState('showActionsMenu', false)`,
|
|
is-open='self.state.showActionsMenu',
|
|
ng-class="{'selected' : self.state.showActionsMenu}",
|
|
ng-click="self.toggleMenu('showActionsMenu')"
|
|
)
|
|
.sk-label Actions
|
|
actions-menu(
|
|
item='self.note',
|
|
ng-if='self.state.showActionsMenu',
|
|
application='self.application'
|
|
)
|
|
.sk-app-bar-item(
|
|
click-outside=`self.setMenuState('showHistoryMenu', false)`,
|
|
is-open='self.state.showHistoryMenu',
|
|
ng-class="{'selected' : self.state.showHistoryMenu}",
|
|
ng-click="self.toggleMenu('showHistoryMenu')"
|
|
)
|
|
.sk-label History
|
|
history-menu(
|
|
item='self.note',
|
|
ng-if='self.state.showHistoryMenu',
|
|
application='self.application'
|
|
)
|
|
#editor-content.editor-content(ng-if='!self.note.errorDecrypting')
|
|
panel-resizer.left(
|
|
control='self.leftPanelPuppet',
|
|
hoverable='true',
|
|
min-width='300',
|
|
ng-if='self.state.marginResizersEnabled',
|
|
on-resize-finish='self.onPanelResizeFinish',
|
|
panel-id="'editor-content'",
|
|
property="'left'"
|
|
)
|
|
component-view.component-view(
|
|
component-viewer='self.state.editorComponentViewer',
|
|
ng-if='self.state.editorComponentViewer',
|
|
on-load='self.onEditorComponentLoad',
|
|
request-reload='self.editorComponentViewerRequestsReload'
|
|
application='self.application'
|
|
app-state='self.appState'
|
|
)
|
|
textarea#note-text-editor.editable.font-editor(
|
|
dir='auto',
|
|
ng-attr-spellcheck='{{self.state.spellcheck}}',
|
|
ng-change='self.contentChanged()',
|
|
ng-click='self.clickedTextArea()',
|
|
ng-focus='self.onContentFocus()',
|
|
ng-if='self.state.editorStateDidLoad && !self.state.editorComponentViewer && !self.state.textareaUnloading',
|
|
ng-model='self.editorValues.text',
|
|
ng-model-options='{ debounce: self.state.editorDebounce}',
|
|
ng-readonly='self.noteLocked',
|
|
ng-trim='false'
|
|
autocomplete='off'
|
|
)
|
|
| {{self.onSystemEditorLoad()}}
|
|
panel-resizer(
|
|
control='self.rightPanelPuppet',
|
|
hoverable='true', min-width='300',
|
|
ng-if='self.state.marginResizersEnabled',
|
|
on-resize-finish='self.onPanelResizeFinish',
|
|
panel-id="'editor-content'",
|
|
property="'right'"
|
|
)
|
|
.section(ng-show='self.note.errorDecrypting')
|
|
.sn-component#error-decrypting-container
|
|
.sk-panel#error-decrypting-panel
|
|
.sk-panel-header
|
|
.sk-panel-header-title {{self.note.waitingForKey ? 'Waiting for Key' : 'Unable to Decrypt'}}
|
|
.sk-panel-content
|
|
.sk-panel-section
|
|
p.sk-p(ng-if='self.note.waitingForKey')
|
|
| This note is awaiting its encryption key to be ready. Please wait for syncing to complete
|
|
| for this note to be decrypted.
|
|
p.sk-p(ng-if='!self.note.waitingForKey')
|
|
| There was an error decrypting this item. Ensure you are running the
|
|
| latest version of this app, then sign out and sign back in to try again.
|
|
#editor-pane-component-stack(ng-if='!self.note.errorDecrypting' ng-show='self.note')
|
|
#component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.state.availableStackComponents.length')
|
|
.left
|
|
.sk-app-bar-item(
|
|
ng-repeat='component in self.state.availableStackComponents track by component.uuid'
|
|
ng-click='self.toggleStackComponent(component)',
|
|
)
|
|
.sk-app-bar-item-column
|
|
.sk-circle.small(
|
|
ng-class="{'info' : self.stackComponentExpanded(component) && component.active, 'neutral' : !self.stackComponentExpanded(component)}"
|
|
)
|
|
.sk-app-bar-item-column
|
|
.sk-label {{component.name}}
|
|
.sn-component
|
|
component-view.component-view.component-stack-item(
|
|
ng-repeat='viewer in self.state.stackComponentViewers track by viewer.componentUuid',
|
|
component-viewer='viewer',
|
|
manual-dealloc='true',
|
|
application='self.application'
|
|
app-state='self.appState'
|
|
)
|