gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 10:24:23 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(widgets/toggle): disable transitions on first render

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 18:33:29 +02:00
parent e0f7d65f77
commit 9f2ed2f9d4
No known key found for this signature in database
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/client/src/widgets/react/FormToggle.css
View File

@ -24,6 +24,14 @@
border-radius: 24px;
background-color: var(--switch-off-track-background);
transition: background 200ms ease-in;
&.disable-transitions {
transition: none !important;
&:after {
transition: none !important;
}
}
}
.switch-widget .switch-button.on {
@ -103,4 +111,4 @@ body[dir=rtl] .switch-widget .switch-button.on:after {
.switch-widget .switch-help-button:hover {
color: var(--main-text-color);
}
}

13
apps/client/src/widgets/react/FormToggle.tsx
View File

@ -1,5 +1,7 @@
import clsx from "clsx";
import "./FormToggle.css";
import HelpButton from "./HelpButton";
import { useEffect, useState } from "preact/hooks";
interface FormToggleProps {
currentValue: boolean | null;
@ -13,13 +15,22 @@ interface FormToggleProps {
}
export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled }: FormToggleProps) {
const [ disableTransition, setDisableTransition ] = useState(true);
useEffect(() => {
const timeout = setTimeout(() => {
setDisableTransition(false);
}, 100);
return () => clearTimeout(timeout);
}, []);
return (
<div className="switch-widget">
<span className="switch-name">{ currentValue ? switchOffName : switchOnName }</span>
<label>
<div
className={`switch-button ${currentValue ? "on" : ""} ${disabled ? "disabled" : ""}`}
className={clsx("switch-button", { "on": currentValue, disabled, "disable-transitions": disableTransition })}
title={currentValue ? switchOffTooltip : switchOnTooltip }
>
<input