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 8 Packages Projects Releases Wiki Activity

client/read-only note info bar: refactor

Browse Source
This commit is contained in:
Adorian Doran 2025-11-09 01:35:33 +02:00
parent 285a7253e3
commit 220aab2b76
5 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ import options from "../services/options.js";
import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import ReadOnlyNoteInfoBar from "../widgets/read_only_note_info_bar.jsx";
import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
import Ribbon from "../widgets/ribbon/Ribbon.jsx";
import RightPaneContainer from "../widgets/containers/right_pane_container.js";
import RootContainer from "../widgets/containers/root_container.js";

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

@ -16,7 +16,7 @@ import NoteTreeWidget from "../widgets/note_tree.js";
import NoteWrapperWidget from "../widgets/note_wrapper.js";
import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import ReadOnlyNoteInfoBar from "../widgets/read_only_note_info_bar.jsx";
import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
import RootContainer from "../widgets/containers/root_container.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/containers/scrolling_container.js";

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

@ -2043,7 +2043,6 @@ body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
body.zen .note-icon-widget,
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 .floating-buttons-children > *:not(.bx-edit-alt),
body.zen .action-button,

13
apps/client/src/widgets/read_only_note_info_bar.css → apps/client/src/widgets/ReadOnlyNoteInfoBar.css
View File

@ -2,25 +2,22 @@ div.read-only-note-info-bar-widget {
contain: none;
}
div.read-only-note-info-bar-widget.zen-mode-only {
display: none;
body.zen div.read-only-note-info-bar-widget {
width: fit-content;
max-width: var(--max-content-width);
margin: 0 auto;
}
div.read-only-note-info-bar-widget.zen-mode-only .info-bar {
body.zen div.read-only-note-info-bar-widget .info-bar {
border-radius: 8px;
}
body.zen div.read-only-note-info-bar-widget.zen-mode-only {
display: block;
border: unset;
}
.read-only-note-info-bar-widget-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
gap: 20px;
}
:root div.read-only-note-info-bar-widget button {

6
apps/client/src/widgets/read_only_note_info_bar.tsx → apps/client/src/widgets/ReadOnlyNoteInfoBar.tsx
View File

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