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

chore(react/settings): bring back style

Browse Source
This commit is contained in:
Elian Doran 2025-08-15 00:08:43 +03:00
parent a42d780724
commit 520effbbb7
No known key found for this signature in database
5 changed files with 76 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/client/src/widgets/react/Admonition.tsx Normal file
View File

@ -0,0 +1,14 @@
import { ComponentChildren } from "preact";
interface AdmonitionProps {
type: "warning";
children: ComponentChildren;
}
export default function Admonition({ type, children }: AdmonitionProps) {
return (
<div className={`admonition ${type}`} role="alert">
{children}
</div>
)
}

23
apps/client/src/widgets/type_widgets/options/components/OptionsRow.css Normal file
View File

@ -0,0 +1,23 @@
.option-row {
border-bottom: 1px solid var(--main-border-color);
display: flex;
align-items: center;
padding: 0.5em 0;
}
.option-row > label {
width: 40%;
margin-bottom: 0 !important;
}
.option-row > select {
width: 60%;
}
.option-row:last-of-type {
border-bottom: unset;
}
.option-row.centered {
justify-content: center;
}

10
apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
View File

@ -1,14 +1,16 @@
import { ComponentChildren } from "preact";
import "./OptionsRow.css";
interface OptionsRowProps {
label: string;
label?: string;
children: ComponentChildren;
centered?: boolean;
}
export default function OptionsRow({ label, children }: OptionsRowProps) {
export default function OptionsRow({ label, children, centered }: OptionsRowProps) {
return (
<div className="option-row">
<label>{label}</label>
<div className={`option-row ${centered ? "centered" : ""}`}>
{label && <label>{label}</label>}
{children}
</div>
);

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

@ -5,8 +5,12 @@ import OptionsRow from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection";
import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import type { Locale } from "@triliumnext/commons";
import { isElectron } from "../../../services/utils";
import { isElectron, restartDesktopApp } from "../../../services/utils";
import FormRadioGroup from "../../react/FormRadioGroup";
import FormText from "../../react/FormText";
import RawHtml from "../../react/RawHtml";
import Admonition from "../../react/Admonition";
import Button from "../../react/Button";
export default function InternationalizationOptions() {
return (
@ -70,15 +74,17 @@ function DateSettings() {
</OptionsRow>
<OptionsRow label={t("i18n.first-week-of-the-year")}>
<FormRadioGroup
name="first-week-of-year"
currentValue={firstWeekOfYear} onChange={setFirstWeekOfYear}
values={[
{ value: "0", label: t("i18n.first-week-contains-first-day") },
{ value: "1", label: t("i18n.first-week-contains-first-thursday") },
{ value: "2", label: t("i18n.first-week-has-minimum-days") }
]}
/>
<div role="group">
<FormRadioGroup
name="first-week-of-year"
currentValue={firstWeekOfYear} onChange={setFirstWeekOfYear}
values={[
{ value: "0", label: t("i18n.first-week-contains-first-day") },
{ value: "1", label: t("i18n.first-week-contains-first-thursday") },
{ value: "2", label: t("i18n.first-week-has-minimum-days") }
]}
/>
</div>
</OptionsRow>
{firstWeekOfYear === "2" && <OptionsRow label={t("i18n.min-days-in-first-week")}>
@ -89,6 +95,22 @@ function DateSettings() {
{ length: 7 },
(_, i) => ({ days: String(i + 1) }))} />
</OptionsRow>}
<FormText>
<RawHtml html={t("i18n.first-week-info")} />
</FormText>
<Admonition type="warning">
{t("i18n.first-week-warning")}
</Admonition>
<OptionsRow centered>
<Button
text={t("electron_integration.restart-app-button")}
size="micro"
onClick={restartDesktopApp}
/>
</OptionsRow>
</>
)
}

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

@ -5,43 +5,7 @@ import { getAvailableLocales, t } from "../../../../services/i18n.js";
const TPL = /*html*/`
<div class="options-section">
<div class="locale-options-container">
<p class="form-text use-tn-links">${t("i18n.first-week-info")}</p>
<div class="admonition warning" role="alert">
${t("i18n.first-week-warning")}
</div>
<div class="option-row centered">
<button class="btn btn-secondary btn-micro restart-app-button">${t("electron_integration.restart-app-button")}</button>
</div>
</div>
<style>
.locale-options-container .option-row {
border-bottom: 1px solid var(--main-border-color);
display: flex;
align-items: center;
padding: 0.5em 0;
}
.locale-options-container .option-row > label {
width: 40%;
margin-bottom: 0 !important;
}
.locale-options-container .option-row > select {
width: 60%;
}
.locale-options-container .option-row:last-of-type {
border-bottom: unset;
}
.locale-options-container .option-row.centered {
justify-content: center;
}
.locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] {
display: flex;
flex-direction: column;
@ -59,7 +23,7 @@ export default class LocalizationOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.find(".restart-app-button").on("click", utils.restartDesktopApp);
this.$widget.find(".restart-app-button").on("click", utils.);
}
}