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

ribbon Note Info in flex layout instead of table

Browse Source
This commit is contained in:
contributor 2025-11-10 09:54:53 +02:00
parent 52691b9e88
commit 4d1ebd011c
3 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/stylesheets/theme-next/ribbon.css
View File

@ -42,7 +42,7 @@ div.promoted-attributes-container {
*/
/* The property label */
.note-info-widget-table th,
.note-info-item > span:first-child,
.file-properties-widget .file-table th,
.image-properties > div:first-child > span > strong {
opacity: 0.65;
@ -50,7 +50,6 @@ div.promoted-attributes-container {
vertical-align: top;
}
.note-info-widget-table td,
.file-properties-widget .file-table td {
vertical-align: top;
}

102
apps/client/src/widgets/ribbon/NoteInfoTab.tsx
View File

@ -36,57 +36,59 @@ export default function NoteInfoTab({ note }: TabContext) {
return (
<div className="note-info-widget">
{note && (
<table className="note-info-widget-table">
<tbody>
<tr>
<th>{t("note_info_widget.note_id")}:</th>
<td class="note-info-id">{note.noteId}</td>
<th>{t("note_info_widget.created")}:</th>
<td>{formatDateTime(metadata?.dateCreated)}</td>
<th>{t("note_info_widget.modified")}:</th>
<td>{formatDateTime(metadata?.dateModified)}</td>
</tr>
<>
<div className="note-info-item">
<span>{t("note_info_widget.note_id")}:</span>
<span className="note-info-id">{note.noteId}</span>
</div>
<div className="note-info-item">
<span>{t("note_info_widget.created")}:</span>
<span>{formatDateTime(metadata?.dateCreated)}</span>
</div>
<div className="note-info-item">
<span>{t("note_info_widget.modified")}:</span>
<span>{formatDateTime(metadata?.dateModified)}</span>
</div>
<div className="note-info-item">
<span>{t("note_info_widget.type")}:</span>
<span>
<span className="note-info-type">{note.type}</span>{' '}
{note.mime && <span className="note-info-mime">({note.mime})</span>}
</span>
</div>
<div className="note-info-item">
<span title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</span>
<span className="note-info-size-col-span">
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
<Button
className="calculate-button"
style={{ padding: "0px 10px 0px 10px" }}
icon="bx bx-calculator"
text={t("note_info_widget.calculate")}
onClick={() => {
setIsLoading(true);
setTimeout(async () => {
await Promise.allSettled([
server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
]);
setIsLoading(false);
}, 0);
}}
/>
)}
<tr>
<th>{t("note_info_widget.type")}:</th>
<td>
<span class="note-info-type">{note.type}</span>{' '}
{ note.mime && <span class="note-info-mime">({note.mime})</span> }
</td>
<th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
<td colSpan={3}>
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
<Button
className="calculate-button"
style={{ padding: "0px 10px 0px 10px" }}
icon="bx bx-calculator"
text={t("note_info_widget.calculate")}
onClick={() => {
setIsLoading(true);
setTimeout(async () => {
await Promise.allSettled([
server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
]);
setIsLoading(false);
}, 0);
}}
/>
)}
<span className="note-sizes-wrapper">
<span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
<span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
}
{isLoading && <LoadingSpinner />}
</span>
</td>
</tr>
</tbody>
</table>
<span className="note-sizes-wrapper">
<span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
<span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
}
{isLoading && <LoadingSpinner />}
</span>
</span>
</div>
</>
)}
</div>
)

17
apps/client/src/widgets/ribbon/style.css
View File

@ -160,17 +160,20 @@
/* #region Note info */
.note-info-widget {
padding: 12px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.note-info-widget-table {
max-width: 100%;
display: block;
overflow-x: auto;
white-space: nowrap;
.note-info-item {
display: flex;
align-items: baseline;
padding-inline-end: 15px;
padding-block: 5px;
}
.note-info-widget-table td, .note-info-widget-table th {
padding: 5px;
.note-info-item > span:first-child {
padding-inline-end: 5px;
}
.note-info-mime {