From 6a42af63ca4c2192d5f97cd1999b285dea9cde94 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 31 Dec 2023 01:01:05 +0700 Subject: [PATCH] bar: utils buttons, new battery indicator --- .config/ags/config.js | 6 +- .../ags/scripts/templates/hypr/colors.conf | 3 +- .config/ags/scss/_bar.scss | 79 ++++--- .config/ags/scss/_colors.scss | 75 ++++-- .config/ags/scss/_lib_classes.scss | 60 ++--- .config/ags/scss/_musicmaterial.scss | 1 - .config/ags/scss/_osd.scss | 1 - .config/ags/style.css | 111 +++++---- .config/ags/widgets/bar/music.js | 4 +- .config/ags/widgets/bar/system.js | 222 ++++++++++-------- .config/ags/widgets/bar/workspaces.js | 10 +- .../desktopbackground/timeandlaunches.js | 2 +- .../ags/widgets/indicators/indicatorvalues.js | 1 + .config/ags/widgets/sideright/quicktoggles.js | 20 +- 14 files changed, 351 insertions(+), 244 deletions(-) diff --git a/.config/ags/config.js b/.config/ags/config.js index 74ebdae56..25df63fbc 100644 --- a/.config/ags/config.js +++ b/.config/ags/config.js @@ -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(), diff --git a/.config/ags/scripts/templates/hypr/colors.conf b/.config/ags/scripts/templates/hypr/colors.conf index 6a9ec6051..f62ab7a71 100755 --- a/.config/ags/scripts/templates/hypr/colors.conf +++ b/.config/ags/scripts/templates/hypr/colors.conf @@ -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) diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index d0e2a7892..dfde74374 100644 --- a/.config/ags/scss/_bar.scss +++ b/.config/ags/scss/_bar.scss @@ -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%); +} \ No newline at end of file diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index ffe3c4ad9..6aa9424f3 100755 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -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%); diff --git a/.config/ags/scss/_lib_classes.scss b/.config/ags/scss/_lib_classes.scss index 10b817da1..ad586d2aa 100644 --- a/.config/ags/scss/_lib_classes.scss +++ b/.config/ags/scss/_lib_classes.scss @@ -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; } diff --git a/.config/ags/scss/_musicmaterial.scss b/.config/ags/scss/_musicmaterial.scss index 8b1378917..e69de29bb 100755 --- a/.config/ags/scss/_musicmaterial.scss +++ b/.config/ags/scss/_musicmaterial.scss @@ -1 +0,0 @@ - diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss index c9e2c113f..15119a785 100644 --- a/.config/ags/scss/_osd.scss +++ b/.config/ags/scss/_osd.scss @@ -14,7 +14,6 @@ border-radius: 1.023rem; padding: 0.625rem 1.023rem; padding-top: 0.313rem; - margin: 10px; } .osd-progress { diff --git a/.config/ags/style.css b/.config/ags/style.css index b4240dc61..c50978b5c 100644 --- a/.config/ags/style.css +++ b/.config/ags/style.css @@ -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; diff --git a/.config/ags/widgets/bar/music.js b/.config/ags/widgets/bar/music.js index 3d2389c53..0c2c496a6 100644 --- a/.config/ags/widgets/bar/music.js +++ b/.config/ags/widgets/bar/music.js @@ -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) diff --git a/.config/ags/widgets/bar/system.js b/.config/ags/widgets/bar/system.js index eae0a1851..c90ba4ba2 100644 --- a/.config/ags/widgets/bar/system.js +++ b/.config/ags/widgets/bar/system.js @@ -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(), ], }), diff --git a/.config/ags/widgets/bar/workspaces.js b/.config/ags/widgets/bar/workspaces.js index cd0573a8f..b3be638f8 100644 --- a/.config/ags/widgets/bar/workspaces.js +++ b/.config/ags/widgets/bar/workspaces.js @@ -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; diff --git a/.config/ags/widgets/desktopbackground/timeandlaunches.js b/.config/ags/widgets/desktopbackground/timeandlaunches.js index e25e14a58..1f9b01305 100644 --- a/.config/ags/widgets/desktopbackground/timeandlaunches.js +++ b/.config/ags/widgets/desktopbackground/timeandlaunches.js @@ -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(), diff --git a/.config/ags/widgets/indicators/indicatorvalues.js b/.config/ags/widgets/indicators/indicatorvalues.js index 6cf42a35e..236f65c12 100644 --- a/.config/ags/widgets/indicators/indicatorvalues.js +++ b/.config/ags/widgets/indicators/indicatorvalues.js @@ -70,6 +70,7 @@ export default () => MarginRevealer({ child: Box({ hpack: 'center', vertical: false, + className: 'spacing-h--10', children: [ brightnessIndicator, volumeIndicator, diff --git a/.config/ags/widgets/sideright/quicktoggles.js b/.config/ags/widgets/sideright/quicktoggles.js index 249ee42aa..263fcb52f 100644 --- a/.config/ags/widgets/sideright/quicktoggles.js +++ b/.config/ags/widgets/sideright/quicktoggles.js @@ -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, });