gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-09 16:08:58 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

client/read only note info bar: add support for zen mode

Browse Source
This commit is contained in:
Adorian Doran 2025-11-06 01:08:26 +02:00
parent 95e5c2563e
commit b52e615f0c
5 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/layouts/desktop_layout.tsx
View File

@ -137,6 +137,7 @@ export default class DesktopLayout {
.child( .child(
new ScrollingContainer() new ScrollingContainer()
.filling() .filling()
.child(<ReadOnlyNoteInfoBar zenModeOnly />)
.child(new PromotedAttributesWidget()) .child(new PromotedAttributesWidget())
.child(<SqlTableSchemas />) .child(<SqlTableSchemas />)
.child(new NoteDetailWidget()) .child(new NoteDetailWidget())

1
apps/client/src/layouts/mobile_layout.tsx
View File

@ -153,6 +153,7 @@ export default class MobileLayout {
.child(<SharedInfoWidget />) .child(<SharedInfoWidget />)
.child(<ReadOnlyNoteInfoBar />) .child(<ReadOnlyNoteInfoBar />)
.child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />) .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
.child(<ReadOnlyNoteInfoBar zenModeOnly />)
.child(new PromotedAttributesWidget()) .child(new PromotedAttributesWidget())
.child( .child(
new ScrollingContainer() new ScrollingContainer()

1
apps/client/src/stylesheets/style.css
View File

@ -2043,6 +2043,7 @@ body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)), body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
body.zen .note-icon-widget, body.zen .note-icon-widget,
body.zen .title-row .icon-action, body.zen .title-row .icon-action,
body.zen .read-only-note-info-bar-widget:not(.zen-mode-only),
body.zen .promoted-attributes-widget, body.zen .promoted-attributes-widget,
body.zen .floating-buttons-children > *:not(.bx-edit-alt), body.zen .floating-buttons-children > *:not(.bx-edit-alt),
body.zen .action-button, body.zen .action-button,

8
apps/client/src/widgets/read_only_note_info_bar.css
View File

@ -17,6 +17,14 @@ div.read-only-note-info-bar-widget.visible {
transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;
} }
div.read-only-note-info-bar-widget.zen-mode-only {
display: none;
}
body.zen div.read-only-note-info-bar-widget.zen-mode-only {
display: flex;
}
:root div.read-only-note-info-bar-widget button { :root div.read-only-note-info-bar-widget button {
white-space: nowrap; white-space: nowrap;
padding: 2px 8px; padding: 2px 8px;

4
apps/client/src/widgets/read_only_note_info_bar.tsx
View File

@ -3,11 +3,11 @@ import { t } from "../services/i18n";
import { useIsNoteReadOnly, useNoteContext, useTriliumEvent } from "./react/hooks" import { useIsNoteReadOnly, useNoteContext, useTriliumEvent } from "./react/hooks"
import Button from "./react/Button"; import Button from "./react/Button";
export default function ReadOnlyNoteInfoBar() { export default function ReadOnlyNoteInfoBar(props: {zenModeOnly?: boolean}) {
const {isReadOnly, enableEditing} = useIsNoteReadOnly(); const {isReadOnly, enableEditing} = useIsNoteReadOnly();
const {note} = useNoteContext(); const {note} = useNoteContext();
return <div class={`read-only-note-info-bar-widget ${(isReadOnly) ? " visible" : ""}`}> return <div class={`read-only-note-info-bar-widget ${(isReadOnly) ? "visible" : ""} ${(props.zenModeOnly) ? "zen-mode-only" : ""}`}>
{isReadOnly && <> {isReadOnly && <>
{note?.isLabelTruthy("readOnly") ? ( {note?.isLabelTruthy("readOnly") ? (
<div>{t("read-only-info.read-only-note")}</div> <div>{t("read-only-info.read-only-note")}</div>