From 2ebae2914605336fb54d2940f126c49f78f9b78c Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 17 Mar 2024 08:35:57 +0700 Subject: [PATCH] #327 for indicators --- .config/ags/modules/indicators/colorscheme.js | 4 +- .../ags/modules/indicators/indicatorvalues.js | 18 ++++--- .config/ags/scss/_colors.scss | 36 ++++++++++++-- .config/ags/scss/_common.scss | 8 ++-- .config/ags/scss/_osd.scss | 48 ++++++++++++------- 5 files changed, 80 insertions(+), 34 deletions(-) diff --git a/.config/ags/modules/indicators/colorscheme.js b/.config/ags/modules/indicators/colorscheme.js index e0c46c1a..33b745a3 100644 --- a/.config/ags/modules/indicators/colorscheme.js +++ b/.config/ags/modules/indicators/colorscheme.js @@ -34,8 +34,8 @@ const ColorschemeContent = () => Box({ ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }), ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }), ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }), - ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }), - ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }), + ColorBox({ name: 'L1', className: 'osd-color osd-color-layer1' }), + ColorBox({ name: 'L0', className: 'osd-color osd-color-layer0' }), ] }) ] diff --git a/.config/ags/modules/indicators/indicatorvalues.js b/.config/ags/modules/indicators/indicatorvalues.js index e373e491..18f22862 100644 --- a/.config/ags/modules/indicators/indicatorvalues.js +++ b/.config/ags/modules/indicators/indicatorvalues.js @@ -6,7 +6,11 @@ import { MarginRevealer } from '../.widgethacks/advancedrevealers.js'; import Brightness from '../../services/brightness.js'; import Indicator from '../../services/indicator.js'; -const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...rest }) => { +const OsdValue = ({ + name, nameSetup = undefined, labelSetup, progressSetup, + extraClassName = '', extraProgressClassName = '', + ...rest +}) => { const valueName = Label({ xalign: 0, yalign: 0, hexpand: true, className: 'osd-label', @@ -20,7 +24,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r return Box({ // Volume vertical: true, hexpand: true, - className: 'osd-bg osd-value', + className: `osd-bg osd-value ${extraClassName}`, attribute: { 'disable': () => { valueNumber.label = '󰖭'; @@ -35,7 +39,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r ] }), ProgressBar({ - className: 'osd-progress', + className: `osd-progress ${extraProgressClassName}`, hexpand: true, vertical: false, setup: progressSetup, @@ -48,6 +52,8 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r export default () => { const brightnessIndicator = OsdValue({ name: 'Brightness', + extraClassName: 'osd-brightness', + extraProgressClassName: 'osd-brightness-progress', labelSetup: (self) => self.hook(Brightness, self => { self.label = `${Math.round(Brightness.screen_value * 100)}`; }, 'notify::screen-value'), @@ -59,9 +65,9 @@ export default () => { const volumeIndicator = OsdValue({ name: 'Volume', - attribute: { - headphones: undefined, - }, + extraClassName: 'osd-volume', + extraProgressClassName: 'osd-volume-progress', + attribute: { headphones: undefined }, nameSetup: (self) => Utils.timeout(1, () => { const updateAudioDevice = (self) => { const usingHeadphones = (Audio.speaker?.stream?.port)?.toLowerCase().includes('headphone'); diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index 30ffb7d3..cc119562 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -142,10 +142,12 @@ $layer1: $surface; $onLayer1: $onSurface; $onLayer1Inactive: mix($onLayer1, $layer1, 45%); $onLayer1: $onSurfaceVariant; +$layer1Hover: mix($layer1, $onLayer1, 85%); +$layer1Active: mix($layer1, $onLayer1, 70%); $layer2: $surfaceVariant; $onLayer2: $onSurfaceVariant; -$layer2Hover: mix($layer2, $onSurfaceVariant, 90%); -$layer2Active: mix($layer2, $onSurfaceVariant, 80%); +$layer2Hover: mix($layer2, $onLayer2, 90%); +$layer2Active: mix($layer2, $onLayer2, 80%); // Elements $windowtitleOnLayer0Inactive: $onLayer0Inactive; $windowtitleOnLayer0: $onLayer0; @@ -185,6 +187,17 @@ $cheatsheetColors: ( $onSecondaryContainer, $onSecondaryContainer ); +$sessionColors: ( + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1, + $onLayer1 +); +$brightnessOnLayer0: $onLayer0; +$volumeOnLayer0: $onLayer0; ///////////////////// test theme: amarena (kind of) ///////////////////////// // $layer0: #0e1116; @@ -194,10 +207,12 @@ $cheatsheetColors: ( // $layer1: #171c22; // $onLayer1Inactive: mix($onLayer1, $layer1, 45%); // $onLayer1: $onSurfaceVariant; +// $layer1Hover: mix($layer1, $onLayer1, 85%); +// $layer1Active: mix($layer1, $onLayer1, 70%); // $layer2: #252c35; // $onLayer2: $onSurfaceVariant; -// $layer2Hover: mix($layer2, $onSurfaceVariant, 90%); -// $layer2Active: mix($layer2, $onSurfaceVariant, 80%); +// $layer2Hover: mix($layer2, $onLayer2, 90%); +// $layer2Active: mix($layer2, $onLayer2, 80%); // $layer3: #1C232A; // // Bar // $windowtitleOnLayer0Inactive: #70afa4; @@ -239,3 +254,16 @@ $cheatsheetColors: ( // #FB6396, // #6EC1D6 // ); +// $sessionColors: ( +// #F692B2, +// #6EC1D6, +// #CD84C8, +// #7FE4D2, +// #94CF95, +// #CD84C8, +// #FB6396 +// ); +// // Osd +// $brightnessOnLayer0: #F692B2; +// $volumeOnLayer0: #94CF95; + diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index 6859879b..6e38992d 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -13,7 +13,7 @@ color: $onSecondary; } - caret-color: $primary; + caret-color: $onLayer2; } @keyframes appear { @@ -50,18 +50,18 @@ menubar>menuitem { menu>menuitem { padding: 0.4em 1.5rem; background: transparent; - transition: 0.2s ease background; + transition: 0.2s ease background-color; border-radius: 0.545rem; -gtk-outline-radius: 0.545rem; } menu>menuitem:hover, menu>menuitem:focus { - background-color: mix($surfaceVariant, $onSurfaceVariant, 90%); + background-color: $layer2Hover; } menu>menuitem:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 80%); + background-color: $layer2Active; } radio { diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss index 15119a78..76fe3866 100644 --- a/.config/ags/scss/_osd.scss +++ b/.config/ags/scss/_osd.scss @@ -10,7 +10,7 @@ .osd-value { @include elevation-border; @include elevation2; - background-color: $t_background; + background-color: $layer0; border-radius: 1.023rem; padding: 0.625rem 1.023rem; padding-top: 0.313rem; @@ -27,7 +27,7 @@ min-height: 0.954rem; min-width: 0.068rem; border-radius: 10rem; - background-color: $secondaryContainer; + background-color: $layer2; // border: 0.068rem solid $onSecondaryContainer; } @@ -37,18 +37,13 @@ min-width: 0.680rem; margin: 0rem 0.137rem; border-radius: 10rem; - background-color: $onSecondaryContainer; + background-color: $onLayer2; } } -.osd-icon { - color: $onPrimaryContainer; -} - .osd-label { font-size: 1.023rem; font-weight: 500; - color: $onBackground; margin-top: 0.341rem; } @@ -56,7 +51,24 @@ @include titlefont; font-size: 1.688rem; font-weight: 500; - color: $onBackground; + color: $onLayer0; +} + +.osd-brightness { + color: $brightnessOnLayer0; +} +.osd-brightness-progress { + progress { + background-color: $brightnessOnLayer0; + } +} +.osd-volume { + color: $volumeOnLayer0; +} +.osd-volume-progress { + progress { + background-color: $volumeOnLayer0; + } } .osd-notifs { @@ -65,7 +77,7 @@ .osd-colorscheme { border-radius: 1.023rem; - background-color: $t_background; + background-color: $layer0; padding: 1.023rem; @include elevation2; } @@ -108,15 +120,15 @@ color: $onSurfaceVariant; box { background-color: $onSurfaceVariant; } } -.osd-color-surface { - background-color: $surface; - color: $onSurface; - box { background-color: $onSurface; } +.osd-color-L1 { + background-color: $layer1; + color: $onLayer1; + box { background-color: $onLayer1; } } -.osd-color-background { - background-color: $background; - color: $onBackground; - box { background-color: $onBackground; } +.osd-color-layer0 { + background-color: $layer0; + color: $onLayer0; + box { background-color: $onLayer0; } } .osd-show {