Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Update notes list options menu to new design (#687)
feat: Implement initial Menu component functionality.
- Loading branch information
1 parent
3a4e250
commit 397e496
Showing
11 changed files
with
550 additions
and
66 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
244 changes: 244 additions & 0 deletions
244
app/assets/javascripts/components/NotesListOptionsMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,244 @@ | ||
| import { WebApplication } from '@/ui_models/application'; | ||
| import { CollectionSort, PrefKey } from '@standardnotes/snjs'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import { FunctionComponent } from 'preact'; | ||
| import { useState } from 'preact/hooks'; | ||
| import { Icon } from './Icon'; | ||
| import { Menu } from './menu/Menu'; | ||
| import { MenuItem, MenuItemSeparator, MenuItemType } from './menu/MenuItem'; | ||
| import { toDirective } from './utils'; | ||
|
|
||
| type Props = { | ||
| application: WebApplication; | ||
| setShowMenuFalse: () => void; | ||
| }; | ||
|
|
||
| export const NotesListOptionsMenu: FunctionComponent<Props> = observer( | ||
| ({ setShowMenuFalse, application }) => { | ||
| const menuClassName = | ||
| 'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \ | ||
| border-1 border-solid border-gray-300 text-sm z-index-dropdown-menu \ | ||
| flex flex-col py-2 bottom-0 left-2 absolute'; | ||
| const [sortBy, setSortBy] = useState(() => | ||
| application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt) | ||
| ); | ||
| const [sortReverse, setSortReverse] = useState(() => | ||
| application.getPreference(PrefKey.SortNotesReverse, false) | ||
| ); | ||
| const [hidePreview, setHidePreview] = useState(() => | ||
| application.getPreference(PrefKey.NotesHideNotePreview, false) | ||
| ); | ||
| const [hideDate, setHideDate] = useState(() => | ||
| application.getPreference(PrefKey.NotesHideDate, false) | ||
| ); | ||
| const [hideTags, setHideTags] = useState(() => | ||
| application.getPreference(PrefKey.NotesHideTags, true) | ||
| ); | ||
| const [hidePinned, setHidePinned] = useState(() => | ||
| application.getPreference(PrefKey.NotesHidePinned, false) | ||
| ); | ||
| const [showArchived, setShowArchived] = useState(() => | ||
| application.getPreference(PrefKey.NotesShowArchived, false) | ||
| ); | ||
| const [showTrashed, setShowTrashed] = useState(() => | ||
| application.getPreference(PrefKey.NotesShowTrashed, false) | ||
| ); | ||
| const [hideProtected, setHideProtected] = useState(() => | ||
| application.getPreference(PrefKey.NotesHideProtected, false) | ||
| ); | ||
|
|
||
| const toggleSortReverse = () => { | ||
| application.setPreference(PrefKey.SortNotesReverse, !sortReverse); | ||
| setSortReverse(!sortReverse); | ||
| }; | ||
|
|
||
| const toggleSortBy = (sort: CollectionSort) => { | ||
| if (sortBy === sort) { | ||
| toggleSortReverse(); | ||
| } else { | ||
| setSortBy(sort); | ||
| application.setPreference(PrefKey.SortNotesBy, sort); | ||
| } | ||
| }; | ||
|
|
||
| const toggleSortByDateModified = () => { | ||
| toggleSortBy(CollectionSort.UpdatedAt); | ||
| }; | ||
|
|
||
| const toggleSortByCreationDate = () => { | ||
| toggleSortBy(CollectionSort.CreatedAt); | ||
| }; | ||
|
|
||
| const toggleSortByTitle = () => { | ||
| toggleSortBy(CollectionSort.Title); | ||
| }; | ||
|
|
||
| const toggleHidePreview = () => { | ||
| setHidePreview(!hidePreview); | ||
| application.setPreference(PrefKey.NotesHideNotePreview, !hidePreview); | ||
| }; | ||
|
|
||
| const toggleHideDate = () => { | ||
| setHideDate(!hideDate); | ||
| application.setPreference(PrefKey.NotesHideDate, !hideDate); | ||
| }; | ||
|
|
||
| const toggleHideTags = () => { | ||
| setHideTags(!hideTags); | ||
| application.setPreference(PrefKey.NotesHideTags, !hideTags); | ||
| }; | ||
|
|
||
| const toggleHidePinned = () => { | ||
| setHidePinned(!hidePinned); | ||
| application.setPreference(PrefKey.NotesHidePinned, !hidePinned); | ||
| }; | ||
|
|
||
| const toggleShowArchived = () => { | ||
| setShowArchived(!showArchived); | ||
| application.setPreference(PrefKey.NotesShowArchived, !showArchived); | ||
| }; | ||
|
|
||
| const toggleShowTrashed = () => { | ||
| setShowTrashed(!showTrashed); | ||
| application.setPreference(PrefKey.NotesShowTrashed, !showTrashed); | ||
| }; | ||
|
|
||
| const toggleHideProtected = () => { | ||
| setHideProtected(!hideProtected); | ||
| application.setPreference(PrefKey.NotesHideProtected, !hideProtected); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={menuClassName}> | ||
| <Menu a11yLabel="Sort by" closeMenu={setShowMenuFalse}> | ||
| <div className="px-3 my-1 text-xs font-semibold color-text uppercase"> | ||
| Sort by | ||
| </div> | ||
| <MenuItem | ||
| className="py-2" | ||
| type={MenuItemType.RadioButton} | ||
| onClick={toggleSortByDateModified} | ||
| checked={sortBy === CollectionSort.UpdatedAt} | ||
| > | ||
| <div className="flex flex-grow items-center justify-between"> | ||
| <span>Date modified</span> | ||
| {sortBy === CollectionSort.UpdatedAt ? ( | ||
| sortReverse ? ( | ||
| <Icon type="arrows-sort-up" className="color-neutral" /> | ||
| ) : ( | ||
| <Icon type="arrows-sort-down" className="color-neutral" /> | ||
| ) | ||
| ) : null} | ||
| </div> | ||
| </MenuItem> | ||
| <MenuItem | ||
| className="py-2" | ||
| type={MenuItemType.RadioButton} | ||
| onClick={toggleSortByCreationDate} | ||
| checked={sortBy === CollectionSort.CreatedAt} | ||
| > | ||
| <div className="flex flex-grow items-center justify-between"> | ||
| <span>Creation date</span> | ||
| {sortBy === CollectionSort.CreatedAt ? ( | ||
| sortReverse ? ( | ||
| <Icon type="arrows-sort-up" className="color-neutral" /> | ||
| ) : ( | ||
| <Icon type="arrows-sort-down" className="color-neutral" /> | ||
| ) | ||
| ) : null} | ||
| </div> | ||
| </MenuItem> | ||
| <MenuItem | ||
| className="py-2" | ||
| type={MenuItemType.RadioButton} | ||
| onClick={toggleSortByTitle} | ||
| checked={sortBy === CollectionSort.Title} | ||
| > | ||
| <div className="flex flex-grow items-center justify-between"> | ||
| <span>Title</span> | ||
| {sortBy === CollectionSort.Title ? ( | ||
| sortReverse ? ( | ||
| <Icon type="arrows-sort-up" className="color-neutral" /> | ||
| ) : ( | ||
| <Icon type="arrows-sort-down" className="color-neutral" /> | ||
| ) | ||
| ) : null} | ||
| </div> | ||
| </MenuItem> | ||
| <MenuItemSeparator /> | ||
| <div className="px-3 py-1 text-xs font-semibold color-text uppercase"> | ||
| View | ||
| </div> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={!hidePreview} | ||
| onChange={toggleHidePreview} | ||
| > | ||
| <div className="flex flex-col max-w-3/4">Show note preview</div> | ||
| </MenuItem> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={!hideDate} | ||
| onChange={toggleHideDate} | ||
| > | ||
| Show date | ||
| </MenuItem> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={!hideTags} | ||
| onChange={toggleHideTags} | ||
| > | ||
| Show tags | ||
| </MenuItem> | ||
| <div className="h-1px my-2 bg-border"></div> | ||
| <div className="px-3 py-1 text-xs font-semibold color-text uppercase"> | ||
| Other | ||
| </div> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={!hidePinned} | ||
| onChange={toggleHidePinned} | ||
| > | ||
| Show pinned notes | ||
| </MenuItem> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={!hideProtected} | ||
| onChange={toggleHideProtected} | ||
| > | ||
| Show protected notes | ||
| </MenuItem> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={showArchived} | ||
| onChange={toggleShowArchived} | ||
| > | ||
| Show archived notes | ||
| </MenuItem> | ||
| <MenuItem | ||
| type={MenuItemType.SwitchButton} | ||
| className="py-1 hover:bg-contrast focus:bg-info-backdrop" | ||
| checked={showTrashed} | ||
| onChange={toggleShowTrashed} | ||
| > | ||
| Show trashed notes | ||
| </MenuItem> | ||
| </Menu> | ||
| </div> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export const NotesListOptionsDirective = toDirective<Props>( | ||
| NotesListOptionsMenu, | ||
| { | ||
| setShowMenuFalse: '=', | ||
| state: '&', | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.