diff --git a/.config/ags/modules/.commonwidgets/configwidgets.js b/.config/ags/modules/.commonwidgets/configwidgets.js index 7bbeb0a4..c8212d93 100644 --- a/.config/ags/modules/.commonwidgets/configwidgets.js +++ b/.config/ags/modules/.commonwidgets/configwidgets.js @@ -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; } \ No newline at end of file diff --git a/.config/ags/modules/sideright/centermodules/configure.js b/.config/ags/modules/sideright/centermodules/configure.js index abb2fbdd..af1739f3 100644 --- a/.config/ags/modules/sideright/centermodules/configure.js +++ b/.config/ags/modules/sideright/centermodules/configure.js @@ -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, }); diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index b086a150..05ff3035 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -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;