diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts index 88056d2da..31f26a10a 100644 --- a/apps/client/src/widgets/containers/ribbon_container.ts +++ b/apps/client/src/widgets/containers/ribbon_container.ts @@ -28,50 +28,6 @@ export default class RibbonContainer extends NoteContextAwareWidget { this.buttonWidgets = []; } - isRibbonTabActive(name: string) { - const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`); - - return $ribbonComponent.hasClass("active"); - } - - ensureOwnedAttributesAreOpen(ntxId: string | null | undefined) { - if (ntxId && this.isNoteContext(ntxId) && !this.isRibbonTabActive("ownedAttributes")) { - this.toggleRibbonTabWithName("ownedAttributes", ntxId); - } - } - - addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) { - this.ensureOwnedAttributesAreOpen(ntxId); - } - - addNewRelationEvent({ ntxId }: EventData<"addNewRelation">) { - this.ensureOwnedAttributesAreOpen(ntxId); - } - - toggleRibbonTabWithName(name: string, ntxId?: string) { - if (!this.isNoteContext(ntxId)) { - return false; - } - - const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`); - - if ($ribbonComponent) { - this.toggleRibbonTab($ribbonComponent); - } - } - - handleEvent(name: T, data: EventData) { - const PREFIX = "toggleRibbonTab"; - - if (name.startsWith(PREFIX)) { - let componentName = name.substr(PREFIX.length); - componentName = componentName[0].toLowerCase() + componentName.substr(1); - - this.toggleRibbonTabWithName(componentName, (data as any).ntxId); - } else { - return super.handleEvent(name, data); - } - } async handleEventInChildren(name: T, data: EventData) { if (["activeContextChanged", "setNoteContext"].includes(name)) { diff --git a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx index bc1c73b3e..9169b3c2f 100644 --- a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx +++ b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx @@ -1,11 +1,14 @@ +import { useTriliumEvents } from "../react/hooks"; import AttributeEditor from "./components/AttributeEditor"; import { TabContext } from "./ribbon-interface"; -export default function OwnedAttributesTab({ note, ...restProps }: TabContext) { +export default function OwnedAttributesTab({ note, hidden, activate, ...restProps }: TabContext) { + useTriliumEvents([ "addNewLabel", "addNewRelation" ], activate); + return (
{ note && ( - +
) diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index ecde17118..8c9864b44 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { t } from "../../services/i18n"; -import { useNoteContext, useStaticTooltip, useTooltip, useTriliumEvents } from "../react/hooks"; +import { useNoteContext, useStaticTooltip, useTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks"; import "./style.css"; import { VNode } from "preact"; import BasicPropertiesTab from "./BasicPropertiesTab"; @@ -39,7 +39,7 @@ interface TabConfiguration { toggleCommand?: KeyboardActionNames; activate?: boolean | ((context: TitleContext) => boolean); /** - * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar). + * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar) or if event handling is needed. */ stayInDom?: boolean; } @@ -119,7 +119,8 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bx-list-check", content: OwnedAttributesTab, show: ({note}) => !note?.isLaunchBarConfig(), - toggleCommand: "toggleRibbonTabOwnedAttributes" + toggleCommand: "toggleRibbonTabOwnedAttributes", + stayInDom: true }, { title: t("inherited_attribute_list.title"), @@ -228,7 +229,10 @@ export default function Ribbon() { hoistedNoteId, notePath, noteContext, - componentId + componentId, + activate: useCallback(() => { + setActiveTabIndex(tab.index) + }, [setActiveTabIndex]) }); })} diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 7c4c70f4a..718187b2e 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -74,7 +74,15 @@ const mentionSetup: MentionFeed[] = [ ]; -export default function AttributeEditor({ note, componentId, notePath, ntxId }: { note: FNote, componentId: string, notePath?: string | null, ntxId?: string | null }) { +interface AttributeEditorProps { + note: FNote; + componentId: string; + notePath?: string | null; + ntxId?: string | null; + hidden?: boolean; +} + +export default function AttributeEditor({ note, componentId, notePath, ntxId, hidden }: AttributeEditorProps) { const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ error, setError ] = useState(); const [ needsSaving, setNeedsSaving ] = useState(false); @@ -267,7 +275,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }: return ( <> -
{ @@ -379,7 +387,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }: {getErrorMessage(error)}
)} - + } {attributeDetailWidgetEl} diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts index 99aaeb900..c40daf2c7 100644 --- a/apps/client/src/widgets/ribbon/ribbon-interface.ts +++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts @@ -9,4 +9,5 @@ export interface TabContext { notePath?: string | null; noteContext?: NoteContext; componentId: string; + activate(): void; }