Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-13 16:55:50 +01:00
Code Issues Packages Projects Releases Activity

Note info ribbon flex layout (#7678)

Browse Source
This commit is contained in:
Elian Doran
2025-11-10 22:18:05 +02:00
committed by GitHub
parent bc32fe749d a1c959aabd
commit b86c656895
3 changed files with 66 additions and 59 deletions
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 */ /* The property label */
.note-info-widget-table th, .note-info-item > span:first-child,
.file-properties-widget .file-table th, .file-properties-widget .file-table th,
.image-properties > div:first-child > span > strong { .image-properties > div:first-child > span > strong {
opacity: 0.65; opacity: 0.65;
@@ -50,7 +50,6 @@ div.promoted-attributes-container {
vertical-align: top; vertical-align: top;
} }
.note-info-widget-table td,
.file-properties-widget .file-table td { .file-properties-widget .file-table td {
vertical-align: top; vertical-align: top;
} }

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

@@ -36,30 +36,32 @@ export default function NoteInfoTab({ note }: TabContext) {
return ( return (
<div className="note-info-widget"> <div className="note-info-widget">
{note && ( {note && (
<table className="note-info-widget-table"> <>
<tbody> <div className="note-info-item">
<tr> <span>{t("note_info_widget.note_id")}:</span>
<th>{t("note_info_widget.note_id")}:</th> <span className="note-info-id">{note.noteId}</span>
<td class="note-info-id">{note.noteId}</td> </div>
<th>{t("note_info_widget.created")}:</th> <div className="note-info-item">
<td>{formatDateTime(metadata?.dateCreated)}</td> <span>{t("note_info_widget.created")}:</span>
<th>{t("note_info_widget.modified")}:</th> <span>{formatDateTime(metadata?.dateCreated)}</span>
<td>{formatDateTime(metadata?.dateModified)}</td> </div>
</tr> <div className="note-info-item">
<span>{t("note_info_widget.modified")}:</span>
<tr> <span>{formatDateTime(metadata?.dateModified)}</span>
<th>{t("note_info_widget.type")}:</th> </div>
<td> <div className="note-info-item">
<span class="note-info-type">{note.type}</span>{' '} <span>{t("note_info_widget.type")}:</span>
{ note.mime && <span class="note-info-mime">({note.mime})</span> } <span>
</td> <span className="note-info-type">{note.type}</span>{' '}
{note.mime && <span className="note-info-mime">({note.mime})</span>}
<th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th> </span>
<td colSpan={3}> </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 && ( {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
<Button <Button
className="calculate-button" className="calculate-button"
style={{ padding: "0px 10px 0px 10px" }}
icon="bx bx-calculator" icon="bx bx-calculator"
text={t("note_info_widget.calculate")} text={t("note_info_widget.calculate")}
onClick={() => { onClick={() => {
@@ -76,17 +78,16 @@ export default function NoteInfoTab({ note }: TabContext) {
)} )}
<span className="note-sizes-wrapper"> <span className="note-sizes-wrapper">
<span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span> <span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "} {" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 && {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
<span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span> <span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
} }
{isLoading && <LoadingSpinner />} {isLoading && <LoadingSpinner />}
</span> </span>
</td> </span>
</tr> </div>
</tbody> </>
</table>
)} )}
</div> </div>
) )

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

@@ -160,17 +160,20 @@
/* #region Note info */ /* #region Note info */
.note-info-widget { .note-info-widget {
padding: 12px; padding: 12px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
} }
.note-info-widget-table { .note-info-item {
max-width: 100%; display: flex;
display: block; align-items: baseline;
overflow-x: auto; padding-inline-end: 15px;
white-space: nowrap; padding-block: 5px;
} }
.note-info-widget-table td, .note-info-widget-table th { .note-info-item > span:first-child {
padding: 5px; padding-inline-end: 5px;
} }
.note-info-mime { .note-info-mime {
@@ -186,6 +189,10 @@
font-size: 0.8em; font-size: 0.8em;
vertical-align: middle !important; vertical-align: middle !important;
} }
.note-info-widget .calculate-button {
padding: 0 10px;
}
/* #endregion */ /* #endregion */
/* #region Similar Notes */ /* #region Similar Notes */