Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 07:15: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(<Ribbon />)
.child(<SharedInfo />)
.child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child(
@@ -139,6 +138,7 @@ export default class DesktopLayout {
.filling()
.child(new ContentHeader()
.child(<ReadOnlyNoteInfoBar />)
.child(<SharedInfo />)
)
.child(new PromotedAttributesWidget())
.child(<SqlTableSchemas />)

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

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

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

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

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

@@ -3,12 +3,13 @@ import { ComponentChildren } from "preact";
import "./InfoBar.css";
export type InfoBarParams = {
type: "prominent" | "subtle"
type: "prominent" | "subtle",
className: string;
children: ComponentChildren;
};
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}
</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 Alert from "./react/Alert";
import { useEffect, useState } from "preact/hooks";
import { useNoteContext, useTriliumEvent, useTriliumOption } from "./react/hooks";
import FNote from "../entities/fnote";
import attributes from "../services/attributes";
import RawHtml from "./react/RawHtml";
import FNote from "../entities/fnote";
import HelpButton from "./react/HelpButton";
import InfoBar from "./react/InfoBar";
import RawHtml from "./react/RawHtml";
export default function SharedInfo() {
const { note } = useNoteContext();
@@ -35,7 +36,7 @@ export default function SharedInfo() {
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 ]);
@@ -48,20 +49,14 @@ export default function SharedInfo() {
});
return (
<Alert className="shared-info-widget" type="warning" style={{
contain: "none",
margin: "10px",
padding: "10px",
fontWeight: "bold",
display: !link ? "none" : undefined
}}>
<InfoBar className="shared-info-widget" type="subtle">
{link && (
<RawHtml html={syncServerHost
? t("shared_info.shared_publicly", { link })
: t("shared_info.shared_locally", { link })} />
)}
<HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} />
</Alert>
</InfoBar>
)
}