From 2e64f7738f144f0f60c8c81916d14fb6e43efaa7 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Fri, 8 Nov 2024 20:00:45 -0800 Subject: [PATCH] Added the ability to configure the inner content border multiplier of bar buttons. (#462) --- options.ts | 1 + scss/style/bar/audio.scss | 8 ++++---- scss/style/bar/battery.scss | 8 ++++---- scss/style/bar/bluetooth.scss | 8 ++++---- scss/style/bar/clock.scss | 8 ++++---- scss/style/bar/media.scss | 4 ++-- scss/style/bar/network.scss | 8 ++++---- scss/style/bar/notifications.scss | 8 ++++---- scss/style/bar/window_title.scss | 8 ++++---- scss/style/customModules/style.scss | 8 ++++---- widget/settings/pages/config/bar/index.ts | 8 ++++++++ 11 files changed, 43 insertions(+), 34 deletions(-) diff --git a/options.ts b/options.ts index d466be9..69a12d2 100644 --- a/options.ts +++ b/options.ts @@ -175,6 +175,7 @@ const options = mkOptions(OPTIONS, { padding_y: opt('0.2rem'), y_margins: opt('0.4em'), radius: opt('0.3em'), + innerRadiusMultiplier: opt('0.4'), opacity: opt(100), background_opacity: opt(100), background_hover_opacity: opt(100), diff --git a/scss/style/bar/audio.scss b/scss/style/bar/audio.scss index a7259ee..735a04e 100644 --- a/scss/style/bar/audio.scss +++ b/scss/style/bar/audio.scss @@ -19,12 +19,12 @@ padding-right: $bar-buttons-volume-spacing; border-top-left-radius: if( $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon); @@ -40,12 +40,12 @@ .bar-button-icon.volume { border-top-right-radius: if( $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-volume-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/bar/battery.scss b/scss/style/bar/battery.scss index 50beb2f..d321c32 100644 --- a/scss/style/bar/battery.scss +++ b/scss/style/bar/battery.scss @@ -17,12 +17,12 @@ padding-right: $bar-buttons-battery-spacing; border-top-left-radius: if( $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); @@ -42,12 +42,12 @@ .bar-button-icon.battery { border-top-right-radius: if( $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-battery-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/bar/bluetooth.scss b/scss/style/bar/bluetooth.scss index 9287221..7f65406 100644 --- a/scss/style/bar/bluetooth.scss +++ b/scss/style/bar/bluetooth.scss @@ -29,12 +29,12 @@ padding-right: $bar-buttons-bluetooth-spacing; border-top-left-radius: if( $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon); @@ -50,12 +50,12 @@ .bar-button-icon.bluetooth { border-top-right-radius: if( $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/bar/clock.scss b/scss/style/bar/clock.scss index 3851019..212f12f 100644 --- a/scss/style/bar/clock.scss +++ b/scss/style/bar/clock.scss @@ -18,12 +18,12 @@ padding-right: $bar-buttons-clock-spacing; border-top-left-radius: if( $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon); @@ -39,12 +39,12 @@ .bar-button-icon.clock { border-top-right-radius: if( $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-clock-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/bar/media.scss b/scss/style/bar/media.scss index 895b9de..ede1007 100644 --- a/scss/style/bar/media.scss +++ b/scss/style/bar/media.scss @@ -16,12 +16,12 @@ padding-right: $bar-buttons-media-spacing; border-top-left-radius: if( $bar-buttons-media-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-media-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon); diff --git a/scss/style/bar/network.scss b/scss/style/bar/network.scss index 76c65e5..ac6cef9 100644 --- a/scss/style/bar/network.scss +++ b/scss/style/bar/network.scss @@ -17,12 +17,12 @@ padding-right: $bar-buttons-network-spacing; border-top-left-radius: if( $bar-buttons-network-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-network-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon); @@ -38,12 +38,12 @@ .bar-button-icon.network-icon { border-top-right-radius: if( $bar-buttons-network-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-network-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/bar/notifications.scss b/scss/style/bar/notifications.scss index 2c70cf5..73abcf9 100644 --- a/scss/style/bar/notifications.scss +++ b/scss/style/bar/notifications.scss @@ -23,12 +23,12 @@ padding-right: $bar-buttons-notifications-spacing; border-top-left-radius: if( $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); &:last-child { @@ -49,12 +49,12 @@ .bar-button-icon.notifications { border-top-right-radius: if( $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/bar/window_title.scss b/scss/style/bar/window_title.scss index e52b33e..29b667b 100644 --- a/scss/style/bar/window_title.scss +++ b/scss/style/bar/window_title.scss @@ -21,12 +21,12 @@ padding-right: $bar-buttons-windowtitle-spacing; border-top-left-radius: if( $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon); @@ -46,12 +46,12 @@ .bar-button-icon.windowtitle { border-top-right-radius: if( $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/scss/style/customModules/style.scss b/scss/style/customModules/style.scss index 06b3784..d97df80 100644 --- a/scss/style/customModules/style.scss +++ b/scss/style/customModules/style.scss @@ -92,12 +92,12 @@ color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor); border-top-left-radius: if( $borderEnabled or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-left-radius: if( $borderEnabled or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } @@ -113,12 +113,12 @@ .module-icon { border-top-right-radius: if( $borderEnabled or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); border-bottom-right-radius: if( $borderEnabled or $bar-buttons-enableBorders, - $bar-buttons-radius * 0.4, + $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier, $bar-buttons-radius ); } diff --git a/widget/settings/pages/config/bar/index.ts b/widget/settings/pages/config/bar/index.ts index c844398..6cfe50f 100644 --- a/widget/settings/pages/config/bar/index.ts +++ b/widget/settings/pages/config/bar/index.ts @@ -108,6 +108,14 @@ export const BarSettings = (): Scrollable => { title: 'Button Radius', type: 'string', }), + Option({ + opt: options.theme.bar.buttons.innerRadiusMultiplier, + title: 'Inner Button Radius Multiplier', + subtitle: + 'Change this to fine-tune the padding and prevent any overflow' + + ' or gaps between the content and the border', + type: 'string', + }), Option({ opt: options.theme.bar.layer, title: 'Layer',