Skip to content

Commit b86c656

Browse files
eliandoraneliandoran
authored
Note info ribbon flex layout (#7678)
2 parents bc32fe7 + a1c959a commit b86c656

File tree

3 files changed

+66
-59
lines changed

3 files changed

+66
-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: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -36,57 +36,58 @@ 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+
icon="bx bx-calculator"
66+
text={t("note_info_widget.calculate")}
67+
onClick={() => {
68+
setIsLoading(true);
69+
setTimeout(async () => {
70+
await Promise.allSettled([
71+
server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
72+
server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
73+
]);
74+
setIsLoading(false);
75+
}, 0);
76+
}}
77+
/>
78+
)}
4979

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>
80+
<span className="note-sizes-wrapper">
81+
<span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
82+
{" "}
83+
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
84+
<span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
85+
}
86+
{isLoading && <LoadingSpinner />}
87+
</span>
88+
</span>
89+
</div>
90+
</>
9091
)}
9192
</div>
9293
)

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

Lines changed: 14 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 {
@@ -186,6 +189,10 @@
186189
font-size: 0.8em;
187190
vertical-align: middle !important;
188191
}
192+
193+
.note-info-widget .calculate-button {
194+
padding: 0 10px;
195+
}
189196
/* #endregion */
190197

191198
/* #region Similar Notes */

0 commit comments

Comments
 (0)