feat(ags): add start of traybuttons
This commit is contained in:
parent
d0c75b76df
commit
b46125b5c6
4 changed files with 139 additions and 0 deletions
|
@ -1,5 +1,6 @@
|
|||
import { execAsync, writeFile } from 'resource:///com/github/Aylur/ags/utils.js';
|
||||
import { Powermenu } from 'file:///home/matt/.nix/config/ags/powermenu/powermenu.js';
|
||||
import { LeftBar } from 'file:///home/matt/.nix/config/ags/traybuttons/traybuttons.js';
|
||||
import { Closer } from 'file:///home/matt/.nix/config/ags/closer/closer.js';
|
||||
|
||||
const scss = ags.App.configDir + '/style.scss';
|
||||
|
@ -12,6 +13,7 @@ export default {
|
|||
style: css,
|
||||
windows: [
|
||||
Powermenu,
|
||||
LeftBar,
|
||||
Closer,
|
||||
]
|
||||
}
|
||||
|
|
|
@ -4,3 +4,4 @@
|
|||
|
||||
@import "/home/matt/.nix/config/ags/colors.scss";
|
||||
@import "/home/matt/.nix/config/ags/powermenu/powermenu.scss";
|
||||
@import "/home/matt/.nix/config/ags/traybuttons/traybuttons.scss";
|
||||
|
|
60
config/ags/traybuttons/traybuttons.js
Normal file
60
config/ags/traybuttons/traybuttons.js
Normal file
|
@ -0,0 +1,60 @@
|
|||
const OskToggle = ags.Widget.EventBox({
|
||||
className: 'toggle-off',
|
||||
onPrimaryClickRelease: function() {
|
||||
OskToggle.toggleClassName('toggle-on', true);
|
||||
},
|
||||
|
||||
child: ags.Widget.Box({
|
||||
className: 'osk-toggle',
|
||||
vertical: false,
|
||||
|
||||
child: ags.Widget.Label({
|
||||
label: " ",
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const LeftBar = ags.Widget.Window({
|
||||
name: 'left-bar',
|
||||
layer: 'overlay',
|
||||
anchor: 'top left',
|
||||
|
||||
child: ags.Widget.Box({
|
||||
className: 'transparent',
|
||||
vertical: false,
|
||||
|
||||
children: [
|
||||
|
||||
OskToggle,
|
||||
|
||||
ags.Widget.EventBox({
|
||||
className: '',
|
||||
onPrimaryClickRelease: '',
|
||||
|
||||
child: ags.Widget.Box({
|
||||
className: 'tablet-toggle',
|
||||
vertical: false,
|
||||
|
||||
child: ags.Widget.Label({
|
||||
label: " ",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
|
||||
ags.Widget.EventBox({
|
||||
className: '',
|
||||
onPrimaryClickRelease: '',
|
||||
|
||||
child: ags.Widget.Box({
|
||||
className: 'heart-toggle',
|
||||
vertical: false,
|
||||
|
||||
child: ags.Widget.Label({
|
||||
label: '',
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
|
||||
],
|
||||
}),
|
||||
});
|
76
config/ags/traybuttons/traybuttons.scss
Normal file
76
config/ags/traybuttons/traybuttons.scss
Normal file
|
@ -0,0 +1,76 @@
|
|||
.osk-toggle {
|
||||
font-size: 28px;
|
||||
min-height: 40px;
|
||||
min-width: 50px;
|
||||
padding: 0px 0px 0px 5px;
|
||||
}
|
||||
|
||||
.tablet-toggle {
|
||||
font-size: 28px;
|
||||
min-height: 40px;
|
||||
min-width: 50px;
|
||||
padding: 0px 0px 0px 5px;
|
||||
}
|
||||
|
||||
.heart-toggle {
|
||||
font-size: 28px;
|
||||
min-height: 40px;
|
||||
min-width: 50px;
|
||||
padding: 0px 0px 0px 4px;
|
||||
}
|
||||
|
||||
.notif-panel {
|
||||
font-size: 20px;
|
||||
border-radius: 80px;
|
||||
min-height: 37px;
|
||||
min-width: 105px;
|
||||
padding: 1px 0px 1px 5px;
|
||||
|
||||
.toggle-on {
|
||||
border-top-left-radius: 22px;
|
||||
border-top-right-radius: 22px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom: 0px solid $bg;
|
||||
}
|
||||
}
|
||||
|
||||
.filler {
|
||||
border-left: 2px solid $contrastbg;
|
||||
border-right: 2px solid $contrastbg;
|
||||
min-height: 14px;
|
||||
min-width: 105px;
|
||||
background-color: $bg;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.quick-settings-toggle {
|
||||
font-size: 24px;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
background-color: $bg;
|
||||
color: #CBA6F7;
|
||||
border-radius: 80px;
|
||||
border: 2px solid #1b1b2b;
|
||||
transition: background-color 0.5s ease-in-out,
|
||||
border 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
background-color: $bg;
|
||||
color: #CBA6F7;
|
||||
border-radius: 80px;
|
||||
border: 2px solid $contrastbg;
|
||||
transition: background-color 0.5s ease-in-out,
|
||||
border 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.toggle-on:hover, .toggle-off:hover {
|
||||
background-color: rgba(127, 132, 156, 0.4);
|
||||
transition: background-color 0.5s ease-in-out,
|
||||
border 0.5s ease-in-out;
|
||||
}
|
Loading…
Reference in a new issue