From 875f5417befb4f84c830ef459e67967ffd2510dc Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 6 Jan 2022 20:30:10 +0530 Subject: [PATCH] feat: Add option to toggle editor icon in new notes list design (#799) --- .../javascripts/components/NotesList.tsx | 4 +++- .../javascripts/components/NotesListItem.tsx | 20 +++++++++++-------- .../components/NotesListOptionsMenu.tsx | 18 ++++++++++++++++- app/assets/javascripts/components/utils.ts | 2 +- .../ui_models/app_state/notes_view_state.ts | 8 ++++++++ app/assets/stylesheets/_notes.scss | 8 ++++++-- package.json | 2 +- yarn.lock | 18 ++++++++--------- 8 files changed, 57 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/components/NotesList.tsx b/app/assets/javascripts/components/NotesList.tsx index 4b505bb58..1ca640822 100644 --- a/app/assets/javascripts/components/NotesList.tsx +++ b/app/assets/javascripts/components/NotesList.tsx @@ -29,7 +29,8 @@ export const NotesList: FunctionComponent = observer( paginate, }) => { const { selectPreviousNote, selectNextNote } = appState.notesView; - const { hideTags, hideDate, hideNotePreview, sortBy } = displayOptions; + const { hideTags, hideDate, hideNotePreview, hideEditorIcon, sortBy } = + displayOptions; const tagsForNote = (note: SNNote): string[] => { if (hideTags) { @@ -99,6 +100,7 @@ export const NotesList: FunctionComponent = observer( hideDate={hideDate} hidePreview={hideNotePreview} hideTags={hideTags} + hideEditorIcon={hideEditorIcon} sortedBy={sortBy} onClick={() => { appState.notes.selectNote(note.uuid, true); diff --git a/app/assets/javascripts/components/NotesListItem.tsx b/app/assets/javascripts/components/NotesListItem.tsx index 176faa209..ee23dec1f 100644 --- a/app/assets/javascripts/components/NotesListItem.tsx +++ b/app/assets/javascripts/components/NotesListItem.tsx @@ -15,6 +15,7 @@ type Props = { hideDate: boolean; hidePreview: boolean; hideTags: boolean; + hideEditorIcon: boolean; onClick: () => void; onContextMenu: (e: MouseEvent) => void; selected: boolean; @@ -61,6 +62,7 @@ export const NotesListItem: FunctionComponent = ({ hideDate, hidePreview, hideTags, + hideEditorIcon, note, onClick, onContextMenu, @@ -81,14 +83,16 @@ export const NotesListItem: FunctionComponent = ({ onClick={onClick} onContextMenu={onContextMenu} > -
- -
-
+ {!hideEditorIcon && ( +
+ +
+ )} +
{note.title}
diff --git a/app/assets/javascripts/components/NotesListOptionsMenu.tsx b/app/assets/javascripts/components/NotesListOptionsMenu.tsx index ea59f76f0..501ca4cf8 100644 --- a/app/assets/javascripts/components/NotesListOptionsMenu.tsx +++ b/app/assets/javascripts/components/NotesListOptionsMenu.tsx @@ -46,6 +46,9 @@ flex flex-col py-2 bottom-0 left-2 absolute'; const [hideProtected, setHideProtected] = useState(() => application.getPreference(PrefKey.NotesHideProtected, false) ); + const [hideEditorIcon, setHideEditorIcon] = useState(() => + application.getPreference(PrefKey.NotesHideEditorIcon, false) + ); const toggleSortReverse = () => { application.setPreference(PrefKey.SortNotesReverse, !sortReverse); @@ -108,9 +111,14 @@ flex flex-col py-2 bottom-0 left-2 absolute'; application.setPreference(PrefKey.NotesHideProtected, !hideProtected); }; + const toggleEditorIcon = () => { + setHideEditorIcon(!hideEditorIcon); + application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon); + }; + const menuRef = useRef(null); - useCloseOnClickOutside(menuRef as any, (open: boolean) => { + useCloseOnClickOutside(menuRef, (open: boolean) => { if (!open) { closeDisplayOptionsMenu(); } @@ -201,6 +209,14 @@ flex flex-col py-2 bottom-0 left-2 absolute'; > Show tags + + Show editor icon +
Other diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts index 3e4f9b631..5c0d1adb4 100644 --- a/app/assets/javascripts/components/utils.ts +++ b/app/assets/javascripts/components/utils.ts @@ -32,7 +32,7 @@ export function useCloseOnBlur( } export function useCloseOnClickOutside( - container: { current: HTMLDivElement }, + container: { current: HTMLDivElement | null }, setOpen: (open: boolean) => void ): void { const closeOnClickOutside = useCallback( diff --git a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts index a7ad404bb..319e6d07b 100644 --- a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts +++ b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts @@ -35,6 +35,7 @@ export type DisplayOptions = { hideTags: boolean; hideNotePreview: boolean; hideDate: boolean; + hideEditorIcon: boolean; }; export class NotesViewState { @@ -58,6 +59,7 @@ export class NotesViewState { hideTags: true, hideDate: false, hideNotePreview: false, + hideEditorIcon: false, }; constructor( @@ -301,6 +303,10 @@ export class NotesViewState { PrefKey.NotesHideTags, true ); + freshDisplayOptions.hideEditorIcon = this.application.getPreference( + PrefKey.NotesHideEditorIcon, + false + ); const displayOptionsChanged = freshDisplayOptions.sortBy !== this.displayOptions.sortBy || freshDisplayOptions.sortReverse !== this.displayOptions.sortReverse || @@ -308,6 +314,8 @@ export class NotesViewState { freshDisplayOptions.showArchived !== this.displayOptions.showArchived || freshDisplayOptions.showTrashed !== this.displayOptions.showTrashed || freshDisplayOptions.hideProtected !== this.displayOptions.hideProtected || + freshDisplayOptions.hideEditorIcon !== + this.displayOptions.hideEditorIcon || freshDisplayOptions.hideTags !== this.displayOptions.hideTags; this.displayOptions = freshDisplayOptions; if (displayOptionsChanged) { diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss index cf4a3a365..08c4ff749 100644 --- a/app/assets/stylesheets/_notes.scss +++ b/app/assets/stylesheets/_notes.scss @@ -138,7 +138,7 @@ notes-view { flex-flow: column; align-items: center; justify-content: space-between; - padding: 0.9rem; + padding: 1rem; padding-right: 0.75rem; margin-right: 0; } @@ -146,10 +146,14 @@ notes-view { .meta { flex-grow: 1; min-width: 0; - padding: 0.9rem; + padding: 1rem; padding-left: 0; border-bottom: 1px solid var(--sn-stylekit-border-color); + &.icon-hidden { + padding-left: 1rem; + } + .name { display: flex; align-items: center; diff --git a/package.json b/package.json index 5bcaa73f2..24e491bec 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "@reach/tooltip": "^0.16.2", "@standardnotes/features": "1.20.5", "@standardnotes/sncrypto-web": "1.5.3", - "@standardnotes/snjs": "2.31.25", + "@standardnotes/snjs": "2.33.0", "mobx": "^6.3.5", "mobx-react-lite": "^3.2.2", "preact": "^10.5.15", diff --git a/yarn.lock b/yarn.lock index 317018659..e55006170 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2636,10 +2636,10 @@ "@standardnotes/auth" "3.8.3" "@standardnotes/common" "1.2.1" -"@standardnotes/settings@^1.8.1": - version "1.8.1" - resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.8.1.tgz#a448f2b48a994dab2a84dc93255cd2f9ea0df6af" - integrity sha512-hQFg4xYkvI7WWRCxYjbyiNW7EjaUlmASGXsd/AoYlHGrlYhTnOEajBEh3sSMMV0b7UUps0wGZcGjQMpq5fabuw== +"@standardnotes/settings@^1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.9.0.tgz#0f01da5f6782363e4d77ee584b40f8614c555626" + integrity sha512-y+Mh7NuXtekEDr4PAvzg9KcRaCdd+0zlTXWO2D5MG28lLv/uhZmSsyWxZCVZqW3Rx6vz3c9IJdi7SoXN51gzSQ== "@standardnotes/sncrypto-common@1.5.2", "@standardnotes/sncrypto-common@^1.5.2": version "1.5.2" @@ -2655,16 +2655,16 @@ buffer "^6.0.3" libsodium-wrappers "^0.7.9" -"@standardnotes/snjs@2.31.25": - version "2.31.25" - resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.31.25.tgz#715dbecc0c71cc22a81d93b3aabfe7b436a480ac" - integrity sha512-DF0ZcIHfxIpaFepCIXNCVipwjgoy60FrSy5th0kNj5TCOYHryQ9bOiaWXQKHrQUi/8sKYJ+/W1pwRjz6+MpZMw== +"@standardnotes/snjs@2.33.0": + version "2.33.0" + resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.33.0.tgz#f3d295740471136bf2ec52e1d0e1cdf553923226" + integrity sha512-KHzxt2CqeFnQgKp6cf+Jqvfx3P0DXP1myEr6a41NmXAQ5qu2ytugyzxiyDyakFvR+Cp7g7GjRA+DwLvO7i1kaA== dependencies: "@standardnotes/auth" "3.8.1" "@standardnotes/common" "1.2.1" "@standardnotes/domain-events" "2.5.1" "@standardnotes/features" "^1.20.5" - "@standardnotes/settings" "^1.8.1" + "@standardnotes/settings" "^1.9.0" "@standardnotes/sncrypto-common" "1.5.2" "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":