Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 02:02:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): tweak number input groups

Browse Source
This commit is contained in:
Adorian Doran 2025-03-20 18:58:19 +02:00
parent 861f1efa5b
commit b705e24a97
8 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts
View File

@ -14,10 +14,10 @@ const TPL = `
<div class="form-group row">
<div class="col-md-6">
<label for="max-content-width">${t("max_content_width.max_width_label")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
<span class="input-group-text">${t("max_content_width.max_width_unit")}</span>
</div>
</label>
</div>
</div>

4
src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
View File

@ -10,10 +10,10 @@ const TPL = `
<div class="form-group">
<label for="auto-readonly-size-code">${t("code_auto_read_only_size.label")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
<span class="input-group-text">${t("code_auto_read_only_size.unit")}</span>
</div>
</label>
</div>
</div>`;

8
src/public/app/widgets/type_widgets/options/images/images.ts
View File

@ -30,18 +30,18 @@ const TPL = `
<div class="image-compression-enabled-wraper">
<div class="form-group">
<label>${t("images.max_image_dimensions")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input class="image-max-width-height form-control options-number-input" type="number" min="1">
<span class="input-group-text">${t("images.max_image_dimensions_unit")}</span>
</div>
</label>
</div>
<div class="form-group">
<label>${t("images.jpeg_quality_description")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input class="image-jpeg-quality form-control options-number-input" min="10" max="100" type="number">
<span class="input-group-text">%</span>
</div>
</label>
</div>
</div>
</div>

4
src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts
View File

@ -12,10 +12,10 @@ const TPL = `
<div class="form-group">
<label>${t("revisions_snapshot_limit.snapshot_number_limit_label")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input class="revision-snapshot-number-limit form-control options-number-input" type="number" min="-1">
<span class="input-group-text">${t("revisions_snapshot_limit.snapshot_number_limit_unit")}</span>
</div>
</label>
</div>
<button class="erase-excess-revision-snapshots-now-button btn btn-sm">

4
src/public/app/widgets/type_widgets/options/sync.ts
View File

@ -16,10 +16,10 @@ const TPL = `
<div class="form-group">
<label for="sync-server-timeout">${t("sync_2.timeout")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
<span class="input-group-text">${t("sync_2.timeout_unit")}</span>
</div>
</label>
</div>
<div class="form-group">

4
src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
View File

@ -9,10 +9,10 @@ const TPL = `
${t("table_of_contents.description")}
<div class="form-group">
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
<span class="input-group-text">${t("table_of_contents.unit")}</span>
</div>
</label>
</div>
<p class="form-text">${t("table_of_contents.disable_info")}</p>

4
src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
View File

@ -10,10 +10,10 @@ const TPL = `
<div class="form-group">
<label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
<div class="input-group">
<label class="input-group tn-number-unit-pair">
<input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
<span class="input-group-text">${t("text_auto_read_only_size.unit")}</span>
</div>
</label>
</div>
</div>`;

19
src/public/stylesheets/theme-next/forms.css
View File

@ -220,6 +220,7 @@ input::selection,
border-radius: 6px;
padding-right: 8px;
color: var(--quick-search-color);
flex-wrap: nowrap;
}
.input-group:hover {
@ -302,6 +303,24 @@ input::selection,
font-style: italic;
}
/*
Numeric input with measurement unit as a sufix
<label class="input-group tn-number-unit-pair">
<input ... >
<span class="input-group-text">meters</span>
</label>
*/
label.input-group.tn-number-unit-pair {
width: fit-content;
}
label.input-group.tn-number-unit-pair input {
width: 120px !important;
padding-inline-end: 0;
}
/* Combo box-like dropdown buttons */
.select-button.dropdown-toggle::after {