sideright: configure: make values update on reset

This commit is contained in:
end-4 2025-03-28 23:17:52 +01:00
parent bd8ae19490
commit 11e65858e0
3 changed files with 50 additions and 20 deletions

View file

@ -5,11 +5,14 @@ import { MaterialIcon } from './materialicon.js';
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
const { Box, Button, Label, Revealer, SpinButton } = Widget;
// Basically M3 Switch
// https://m3.material.io/components/switch/overview
// onReset must be async
export const ConfigToggle = ({
icon, name, desc = '', initValue,
expandWidget = true, resetButton = false,
onChange = () => { }, extraSetup = () => { },
onReset = () => { },
onReset = () => { }, fetchValue = () => { },
...rest
}) => {
const enabled = Variable(initValue);
@ -85,19 +88,24 @@ export const ConfigToggle = ({
},
...rest,
});
interactionWrapper.enabled = enabled;
return Box({
const wholeThing = Box({
className: 'configtoggle-box spacing-h-5',
children: [
interactionWrapper,
...(resetButton ? [Button({
className: 'spinbutton-reset',
onClicked: onReset,
className: 'configtoggle-reset',
onClicked: (self) => {
onReset(self).then(() => {
enabled.value = fetchValue();
}).catch(print);
},
child: MaterialIcon('settings_backup_restore', 'small'),
setup: setupCursorHover,
})] : []),
]
});
wholeThing.enabled = enabled;
return wholeThing;
}
export const ConfigSegmentedSelection = ({
@ -201,15 +209,17 @@ export const ConfigSpinButton = ({
minValue = 0, maxValue = 100, step = 1,
expandWidget = true, resetButton = false,
onChange = () => { }, extraSetup = () => { },
onReset = () => { },
onReset = () => { }, fetchValue = () => { },
...rest
}) => {
let resetLock = false;
const value = Variable(initValue);
const spinButton = SpinButton({
className: 'spinbutton',
range: [minValue, maxValue],
increments: [step, step],
onValueChanged: ({ value: newValue }) => {
if (resetLock) return;
value.value = newValue;
onChange(spinButton, newValue);
},
@ -228,7 +238,15 @@ export const ConfigSpinButton = ({
spinButton,
...(resetButton ? [Button({
className: 'spinbutton-reset',
onClicked: onReset,
onClicked: (self) => {
onReset(self).then(() => {
resetLock = true;
const newValue = fetchValue();
spinButton.value = newValue;
value.value = newValue;
resetLock = false;
}).catch(print);
},
child: MaterialIcon('settings_backup_restore', 'small'),
setup: setupCursorHover,
})] : []),
@ -238,5 +256,6 @@ export const ConfigSpinButton = ({
},
...rest,
});
widgetContent.enabled = value;
return widgetContent;
}

View file

@ -14,6 +14,7 @@ const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disa
desc: desc,
resetButton: true,
initValue: JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0,
fetchValue: () => JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0,
onChange: (self, newValue) => {
if (save)
execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
@ -23,28 +24,28 @@ const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disa
]).catch(print);
else
execAsync(['hyprctl', 'keyword', option, `${newValue ? enableValue : disableValue}`]).catch(print);
// scripts/hyprland/hyprconfigurator.py --key decoration:rounding --value 12 --file '/home/end/.config/hypr/custom/general.conf'
extraOnChange(self, newValue);
},
onReset: (self, newValue) => {
onReset: async (self) => {
if (save)
execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
exec(`bash -c '${App.configDir}/scripts/hyprland/hyprconfigurator.py \
--key ${option} \
--reset \
--file \${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf`
]).catch(print);
--file "\${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf"'`);
else
execAsync(['bash', '-c', `hyprctl reload`]).catch(print);
extraOnReset(self, newValue);
exec('hyprctl reload')
extraOnReset(self);
},
});
const HyprlandSpinButton = ({ icon, name, desc = null, option, save = true, ...rest }) => ConfigSpinButton({
const HyprlandSpinButton = ({ icon, name, desc = null, option, save = true, extraOnChange = () => { }, extraOnReset = () => { }, ...rest }) => ConfigSpinButton({
icon: icon,
name: name,
desc: desc,
resetButton: true,
initValue: Number(JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"]),
fetchValue: () => Number(JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"]),
onChange: (self, newValue) => {
if (save)
execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
@ -54,16 +55,18 @@ const HyprlandSpinButton = ({ icon, name, desc = null, option, save = true, ...r
]).catch(print);
else
execAsync(['hyprctl', 'keyword', option, `${newValue}`]).catch(print);
extraOnChange(self, newValue);
},
onReset: (self, newValue) => {
onReset: async (self) => {
if (save)
execAsync(['bash', '-c', `${App.configDir}/scripts/hyprland/hyprconfigurator.py \
exec(`bash -c '${App.configDir}/scripts/hyprland/hyprconfigurator.py \
--key ${option} \
--reset \
--file \${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf`
]).catch(print);
--file "\${XDG_CONFIG_HOME:-$HOME/.config}/hypr/custom/general.conf"'`);
else
execAsync(['bash', '-c', `hyprctl reload`]).catch(print);
exec('hyprctl reload')
extraOnReset(self);
},
...rest,
});

View file

@ -115,6 +115,14 @@ popover {
padding: 0.205rem 0.341rem;
}
.configtoggle-reset {
@include small-rounding;
color: $onLayer2;
background-color: $layer2;
min-width: 2.045rem;
min-height: 2.045rem;
}
.switch-bg {
@include element_decel;
@include full-rounding;