Skip to content

Commit 4d1ebd0

Browse files
contributorcontributor
committed
ribbon Note Info in flex layout instead of table
1 parent 52691b9 commit 4d1ebd0

File tree

3 files changed

+63
-59
lines changed

3 files changed

+63
-59
lines changed

‎apps/client/src/stylesheets/theme-next/ribbon.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,14 @@ div.promoted-attributes-container {
4242
*/
4343

4444
/* The property label */
45-
.note-info-widget-table th,
45+
.note-info-item > span:first-child,
4646
.file-properties-widget .file-table th,
4747
.image-properties > div:first-child > span > strong {
4848
opacity: 0.65;
4949
font-weight: 500;
5050
vertical-align: top;
5151
}
5252

53-
.note-info-widget-table td,
5453
.file-properties-widget .file-table td {
5554
vertical-align: top;
5655
}

‎apps/client/src/widgets/ribbon/NoteInfoTab.tsx‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -36,57 +36,59 @@ export default function NoteInfoTab({ note }: TabContext) {
3636
return (
3737
<div className="note-info-widget">
3838
{note && (
39-
<table className="note-info-widget-table">
40-
<tbody>
41-
<tr>
42-
<th>{t("note_info_widget.note_id")}:</th>
43-
<td class="note-info-id">{note.noteId}</td>
44-
<th>{t("note_info_widget.created")}:</th>
45-
<td>{formatDateTime(metadata?.dateCreated)}</td>
46-
<th>{t("note_info_widget.modified")}:</th>
47-
<td>{formatDateTime(metadata?.dateModified)}</td>
48-
</tr>
39+
<>
40+
<div className="note-info-item">
41+
<span>{t("note_info_widget.note_id")}:</span>
42+
<span className="note-info-id">{note.noteId}</span>
43+
</div>
44+
<div className="note-info-item">
45+
<span>{t("note_info_widget.created")}:</span>
46+
<span>{formatDateTime(metadata?.dateCreated)}</span>
47+
</div>
48+
<div className="note-info-item">
49+
<span>{t("note_info_widget.modified")}:</span>
50+
<span>{formatDateTime(metadata?.dateModified)}</span>
51+
</div>
52+
<div className="note-info-item">
53+
<span>{t("note_info_widget.type")}:</span>
54+
<span>
55+
<span className="note-info-type">{note.type}</span>{' '}
56+
{note.mime && <span className="note-info-mime">({note.mime})</span>}
57+
</span>
58+
</div>
59+
<div className="note-info-item">
60+
<span title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</span>
61+
<span className="note-info-size-col-span">
62+
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
63+
<Button
64+
className="calculate-button"
65+
style={{ padding: "0px 10px 0px 10px" }}
66+
icon="bx bx-calculator"
67+
text={t("note_info_widget.calculate")}
68+
onClick={() => {
69+
setIsLoading(true);
70+
setTimeout(async () => {
71+
await Promise.allSettled([
72+
server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
73+
server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
74+
]);
75+
setIsLoading(false);
76+
}, 0);
77+
}}
78+
/>
79+
)}
4980

50-
<tr>
51-
<th>{t("note_info_widget.type")}:</th>
52-
<td>
53-
<span class="note-info-type">{note.type}</span>{' '}
54-
{ note.mime && <span class="note-info-mime">({note.mime})</span> }
55-
</td>
56-
57-
<th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
58-
<td colSpan={3}>
59-
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
60-
<Button
61-
className="calculate-button"
62-
style={{ padding: "0px 10px 0px 10px" }}
63-
icon="bx bx-calculator"
64-
text={t("note_info_widget.calculate")}
65-
onClick={() => {
66-
setIsLoading(true);
67-
setTimeout(async () => {
68-
await Promise.allSettled([
69-
server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
70-
server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
71-
]);
72-
setIsLoading(false);
73-
}, 0);
74-
}}
75-
/>
76-
)}
77-
78-
<span className="note-sizes-wrapper">
79-
<span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
80-
{" "}
81-
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
82-
<span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
83-
}
84-
{isLoading && <LoadingSpinner />}
85-
</span>
86-
</td>
87-
</tr>
88-
</tbody>
89-
</table>
81+
<span className="note-sizes-wrapper">
82+
<span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
83+
{" "}
84+
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
85+
<span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
86+
}
87+
{isLoading && <LoadingSpinner />}
88+
</span>
89+
</span>
90+
</div>
91+
</>
9092
)}
9193
</div>
9294
)

‎apps/client/src/widgets/ribbon/style.css‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -160,17 +160,20 @@
160160
/* #region Note info */
161161
.note-info-widget {
162162
padding: 12px;
163+
display: flex;
164+
flex-wrap: wrap;
165+
align-items: baseline;
163166
}
164167

165-
.note-info-widget-table {
166-
max-width: 100%;
167-
display: block;
168-
overflow-x: auto;
169-
white-space: nowrap;
168+
.note-info-item {
169+
display: flex;
170+
align-items: baseline;
171+
padding-inline-end: 15px;
172+
padding-block: 5px;
170173
}
171174

172-
.note-info-widget-table td, .note-info-widget-table th {
173-
padding: 5px;
175+
.note-info-item > span:first-child {
176+
padding-inline-end: 5px;
174177
}
175178

176179
.note-info-mime {

0 commit comments

Comments
 (0)