kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

sidebar: bluetooth: add connection toggle

Browse Source
This commit is contained in:
end-4
2024-03-28 17:34:04 +07:00
parent 5cccd08a63
commit 0b394d49ae
2 changed files with 129 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/.commonwidgets/configwidgets.js
+67 -53
View File
@@ -1,37 +1,60 @@
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
import { MaterialIcon } from './materialicon.js';
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
const { Box, Button, Label, Revealer } = Widget;
export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, expandWidget = true, ...rest }) => {
let value = initValue;
export const ConfigToggle = ({
icon, name, desc = '', initValue,
expandWidget = true,
onChange = () => { }, extraSetup = () => { },
...rest
}) => {
const enabled = Variable(initValue);
const toggleIcon = Label({
className: `icon-material txt-bold ${value ? '' : 'txt-poof'}`,
label: `${value ? 'check' : ''}`,
className: `icon-material txt-bold ${enabled.value ? '' : 'txt-poof'}`,
label: `${enabled.value ? 'check' : ''}`,
setup: (self) => self.hook(enabled, (self) => {
self.toggleClassName('switch-fg-toggling-false', false);
if (!enabled.value) {
self.label = '';
self.toggleClassName('txt-poof', true);
}
else Utils.timeout(1, () => {
toggleIcon.label = 'check';
toggleIcon.toggleClassName('txt-poof', false);
})
}),
})
const toggleButtonIndicator = Box({
className: `switch-fg ${value ? 'switch-fg-true' : ''}`,
className: `switch-fg ${enabled.value ? 'switch-fg-true' : ''}`,
vpack: 'center',
hpack: 'start',
homogeneous: true,
children: [toggleIcon,],
setup: (self) => self.hook(enabled, (self) => {
self.toggleClassName('switch-fg-true', enabled.value);
}),
});
const toggleButton = Box({
hpack: 'end',
className: `switch-bg ${value ? 'switch-bg-true' : ''}`,
className: `switch-bg ${enabled.value ? 'switch-bg-true' : ''}`,
homogeneous: true,
children: [toggleButtonIndicator,],
children: [toggleButtonIndicator],
setup: (self) => self.hook(enabled, (self) => {
self.toggleClassName('switch-bg-true', enabled.value);
}),
});
const widgetContent = Box({
tooltipText: desc,
className: 'txt spacing-h-5 configtoggle-box',
children: [
MaterialIcon(icon, 'norm'),
Label({
(icon !== undefined ? MaterialIcon(icon, 'norm') : null),
(name !== undefined ? Label({
className: 'txt txt-small',
label: name,
}),
}) : null),
expandWidget ? Box({ hexpand: true }) : null,
toggleButton,
]
@@ -39,33 +62,24 @@ export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, expan
const interactionWrapper = Button({
attribute: {
toggle: (newValue) => {
value = !value;
toggleIcon.toggleClassName('switch-fg-toggling-false', false);
if (!value) {
toggleIcon.label = '';
toggleIcon.toggleClassName('txt-poof', true);
}
toggleButtonIndicator.toggleClassName('switch-fg-true', value);
toggleButton.toggleClassName('switch-bg-true', value);
if (value) Utils.timeout(1, () => {
toggleIcon.label = 'check';
toggleIcon.toggleClassName('txt-poof', false);
})
onChange(interactionWrapper, value);
enabled.value = !enabled.value;
onChange(interactionWrapper, enabled.value);
}
},
child: widgetContent,
onClicked: (self) => self.attribute.toggle(self),
setup: (button) => {
setupCursorHover(button),
button.connect('pressed', () => { // mouse down
toggleIcon.toggleClassName('txt-poof', true);
toggleIcon.toggleClassName('switch-fg-true', false);
if (!value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
});
setup: (self) => {
setupCursorHover(self);
self.connect('pressed', () => { // mouse down
toggleIcon.toggleClassName('txt-poof', true);
toggleIcon.toggleClassName('switch-fg-true', false);
if (!enabled.value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
});
extraSetup(self)
},
...rest,
});
interactionWrapper.enabled = enabled;
return interactionWrapper;
}
@@ -123,8 +137,8 @@ export const ConfigSegmentedSelection = ({
export const ConfigMulipleSelection = ({
icon, name, desc = '',
optionsArr = [
[ { name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 } ],
[ { name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 } ],
[{ name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 }],
[{ name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 }],
],
initIndex = [0, 0],
onChange,
@@ -137,27 +151,27 @@ export const ConfigMulipleSelection = ({
className: 'multipleselection-container spacing-v-3',
vertical: true,
children: optionsArr.map((options, grp) => {
return Box({
className: 'spacing-h-5',
hpack: 'center',
children: options.map((option, id) => {
return Button({
setup: setupCursorHover,
className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
label: option.name,
onClicked: (self) => {
const kidsg = widget.get_children();
const kids = kidsg.flatMap(widget => widget.get_children());
kids.forEach(kid => {
kid.toggleClassName('multipleselection-btn-enabled', false);
});
lastSelected = id;
self.toggleClassName('multipleselection-btn-enabled', true);
onChange(option.value, option.name);
}
})
}),
})
return Box({
className: 'spacing-h-5',
hpack: 'center',
children: options.map((option, id) => {
return Button({
setup: setupCursorHover,
className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
label: option.name,
onClicked: (self) => {
const kidsg = widget.get_children();
const kids = kidsg.flatMap(widget => widget.get_children());
kids.forEach(kid => {
kid.toggleClassName('multipleselection-btn-enabled', false);
});
lastSelected = id;
self.toggleClassName('multipleselection-btn-enabled', true);
onChange(option.value, option.name);
}
})
}),
})
}),
...rest,
});