rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Editor component management simplification

Browse Source
This commit is contained in:
Mo Bitar
2020-04-15 13:11:10 -05:00
parent 0d44a2ff64
commit 1280c2ec52
7 changed files with 206 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/directives/views/editorMenu.ts
View File

@@ -8,7 +8,7 @@ import { ComponentMutator } from '@/../../../../snjs/dist/@types/models';
interface EditorMenuScope {
callback: (component: SNComponent) => void
selectedEditor: SNComponent
selectedEditorUuid: string
currentItem: SNItem
application: WebApplication
}
@@ -16,7 +16,7 @@ interface EditorMenuScope {
class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope {
callback!: () => (component: SNComponent) => void
selectedEditor!: SNComponent
selectedEditorUuid!: string
currentItem!: SNItem
application!: WebApplication
@@ -30,6 +30,17 @@ class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope {
};
}
public isEditorSelected(editor: SNComponent) {
if(!this.selectedEditorUuid) {
return false;
}
return this.selectedEditorUuid === editor.uuid;
}
public isEditorDefault(editor: SNComponent) {
return this.state.defaultEditor?.uuid === editor.uuid;
}
$onInit() {
super.$onInit();
const editors = this.application.componentManager!.componentsForArea(ComponentArea.Editor)
@@ -108,7 +119,7 @@ export class EditorMenu extends WebDirective {
this.bindToController = true;
this.scope = {
callback: '&',
selectedEditor: '=',
selectedEditorUuid: '=',
currentItem: '=',
application: '='
};

19
app/assets/javascripts/views/application/application_view.ts
View File

@@ -47,7 +47,7 @@ class ApplicationViewCtrl extends PureViewCtrl {
this.presentPermissionsDialog = this.presentPermissionsDialog.bind(this);
this.addDragDropHandlers();
}
deinit() {
this.$location = undefined;
this.$rootScope = undefined;
@@ -61,7 +61,7 @@ class ApplicationViewCtrl extends PureViewCtrl {
(this.presentPermissionsDialog as any) = undefined;
super.deinit();
}
$onInit() {
super.$onInit();
this.loadApplication();
@@ -204,10 +204,17 @@ class ApplicationViewCtrl extends PureViewCtrl {
this.uploadSyncStatus,
`Syncing ${stats.uploadCompletionCount}/${stats.uploadTotalCount} items...`
);
} else if (this.uploadSyncStatus) {
this.uploadSyncStatus = this.application!.getStatusService().removeStatus(
this.uploadSyncStatus
);
} else {
if (this.syncStatus) {
this.syncStatus = this.application!.getStatusService().removeStatus(
this.syncStatus
);
}
if (this.uploadSyncStatus) {
this.uploadSyncStatus = this.application!.getStatusService().removeStatus(
this.uploadSyncStatus
);
}
}
}

38
app/assets/javascripts/views/editor/editor-view.pug
View File

@@ -63,42 +63,42 @@
.sk-menu-panel-header
.sk-menu-panel-header-title Note Options
menu-row(
action='self.selectedMenuItem(true); self.togglePin()',
action='self.selectedMenuItem(true); self.togglePin()'
desc="'Pin or unpin a note from the top of your list'",
label="self.note.pinned ? 'Unpin' : 'Pin'"
)
menu-row(
action='self.selectedMenuItem(true); self.toggleArchiveNote()',
action='self.selectedMenuItem(true); self.toggleArchiveNote()'
desc="'Archive or unarchive a note from your Archived system tag'",
label="self.note.archived ? 'Unarchive' : 'Archive'"
)
menu-row(
action='self.selectedMenuItem(true); self.toggleLockNote()',
action='self.selectedMenuItem(true); self.toggleLockNote()'
desc="'Locking notes prevents unintentional editing'",
label="self.noteLocked ? 'Unlock' : 'Lock'"
)
menu-row(
action='self.selectedMenuItem(true); self.toggleProtectNote()',
action='self.selectedMenuItem(true); self.toggleProtectNote()'
desc=`'Protecting a note will require credentials to view
it (Manage Privileges via Account menu)'`,
it (Manage Privileges via Account menu)'`,
label="self.note.protected ? 'Unprotect' : 'Protect'"
)
menu-row(
action='self.selectedMenuItem(true); self.toggleNotePreview()',
action='self.selectedMenuItem(true); self.toggleNotePreview()'
circle="self.note.hidePreview ? 'danger' : 'success'",
circle-align="'right'",
desc="'Hide or unhide the note preview from the list of notes'",
label="'Preview'"
)
menu-row(
action='self.selectedMenuItem(); self.deleteNote()',
action='self.selectedMenuItem(); self.deleteNote()'
desc="'Send this note to the trash'",
label="'Move to Trash'",
ng-show='!self.state.altKeyDown && !self.note.trashed && !self.note.errorDecrypting',
stylekit-class="'warning'"
)
menu-row(
action='self.selectedMenuItem(); self.deleteNotePermanantely()',
action='self.selectedMenuItem(); self.deleteNotePermanantely()'
desc="'Delete this note permanently from all your devices'",
label="'Delete Permanently'",
ng-show='!self.note.trashed && self.note.errorDecrypting',
@@ -106,20 +106,20 @@
)
div(ng-if='self.note.trashed || self.state.altKeyDown')
menu-row(
action='self.selectedMenuItem(true); self.restoreTrashedNote()',
action='self.selectedMenuItem(true); self.restoreTrashedNote()'
desc="'Undelete this note and restore it back into your notes'",
label="'Restore'",
ng-show='self.note.trashed',
stylekit-class="'info'"
)
menu-row(
action='self.selectedMenuItem(true); self.deleteNotePermanantely()',
action='self.selectedMenuItem(true); self.deleteNotePermanantely()'
desc="'Delete this note permanently from all your devices'",
label="'Delete Permanently'",
stylekit-class="'danger'"
)
menu-row(
action='self.selectedMenuItem(true); self.emptyTrash()',
action='self.selectedMenuItem(true); self.emptyTrash()'
desc="'Permanently delete all notes in the trash'",
label="'Empty Trash'",
ng-show='self.note.trashed || !self.state.altKeyDown',
@@ -130,7 +130,7 @@
.sk-menu-panel-header
.sk-menu-panel-header-title Global Display
menu-row(
action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)",
action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)"
circle="self.state.monospaceEnabled ? 'success' : 'neutral'",
desc="'Toggles the font style for the default editor'",
disabled='self.activeEditorComponent',
@@ -138,7 +138,7 @@
subtitle="self.activeEditorComponent ? 'Not available with editor extensions' : null"
)
menu-row(
action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)",
action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)"
circle="self.state.spellcheck ? 'success' : 'neutral'",
desc="'Toggles spellcheck for the default editor'",
disabled='self.activeEditorComponent',
@@ -149,7 +149,7 @@
: (self.state.isDesktop ? 'May degrade editor performance' : null)
`)
menu-row(
action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)",
action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)"
circle="self.state.marginResizersEnabled ? 'success' : 'neutral'",
desc="'Allows for editor left and right margins to be resized'",
faded='!self.state.marginResizersEnabled',
@@ -166,7 +166,7 @@
callback='self.editorMenuOnSelect',
current-item='self.note',
ng-if='self.state.showEditorMenu',
selected-editor='self.activeEditorComponent',
selected-editor-uuid='self.activeEditorComponent && self.activeEditorComponent.uuid',
application='self.application'
)
.sk-app-bar-item(
@@ -192,9 +192,7 @@
ng-if='self.state.showSessionHistory',
application='self.application'
)
#editor-content.editor-content(
ng-if='self.state.noteReady && !self.note.errorDecrypting'
)
#editor-content.editor-content(ng-if='!self.note.errorDecrypting')
panel-resizer.left(
control='self.leftPanelPuppet',
hoverable='true',
@@ -206,7 +204,7 @@
)
component-view.component-view(
component-uuid='self.activeEditorComponent.uuid',
ng-if='self.activeEditorComponent',
ng-if='self.activeEditorComponent && !self.state.editorComponentUnloading',
on-load='self.onEditorLoad',
application='self.application'
)
@@ -216,7 +214,7 @@
ng-change='self.contentChanged()',
ng-click='self.clickedTextArea()',
ng-focus='self.onContentFocus()',
ng-if='!self.activeEditorComponent',
ng-if='!self.activeEditorComponent && !self.state.textareaUnloading',
ng-model='self.editorValues.text',
ng-model-options='{ debounce: self.state.editorDebounce}',
ng-readonly='self.noteLocked',

69
app/assets/javascripts/views/editor/editor_view.ts
View File

@@ -70,10 +70,15 @@ type EditorState = {
isDesktop?: boolean
syncTakingTooLong: boolean
showExtensions: boolean
noteReady: boolean
showOptionsMenu: boolean
altKeyDown: boolean
spellcheck: boolean
/** Setting to false then true will allow the current editor component-view to be destroyed
* then re-initialized. Used when changing between component editors. */
editorComponentUnloading: boolean
/** Setting to false then true will allow the main content textarea to be destroyed
* then re-initialized. Used when reloading spellcheck status. */
textareaUnloading: boolean
/** Fields that can be directly mutated by the template */
mutable: {}
}
@@ -195,7 +200,6 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
editorDebounce: EDITOR_DEBOUNCE,
isDesktop: isDesktopApplication(),
spellcheck: true,
noteReady: true,
mutable: {
tagsString: ''
}
@@ -287,18 +291,38 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
}
async reloadComponentEditorState() {
const associatedEditor = this.application.componentManager!.editorForNote(this.note)
if (associatedEditor && associatedEditor !== this.activeEditorComponent) {
/** Setting note to not ready will remove the editor from view in a flash,
* so we only want to do this if switching between external editors */
await this.componentGroup.activateComponent(associatedEditor);
} else if (!associatedEditor) {
const associatedEditor = this.application.componentManager!.editorForNote(this.note);
if (!associatedEditor) {
/** No editor */
await this.componentGroup.deactivateComponentForArea(ComponentArea.Editor);
let changed = false;
if (this.activeEditorComponent) {
await this.componentGroup.deactivateComponentForArea(ComponentArea.Editor);
changed = true;
}
return { editor: undefined, changed };
}
return associatedEditor;
}
if (associatedEditor.uuid === this.activeEditorComponent?.uuid) {
/** Same editor, no change */
return { editor: associatedEditor, changed: false };
}
if (!this.activeEditorComponent) {
/** No existing editor set, set this one */
await this.componentGroup.activateComponent(associatedEditor);
} else {
/** Only remaining condition: editor is being changed. Unload current component
* view so that we create a new one, then change the active editor */
await this.setEditorState({
editorComponentUnloading: true
});
await this.componentGroup.activateComponent(associatedEditor);
await this.setEditorState({
editorComponentUnloading: false
});
}
return { editor: associatedEditor, changed: true };
}
/**
* Because note.locked accesses note.content.appData,
@@ -352,10 +376,11 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
return;
}
/** Find the most recent editor for note */
const editor = this.reloadComponentEditorState();
if (!editor) {
this.reloadFont();
}
this.reloadComponentEditorState().then(({ editor, changed }) => {
if (!editor && changed) {
this.reloadFont();
}
});
}
);
}
@@ -396,10 +421,10 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
noteMutator.prefersPlainEditor = true;
})
}
if(this.activeEditorComponent?.isExplicitlyEnabledForItem(this.note)) {
if (this.activeEditorComponent?.isExplicitlyEnabledForItem(this.note)) {
await this.disassociateComponentWithCurrentNote(this.activeEditorComponent);
}
await this.componentGroup.deactivateComponentForArea(ComponentArea.Editor);
await this.reloadComponentEditorState();
this.reloadFont();
}
else if (component.area === ComponentArea.Editor) {
@@ -415,7 +440,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
})
}
await this.associateComponentWithCurrentNote(component);
await this.componentGroup.activateComponent(component);
await this.reloadComponentEditorState();
}
else if (component.area === ComponentArea.EditorStack) {
await this.toggleStackComponentForCurrentItem(component);
@@ -962,12 +987,8 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
if (key === WebPrefKey.EditorSpellcheck) {
/** Allows textarea to reload */
await this.setEditorState({
noteReady: false
});
this.setEditorState({
noteReady: true
});
await this.setEditorState({ textareaUnloading: false });
this.setEditorState({ textareaUnloading: true });
this.reloadFont();
} else if (key === WebPrefKey.EditorResizersEnabled && (this as any)[key] === true) {
this.$timeout(() => {

10
app/assets/templates/directives/editor-menu.pug
View File

@@ -5,17 +5,17 @@
.sk-menu-panel-header-title Note Editor
menu-row(
action='self.selectComponent(null)',
circle="self.selectedEditor == null && 'success'",
circle="!self.selectedEditorUuid && 'success'",
label="'Plain Editor'"
)
menu-row(
ng-repeat='editor in self.state.editors track by editor.uuid'
action='self.selectComponent(editor)',
button-action='self.toggleDefaultForEditor(editor)',
button-class="self.state.defaultEditor == editor ? 'warning' : 'info'",
button-text="self.state.defaultEditor == editor ? 'Undefault' : 'Set Default'",
circle="self.selectedEditor === editor && 'success'",
has-button='self.selectedEditor == editor || self.state.defaultEditor == editor',
button-class="self.isEditorSelected(editor) ? 'warning' : 'info'",
button-text="self.isEditorDefault(editor) ? 'Undefault' : 'Set Default'",
circle="self.isEditorSelected(editor) && 'success'",
has-button='self.isEditorSelected(editor) || isEditorDefault(editor)',
label='editor.name',
)
.sk-menu-panel-column(

147
dist/javascripts/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/javascripts/app.js.map vendored
View File

File diff suppressed because one or more lines are too long