feat(ags): start doing quick-settings menu

This commit is contained in:
matt1432 2023-09-12 14:22:21 -04:00
parent bc709eb5f5
commit 45ddea2a96
9 changed files with 556 additions and 3 deletions

View file

@ -1,8 +1,6 @@
#!/usr/bin/env bash #!/usr/bin/env bash
on () { on () {
eww open closer &&
eww open quick-settings-reveal; eww open quick-settings-reveal;
eww update showqs=true; eww update showqs=true;
} }

View file

@ -1,10 +1,11 @@
import { exec } from 'resource:///com/github/Aylur/ags/utils.js'; import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
import { Powermenu } from './js/powermenu.js'; import { Powermenu } from './js/powermenu.js';
import { Bar } from './js/bar/bar.js'; import { Bar } from './js/bar/main.js';
import { NotificationCenter } from './js/notifications/center.js'; import { NotificationCenter } from './js/notifications/center.js';
import { NotificationsPopupList } from './js/notifications/popup.js' import { NotificationsPopupList } from './js/notifications/popup.js'
import { Closer } from './js/misc/closer.js'; import { Closer } from './js/misc/closer.js';
import { Calendar } from './js/date.js'; import { Calendar } from './js/date.js';
import { QuickSettings } from './js/quick-settings/main.js'
const scss = ags.App.configDir + '/scss/main.scss'; const scss = ags.App.configDir + '/scss/main.scss';
const css = ags.App.configDir + '/style.css'; const css = ags.App.configDir + '/style.css';
@ -22,5 +23,6 @@ export default {
NotificationCenter, NotificationCenter,
NotificationsPopupList, NotificationsPopupList,
Calendar, Calendar,
QuickSettings,
], ],
}; };

View file

@ -0,0 +1,211 @@
const { Box, CenterBox, Label, Icon } = ags.Widget;
const { Network, Bluetooth, Audio } = ags.Service;
const { exec } = ags.Utils;
import { EventBox } from '../misc/cursorbox.js';
const GridButton = ({ command = () => {}, secondaryCommand = () => {}, icon } = {}) => Box({
className: 'grid-button',
children: [
EventBox({
className: 'left-part',
onPrimaryClickRelease: () => command(),
child: icon,
}),
EventBox({
className: 'right-part',
onPrimaryClickRelease: () => secondaryCommand(),
child: Label({
label: " ",
className: 'grid-chev',
}),
}),
],
});
const FirstRow = Box({
className: 'button-row',
halign: 'center',
style: 'margin-top: 15px; margin-bottom: 7px;',
children: [
GridButton({
command: () => Network.toggleWifi(),
secondaryCommand: () => exec("bash -c 'nm-connection-editor &'"),
icon: Icon({
className: 'grid-label',
connections: [[Network, icon => {
if (Network.wifi.enabled) {
icon.icon = 'network-wireless-connected-symbolic';
}
else {
icon.icon = 'network-wireless-offline-symbolic';
}
}, 'changed']],
}),
}),
GridButton({
command: () => exec("bash -c '$EWW_PATH/bluetooth.sh toggle'"),
secondaryCommand: () => exec("bash -c 'blueberry &'"),
icon: Icon({
className: 'grid-label',
connections: [[Bluetooth, icon => {
if (Bluetooth.enabled) {
icon.icon = 'bluetooth-active-symbolic';
}
else {
icon.icon = 'bluetooth-disabled-symbolic';
}
}, 'changed']],
})
}),
GridButton({
command: () => exec('bash -c "$EWW_PATH/network.sh toggle-radio"'),
secondaryCommand: () => exec("notify-send 'set this up moron'"),
icon: Icon({
className: 'grid-label',
connections: [[Network, icon => {
if (Network.wifi.enabled) {
icon.icon = 'airplane-mode-disabled-symbolic';
}
else {
icon.icon = 'airplane-mode-symbolic';
}
}, 'changed']],
}),
}),
],
});
const SubRow = CenterBox({
halign: 'start',
children: [
Label({
className: 'sub-label',
truncate: 'end',
maxWidthChars: 12,
connections: [[Network, label => {
label.label = Network.wifi.ssid;
}, 'changed']],
}),
Label({
className: 'sub-label',
truncate: 'end',
maxWidthChars: 12,
connections: [[Bluetooth, label => {
label.label = String(Bluetooth.connectedDevices[0]);
}, 'changed']],
}),
Label({
className: '',
truncate: 'end',
maxWidthChars: 12,
/*connections: [[Network, label => {
label.label = Network.wifi.ssid;
}, 'changed']],*/
}),
],
});
const items = {
101: 'audio-volume-overamplified-symbolic',
67: 'audio-volume-high-symbolic',
34: 'audio-volume-medium-symbolic',
1: 'audio-volume-low-symbolic',
0: 'audio-volume-muted-symbolic',
};
const itemsMic = {
2: 'audio-input-microphone-high-symbolic',
1: 'audio-input-microphone-muted-symbolic',
0: 'audio-input-microphone-muted-symbolic',
};
const SecondRow = Box({
className: 'button-row',
halign: 'center',
style: 'margin-top: 7px; margin-bottom: 15px;',
children: [
GridButton({
command: () => exec("swayosd-client --output-volume mute-toggle"),
secondaryCommand: () => exec('bash -c "pavucontrol &"'),
icon: Icon({
className: 'grid-label',
connections: [[Audio, icon => {
if (Audio.speaker) {
if (Audio.speaker.isMuted) {
icon.icon = items[0];
}
else {
const vol = Audio.speaker.volume * 100;
for (const threshold of [-1, 0, 33, 66, 100]) {
if (vol > threshold + 1) {
icon.icon = items[threshold + 1];
}
}
}
}
}, 'speaker-changed']],
}),
}),
GridButton({
command: () => exec("swayosd-client --input-volume mute-toggle"),
secondaryCommand: () => exec('bash -c "pavucontrol &"'),
icon: Icon({
className: 'grid-label',
connections: [[Audio, icon => {
if (Audio.microphone) {
if (Audio.microphone.isMuted) {
icon.icon = itemsMic[0];
}
else {
const vol = Audio.microphone.volume * 100;
for (const threshold of [-1, 0, 1]) {
if (vol > threshold + 1) {
icon.icon = itemsMic[threshold + 1];
}
}
}
}
}, 'microphone-changed']],
})
}),
GridButton({
command: () => exec('bash -c "$LOCK_PATH/lock.sh &"'),
secondaryCommand: () => {
ags.App.openWindow('closer');
ags.App.openWindow('powermenu');
},
icon: Label({
className: 'grid-label',
label: " 󰌾 ",
}),
}),
],
});
export const ButtonGrid = Box({
className: 'button-grid',
vertical: true,
halign: 'center',
children: [
FirstRow,
SubRow,
SecondRow,
],
});

