diff --git a/apps/client/src/services/experimental_features.ts b/apps/client/src/services/experimental_features.ts index 398467410..23477eae9 100644 --- a/apps/client/src/services/experimental_features.ts +++ b/apps/client/src/services/experimental_features.ts @@ -20,6 +20,10 @@ export type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"]; let enabledFeatures: Set | null = null; export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean { + if (featureId === "new-layout") { + return options.is("newLayout"); + } + return getEnabledFeatures().has(featureId); } diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index fe6c54746..5bc1b3854 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -112,9 +112,16 @@ export default function AppearanceSettings() { } function LayoutSwitcher() { + const [ newLayout, setNewLayout ] = useTriliumOptionBool("newLayout"); + return ( - + { + await setNewLayout(newValue === "new-layout"); + reloadFrontendApp(); + }} values={[ { key: "old-layout", text: "Old layout", illustration: }, { key: "new-layout", text: "New layout", illustration: } @@ -124,7 +131,7 @@ function LayoutSwitcher() { ); } -function LayoutIllustration({ isNewLayout }: { isNewLayout: boolean }) { +function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) { return (
diff --git a/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.css b/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.css index a8550fde9..a8286805e 100644 --- a/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.css +++ b/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.css @@ -13,5 +13,16 @@ } margin-bottom: 0; + + &> .illustration { + border-radius: 6px; + padding: 3px; + cursor: pointer; + } } + + &> .selected figure > .illustration { + outline: 3px solid var(--input-focus-outline-color); + } + } diff --git a/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx b/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx index b5bdfa4b2..f41d3701b 100644 --- a/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx +++ b/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx @@ -1,5 +1,6 @@ import "./RadioWithIllustration.css"; +import clsx from "clsx"; import { ComponentChild } from "preact"; interface RadioWithIllustrationProps { @@ -12,13 +13,22 @@ interface RadioWithIllustrationProps { onChange(newValue: string); } -export default function RadioWithIllustration({ values }: RadioWithIllustrationProps) { +export default function RadioWithIllustration({ currentValue, onChange, values }: RadioWithIllustrationProps) { return (
    {values.map(value => ( -
  • +
  • - {value.illustration} +
    onChange(value.key)} + > + {value.illustration} +
    {value.text}