Files
standardnotes-app-web/app/assets/javascripts/views/editor/editor-view.pug
2021-12-15 15:26:31 +01:00

179 lines
7.5 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'
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-blur='self.onTitleBlur()',
ng-change='self.onTitleChange()',
ng-disabled='self.noteLocked',
ng-focus='self.onTitleFocus()',
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('showEditorMenu', false)`
is-open='self.state.showEditorMenu',
ng-class="{'selected' : self.state.showEditorMenu}",
ng-click="self.toggleMenu('showEditorMenu')"
)
.sk-label Editor
editor-menu(
callback='self.editorMenuOnSelect',
current-item='self.note',
ng-if='self.state.showEditorMenu',
selected-editor-uuid='self.state.editorComponent && self.state.editorComponent.uuid',
application='self.application'
)
.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-uuid='self.state.editorComponent.uuid',
ng-if='self.state.editorComponent && !self.state.editorUnloading',
on-load='self.onEditorLoad',
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.editorComponent && !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.stackComponents.length')
.left
.sk-app-bar-item(
ng-repeat='component in self.state.stackComponents track by component.uuid'
ng-click='self.toggleStackComponentForCurrentItem(component)',
)
.sk-app-bar-item-column
.sk-circle.small(
ng-class="{'info' : !self.stackComponentHidden(component) && component.active, 'neutral' : self.stackComponentHidden(component) || !component.active}"
)
.sk-app-bar-item-column
.sk-label {{component.name}}
.sn-component
component-view.component-view.component-stack-item(
ng-repeat='component in self.state.stackComponents track by component.uuid',
component-uuid='component.uuid',
manual-dealloc='true',
ng-show='!self.stackComponentHidden(component)',
application='self.application'
app-state='self.appState'
)