View file

@ -0,0 +1,38 @@
const { Window, CenterBox, Box, Label } = ags.Widget;
import { ButtonGrid } from './button-grid.js';
//import { SliderBox } from './slider-box';
//import { Player } from
export const QuickSettings = Window({
name: 'quick-settings',
layer: 'overlay',
//popup: true,
anchor: 'top right',
child: Box({
className: 'qs-container',
vertical: true,
children: [
Box({
className: 'quick-settings',
vertical: true,
children: [
Label({
label: 'Control Center',
className: 'title',
}),
ButtonGrid,
//SliderBox,
],
}),
//Player,
],
}),
});

View file

@ -10,3 +10,4 @@
@import "./widgets/notification-center.scss"; @import "./widgets/notification-center.scss";
@import "./widgets/notification.scss"; @import "./widgets/notification.scss";
@import "./widgets/date.scss"; @import "./widgets/date.scss";
@import "./widgets/quick-settings.scss";

View file

@ -0,0 +1,165 @@
.quick-settings {
font-size: 30px;
min-width: 500px;
padding: 0px 0px 0px 0px;
background-color: $bg;
border-top-right-radius: 0px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border: 2px solid $contrastbg;
}
.title {
font-size: 22px;
margin-top: 30px;
}
.grid-label {
font-size: 30px;
margin-left: 15px;
margin-right: 10px;
min-width: 50px;
}
.sub-label {
font-size: 14px;
margin-top: -10px;
margin-left: 31px;
&:nth-child(1) {
margin-left: 25px;
}
margin-bottom: 10px;
padding: 3px;
border: 2px solid $contrastbg;
border-top-right-radius: 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 20px;
min-width: 106px;
background: #1b1b1b;
}
.grid-chev {
margin-left: 0px;
font-size: 40px;
margin-right: 5px;
}
.button-grid {
font-size: 10px;
min-height: 160px;
min-width: 470px;
background-color: $bgfull;
border-top: 2px solid $contrastbg;
border-bottom: 2px solid $contrastbg;
border-radius: 15px;
margin-top: 30px;
}
.button-row {
min-height: 70px;
min-width: 450px;
margin-left: 20px;
}
.grid-button {
min-height: 65px;
min-width: 70px;
margin: 5px;
margin-left: 22px;
&:nth-child(1) {
margin-left: 5px;
}
}
.left-part {
background: #1b1b1b;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-left: 2px solid $contrastbg;
border-top: 2px solid $contrastbg;
border-bottom: 2px solid $contrastbg;
transition: all 0.5s ease-in-out;
}
.right-part {
background: #1b1b1b;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-right: 2px solid $contrastbg;
border-top: 2px solid $contrastbg;
border-bottom: 2px solid $contrastbg;
transition: all 0.5s ease-in-out;
}
.right-part:hover, .right-part:active {
color: $contrastbg;
border: 2px solid $contrastbg;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
transition: all 0.5s ease-in-out;
}
.left-part:hover, .left-part:active {
color: $contrastbg;
border: 2px solid $contrastbg;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
transition: all 0.5s ease-in-out;
}
.player {
margin-top: 6px;
min-height: 220px;
opacity: 0;
}
.slider-box {
min-height: 100px;
min-width: 470px;
background-color: $bgfull;
border-top: 2px solid $contrastbg;
border-bottom: 2px solid $contrastbg;
border-radius: 15px;
margin-top: 30px;
margin-bottom: 20px;
.slider-label {
font-size: 30px;
min-width: 30px;
}
scale {
min-height: 55px;
min-width: 400px;
margin-left: 18px;
margin-right: 20px;
highlight {
margin: 0px;
background-color: #79659f;
border-radius: 2em;
}
trough {
background-color: #363847;
border-radius: 2em;
}
slider {
margin: -4px;
min-width: 20px;
min-height: 20px;
background: #3e4153;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
transition: background-color 0.5s ease-in-out;
}
slider:hover {
background-color: #303240;
transition: background-color 0.5s ease-in-out;
}
}
}

