Files
standardnotes-app-web/app/assets/javascripts/views/notes/notes-view.pug
2021-02-22 11:40:43 +01:00

164 lines
7.1 KiB
Plaintext

#notes-column.sn-component.section.notes(aria-label='Notes')
.content
#notes-title-bar.section-title-bar
.padded
.section-title-bar-header
.sk-h2.font-semibold.title {{self.state.panelTitle}}
.sk-button.contrast.wide(
ng-click='self.createNewNote()',
title='Create a new note in the selected tag'
)
.sk-label
i.icon.ion-plus.add-button
.filter-section(role='search')
input#search-bar.filter-bar(
ng-blur='self.onFilterEnter()',
ng-change='self.filterTextChanged()',
ng-keyup='$event.keyCode == 13 && self.onFilterEnter();',
ng-model='self.state.noteFilter.text',
placeholder='Search',
select-on-focus='true',
title='Searches notes in the currently selected tag'
)
#search-clear-button(
ng-click='self.clearFilterText();',
ng-show='self.state.noteFilter.text'
) ✕
no-account-warning(
application='self.application'
app-state='self.appState'
)
#notes-menu-bar.sn-component
.sk-app-bar.no-edges
.left
.sk-app-bar-item(
ng-class="{'selected' : self.state.mutable.showMenu}",
ng-click='self.state.mutable.showMenu = !self.state.mutable.showMenu'
)
.sk-app-bar-item-column
.sk-label
| 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'"
)
p.empty-notes-list.faded(
ng-if="self.state.completedFullSync && !self.state.renderedNotes.length"
) No notes.
p.empty-notes-list.faded(
ng-if="!self.state.completedFullSync && !self.state.renderedNotes.length"
) Loading notes…
.scrollable(ng-if="self.state.renderedNotes.length")
#notes-scrollable.infinite-scroll(
can-load='true',
infinite-scroll='self.paginate()',
threshold='200'
)
.note(
ng-repeat='note in self.state.renderedNotes track by note.uuid'
ng-class="{'selected' : self.activeEditorNote.uuid == note.uuid}"
ng-click='self.selectNote(note)'
)
.note-flags(ng-show='self.noteFlags[note.uuid].length > 0')
.flag(ng-class='flag.class', ng-repeat='flag in self.noteFlags[note.uuid]')
.label {{flag.text}}
.name(ng-show='note.title')
| {{note.title}}
.note-preview(
ng-if=`
!self.state.hideNotePreview &&
!note.hidePreview &&
!note.protected`
)
.html-preview(
ng-bind-html='note.preview_html',
ng-show='note.preview_html'
)
.plain-preview(
ng-show='!note.preview_html && note.preview_plain'
) {{note.preview_plain}}
.default-preview(
ng-show='!note.preview_html && !note.preview_plain'
) {{note.text}}
.bottom-info.faded(ng-show='!self.state.hideDate || note.protected')
span(ng-if="note.protected")
| Protected •{{self.state.hideDate ? '' : ' '}}
span(ng-show="self.state.sortBy == 'userModifiedDate'")
| Modified {{note.updatedAtString || 'Now'}}
span(ng-show="self.state.sortBy != 'userModifiedDate'")
| {{note.createdAtString || 'Now'}}
.tags-string(ng-if='!self.state.hideTags && self.state.renderedNotesTags[$index]')
.faded {{self.state.renderedNotesTags[$index]}}
panel-resizer(
collapsable="true"
control="self.panelPuppet"
default-width="300"
hoverable="true"
on-resize-finish="self.onPanelResize"
panel-id="'notes-column'"
)