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

feat: Update notes list options menu to new design (#687)

Browse Source 
feat: Implement initial Menu component functionality.
This commit is contained in:
Aman Harwara
2021-10-19 21:37:47 +05:30
committed by GitHub
parent 3a4e2509af
commit 397e4963bd
11 changed files with 550 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/assets/javascripts/views/notes/notes-view.pug
View File

@@ -49,71 +49,12 @@
| Options
.sk-app-bar-item-column
.sk-sublabel {{self.optionsSubtitle()}}
#notes-options-menu.sk-menu-panel.dropdown-menu(
ng-show='self.state.mutable.showMenu'
)
.sk-menu-panel-header
.sk-menu-panel-header-title Sort By
a.info.sk-h5(ng-click='self.toggleReverseSort()')
| {{self.state.sortReverse === true ? 'Disable Reverse Sort' : 'Enable Reverse Sort'}}
menu-row(
action="self.selectedMenuItem(); self.selectedSortByCreated()"
circle="self.state.sortBy == 'created_at' && 'success'"
desc="'Sort notes by newest first'"
label="'Date Added'"
)
menu-row(
action="self.selectedMenuItem(); self.selectedSortByUpdated()"
circle="self.state.sortBy == 'userModifiedDate' && 'success'"
desc="'Sort notes with the most recently updated first'"
label="'Date Modified'"
)
menu-row(
action="self.selectedMenuItem(); self.selectedSortByTitle()"
circle="self.state.sortBy == 'title' && 'success'"
desc="'Sort notes alphabetically by their title'"
label="'Title'"
)
.sk-menu-panel-section
.sk-menu-panel-header
.sk-menu-panel-header-title Display
menu-row(
action="self.selectedMenuItem(); self.togglePrefKey('showArchived')"
circle="self.state.showArchived ? 'success' : 'danger'"
desc=`'Archived notes are usually hidden.
You can explicitly show them with this option.'`
faded="!self.state.showArchived"
label="'Archived Notes'"
)
menu-row(
action="self.selectedMenuItem(); self.togglePrefKey('hidePinned')"
circle="self.state.hidePinned ? 'danger' : 'success'"
desc=`'Pinned notes always appear on top. You can hide them temporarily
with this option so you can focus on other notes in the list.'`
faded="self.state.hidePinned"
label="'Pinned Notes'"
)
menu-row(
action="self.selectedMenuItem(); self.togglePrefKey('hideNotePreview')"
circle="self.state.hideNotePreview ? 'danger' : 'success'"
desc="'Hide the note preview for a more condensed list of notes'"
faded="self.state.hideNotePreview"
label="'Note Preview'"
)
menu-row(
action="self.selectedMenuItem(); self.togglePrefKey('hideDate')"
circle="self.state.hideDate ? 'danger' : 'success'"
desc="'Hide the date displayed in each row'"
faded="self.state.hideDate"
label="'Date'"
)
menu-row(
action="self.selectedMenuItem(); self.togglePrefKey('hideTags')"
circle="self.state.hideTags ? 'danger' : 'success'"
desc="'Hide the list of tags associated with each note'"
faded="self.state.hideTags"
label="'Tags'"
)
notes-list-options-menu(
ng-if='self.state.mutable.showMenu'
app-state='self.appState'
application='self.application'
set-show-menu-false='self.setShowMenuFalse'
)
p.empty-notes-list.faded(
ng-if="self.state.completedFullSync && !self.state.renderedNotes.length"
) No notes.

20
app/assets/javascripts/views/notes/notes_view.ts
View File

@@ -96,6 +96,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
this.onWindowResize = this.onWindowResize.bind(this);
this.onPanelResize = this.onPanelResize.bind(this);
this.onPanelWidthEvent = this.onPanelWidthEvent.bind(this);
this.setShowMenuFalse = this.setShowMenuFalse.bind(this);
window.addEventListener('resize', this.onWindowResize, true);
this.registerKeyboardShortcuts();
this.autorun(async () => {
@@ -441,7 +442,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
includeTrashed = this.state.searchOptions.includeTrashed;
} else {
includeArchived = this.state.showArchived ?? false;
includeTrashed = false;
includeTrashed = this.state.showTrashed ?? false;
}
const criteria = NotesDisplayCriteria.Create({
@@ -451,6 +452,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
includeArchived,
includeTrashed,
includePinned: !this.state.hidePinned,
includeProtected: !this.state.hideProtected,
searchQuery: {
query: searchText,
includeProtectedNoteText: this.state.searchOptions.includeProtectedContents
@@ -554,10 +556,18 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
PrefKey.NotesShowArchived,
false
);
viewOptions.showTrashed = this.application.getPreference(
PrefKey.NotesShowTrashed,
false
) as boolean;
viewOptions.hidePinned = this.application.getPreference(
PrefKey.NotesHidePinned,
false
);
viewOptions.hideProtected = this.application.getPreference(
PrefKey.NotesHideProtected,
false
);
viewOptions.hideNotePreview = this.application.getPreference(
PrefKey.NotesHideNotePreview,
false
@@ -576,6 +586,8 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
viewOptions.sortReverse !== state.sortReverse ||
viewOptions.hidePinned !== state.hidePinned ||
viewOptions.showArchived !== state.showArchived ||
viewOptions.showTrashed !== state.showTrashed ||
viewOptions.hideProtected !== state.hideProtected ||
viewOptions.hideTags !== state.hideTags
);
await this.setNotesState({
@@ -672,9 +684,15 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
if (this.state.showArchived) {
base += " | + Archived";
}
if (this.state.showTrashed) {
base += " | + Trashed";
}
if (this.state.hidePinned) {
base += " | – Pinned";
}
if (this.state.hideProtected) {
base += " | – Protected";
}
if (this.state.sortReverse) {
base += " | Reversed";
}