fix: unable to add children to favorited tag; remove expand-on-click; render arrow before title (#1931)

2022-11-03 09:38:31 -05:00
parent 63c10c703f
commit 5bb4435c5b
8 changed files with 96 additions and 134 deletions
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -50,7 +50,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
  }, [setTitle, view])

  const selectCurrentTag = useCallback(async () => {
-    await tagsState.setSelectedTag(view, {
+    await tagsState.setSelectedTag(view, 'views', {
      userTriggered: true,
    })
    toggleAppPane(AppPaneId.Items)
@@ -86,7 +86,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
  }, [inputRef, isEditing])

  const onClickRename = useCallback(() => {
-    tagsState.editingTag = view
+    tagsState.setEditingTag(view)
  }, [tagsState, view])

  const onClickSave = useCallback(() => {
--- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
@@ -40,8 +40,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag

  const onClickRename = useCallback(() => {
    navigationController.setContextMenuOpen(false)
-    navigationController.editingFrom = navigationController.contextMenuOpenFrom
-    navigationController.editingTag = selectedTag
+    navigationController.setEditingTag(selectedTag)
  }, [navigationController, selectedTag])

  const onClickDelete = useCallback(() => {
--- a/packages/web/src/javascripts/Components/Tags/TagListSection.ts
+++ b/packages/web/src/javascripts/Components/Tags/TagListSection.ts
@@ -1 +1 @@
-export type TagListSectionType = 'all' | 'favorites'
+export type TagListSectionType = 'views' | 'all' | 'favorites'
--- a/packages/web/src/javascripts/Components/Tags/TagsList.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsList.tsx
@@ -25,19 +25,18 @@ const TagsList: FunctionComponent<Props> = ({ viewControllerManager, type }: Pro
        x: posX,
        y: posY,
      })
-      viewControllerManager.navigationController.setContextMenuOpenFrom(type)
      viewControllerManager.navigationController.reloadContextMenuLayout()
      viewControllerManager.navigationController.setContextMenuOpen(true)
    },
-    [viewControllerManager, type],
+    [viewControllerManager],
  )

  const onContextMenu = useCallback(
    (tag: SNTag, posX: number, posY: number) => {
-      void viewControllerManager.navigationController.setSelectedTag(tag)
+      void viewControllerManager.navigationController.setSelectedTag(tag, type)
      openTagContextMenu(posX, posY)
    },
-    [viewControllerManager, openTagContextMenu],
+    [viewControllerManager, openTagContextMenu, type],
  )

  return (
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -47,24 +47,21 @@ export const TagsListItem: FunctionComponent<Props> = observer(
  ({ tag, type, features, navigationController: navigationController, level, onContextMenu, linkingController }) => {
    const { toggleAppPane } = useResponsiveAppPane()

-    const isFavorite = type === 'favorites'
-
    const [title, setTitle] = useState(tag.title || '')
    const [subtagTitle, setSubtagTitle] = useState('')
    const inputRef = useRef<HTMLInputElement>(null)
    const subtagInputRef = useRef<HTMLInputElement>(null)
    const menuButtonRef = useRef<HTMLAnchorElement>(null)

-    const isSelected = navigationController.selected === tag
-    const isEditing = navigationController.editingTag === tag && navigationController.editingFrom === type
-    const isAddingSubtag = navigationController.addingSubtagTo === tag
+    const isSelected = navigationController.selected === tag && navigationController.selectedLocation === type
+    const isEditing = navigationController.editingTag === tag && navigationController.selectedLocation === type
+    const isAddingSubtag = navigationController.addingSubtagTo === tag && navigationController.selectedLocation === type
    const noteCounts = computed(() => navigationController.getNotesCount(tag))

    const childrenTags = computed(() => navigationController.getChildren(tag)).get()
    const hasChildren = childrenTags.length > 0

    const hasFolders = features.hasFolders
-    const hasAtLeastOneFolder = navigationController.hasAtLeastOneFolder

    const premiumModal = usePremiumModal()

@@ -93,12 +90,11 @@ export const TagsListItem: FunctionComponent<Props> = observer(
    )

    const selectCurrentTag = useCallback(async () => {
-      await navigationController.setSelectedTag(tag, {
+      await navigationController.setSelectedTag(tag, type, {
        userTriggered: true,
      })
-      toggleChildren()
      toggleAppPane(AppPaneId.Items)
-    }, [navigationController, tag, toggleAppPane, toggleChildren])
+    }, [navigationController, tag, type, toggleAppPane])

    const onBlur = useCallback(() => {
      navigationController.save(tag, title).catch(console.error)
@@ -257,23 +253,14 @@ export const TagsListItem: FunctionComponent<Props> = observer(
          }}
        >
          <div className="tag-info" title={title} ref={dropRef}>
-            {hasAtLeastOneFolder && !isFavorite && (
-              <div className="tag-fold-container">
-                <a
-                  role="button"
-                  className={`tag-fold focus:shadow-inner ${showChildren ? 'opened' : 'closed'} ${
-                    !hasChildren ? 'invisible' : ''
-                  }`}
-                  onClick={hasChildren ? toggleChildren : undefined}
-                >
-                  <Icon className={'text-neutral'} type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'} />
-                </a>
-              </div>
-            )}
-            <div className={'tag-icon draggable mr-2'} ref={dragRef}>
-              <Icon type={tag.iconString as IconType} className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
+            <div onClick={selectCurrentTag} className={'tag-icon draggable mr-2'} ref={dragRef}>
+              <Icon
+                type={tag.iconString as IconType}
+                className={`cursor-pointer ${isSelected ? 'text-info' : 'text-neutral'}`}
+              />
            </div>
-            {isEditing ? (
+
+            {isEditing && (
              <input
                className={
                  'title editing text-mobile-navigation-list-item focus:shadow-none focus:outline-none lg:text-navigation-list-item'
@@ -286,34 +273,60 @@ export const TagsListItem: FunctionComponent<Props> = observer(
                spellCheck={false}
                ref={inputRef}
              />
-            ) : (
-              <div
-                className={
-                  'title overflow-hidden text-left text-mobile-navigation-list-item focus:shadow-none focus:outline-none lg:text-navigation-list-item'
-                }
-                id={`react-tag-${tag.uuid}-${type}`}
-              >
-                {title}
-              </div>
            )}
+
+            {!isEditing && (
+              <>
+                <div
+                  className={
+                    'title overflow-hidden text-left text-mobile-navigation-list-item focus:shadow-none focus:outline-none lg:text-navigation-list-item'
+                  }
+                  id={`react-tag-${tag.uuid}-${type}`}
+                >
+                  {title}
+                </div>
+              </>
+            )}
+
            <div className="flex items-center">
-              <a
-                role="button"
-                className={`mr-2 cursor-pointer border-0 bg-transparent hover:bg-contrast focus:shadow-inner ${
-                  isSelected ? 'visible' : 'invisible'
+              {isSelected && (
+                <a
+                  role="button"
+                  className={'mr-2 cursor-pointer border-0 bg-transparent hover:bg-contrast focus:shadow-inner'}
+                  onClick={toggleContextMenu}
+                  ref={menuButtonRef}
+                >
+                  <Icon type="more" className="text-neutral" />
+                </a>
+              )}
+
+              {hasChildren && (
+                <a
+                  role="button"
+                  className={`focus:shadow-inner ${showChildren ? 'cursor-n-resize' : 'cursor-s-resize'} ${
+                    showChildren ? 'opened' : 'closed'
+                  } `}
+                  onClick={toggleChildren}
+                >
+                  <Icon
+                    className={'text-neutral'}
+                    size="large"
+                    type={showChildren ? 'menu-arrow-down-alt' : 'menu-arrow-right'}
+                  />
+                </a>
+              )}
+              <div
+                onClick={hasChildren ? toggleChildren : undefined}
+                className={`count text-base lg:text-sm ${
+                  hasChildren ? (showChildren ? 'cursor-n-resize' : 'cursor-s-resize') : ''
                }`}
-                onClick={toggleContextMenu}
-                ref={menuButtonRef}
              >
-                <Icon type="more" className="text-neutral" />
-              </a>
-              <div className="count text-base lg:text-sm">{noteCounts.get()}</div>
+                {noteCounts.get()}
+              </div>
            </div>
          </div>

-          <div className={`meta ${hasAtLeastOneFolder ? 'with-folders' : ''}`}>
-            {tag.conflictOf && <div className="-mt-1 text-[0.625rem] font-bold text-danger">Conflicted Copy</div>}
-          </div>
+          {tag.conflictOf && <div className="-mt-1 text-[0.625rem] font-bold text-danger">Conflicted Copy</div>}
        </div>
        {isAddingSubtag && (
          <div