diff --git a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx index c8d32aab7..8c4ba105a 100644 --- a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx +++ b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import { useEffect, useRef, useState } from "preact/hooks"; import { useActiveNoteContext, useIsNoteReadOnly, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks"; @@ -48,7 +49,7 @@ export function FixedFormattingToolbar() { const shown = ( viewScope?.viewMode === "default" && textNoteEditorType === "ckeditor-classic" && - noteType === "text" && + (noteContext?.getMainContext().getSubContexts() ?? []).some(sub => sub.note?.type === "text") && !isReadOnly ); const [ toolbarToRender, setToolbarToRender ] = useState(); @@ -74,8 +75,11 @@ export function FixedFormattingToolbar() { // Switch between the cached toolbar when user navigates to a different note context. useEffect(() => { if (!ntxId) return; - setToolbarToRender(toolbarCache.get(ntxId)); - }, [ ntxId, noteContext ]); + const toolbar = toolbarCache.get(ntxId); + if (toolbar) { + setToolbarToRender(toolbar); + } + }, [ ntxId, noteType, noteContext ]); // Render the toolbar. useEffect(() => { @@ -89,7 +93,10 @@ export function FixedFormattingToolbar() { return (
); } diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index bb0da9c4d..8cada3319 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -152,6 +152,15 @@ opacity: 0.3; } +body.experimental-feature-new-layout .classic-toolbar-widget { + transition: opacity 250ms ease-in; + + &.disabled { + opacity: 0.3; + pointer-events: none; + } +} + /* #endregion */ /* #region Script Tab */