Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/util: add pure css toggle element

Browse source
This commit is contained in:
Tulir Asokan 2024-11-13 23:49:22 +02:00
parent de405f9661
commit bf4954e02f
2 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web/src/ui/util/Toggle.css Normal file
View file

@ -0,0 +1,36 @@
input.toggle {
--transition-duration: .3s;
--disabled-color: var(--secondary-text-color);
--enabled-color: var(--primary-color-dark);
cursor: var(--clickable-cursor);
appearance: none;
display: block;
background-color: var(--background-color);
border: 1px solid var(--disabled-color);
border-radius: 1.5em;
width: 3.5em;
height: 2em;
padding: calc(.25em - 1px);
transition: background-color var(--transition-duration), border-color var(--transition-duration);
&::after {
content: "";
display: block;
height: 1.5em;
width: 1.5em;
border-radius: 50%;
background-color: var(--disabled-color);
transition: margin-left var(--transition-duration), background-color var(--transition-duration);
}
&:checked {
border-color: var(--enabled-color);
background-color: var(--enabled-color);
&::after {
margin-left: 1.5em;
background-color: var(--background-color);
}
}
}

37
web/src/ui/util/Toggle.tsx Normal file
View file

@ -0,0 +1,37 @@
// gomuks - A Matrix client written in Go.
// Copyright (C) 2024 Tulir Asokan
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import { InputHTMLAttributes } from "react"
import "./Toggle.css"
export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
disabledColor?: string
enabledColor?: string
}
const Toggle = (props: ToggleProps) => {
const extraStyle = {
"--disabled-color": props.disabledColor,
"--enabled-color": props.enabledColor,
}
return <input
{...props}
type="checkbox"
className={props.className ? `toggle ${props.className}` : "toggle"}
style={{ ...(props.style ?? {}), ...extraStyle }}
/>
}
export default Toggle