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

bar: utils buttons, new battery indicator

Browse Source
This commit is contained in:
end-4
2023-12-31 01:01:05 +07:00
parent 7d4374d52b
commit 6a42af63ca
14 changed files with 351 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/config.js
+3 -3
View File
@@ -5,7 +5,7 @@ import { App, Utils } from './imports.js';
import Bar from './widgets/bar/main.js';
import Cheatsheet from './widgets/cheatsheet/main.js';
// import DesktopBackground from './widgets/desktopbackground/main.js';
import Dock from './widgets/dock/main.js';
// import Dock from './widgets/dock/main.js';
import { CornerTopleft, CornerTopright, CornerBottomleft, CornerBottomright } from './widgets/screencorners/main.js';
import Indicator from './widgets/indicators/main.js';
import Osk from './widgets/onscreenkeyboard/main.js';
@@ -16,7 +16,7 @@ import SideRight from './widgets/sideright/main.js';
const CLOSE_ANIM_TIME = 210; // Longer than actual anim time (see styles) to make sure widgets animate fully
// Init cache and check first run
// Init cache
Utils.exec(`bash -c 'mkdir -p ~/.cache/ags/user/colorschemes'`);
// SCSS compilation
Utils.exec(`bash -c 'echo "" > ${App.configDir}/scss/_musicwal.scss'`); // reset music styles
@@ -44,7 +44,7 @@ export default {
CornerBottomleft(),
CornerBottomright(),
// DesktopBackground(),
Dock(), // Buggy
// Dock(), // Buggy
Overview(),
Indicator(),
Cheatsheet(),
.config/ags/scripts/templates/hypr/colors.conf
+2 -1
View File
@@ -1,4 +1,5 @@
# Auto generated color theme for image at: [Local wallpaper]
$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}22 -s 00000000)"
general {
col.active_border = rgba({{ $onPrimary }}FF)
col.inactive_border = rgba({{ $secondaryContainer }}CC)
.config/ags/scss/_bar.scss
+49 -30
View File
@@ -4,6 +4,10 @@
$black: black;
$white: white;
$bar_ws_width: 1.774rem;
$bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
@if $darkmode ==true {
$bar_subgroup_bg: $surfaceVariant;
}
@mixin bar-group-rounding {
@include small-rounding;
@@ -33,6 +37,7 @@ $bar_ws_width: 1.774rem;
.bar-group-pad {
// padding: 0rem 1.023rem;
padding: 0.205rem;
// padding-left: 0.341rem;
}
.bar-group-pad-less {
@@ -41,7 +46,7 @@ $bar_ws_width: 1.774rem;
.bar-group-pad-system {
padding-left: 1.023rem;
padding-right: 0.547rem;
padding-right: 0.341rem;
}
.bar-group-pad-music {
@@ -114,10 +119,7 @@ $bar_ws_width: 1.774rem;
}
.bar-ws-occupied {
background-color: mix($surfaceVariant, $primary, 89%);
@if $darkmode ==true {
background-color: $surfaceVariant;
}
background-color: $bar_subgroup_bg;
color: $onSurfaceVariant;
}
@@ -132,7 +134,6 @@ $bar_ws_width: 1.774rem;
.bar-clock {
@include titlefont;
font-size: 1.2727rem;
color: $onBackground;
}
.bar-date {
@@ -143,10 +144,11 @@ $bar_ws_width: 1.774rem;
.bar-batt {
@include full-rounding;
padding: 0rem 0.341rem;
background-color: $t_secondaryContainer;
color: $t_onSecondaryContainer;
// border: 0.068rem solid $outline;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.bar-sidemodule {
@@ -163,12 +165,29 @@ $bar_ws_width: 1.774rem;
color: $onSuccessContainer;
}
.bar-batt-prog-low {
.bar-batt-circprog {
@include fluent_decel_long;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.bar-batt-circprog-low {
@include fluent_decel_long;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $error;
color: $errorContainer;
}
.bar-batt-prog-full {
.bar-batt-circprog-full {
@include fluent_decel_long;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $successContainer;
color: $onSuccessContainer;
}
@@ -304,30 +323,14 @@ $bar_ws_width: 1.774rem;
border-radius: 10rem;
min-width: 0.681rem;
min-height: 0.681rem;
background-color: $t_onSecondaryContainer;
color: $secondaryContainer;
background-color: $onSurfaceVariant;
}
.bar-batt-chargestate-charging-smaller {
border-radius: 10rem;
min-width: 0.409rem;
min-height: 0.409rem;
background-color: $t_onSecondaryContainer;
color: $secondaryContainer;
}
.bar-batt-chargestate-low {
background-color: $errorContainer;
}
.bar-batt-chargestate-full {
background-color: $onSuccessContainer;
}
.bar-batt-percentage {
font-size: 1rem;
margin-top: -0.068rem;
font-weight: 500;
background-color: $onSurfaceVariant;
}
.corner {
@@ -400,3 +403,19 @@ $bar_ws_width: 1.774rem;
.bar-statusicons-active {
background-color: mix($t_background, $t_onBackground, 80%);
}
.bar-util-btn {
@include full-rounding;
min-height: 1.77rem;
min-width: 1.77rem;
background-color: $bar_subgroup_bg;
}
.bar-util-btn:hover,
.bar-util-btn:focus {
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
}
.bar-util-btn:active {
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
}
.config/ags/scss/_colors.scss
+58 -17
View File
@@ -16,7 +16,7 @@ $transparency_enabled: false;
@if $darkmode ==false {
$background: mix($background, $primary, 87%);
$surface: mix($surface, $primary, 93%);
$surfaceVariant: mix($surfaceVariant, #FFFFFF, 25%);
$surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
}
}
@@ -30,7 +30,7 @@ $transparency_enabled: false;
@if $darkmode ==false {
$background: mix($background, $primary, 94%);
$surface: mix($surface, $primary, 93%);
$surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
$surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
}
}
@@ -40,7 +40,8 @@ $transparentize_surface_amount_less: 0.6;
$transparentize_surface_amount_less_less: 0.55;
$transparentize_surface_amount: 0.7;
$transparentize_surface_amount_more: 0.8;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
$transparentize_amount;
@if $darkmode ==true {
// Less transparency
@@ -49,7 +50,8 @@ $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount
$transparentize_surface_amount_less_less: 0.55;
$transparentize_surface_amount: 0.69;
$transparentize_surface_amount_more: 0.9;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
$transparentize_amount;
}
@if $transparency_enabled ==false {
@@ -74,33 +76,69 @@ $onSuccessContainer: #0c1f13;
$t_primary: transparentize($primary, $transparentize_amount);
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
$t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
$t_onPrimaryContainer: transparentize(
$onPrimaryContainer,
$transparentize_amount
);
$t_secondary: transparentize($secondary, $transparentize_amount);
$t_onSecondary: transparentize($onSecondary, $transparentize_amount);
$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
$t_secondaryContainer: transparentize(
$secondaryContainer,
$transparentize_amount
);
$l_t_secondaryContainer: transparentize(
$secondaryContainer,
$transparentize_surface_amount_less
);
$t_onSecondaryContainer: transparentize(
$onSecondaryContainer,
$transparentize_amount
);
$t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
$t_tertiary: transparentize($tertiary, $transparentize_amount);
$t_onTertiary: transparentize($onTertiary, $transparentize_amount);
$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
$t_tertiaryContainer: transparentize(
$tertiaryContainer,
$transparentize_amount
);
$t_onTertiaryContainer: transparentize(
$onTertiaryContainer,
$transparentize_amount
);
$t_error: transparentize($error, $transparentize_amount);
$t_onError: transparentize($onError, $transparentize_amount);
$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
$t_background: transparentize($background, $transparentize_amount);
$t_t_background: transparentize($background, $transparentize_surface_amount_more);
$t_t_background: transparentize(
$background,
$transparentize_surface_amount_more
);
$t_onBackground: transparentize($onBackground, $transparentize_amount);
$t_surface: transparentize($surface, $transparentize_surface_amount);
$t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
$t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
$t_surfaceVariant: transparentize(
$surfaceVariant,
$transparentize_surface_amount
);
$t_onSurfaceVariant: transparentize(
$onSurfaceVariant,
$transparentize_surface_amount
);
$t_t_surfaceVariant: transparentize(
$surfaceVariant,
$transparentize_surface_amount_more
);
$l_t_surfaceVariant: transparentize(
$surfaceVariant,
$transparentize_surface_amount_less
);
$l_l_t_surfaceVariant: transparentize(
$surfaceVariant,
$transparentize_surface_amount_less_less
);
$t_outline: transparentize($outline, $transparentize_amount);
$t_shadow: transparentize($shadow, $transparentize_amount);
$t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
@@ -110,7 +148,10 @@ $t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
$t_success: transparentize($error, $transparentize_amount);
$t_onSuccess: transparentize($onError, $transparentize_amount);
$t_successContainer: transparentize($errorContainer, $transparentize_amount);
$t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount);
$t_onSuccessContainer: transparentize(
$onErrorContainer,
$transparentize_amount
);
// Others
$hovercolor: mix($t_surface, $t_onSurface, 50%);
.config/ags/scss/_lib_classes.scss
+32 -28
View File
@@ -69,6 +69,10 @@
color: $onSecondaryContainer;
}
.txt-onSurfaceVariant {
color: $onSurfaceVariant;
}
.txt-shadow {
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
margin: 10px;
@@ -433,43 +437,43 @@
margin-right: 0rem;
}
.spacing-v--5>box {
.spacing-v--5>* {
margin-bottom: -0.341rem;
}
.spacing-v--5>box:last-child {
.spacing-v--5>*:last-child {
margin-bottom: 0rem;
}
.spacing-v--5>label {
margin-bottom: -0.341rem;
}
.spacing-v--5>label:last-child {
margin-bottom: 0rem;
}
.spacing-v--10>box {
margin-bottom: -0.682rem;
}
.spacing-v--10>box:last-child {
margin-bottom: 0rem;
}
.spacing-v--10>label {
margin-bottom: -0.682rem;
}
.spacing-v--10>label:last-child {
margin-bottom: 0rem;
}
.spacing-h--20>box {
.spacing-h--10>* {
margin-left: -1.364rem;
}
.spacing-h--20>box:first-child {
.spacing-h--10>*:first-child {
margin-left: 0rem;
}
.spacing-v--10>* {
margin-bottom: -0.682rem;
}
.spacing-v--10>*:last-child {
margin-bottom: 0rem;
}
.spacing-v--10>* {
margin-bottom: -0.682rem;
}
.spacing-v--10>*:last-child {
margin-bottom: 0rem;
}
.spacing-h--20>* {
margin-left: -1.364rem;
}
.spacing-h--20>*:first-child {
margin-left: 0rem;
}
.config/ags/scss/_musicmaterial.scss
-1
View File
@@ -1 +0,0 @@
.config/ags/scss/_osd.scss
-1
View File
@@ -14,7 +14,6 @@
border-radius: 1.023rem;
padding: 0.625rem 1.023rem;
padding-top: 0.313rem;
margin: 10px;
}
.osd-progress {
.config/ags/style.css
+65 -46
View File
@@ -49,6 +49,9 @@
.txt-onSecondaryContainer {
color: #f8daee; }
.txt-onSurfaceVariant {
color: #d1c2cb; }
.txt-shadow {
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
margin: 10px; }
@@ -324,34 +327,34 @@
.spacing-h--5 > box:last-child {
margin-right: 0rem; }
.spacing-v--5 > box {
.spacing-v--5 > * {
margin-bottom: -0.341rem; }
.spacing-v--5 > box:last-child {
.spacing-v--5 > *:last-child {
margin-bottom: 0rem; }
.spacing-v--5 > label {
margin-bottom: -0.341rem; }
.spacing-v--5 > label:last-child {
margin-bottom: 0rem; }
.spacing-v--10 > box {
margin-bottom: -0.682rem; }
.spacing-v--10 > box:last-child {
margin-bottom: 0rem; }
.spacing-v--10 > label {
margin-bottom: -0.682rem; }
.spacing-v--10 > label:last-child {
margin-bottom: 0rem; }
.spacing-h--20 > box {
.spacing-h--10 > * {
margin-left: -1.364rem; }
.spacing-h--20 > box:first-child {
.spacing-h--10 > *:first-child {
margin-left: 0rem; }
.spacing-v--10 > * {
margin-bottom: -0.682rem; }
.spacing-v--10 > *:last-child {
margin-bottom: 0rem; }
.spacing-v--10 > * {
margin-bottom: -0.682rem; }
.spacing-v--10 > *:last-child {
margin-bottom: 0rem; }
.spacing-h--20 > * {
margin-left: -1.364rem; }
.spacing-h--20 > *:first-child {
margin-left: 0rem; }
.instant {
@@ -547,7 +550,7 @@ tooltip {
.bar-group-pad-system {
padding-left: 1.023rem;
padding-right: 0.547rem; }
padding-right: 0.341rem; }
.bar-group-pad-music {
padding-right: 1.023rem;
@@ -605,7 +608,6 @@ tooltip {
color: #f8daee; }
.bar-ws-occupied {
background-color: #51434d;
background-color: #3b3338;
color: #d1c2cb; }
@@ -619,8 +621,7 @@ tooltip {
.bar-clock {
font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
font-size: 1.2727rem;
color: #eae0e4; }
font-size: 1.2727rem; }
.bar-date {
font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
@@ -630,7 +631,9 @@ tooltip {
.bar-batt {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
padding: 0rem 0.341rem;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: #554050;
color: #f8daee; }
@@ -645,11 +648,27 @@ tooltip {
background-color: #374b3e;
color: #d1e9d6; }
.bar-batt-prog-low {
.bar-batt-circprog {
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
min-width: 0.068rem;
min-height: 1.636rem;
padding: 0rem;
background-color: #554050;
color: #f8daee; }
.bar-batt-circprog-low {
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
min-width: 0.068rem;
min-height: 1.636rem;
padding: 0rem;
background-color: #ffb4a9;
color: #930006; }
.bar-batt-prog-full {
.bar-batt-circprog-full {
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
min-width: 0.068rem;
min-height: 1.636rem;
padding: 0rem;
background-color: #374b3e;
color: #d1e9d6; }
@@ -757,26 +776,13 @@ tooltip {
border-radius: 10rem;
min-width: 0.681rem;
min-height: 0.681rem;
background-color: #f8daee;
color: #554050; }
background-color: #d1c2cb; }
.bar-batt-chargestate-charging-smaller {
border-radius: 10rem;
min-width: 0.409rem;
min-height: 0.409rem;
background-color: #f8daee;
color: #554050; }
.bar-batt-chargestate-low {
background-color: #930006; }
.bar-batt-chargestate-full {
background-color: #d1e9d6; }
.bar-batt-percentage {
font-size: 1rem;
margin-top: -0.068rem;
font-weight: 500; }
background-color: #d1c2cb; }
.corner {
background-color: #100d10;
@@ -839,6 +845,20 @@ tooltip {
.bar-statusicons-active {
background-color: #3c373a; }
.bar-util-btn {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
min-height: 1.77rem;
min-width: 1.77rem;
background-color: #3b3338; }
.bar-util-btn:hover,
.bar-util-btn:focus {
background-color: #4a4147; }
.bar-util-btn:active {
background-color: #595055; }
.cheatsheet-bg {
border-radius: 1.705rem;
-gtk-outline-radius: 1.705rem;
@@ -1002,8 +1022,7 @@ tooltip {
background-color: #100d10;
border-radius: 1.023rem;
padding: 0.625rem 1.023rem;
padding-top: 0.313rem;
margin: 10px; }
padding-top: 0.313rem; }
.osd-progress {
min-height: 0.955rem;
.config/ags/widgets/bar/music.js
+2 -2
View File
@@ -9,7 +9,7 @@ const TrackProgress = () => {
const _updateProgress = (circprog) => {
const mpris = Mpris.getPlayer('');
if (!mpris) return;
// Set circular progress (font size cuz that's how this hacky circprog works)
// Set circular progress value
circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
}
return AnimatedCircProg({
@@ -65,7 +65,7 @@ export const ModuleMusic = () => Widget.EventBox({
Widget.Scrollable({
hexpand: true,
child: Widget.Label({
className: 'txt txt-smallie',
className: 'txt-smallie txt-onSurfaceVariant',
connections: [[Mpris, label => {
const mpris = Mpris.getPlayer('');
if (mpris)
.config/ags/widgets/bar/system.js
+123 -99
View File
@@ -1,16 +1,34 @@
// This is for the right pill of the bar.
// For the cool memory indicator on the sidebar, see sysinfo.js
import { Service, Utils, Widget } from '../../imports.js';
const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
const { exec, execAsync } = Utils;
const { GLib } = imports.gi;
import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
import { MaterialIcon } from '../../lib/materialicon.js';
import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
const BATTERY_LOW = 20;
const BatBatteryProgress = () => {
const _updateProgress = (circprog) => { // Set circular progress value
circprog.css = `font-size: ${Battery.percent}px;`
circprog.toggleClassName('bar-batt-circprog-low', Battery.percent <= BATTERY_LOW);
circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
}
return AnimatedCircProg({
className: 'bar-batt-circprog',
vpack: 'center', hpack: 'center',
connections: [
[Battery, _updateProgress],
],
})
}
const BarClock = () => Widget.Box({
vpack: 'center',
className: 'spacing-h-5',
className: 'spacing-h-5 txt-onSurfaceVariant',
children: [
Widget.Label({
className: 'bar-clock',
@@ -20,11 +38,11 @@ const BarClock = () => Widget.Box({
}),
}),
Widget.Label({
className: 'txt-norm txt',
className: 'txt-norm',
label: '•',
}),
Widget.Label({
className: 'txt-smallie txt',
className: 'txt-smallie',
label: GLib.DateTime.new_now_local().format("%A, %d/%m"),
setup: (self) => self.poll(5000, label => {
label.label = GLib.DateTime.new_now_local().format("%A, %d/%m");
@@ -33,105 +51,110 @@ const BarClock = () => Widget.Box({
],
});
const BarBattery = () => {
const BarResourceValue = (name, icon, command) => Widget.Box({
vpack: 'center',
className: 'bar-batt spacing-h-5',
children: [
MaterialIcon(icon, 'small'),
Widget.ProgressBar({ // Progress
vpack: 'center', hexpand: true,
className: 'bar-prog-batt',
setup: (self) => self.poll(5000, (progress) => execAsync(['bash', '-c', command])
.then((output) => {
progress.value = Number(output) / 100;
progress.tooltipText = `${name}: ${Number(output)}%`
})
.catch(print)
),
}),
]
});
const batteryWidget = Widget.Box({
vpack: 'center',
hexpand: true,
className: 'spacing-h-5 bar-batt',
setup: (self) => self.hook(Battery, box => {
box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
box.toggleClassName('bar-batt-full', Battery.charged);
}),
children: [
MaterialIcon('settings_heart', 'small'),
Widget.Label({ // Percentage
className: 'bar-batt-percentage',
setup: (self) => self.hook(Battery, label => {
label.label = `${Battery.percent}`;
}),
}),
Widget.ProgressBar({ // Progress
vpack: 'center',
hexpand: true,
className: 'bar-prog-batt',
setup: (self) => self.hook(Battery, progress => {
progress.value = Math.abs(Battery.percent / 100); // battery could be initially negative wtf
progress.toggleClassName('bar-prog-batt-low', Battery.percent <= BATTERY_LOW);
progress.toggleClassName('bar-prog-batt-full', Battery.charged);
batteryWidget.tooltipText = `Battery: ${Battery.percent}%`
}),
}),
Widget.Revealer({ // A dot for charging state
transitionDuration: 150,
revealChild: false,
transition: 'slide_left',
child: Widget.Box({
className: 'spacing-h-3',
children: [
Widget.Box({
vpack: 'center',
className: 'bar-batt-chargestate-charging-smaller',
setup: (self) => self.hook(Battery, box => {
box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
}),
}),
Widget.Box({
vpack: 'center',
className: 'bar-batt-chargestate-charging',
setup: (self) => self.hook(Battery, box => {
box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
}),
}),
]
}),
setup: (self) => self.hook(Battery, revealer => {
revealer.revealChild = Battery.charging;
}),
}),
],
});
const memUsage = Widget.Box({
const UtilButton = ({ name, icon, onClicked }) => Button({
vpack: 'center',
tooltipText: name,
onClicked: onClicked,
className: 'bar-util-btn icon-material txt-norm',
label: `${icon}`,
})
const Utilities = () => Scrollable({
hexpand: true,
child: Box({
hpack: 'center',
className: 'spacing-h-5',
children: [
BarResourceValue('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
BarResourceValue('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
UtilButton({
name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
.catch(print)
}
}),
UtilButton({
name: 'Color picker', icon: 'colorize', onClicked: () => {
Utils.execAsync(['hyprpicker', '-a']).catch(print)
}
}),
UtilButton({
name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
App.toggleWindow('osk');
}
}),
]
})
const widgetStack = Widget.Stack({
transition: 'slide_up_down',
vpack: 'center',
hexpand: true,
items: [
['fallback', memUsage],
['battery', batteryWidget],
],
setup: (stack) => Utils.timeout(1, () => { // On desktops systems with no battery, show memory usage instead
if (Battery.available) stack.shown = 'battery';
else stack.shown = 'fallback';
})
})
return widgetStack;
}
})
const BarBattery = () => Box({
className: 'spacing-h-4 txt-onSurfaceVariant',
children: [
// Revealer({ // A dot for charging state
// transitionDuration: 150,
// revealChild: false,
// transition: 'crossfade',
// child: Widget.Box({
// className: 'spacing-h-3',
// children: [
// Widget.Box({
// vpack: 'center',
// className: 'bar-batt-chargestate-charging-smaller',
// setup: (self) => self.hook(Battery, box => {
// box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
// box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
// }),
// }),
// Widget.Box({
// vpack: 'center',
// className: 'bar-batt-chargestate-charging',
// setup: (self) => self.hook(Battery, box => {
// box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
// box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
// }),
// }),
// ]
// }),
// setup: (self) => self.hook(Battery, revealer => {
// revealer.revealChild = Battery.charging;
// }),
// }),
Stack({
transition: 'slide_up_down',
items: [
['discharging', Widget.Label({
className: 'txt-norm txt',
label: '•',
}),],
['charging', MaterialIcon('bolt', 'norm')],
],
setup: (self) => self.hook(Battery, revealer => {
self.shown = Battery.charging ? 'charging' : 'discharging';
}),
}),
Label({
className: 'txt-smallie txt-onSurfaceVariant',
setup: (self) => self.hook(Battery, label => {
label.label = `${Battery.percent}%`;
}),
}),
Overlay({
child: Widget.Box({
vpack: 'center',
className: 'bar-batt',
homogeneous: true,
children: [
MaterialIcon('settings_heart', 'small'),
],
setup: (self) => self.hook(Battery, box => {
box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
box.toggleClassName('bar-batt-full', Battery.charged);
}),
}),
overlays: [
BatBatteryProgress(),
]
}),
]
});
export const ModuleSystem = () => Widget.EventBox({
onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
@@ -141,9 +164,10 @@ export const ModuleSystem = () => Widget.EventBox({
className: 'bar-group-margin bar-sides',
children: [
Widget.Box({
className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-15',
className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5',
children: [
BarClock(),
Utilities(),
BarBattery(),
],
}),
.config/ags/widgets/bar/workspaces.js
+7 -3
View File
@@ -66,6 +66,7 @@ const WorkspaceContents = (count = 10) => {
const layout = PangoCairo.create_layout(cr);
const fontDesc = Pango.font_description_from_string(`${workspaceFontFamily[0]} ${workspaceFontSize}`);
layout.set_font_description(fontDesc);
cr.setAntialias(Cairo.Antialias.BEST);
// Get kinda min radius for number indicators
layout.set_text("0".repeat(count.toString().length), -1);
const [layoutWidth, layoutHeight] = layout.get_pixel_size();
@@ -84,7 +85,7 @@ const WorkspaceContents = (count = 10) => {
cr.fill();
}
else {
cr.rectangle(wsCenterX - workspaceRadius , wsCenterY - workspaceRadius, workspaceRadius , workspaceRadius * 2)
cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
cr.fill();
}
if (!(area._workspaceMask & (1 << (i + 1)))) { // Right
@@ -92,7 +93,7 @@ const WorkspaceContents = (count = 10) => {
cr.fill();
}
else {
cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius , workspaceRadius * 2)
cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
cr.fill();
}
@@ -118,7 +119,7 @@ const WorkspaceContents = (count = 10) => {
cr.fill();
// inner decor
cr.setSourceRGBA(activefg.red, activefg.green, activefg.blue, activefg.alpha);
cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.19, 0, 2 * Math.PI);
cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.2, 0, 2 * Math.PI);
cr.fill();
}))
,
@@ -148,12 +149,15 @@ export default () => EventBox({
self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
self.on('motion-notify-event', (self, event) => {
if (!self._clicked) return;
console.log('switching move');
const [_, cursorX, cursorY] = event.get_coords();
const widgetWidth = self.get_allocation().width;
const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
Hyprland.sendMessage(`dispatch workspace ${wsId}`)
})
self.on('button-press-event', (self, event) => {
if (!(event.get_button()[1] === 1)) return; // We're only interested in left-click here
console.log('switching');
self._clicked = true;
const [_, cursorX, cursorY] = event.get_coords();
const widgetWidth = self.get_allocation().width;
.config/ags/widgets/desktopbackground/timeandlaunches.js
+1 -1
View File
@@ -62,7 +62,7 @@ export default () => Box({
hpack: 'start',
vpack: 'end',
vertical: true,
className: 'bg-time-box spacing-v-20',
className: 'bg-time-box spacing-h--10',
children: [
TimeAndDate(),
// QuickLaunches(),
.config/ags/widgets/indicators/indicatorvalues.js
+1
View File
@@ -70,6 +70,7 @@ export default () => MarginRevealer({
child: Box({
hpack: 'center',
vertical: false,
className: 'spacing-h--10',
children: [
brightnessIndicator,
volumeIndicator,
.config/ags/widgets/sideright/quicktoggles.js
+8 -12
View File
@@ -78,20 +78,16 @@ export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make th
onClicked: (self) => {
self._enabled = !self._enabled;
self.toggleClassName('sidebar-button-active', self._enabled);
if (self._enabled) {
self._inhibitor = Utils.subprocess(
['wlsunset'],
(output) => print(output),
(err) => logError(err),
self,
);
}
else {
self._inhibitor.force_exit();
}
// if (self._enabled) Utils.execAsync(['bash', '-c', 'wlsunset & disown'])
if (self._enabled) Utils.execAsync('wlsunset')
else Utils.execAsync('pkill wlsunset');
},
child: MaterialIcon('nightlight', 'norm'),
setup: setupCursorHover,
setup: (self) => {
setupCursorHover(self);
self._enabled = !!exec('pidof wlsunset');
self.toggleClassName('sidebar-button-active', self._enabled);
},
...props,
});