feat: Add option to toggle editor icon in new notes list design (#799)

2022-01-06 20:30:10 +05:30
parent 285fe31dd8
commit 875f5417be
8 changed files with 57 additions and 23 deletions
--- a/app/assets/javascripts/components/NotesList.tsx
+++ b/app/assets/javascripts/components/NotesList.tsx
@@ -29,7 +29,8 @@ export const NotesList: FunctionComponent<Props> = 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<Props> = observer(
            hideDate={hideDate}
            hidePreview={hideNotePreview}
            hideTags={hideTags}
+            hideEditorIcon={hideEditorIcon}
            sortedBy={sortBy}
            onClick={() => {
              appState.notes.selectNote(note.uuid, true);
--- 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<Props> = ({
  hideDate,
  hidePreview,
  hideTags,
+  hideEditorIcon,
  note,
  onClick,
  onContextMenu,
@@ -81,14 +83,16 @@ export const NotesListItem: FunctionComponent<Props> = ({
      onClick={onClick}
      onContextMenu={onContextMenu}
    >
-      <div className="icon">
-        <Icon
-          ariaLabel={`Icon for ${editorName}`}
-          type={icon}
-          className={`color-accessory-tint-${tint}`}
-        />
-      </div>
-      <div className="meta">
+      {!hideEditorIcon && (
+        <div className="icon">
+          <Icon
+            ariaLabel={`Icon for ${editorName}`}
+            type={icon}
+            className={`color-accessory-tint-${tint}`}
+          />
+        </div>
+      )}
+      <div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
        <div className="name">
          <div>{note.title}</div>
          <div className="flag-icons">
--- 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<HTMLDivElement>(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
          </MenuItem>
+          <MenuItem
+            type={MenuItemType.SwitchButton}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+            checked={!hideEditorIcon}
+            onChange={toggleEditorIcon}
+          >
+            Show editor icon
+          </MenuItem>
          <div className="h-1px my-2 bg-border"></div>
          <div className="px-3 py-1 text-xs font-semibold color-text uppercase">
            Other
--- 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(
--- 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) {
--- 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;
--- 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",
--- 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":