Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 15:25:51 +01:00
Code Issues Packages Projects Releases Activity

client/shared note message: convert to an info bar

Browse Source
This commit is contained in:
Adorian Doran
2025-11-09 01:56:52 +02:00
parent 220aab2b76
commit c4603fce25
6 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -131,7 +131,6 @@ export default class DesktopLayout {
.child(<CreatePaneButton />) .child(<CreatePaneButton />)
) )
.child(<Ribbon />) .child(<Ribbon />)
.child(<SharedInfo />)
.child(new WatchedFileUpdateStatusWidget()) .child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />) .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child( .child(
@@ -139,6 +138,7 @@ export default class DesktopLayout {
.filling() .filling()
.child(new ContentHeader() .child(new ContentHeader()
.child(<ReadOnlyNoteInfoBar />) .child(<ReadOnlyNoteInfoBar />)
.child(<SharedInfo />)
) )
.child(new PromotedAttributesWidget()) .child(new PromotedAttributesWidget())
.child(<SqlTableSchemas />) .child(<SqlTableSchemas />)

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

@@ -151,7 +151,6 @@ export default class MobileLayout {
.child(<NoteTitleWidget />) .child(<NoteTitleWidget />)
.child(<MobileDetailMenu />) .child(<MobileDetailMenu />)
) )
.child(<SharedInfoWidget />)
.child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />) .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
.child(new PromotedAttributesWidget()) .child(new PromotedAttributesWidget())
.child( .child(
@@ -160,6 +159,7 @@ export default class MobileLayout {
.contentSized() .contentSized()
.child(new ContentHeader() .child(new ContentHeader()
.child(<ReadOnlyNoteInfoBar />) .child(<ReadOnlyNoteInfoBar />)
.child(<SharedInfoWidget />)
) )
.child(new NoteDetailWidget()) .child(new NoteDetailWidget())
.child(<NoteList media="screen" />) .child(<NoteList media="screen" />)

1
apps/client/src/widgets/react/InfoBar.css
View File

@@ -1,5 +1,6 @@
.info-bar { .info-bar {
margin-top: 4px; margin-top: 4px;
contain: unset !important;
padding: 8px 20px; padding: 8px 20px;
color: var(--read-only-note-info-bar-color); color: var(--read-only-note-info-bar-color);
font-size: .9em; font-size: .9em;

5
apps/client/src/widgets/react/InfoBar.tsx
View File

@@ -3,12 +3,13 @@ import { ComponentChildren } from "preact";
import "./InfoBar.css"; import "./InfoBar.css";
export type InfoBarParams = { export type InfoBarParams = {
type: "prominent" | "subtle" type: "prominent" | "subtle",
className: string;
children: ComponentChildren; children: ComponentChildren;
}; };
export default function InfoBar(props: InfoBarParams) { export default function InfoBar(props: InfoBarParams) {
return <div className={`info-bar info-bar-${props.type}`}> return <div className={`info-bar ${props.className} info-bar-${props.type}`}>
{props?.children} {props?.children}
</div> </div>
} }

7
apps/client/src/widgets/shared_info.css Normal file
View File

@@ -0,0 +1,7 @@
.shared-info-widget {
display: flex;
}
.shared-info-widget button {
margin-inline-start: 8px;
}

21
apps/client/src/widgets/shared_info.tsx
View File

@@ -1,11 +1,12 @@
import { useEffect, useState } from "preact/hooks"; import "./shared_info.css";
import { t } from "../services/i18n"; import { t } from "../services/i18n";
import Alert from "./react/Alert"; import { useEffect, useState } from "preact/hooks";
import { useNoteContext, useTriliumEvent, useTriliumOption } from "./react/hooks"; import { useNoteContext, useTriliumEvent, useTriliumOption } from "./react/hooks";
import FNote from "../entities/fnote";
import attributes from "../services/attributes"; import attributes from "../services/attributes";
import RawHtml from "./react/RawHtml"; import FNote from "../entities/fnote";
import HelpButton from "./react/HelpButton"; import HelpButton from "./react/HelpButton";
import InfoBar from "./react/InfoBar";
import RawHtml from "./react/RawHtml";
export default function SharedInfo() { export default function SharedInfo() {
const { note } = useNoteContext(); const { note } = useNoteContext();
@@ -35,7 +36,7 @@ export default function SharedInfo() {
link = `${location.protocol}//${host}${location.pathname}share/${shareId}`; link = `${location.protocol}//${host}${location.pathname}share/${shareId}`;
} }
setLink(`<a href="${link}" class="external">${link}</a>`); setLink(`<a href="${link}" class="external tn-link">${link}</a>`);
} }
useEffect(refresh, [ note ]); useEffect(refresh, [ note ]);
@@ -48,20 +49,14 @@ export default function SharedInfo() {
}); });
return ( return (
<Alert className="shared-info-widget" type="warning" style={{ <InfoBar className="shared-info-widget" type="subtle">
contain: "none",
margin: "10px",
padding: "10px",
fontWeight: "bold",
display: !link ? "none" : undefined
}}>
{link && ( {link && (
<RawHtml html={syncServerHost <RawHtml html={syncServerHost
? t("shared_info.shared_publicly", { link }) ? t("shared_info.shared_publicly", { link })
: t("shared_info.shared_locally", { link })} /> : t("shared_info.shared_locally", { link })} />
)} )}
<HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} /> <HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} />
</Alert> </InfoBar>
) )
} }