Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 10:55:55 +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;
function reloadFrontendApp(reason?: string) {
export function reloadFrontendApp(reason?: string) {
if (reason) {
logInfo(`Frontend app reload: ${reason}`);
}
@@ -218,7 +218,7 @@ function randomString(len: number) {
return text;
}
function isMobile() {
export function isMobile() {
return (
window.glob?.device === "mobile" ||
// 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;
}
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 [ value, setValue ] = useState(initialValue);
function wrappedSetValue(newValue: string) {
options.save(name, newValue);
async function wrappedSetValue(newValue: string) {
await options.save(name, newValue);
};
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 { isMobile, reloadFrontendApp } from "../../../services/utils";
import FormRadioGroup from "../../react/FormRadioGroup";
import { useTriliumOption } from "../../react/hooks";
import OptionsSection from "./components/OptionsSection";
export default function AppearanceSettings() {
const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation");
console.log("Render with ", layoutOrientation);
return (
<OptionsSection title={t("theme.layout")}>
<FormRadioGroup
{!isMobile() && <FormRadioGroup
name="layout-orientation"
values={[
{
@@ -21,8 +21,11 @@ export default function AppearanceSettings() {
value: "horizontal"
}
]}
currentValue={layoutOrientation} onChange={setLayoutOrientation}
/>
currentValue={layoutOrientation} onChange={async (newValue) => {
await setLayoutOrientation(newValue);
reloadFrontendApp("layout orientation change");
}}
/>}
</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.$themeSelect = this.$widget.find(".theme-select");
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 () => {
const newTheme = this.$themeSelect.val();