Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases Activity

chore(react/settings): make layout switch functional

Browse Source
This commit is contained in:
Elian Doran
2025-08-14 17:57:08 +03:00
parent d6032c912e
commit 6685e583f2
4 changed files with 12 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/services/utils.ts
View File

@@ -5,7 +5,7 @@ const SVG_MIME = "image/svg+xml";
export const isShare = !window.glob; export const isShare = !window.glob;
function reloadFrontendApp(reason?: string) { export function reloadFrontendApp(reason?: string) {
if (reason) { if (reason) {
logInfo(`Frontend app reload: ${reason}`); logInfo(`Frontend app reload: ${reason}`);
} }
@@ -218,7 +218,7 @@ function randomString(len: number) {
return text; return text;
} }
function isMobile() { export function isMobile() {
return ( return (
window.glob?.device === "mobile" || window.glob?.device === "mobile" ||
// window.glob.device is not available in setup // window.glob.device is not available in setup

6
apps/client/src/widgets/react/hooks.tsx
View File

@@ -68,12 +68,12 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
return spacedUpdateRef.current; return spacedUpdateRef.current;
} }
export function useTriliumOption(name: OptionNames): [string, (newValue: string) => void] { export function useTriliumOption(name: OptionNames): [string, (newValue: string) => Promise<void>] {
const initialValue = options.get(name); const initialValue = options.get(name);
const [ value, setValue ] = useState(initialValue); const [ value, setValue ] = useState(initialValue);
function wrappedSetValue(newValue: string) { async function wrappedSetValue(newValue: string) {
options.save(name, newValue); await options.save(name, newValue);
}; };
useTriliumEvent("entitiesReloaded", ({ loadResults }) => { useTriliumEvent("entitiesReloaded", ({ loadResults }) => {

11
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@@ -1,15 +1,15 @@
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import { isMobile, reloadFrontendApp } from "../../../services/utils";
import FormRadioGroup from "../../react/FormRadioGroup"; import FormRadioGroup from "../../react/FormRadioGroup";
import { useTriliumOption } from "../../react/hooks"; import { useTriliumOption } from "../../react/hooks";
import OptionsSection from "./components/OptionsSection"; import OptionsSection from "./components/OptionsSection";
export default function AppearanceSettings() { export default function AppearanceSettings() {
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation"); const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation");
console.log("Render with ", layoutOrientation);
return ( return (
<OptionsSection title={t("theme.layout")}> <OptionsSection title={t("theme.layout")}>
<FormRadioGroup {!isMobile() && <FormRadioGroup
name="layout-orientation" name="layout-orientation"
values={[ values={[
{ {
@@ -21,8 +21,11 @@ export default function AppearanceSettings() {
value: "horizontal" value: "horizontal"
} }
]} ]}
currentValue={layoutOrientation} onChange={setLayoutOrientation} currentValue={layoutOrientation} onChange={async (newValue) => {
/> await setLayoutOrientation(newValue);
reloadFrontendApp("layout orientation change");
}}
/>}
</OptionsSection> </OptionsSection>
) )
} }

8
apps/client/src/widgets/type_widgets/options/appearance/theme.ts
View File

@@ -40,14 +40,6 @@ export default class ThemeOptions extends OptionsWidget {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$themeSelect = this.$widget.find(".theme-select"); this.$themeSelect = this.$widget.find(".theme-select");
this.$overrideThemeFonts = this.$widget.find(".override-theme-fonts"); this.$overrideThemeFonts = this.$widget.find(".override-theme-fonts");
this.$layoutOrientation = this.$widget.find(`input[name="layout-orientation"]`).on("change", async () => {
const newLayoutOrientation = String(this.$widget.find(`input[name="layout-orientation"]:checked`).val());
await this.updateOption("layoutOrientation", newLayoutOrientation);
utils.reloadFrontendApp("layout orientation change");
});
const $layoutOrientationSection = $(this.$widget[0]);
$layoutOrientationSection.toggleClass("hidden-ext", utils.isMobile());
this.$themeSelect.on("change", async () => { this.$themeSelect.on("change", async () => {
const newTheme = this.$themeSelect.val(); const newTheme = this.$themeSelect.val();