From 5bb4435c5b10de6e0fcb580472e028f76cd2a5bd Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 3 Nov 2022 09:38:31 -0500 Subject: [PATCH] fix: unable to add children to favorited tag; remove expand-on-click; render arrow before title (#1931) --- .../Components/Tags/SmartViewsListItem.tsx | 4 +- .../Components/Tags/TagContextMenu.tsx | 3 +- .../Components/Tags/TagListSection.ts | 2 +- .../javascripts/Components/Tags/TagsList.tsx | 7 +- .../Components/Tags/TagsListItem.tsx | 105 ++++++++++-------- .../Controllers/LinkingController.tsx | 2 +- .../Navigation/NavigationController.ts | 89 +++++---------- packages/web/src/stylesheets/_navigation.scss | 18 +-- 8 files changed, 96 insertions(+), 134 deletions(-) diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx index ad5f57ba3..d6eebb0d1 100644 --- 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 = ({ 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 = ({ view, tagsState }) => { }, [inputRef, isEditing]) const onClickRename = useCallback(() => { - tagsState.editingTag = view + tagsState.setEditingTag(view) }, [tagsState, view]) const onClickSave = useCallback(() => { diff --git a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx index a3611a3b6..db8be9295 100644 --- 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(() => { diff --git a/packages/web/src/javascripts/Components/Tags/TagListSection.ts b/packages/web/src/javascripts/Components/Tags/TagListSection.ts index e84747bb2..f1d491d5d 100644 --- 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' diff --git a/packages/web/src/javascripts/Components/Tags/TagsList.tsx b/packages/web/src/javascripts/Components/Tags/TagsList.tsx index 4c91d19f8..beb75fccc 100644 --- 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 = ({ 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 ( diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx index 09c65aa39..7656d7ce0 100644 --- 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 = 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(null) const subtagInputRef = useRef(null) const menuButtonRef = useRef(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 = 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 = observer( }} >
- {hasAtLeastOneFolder && !isFavorite && ( -
- - - -
- )} -
- +
+
- {isEditing ? ( + + {isEditing && ( = observer( spellCheck={false} ref={inputRef} /> - ) : ( -
- {title} -
)} + + {!isEditing && ( + <> +
+ {title} +
+ + )} +
- + + + )} + + {hasChildren && ( + + + + )} +
- - -
{noteCounts.get()}
+ {noteCounts.get()} +
-
- {tag.conflictOf &&
Conflicted Copy
} -
+ {tag.conflictOf &&
Conflicted Copy
}
{isAddingSubtag && (
{ + private findAndSetTag = (uuid: UuidString) => { const tagToSelect = [...this.tags, ...this.smartViews].find((tag) => tag.uuid === uuid) if (tagToSelect) { - void this.setSelectedTag(tagToSelect) + void this.setSelectedTag(tagToSelect, isTag(tagToSelect) ? (tagToSelect.starred ? 'favorites' : 'all') : 'views') } } - selectHydratedTagOrDefault = () => { + private selectHydratedTagOrDefault = () => { if (this.selectedUuid && !this.selected_) { this.findAndSetTag(this.selectedUuid) } @@ -237,7 +228,7 @@ export class NavigationController this.application.sync.sync().catch(console.error) runInAction(() => { - void this.setSelectedTag(createdTag as SNTag) + void this.setSelectedTag(createdTag as SNTag, 'all') }) this.setAddingSubtagTo(undefined) @@ -276,10 +267,6 @@ export class NavigationController this.addingSubtagTo = tag } - setContextMenuOpenFrom(section: TagListSectionType): void { - this.contextMenuOpenFrom = section - } - setContextMenuOpen(open: boolean): void { this.contextMenuOpen = open } @@ -436,7 +423,11 @@ export class NavigationController }) } - public async setSelectedTag(tag: AnyTag | undefined, { userTriggered } = { userTriggered: false }) { + public async setSelectedTag( + tag: AnyTag | undefined, + location: TagListSectionType, + { userTriggered } = { userTriggered: false }, + ) { if (tag && tag.conflictOf) { this.application.mutator .changeAndSaveItem(tag, (mutator) => { @@ -445,7 +436,7 @@ export class NavigationController .catch(console.error) } - const selectionHasNotChanged = this.selected_?.uuid === tag?.uuid + const selectionHasNotChanged = this.selected_?.uuid === tag?.uuid && location === this.selectedLocation if (selectionHasNotChanged) { return @@ -455,6 +446,7 @@ export class NavigationController await runInAction(async () => { this.setSelectedTagInstance(tag) + this.selectedLocation = location if (tag && this.application.items.isTemplateItem(tag)) { return @@ -471,11 +463,11 @@ export class NavigationController } public async selectHomeNavigationView(): Promise { - await this.setSelectedTag(this.homeNavigationView) + await this.setSelectedTag(this.homeNavigationView, 'views') } public async selectFilesView() { - await this.setSelectedTag(this.filesNavigationView) + await this.setSelectedTag(this.filesNavigationView, 'views') } get homeNavigationView(): SmartView { @@ -525,9 +517,11 @@ export class NavigationController return this.editing_ } - public set editingTag(editingTag: SNTag | SmartView | undefined) { - this.editing_ = editingTag - void this.setSelectedTag(editingTag) + public setEditingTag(editingTag: SNTag | SmartView | undefined) { + runInAction(() => { + this.editing_ = editingTag + void this.setSelectedTag(editingTag, this.selectedLocation || 'all') + }) } public createNewTemplate() { @@ -540,16 +534,15 @@ export class NavigationController const newTag = this.application.mutator.createTemplateItem(ContentType.Tag) as SNTag runInAction(() => { + this.selectedLocation = 'all' this.editing_ = newTag - this.editingFrom = 'all' }) } public undoCreateNewTag() { - this.editingFrom = undefined this.editing_ = undefined const previousTag = this.previouslySelected_ || this.smartViews[0] - void this.setSelectedTag(previousTag) + void this.setSelectedTag(previousTag, this.selectedLocation || 'views') } public async remove(tag: SNTag | SmartView, userTriggered: boolean) { @@ -562,7 +555,7 @@ export class NavigationController } if (shouldDelete) { this.application.mutator.deleteItem(tag).catch(console.error) - await this.setSelectedTag(this.smartViews[0]) + await this.setSelectedTag(this.smartViews[0], 'views') } } @@ -575,7 +568,6 @@ export class NavigationController const hasDuplicatedTitle = siblings.some((other) => other.title.toLowerCase() === newTitle.toLowerCase()) runInAction(() => { - this.editingFrom = undefined this.editing_ = undefined }) @@ -607,7 +599,7 @@ export class NavigationController const insertedTag = await this.application.mutator.createTagOrSmartView(newTitle) this.application.sync.sync().catch(console.error) runInAction(() => { - void this.setSelectedTag(insertedTag as SNTag) + void this.setSelectedTag(insertedTag as SNTag, this.selectedLocation || 'views') }) } else { await this.application.mutator.changeAndSaveItem(tag, (mutator) => { @@ -615,31 +607,6 @@ export class NavigationController }) } } - - public onFoldersComponentMessage(action: ComponentAction, data: MessageData): void { - if (action === ComponentAction.SelectItem) { - const item = data.item - - if (!item) { - return - } - - if (item.content_type === ContentType.Tag || item.content_type === ContentType.SmartView) { - const matchingTag = this.application.items.findItem(item.uuid) - - if (matchingTag) { - void this.setSelectedTag(matchingTag as AnyTag) - return - } - } - } else if (action === ComponentAction.ClearSelection) { - void this.setSelectedTag(this.smartViews[0]) - } - } - - public get hasAtLeastOneFolder(): boolean { - return this.tags.some((tag) => !!this.application.items.getTagParent(tag)) - } } class TagsCountsState { diff --git a/packages/web/src/stylesheets/_navigation.scss b/packages/web/src/stylesheets/_navigation.scss index dde8abb8e..7ab27cf17 100644 --- a/packages/web/src/stylesheets/_navigation.scss +++ b/packages/web/src/stylesheets/_navigation.scss @@ -88,18 +88,9 @@ $content-horizontal-padding: 16px; display: flex; align-items: center; height: 100%; - - &.draggable { - cursor: move; - } - - &.propose-folders { - cursor: help; - } } > .title { - width: 80%; background-color: transparent; font-weight: 600; color: var(--navigation-item-text-color); @@ -107,7 +98,6 @@ $content-horizontal-padding: 16px; border: none; cursor: pointer; text-overflow: ellipsis; - width: 75%; flex-grow: 1; // Required for Safari to avoid highlighting when dragging panel resizers @@ -144,12 +134,6 @@ $content-horizontal-padding: 16px; } .meta { - padding-left: 3px; - - &.with-folders { - padding-left: 25px; - } - > .menu { font-size: 11px; @@ -160,8 +144,8 @@ $content-horizontal-padding: 16px; opacity: 0.5; font-weight: bold; clear: both; - margin-top: 2px; margin-bottom: 2px; + padding-bottom: 5px; &:hover { opacity: 1;