matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(ags toggle button): remake using subclasses and custom icon

Browse source
This commit is contained in:
matt1432 2023-11-07 23:06:56 -05:00
parent cdb87f6c7a
commit 45110a3d5a
2 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
devices/wim/config/ags/icons/down-large.svg Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -3 14 14" id="meteor-icon-kit__regular-chevron-down-s" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.70711 0.29289C1.31658 -0.09763 0.68342 -0.09763 0.29289 0.29289C-0.09763 0.68342 -0.09763 1.3166 0.29289 1.7071L6.2929 7.7071C6.6834 8.0976 7.3166 8.0976 7.7071 7.7071L13.7071 1.7071C14.0976 1.3166 14.0976 0.68342 13.7071 0.29289C13.3166 -0.09763 12.6834 -0.09763 12.2929 0.29289L7 5.5858L1.70711 0.29289z" fill="#ffffff"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 879 B

67
devices/wim/config/ags/js/quick-settings/toggle-button.js
View file

@ -1,44 +1,39 @@
import App from 'resource:///com/github/Aylur/ags/app.js';
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
import { Icon } from 'resource:///com/github/Aylur/ags/widget.js';
import { Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
import Gtk from 'gi://Gtk';
import EventBox from '../misc/cursorbox.js';
// TODO: use Widget.ToggleButton instead
export default () => {
const widget = EventBox({});
export default () => EventBox({
child: ToggleButton({
setup: self => {
// Open at startup if there are players
const id = Mpris.connect('changed', () => {
self.set_active(Mpris.players.length > 0);
Mpris.disconnect(id);
});
},
const toggleButton = Gtk.ToggleButton.new();
toggleButton.add(Icon({
icon: 'go-down-symbolic',
className: 'arrow',
css: '-gtk-icon-transform: rotate(180deg);',
}));
connections: [['toggled', self => {
const rev = self.get_parent().get_parent().get_parent().children[1];
// Setup
const id = Mpris.connect('changed', () => {
toggleButton.set_active(Mpris.players.length > 0);
Mpris.disconnect(id);
});
if (self.get_active()) {
self.get_children()[0]
.setCss('-gtk-icon-transform: rotate(0deg);');
rev.revealChild = true;
}
else {
self.get_children()[0]
.setCss('-gtk-icon-transform: rotate(180deg);');
rev.revealChild = false;
}
}]],
// Connections
toggleButton.connect('toggled', () => {
const rev = toggleButton.get_parent().get_parent().get_parent().children[1];
if (toggleButton.get_active()) {
toggleButton.get_children()[0]
.setCss('-gtk-icon-transform: rotate(0deg);');
rev.revealChild = true;
}
else {
toggleButton.get_children()[0]
.setCss('-gtk-icon-transform: rotate(180deg);');
rev.revealChild = false;
}
});
widget.add(toggleButton);
return widget;
};
child: Icon({
icon: App.configDir + '/icons/down-large.svg',
className: 'arrow',
css: '-gtk-icon-transform: rotate(180deg);',
}),
}),
});