gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

chore(react/settings): fix a margin between radios

Browse Source
This commit is contained in:
Elian Doran 2025-08-15 00:19:37 +03:00
parent 520effbbb7
commit c039f06c2b
No known key found for this signature in database
3 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/client/src/widgets/react/FormRadioGroup.tsx
View File

@ -11,23 +11,37 @@ interface FormRadioProps {
onChange(newValue: string): void;
}
export default function FormRadioGroup({ name, values, currentValue, onChange }: FormRadioProps) {
export default function FormRadioGroup({ values, ...restProps }: FormRadioProps) {
return (
<>
{(values || []).map(({ value, label }) => (
<div className="form-checkbox">
<label className="form-check-label tn-radio">
<input
className="form-check-input"
type="radio"
name={useUniqueName(name)}
value={value}
checked={value === currentValue}
onChange={e => onChange((e.target as HTMLInputElement).value)} />
{label}
</label>
<FormRadio value={value} label={label} {...restProps} labelClassName="form-check-label" />
</div>
))}
</>
);
}
export function FormInlineRadioGroup({ values, ...restProps }: FormRadioProps) {
return (
<>
{values.map(({ value, label }) => (<FormRadio value={value} label={label} {...restProps} />))}
</>
)
}
function FormRadio({ name, value, label, currentValue, onChange, labelClassName }: Omit<FormRadioProps, "values"> & { value: string, label: ComponentChildren, labelClassName?: string }) {
return (
<label className={`tn-radio ${labelClassName ?? ""}`}>
<input
className="form-check-input"
type="radio"
name={useUniqueName(name)}
value={value}
checked={value === currentValue}
onChange={e => onChange((e.target as HTMLInputElement).value)} />
{label}
</label>
)
}

20
apps/client/src/widgets/type_widgets/options/i18n.tsx
View File

@ -6,7 +6,7 @@ import OptionsSection from "./components/OptionsSection";
import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import type { Locale } from "@triliumnext/commons";
import { isElectron, restartDesktopApp } from "../../../services/utils";
import FormRadioGroup from "../../react/FormRadioGroup";
import FormRadioGroup, { FormInlineRadioGroup } from "../../react/FormRadioGroup";
import FormText from "../../react/FormText";
import RawHtml from "../../react/RawHtml";
import Admonition from "../../react/Admonition";
@ -63,14 +63,16 @@ function DateSettings() {
return (
<>
<OptionsRow label={t("i18n.first-day-of-the-week")}>
<FormRadioGroup
name="first-day-of-week"
values={[
{ value: "0", label: t("i18n.sunday") },
{ value: "1", label: t("i18n.monday") }
]}
currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
/>
<div role="group">
<FormInlineRadioGroup
name="first-day-of-week"
values={[
{ value: "0", label: t("i18n.sunday") },
{ value: "1", label: t("i18n.monday") }
]}
currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
/>
</div>
</OptionsRow>
<OptionsRow label={t("i18n.first-week-of-the-year")}>

29
apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
View File

@ -1,29 +0,0 @@
import OptionsWidget from "../options_widget.js";
import server from "../../../../services/server.js";
import utils from "../../../../services/utils.js";
import { getAvailableLocales, t } from "../../../../services/i18n.js";
const TPL = /*html*/`
<div class="options-section">
<style>
.locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] {
display: flex;
flex-direction: column;
}
.locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] .tn-radio {
margin-left: 0;
white-space: nowrap;
}
</style>
</div>
`;
export default class LocalizationOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.find(".restart-app-button").on("click", utils.);
}
}