LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added scaling to individual elements (all menus and the bar). (#154)

Browse Source 
* Added scaling to individual elements (all menus and the bar).

* Make all dialog pages scrollable

* Add battery menu to settings

* update battery menu scaling

* Fix typo

* Add confirmation dialog scaling
This commit is contained in:
Jas Singh
2024-08-18 18:03:45 -07:00
committed by GitHub
parent 05a7f130ef
commit 830de04b14
22 changed files with 327 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/bar/Bar.ts
View File

@@ -234,7 +234,7 @@ export const Bar = (() => {
class_name: 'bar-panel-container',
child: Widget.CenterBox({
class_name: 'bar-panel',
css: 'padding: 1px',
css: 'padding: 1px 0px 0px 0px',
startWidget: Widget.Box({
class_name: "box-left",
hexpand: true,

2
modules/menus/audio/index.ts
View File

@@ -14,7 +14,7 @@ export default () => {
vertical: true,
hpack: "fill",
hexpand: true,
class_name: "menu-items-container",
class_name: "menu-items-container audio",
children: [
activeDevices(),
availableDevices(),

15
options.ts
View File

@@ -85,6 +85,7 @@ const options = mkOptions(OPTIONS, {
weight: opt(600),
},
notification: {
scaling: opt(100),
background: opt(tertiary_colors.mantle),
opacity: opt(100),
actions: {
@@ -102,6 +103,7 @@ const options = mkOptions(OPTIONS, {
}
},
osd: {
scaling: opt(100),
enable: opt(true),
orientation: opt<OSDOrientation>("vertical"),
opacity: opt(100),
@@ -119,6 +121,7 @@ const options = mkOptions(OPTIONS, {
location: opt<OSDAnchor>("right"),
},
bar: {
scaling: opt(100),
floating: opt(false),
layer: opt<"top" | "bottom" | "overlay" | "background">("top"),
margin_top: opt("0.5em"),
@@ -133,6 +136,7 @@ const options = mkOptions(OPTIONS, {
buttons: {
monochrome: opt(false),
spacing: opt("0.25em"),
y_margins: opt("0.4em"),
radius: opt("0.3em"),
opacity: opt(100),
background: opt(colors.base2),
@@ -283,6 +287,7 @@ const options = mkOptions(OPTIONS, {
},
menu: {
media: {
scaling: opt(100),
song: opt(tertiary_colors.lavender),
artist: opt(tertiary_colors.teal),
album: opt(tertiary_colors.pink),
@@ -310,6 +315,7 @@ const options = mkOptions(OPTIONS, {
}
},
volume: {
scaling: opt(100),
card: {
color: opt(colors.base),
},
@@ -349,6 +355,7 @@ const options = mkOptions(OPTIONS, {
}
},
network: {
scaling: opt(100),
card: {
color: opt(colors.base),
},
@@ -379,6 +386,7 @@ const options = mkOptions(OPTIONS, {
},
},
bluetooth: {
scaling: opt(100),
card: {
color: opt(colors.base),
},
@@ -420,6 +428,7 @@ const options = mkOptions(OPTIONS, {
},
},
battery: {
scaling: opt(100),
card: {
color: opt(colors.base),
},
@@ -449,6 +458,7 @@ const options = mkOptions(OPTIONS, {
},
},
clock: {
scaling: opt(100),
card: {
color: opt(colors.base),
},
@@ -491,6 +501,8 @@ const options = mkOptions(OPTIONS, {
},
},
dashboard: {
scaling: opt(100),
confirmation_scaling: opt(100),
card: {
color: opt(colors.base),
},
@@ -596,6 +608,7 @@ const options = mkOptions(OPTIONS, {
},
},
notifications: {
scaling: opt(100),
label: opt(colors.lavender),
no_notifications_label: opt(colors.surface0),
background: opt(colors.crust),
@@ -835,7 +848,7 @@ const options = mkOptions(OPTIONS, {
cache_actions: opt(true),
},
dummy: opt(true)
dummy: opt(true),
})
globalThis["options"] = options

2
scss/main.scss
View File

@@ -15,6 +15,7 @@
@import "style/common/general";
//modules - bar
@import "style/bar/bar";
@import "style/bar/menu";
@import "style/bar/audio";
@import "style/bar/media";
@@ -26,7 +27,6 @@
@import "style/bar/systray";
@import "style/bar/notifications";
@import "style/bar/power";
@import "style/bar/bar";
@import "style/bar/battery";
//modules - menus

6
scss/style/bar/bar.scss
View File

@@ -1,4 +1,8 @@
.bar {
* {
font-size: $font-size * $bar-scaling/100;
}
.bar-panel-container {
margin-top: if($bar-floating, $bar-margin_top, 0em);
margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
@@ -19,7 +23,7 @@
background-color: $bar-buttons-background;
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: 0.5rem $bar-buttons-spacing;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
&:hover {

98
scss/style/menus/audiomenu.scss
View File

@@ -1,27 +1,36 @@
.menu-items.audio {
.menu-items-container.audio {
min-width: 18em * $bar-menus-menu-volume-scaling/100;
@import "./menu.scss";
* {
font-size: $font-size * $bar-menus-menu-volume-scaling/100;
}
.menu-items {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
opacity: $bar-menus-opacity/100;
}
}
.menu-dropdown-label.audio {
.menu-dropdown-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
}
.menu-label.audio {
.menu-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
}
.menu-active.playback,
.menu-active.input {
.menu-active.playback,
.menu-active.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
}
.menu-button-isactive.audio {
.menu-button-isactive.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
}
.menu-slider.playback {
.menu-slider.playback {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
@@ -40,9 +49,9 @@
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
}
}
}
}
.menu-slider.inputs {
.menu-slider.inputs {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background);
@@ -61,14 +70,14 @@
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
}
}
}
}
.menu-active-percentage.playback,
.menu-active-percentage.input {
.menu-active-percentage.playback,
.menu-active-percentage.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
}
.menu-active-button {
.menu-active-button {
.menu-active-icon.playback,
.menu-active-icon.input {
@@ -102,18 +111,18 @@
opacity: 1;
}
}
}
}
.menu-button-icon.playback,
.menu-button-icon.input {
.menu-button-icon.playback,
.menu-button-icon.input {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
&.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
}
}
.menu-button.audio {
.menu-button.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
.menu-button-name.playback,
@@ -129,46 +138,47 @@
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
}
}
}
}
.menu-section-container.volume {
.menu-section-container.volume {
margin-bottom: 0.65em;
}
}
.menu-section-container.playback {
.menu-section-container.playback {
margin-top: 0em;
margin-bottom: 1em;
}
}
.menu-section-container.input {
.menu-section-container.input {
margin-top: 0em;
}
}
.menu-label-container.input {
.menu-label-container.input {
border-radius: 0em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
}
.menu-label-container.playback {
.menu-label-container.playback {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
}
.menu-items-section.input {
.menu-items-section.input {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
}
.menu-items-section.playback {
.menu-items-section.playback {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
}
.menu-label-container.selected {
.menu-label-container.selected {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
}
.menu-items-section.selected {
.menu-items-section.selected {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
}
.menu-items-section.playback {
.menu-items-section.playback {
border-radius: 0em;
}
}

12
scss/style/menus/bluetooth.scss
View File

@@ -1,10 +1,20 @@
.menu-items-container.bluetooth * {
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
}
@import "./menu.scss";
.menu-items.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
}
.menu-items-container.bluetooth {
min-width: 18em * $bar-menus-menu-bluetooth-scaling/100;
font-size: 1.3em;
.menu-section-container {
@@ -26,7 +36,7 @@
.menu-items-section {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
min-height: 20em;
min-height: 20em * $bar-menus-menu-bluetooth-scaling/100;
font-size: 1em;
}

4
scss/style/menus/calendar.scss
View File

@@ -1,3 +1,7 @@
.calendar-menu-content * {
font-size: $font-size * $bar-menus-menu-clock-scaling/100;
}
.calendar-content-container {
margin-top: 0em;
min-width: 27em;

10
scss/style/menus/dashboard.scss
View File

@@ -1,3 +1,7 @@
.dashboard-menu-content * {
font-size: $font-size * $bar-menus-menu-dashboard-scaling/100;
}
.dashboard-content-items {
margin-left: 0.50em;
min-width: 28.5em;
@@ -87,6 +91,8 @@
}
.shortcuts-container {
font-size: 1em;
.dashboard-card {
padding: 1.5em;
@@ -121,10 +127,8 @@
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
min-height: 3em;
&.discord {
label {
margin-right: 0.15em;
}
font-size: 1.5em;
}
&.record.active {

9
scss/style/menus/energy.scss
View File

@@ -1,10 +1,19 @@
.menu-items-container.energy * {
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
}
.menu-items.energy {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
}
@import "./menu.scss";
.menu-items-container.energy {
min-width: 18em * $bar-menus-menu-battery-scaling/100;
.menu-label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);
}

9
scss/style/menus/media.scss
View File

@@ -2,11 +2,16 @@
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.media {
min-width: 23em;
min-height: 10em;
* {
font-size: $font-size * $bar-menus-menu-media-scaling/100;
}
min-width: 23em * $bar-menus-menu-media-scaling/100;
min-height: 10em * $bar-menus-menu-media-scaling/100;
.menu-section-container {
margin: 1em 0em;

2
scss/style/menus/menu.scss
View File

@@ -85,14 +85,12 @@
background: $crust;
border: $bar-menus-border-size solid $bar-menus-border-color;
border-radius: $bar-menus-border-radius;
min-width: 18em;
color: $text;
}
.menu-items-container {
border-radius: 0.4em;
font-size: 1.3em;
min-width: 18em;
}
.menu-section-container {

8
scss/style/menus/network.scss
View File

@@ -1,10 +1,18 @@
.menu-items-container.network * {
font-size: $font-size * $bar-menus-menu-network-scaling/100;
}
@import "./menu.scss";
.menu-items.network {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-network-scaling/100;
}
.menu-items-container.network {
min-width: 18em * $bar-menus-menu-network-scaling/100;
font-size: 1.3em;
.menu-items-section {

16
scss/style/menus/notifications.scss
View File

@@ -1,7 +1,11 @@
.notification-menu-content * {
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
}
.notification-card-container.menu {
margin: 0em;
min-width: 30.6em;
min-height: 48em;
min-width: 30.6em * $bar-menus-menu-notifications-scaling/100;
min-height: 48em * $bar-menus-menu-notifications-scaling/100;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: $bar-menus-border-radius;
@@ -28,7 +32,8 @@
.notification-card.menu {
background: $notification-background;
min-width: 26.2em;
min-width: 26.2em * $bar-menus-menu-notifications-scaling/100;
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
border: 0.15em solid $notification-border;
border-radius: 0em;
border-bottom-left-radius: 0.4em;
@@ -50,6 +55,7 @@
.menu-label.notifications {
margin: 0em;
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
}
@@ -107,11 +113,11 @@
}
.bell {
font-size: 10em;
font-size: 10em * $bar-menus-menu-notifications-scaling/100;
}
.message {
font-size: 1.5em;
font-size: 1.5em * $bar-menus-menu-notifications-scaling/100;
}
}

5
scss/style/menus/power.scss
View File

@@ -7,13 +7,16 @@ window#verification {
$popover-padding: 0.6rem * 1.6;
window#verification .verification {
* {
font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling/100;
}
@include floating-widget;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-powermenu-confirmation-border);
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
opacity: $bar-menus-opacity/100;
.verification-content {

4
scss/style/notifications/popups.scss
View File

@@ -10,6 +10,10 @@
}
.notification-card-container {
* {
font-size: $font-size * $notification-scaling/100;
}
padding: 1px;
}

4
scss/style/osd/index.scss
View File

@@ -1,4 +1,8 @@
.indicator {
* {
font-size: $font-size * $osd-scaling/100;
}
.osd-container {
margin: $osd-margins;
opacity: $osd-opacity/100;

1
widget/settings/pages/config/bar/index.ts
View File

@@ -16,6 +16,7 @@ export const BarSettings = () => {
Header('Spacing'),
Option({ opt: options.theme.bar.outer_spacing, title: 'Outer Spacing', subtitle: 'Spacing on the outer left and right edges of the bar.', type: 'string' }),
Option({ opt: options.theme.bar.buttons.y_margins, title: 'Vertical Margins', subtitle: 'Spacing above/below the buttons in the bar.', type: 'string' }),
Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', subtitle: 'Spacing between the buttons in the bar.', type: 'string' }),
Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),

19
widget/settings/pages/config/general/index.ts
View File

@@ -4,8 +4,10 @@ import { Header } from "widget/settings/shared/Header";
import options from "options";
export const BarGeneral = () => {
return Widget.Box({
return Widget.Scrollable({
class_name: "bar-theme-page paged-container",
vscroll: "automatic",
child: Widget.Box({
vertical: true,
children: [
Header('General Settings'),
@@ -23,6 +25,21 @@ export const BarGeneral = () => {
}
}),
Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
Header('Scaling'),
Option({ opt: options.theme.bar.scaling, title: 'Bar', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.notification.scaling, title: 'Notifications', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.osd.scaling, title: 'OSD', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.dashboard.scaling, title: 'Dashboard Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.dashboard.confirmation_scaling, title: 'Confirmation Dialog', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.media.scaling, title: 'Media Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.volume.scaling, title: 'Volume Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.network.scaling, title: 'Network Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.bluetooth.scaling, title: 'Bluetooth Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.battery.scaling, title: 'Battery Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.clock.scaling, title: 'Clock Menu', type: 'number', min: 1, max: 100, increment: 5 }),
Option({ opt: options.theme.bar.menus.menu.notifications.scaling, title: 'Notifications Menu', type: 'number', min: 1, max: 100, increment: 5 }),
]
})
})
}

5
widget/settings/pages/config/menus/clock.ts
View File

@@ -4,7 +4,9 @@ import { Header } from "widget/settings/shared/Header";
import options from "options";
export const ClockMenuSettings = () => {
return Widget.Box({
return Widget.Scrollable({
vscroll: "automatic",
child: Widget.Box({
class_name: "bar-theme-page paged-container",
vertical: true,
children: [
@@ -18,4 +20,5 @@ export const ClockMenuSettings = () => {
Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }),
]
})
})
}

5
widget/settings/pages/config/notifications/index.ts
View File

@@ -4,7 +4,9 @@ import { Header } from "widget/settings/shared/Header";
import options from "options";
export const NotificationSettings = () => {
return Widget.Box({
return Widget.Scrollable({
vscroll: "automatic",
child: Widget.Box({
class_name: "bar-theme-page paged-container",
vertical: true,
children: [
@@ -16,4 +18,5 @@ export const NotificationSettings = () => {
Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }),
]
})
})
}

5
widget/settings/pages/config/osd/index.ts
View File

@@ -4,7 +4,9 @@ import { Header } from "widget/settings/shared/Header";
import options from "options";
export const OSDSettings = () => {
return Widget.Box({
return Widget.Scrollable({
vscroll: "automatic",
child: Widget.Box({
class_name: "bar-theme-page paged-container",
vertical: true,
children: [
@@ -18,4 +20,5 @@ export const OSDSettings = () => {
Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
]
})
})
}