View file

@ -454,3 +454,141 @@ calendar.highlight {
calendar:indeterminate { calendar:indeterminate {
color: #262831; } color: #262831; }
.quick-settings {
font-size: 30px;
min-width: 500px;
padding: 0px 0px 0px 0px;
background-color: rgba(40, 42, 54, 0.8);
border-top-right-radius: 0px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border: 2px solid rgba(189, 147, 249, 0.8); }
.title {
font-size: 22px;
margin-top: 30px; }
.grid-label {
font-size: 30px;
margin-left: 15px;
margin-right: 10px;
min-width: 50px; }
.sub-label {
font-size: 14px;
margin-top: -10px;
margin-left: 31px;
margin-bottom: 10px;
padding: 3px;
border: 2px solid rgba(189, 147, 249, 0.8);
border-top-right-radius: 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 20px;
min-width: 106px;
background: #1b1b1b; }
.sub-label:nth-child(1) {
margin-left: 25px; }
.grid-chev {
margin-left: 0px;
font-size: 40px;
margin-right: 5px; }
.button-grid {
font-size: 10px;
min-height: 160px;
min-width: 470px;
background-color: #282a36;
border-top: 2px solid rgba(189, 147, 249, 0.8);
border-bottom: 2px solid rgba(189, 147, 249, 0.8);
border-radius: 15px;
margin-top: 30px; }
.button-row {
min-height: 70px;
min-width: 450px;
margin-left: 20px; }
.grid-button {
min-height: 65px;
min-width: 70px;
margin: 5px;
margin-left: 22px; }
.grid-button:nth-child(1) {
margin-left: 5px; }
.left-part {
background: #1b1b1b;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-left: 2px solid rgba(189, 147, 249, 0.8);
border-top: 2px solid rgba(189, 147, 249, 0.8);
border-bottom: 2px solid rgba(189, 147, 249, 0.8);
transition: all 0.5s ease-in-out; }
.right-part {
background: #1b1b1b;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-right: 2px solid rgba(189, 147, 249, 0.8);
border-top: 2px solid rgba(189, 147, 249, 0.8);
border-bottom: 2px solid rgba(189, 147, 249, 0.8);
transition: all 0.5s ease-in-out; }
.right-part:hover, .right-part:active {
color: rgba(189, 147, 249, 0.8);
border: 2px solid rgba(189, 147, 249, 0.8);
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
transition: all 0.5s ease-in-out; }
.left-part:hover, .left-part:active {
color: rgba(189, 147, 249, 0.8);
border: 2px solid rgba(189, 147, 249, 0.8);
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
transition: all 0.5s ease-in-out; }
.player {
margin-top: 6px;
min-height: 220px;
opacity: 0; }
.slider-box {
min-height: 100px;
min-width: 470px;
background-color: #282a36;
border-top: 2px solid rgba(189, 147, 249, 0.8);
border-bottom: 2px solid rgba(189, 147, 249, 0.8);
border-radius: 15px;
margin-top: 30px;
margin-bottom: 20px; }
.slider-box .slider-label {
font-size: 30px;
min-width: 30px; }
.slider-box scale {
min-height: 55px;
min-width: 400px;
margin-left: 18px;
margin-right: 20px; }
.slider-box scale highlight {
margin: 0px;
background-color: #79659f;
border-radius: 2em; }
.slider-box scale trough {
background-color: #363847;
border-radius: 2em; }
.slider-box scale slider {
margin: -4px;
min-width: 20px;
min-height: 20px;
background: #3e4153;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
transition: background-color 0.5s ease-in-out; }
.slider-box scale slider:hover {
background-color: #303240;
transition: background-color 0.5s ease-in-out; }