Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 09:56:36 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/dialogs): separate alert component

Browse Source
This commit is contained in:
Elian Doran
2025-08-05 18:09:29 +03:00
parent 87d9ea06f3
commit 02b0d1fb5e
2 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/client/src/widgets/dialogs/delete_notes.tsx
View File

@@ -11,6 +11,7 @@ import froca from "../../services/froca.js";
import FNote from "../../entities/fnote.js"; import FNote from "../../entities/fnote.js";
import link from "../../services/link.js"; import link from "../../services/link.js";
import Button from "../react/Button.jsx"; import Button from "../react/Button.jsx";
import Alert from "../react/Alert.jsx";
export interface ResolveOptions { export interface ResolveOptions {
proceed: boolean; proceed: boolean;
@@ -136,27 +137,23 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
if (brokenRelations.length) { if (brokenRelations.length) {
return ( return (
<div className="broken-relations-wrapper"> <Alert type="danger" title={t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}>
<div className="alert alert-danger"> <ul className="broken-relations-list" style={{ maxHeight: "200px", overflow: "auto" }}>
<h4>{t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}</h4> {brokenRelations.map((_, index) => {
return (
<ul className="broken-relations-list" style={{ maxHeight: "200px", overflow: "auto" }}> <li key={index}>
{brokenRelations.map((_, index) => { <span dangerouslySetInnerHTML={{ __html: t("delete_notes.deleted_relation_text", notesWithBrokenRelations[index]) }} />
return ( </li>
<li key={index}> );
<span dangerouslySetInnerHTML={{ __html: t("delete_notes.deleted_relation_text", notesWithBrokenRelations[index]) }} /> })}
</li> </ul>
); </Alert>
})}
</ul>
</div>
</div>
); );
} else { } else {
return ( return (
<div className="no-note-to-delete-wrapper alert alert-info"> <Alert type="info">
{t("delete_notes.no_note_to_delete")} {t("delete_notes.no_note_to_delete")}
</div> </Alert>
); );
} }
} }

17
apps/client/src/widgets/react/Alert.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { ComponentChildren } from "preact";
interface AlertProps {
type: "info" | "danger";
title?: string;
children: ComponentChildren;
}
export default function Alert({ title, type, children }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
{title && <h4>{title}</h4>}
{children}
</div>
);
}