mirror of
https://github.com/zadam/trilium.git
synced 2025-11-30 04:24:24 +01:00
fix(ribbon): formatting toolbar disappearing after viewing attachments
This commit is contained in:
parent
a6ed4d92c9
commit
12abdcaf6c
@ -8,6 +8,7 @@ import NoteActions from "./NoteActions";
|
|||||||
import { KeyboardActionNames } from "@triliumnext/commons";
|
import { KeyboardActionNames } from "@triliumnext/commons";
|
||||||
import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
|
import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
|
||||||
import { TabConfiguration, TitleContext } from "./ribbon-interface";
|
import { TabConfiguration, TitleContext } from "./ribbon-interface";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
|
const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
|
||||||
|
|
||||||
@ -63,62 +64,61 @@ export default function Ribbon() {
|
|||||||
}, [ computedTabs, activeTabIndex ]));
|
}, [ computedTabs, activeTabIndex ]));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ribbon-container" style={{ contain: "none" }}>
|
<div
|
||||||
{noteContext?.viewScope?.viewMode === "default" && (
|
className={clsx("ribbon-container", noteContext?.viewScope?.viewMode !== "default" && "hidden-ext")}
|
||||||
<>
|
style={{ contain: "none" }}
|
||||||
<div className="ribbon-top-row">
|
>
|
||||||
<div className="ribbon-tab-container">
|
<div className="ribbon-top-row">
|
||||||
{computedTabs && computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
|
<div className="ribbon-tab-container">
|
||||||
shouldShow && <RibbonTab
|
{computedTabs && computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
|
||||||
icon={icon}
|
shouldShow && <RibbonTab
|
||||||
title={typeof title === "string" ? title : title(titleContext)}
|
icon={icon}
|
||||||
active={index === activeTabIndex}
|
title={typeof title === "string" ? title : title(titleContext)}
|
||||||
toggleCommand={toggleCommand}
|
active={index === activeTabIndex}
|
||||||
onClick={() => {
|
toggleCommand={toggleCommand}
|
||||||
if (activeTabIndex !== index) {
|
onClick={() => {
|
||||||
setActiveTabIndex(index);
|
if (activeTabIndex !== index) {
|
||||||
} else {
|
setActiveTabIndex(index);
|
||||||
// Collapse
|
} else {
|
||||||
setActiveTabIndex(undefined);
|
// Collapse
|
||||||
}
|
setActiveTabIndex(undefined);
|
||||||
}}
|
}
|
||||||
/>
|
}}
|
||||||
))}
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="ribbon-button-container">
|
||||||
|
{ note && <NoteActions note={note} noteContext={noteContext} /> }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ribbon-body-container">
|
||||||
|
{computedTabs && computedTabs.map(tab => {
|
||||||
|
const isActive = tab.index === activeTabIndex;
|
||||||
|
if (!isActive && !tab.stayInDom) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TabContent = tab.content;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
|
||||||
|
<TabContent
|
||||||
|
note={note}
|
||||||
|
hidden={!isActive}
|
||||||
|
ntxId={ntxId}
|
||||||
|
hoistedNoteId={hoistedNoteId}
|
||||||
|
notePath={notePath}
|
||||||
|
noteContext={noteContext}
|
||||||
|
componentId={componentId}
|
||||||
|
activate={useCallback(() => {
|
||||||
|
setActiveTabIndex(tab.index)
|
||||||
|
}, [setActiveTabIndex])}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="ribbon-button-container">
|
);
|
||||||
{ note && <NoteActions note={note} noteContext={noteContext} /> }
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="ribbon-body-container">
|
|
||||||
{computedTabs && computedTabs.map(tab => {
|
|
||||||
const isActive = tab.index === activeTabIndex;
|
|
||||||
if (!isActive && !tab.stayInDom) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TabContent = tab.content;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
|
|
||||||
<TabContent
|
|
||||||
note={note}
|
|
||||||
hidden={!isActive}
|
|
||||||
ntxId={ntxId}
|
|
||||||
hoistedNoteId={hoistedNoteId}
|
|
||||||
notePath={notePath}
|
|
||||||
noteContext={noteContext}
|
|
||||||
componentId={componentId}
|
|
||||||
activate={useCallback(() => {
|
|
||||||
setActiveTabIndex(tab.index)
|
|
||||||
}, [setActiveTabIndex])}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -41,7 +41,6 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
|
|||||||
|
|
||||||
// React to included note changes.
|
// React to included note changes.
|
||||||
useTriliumEvent("refreshIncludedNote", ({ noteId }) => {
|
useTriliumEvent("refreshIncludedNote", ({ noteId }) => {
|
||||||
console.log("Refresh ", noteId);
|
|
||||||
if (!contentRef.current) return;
|
if (!contentRef.current) return;
|
||||||
refreshIncludedNote(contentRef.current, noteId);
|
refreshIncludedNote(contentRef.current, noteId);
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user