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', class_name: 'bar-panel-container',
child: Widget.CenterBox({ child: Widget.CenterBox({
class_name: 'bar-panel', class_name: 'bar-panel',
css: 'padding: 1px', css: 'padding: 1px 0px 0px 0px',
startWidget: Widget.Box({ startWidget: Widget.Box({
class_name: "box-left", class_name: "box-left",
hexpand: true, hexpand: true,

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

@@ -3,23 +3,23 @@ import { activeDevices } from "./active/index.js";
import { availableDevices } from "./available/index.js"; import { availableDevices } from "./available/index.js";
export default () => { export default () => {
return DropdownMenu({ return DropdownMenu({
name: "audiomenu", name: "audiomenu",
transition: "crossfade", transition: "crossfade",
child: Widget.Box({ child: Widget.Box({
class_name: "menu-items audio", class_name: "menu-items audio",
hpack: "fill", hpack: "fill",
hexpand: true, hexpand: true,
child: Widget.Box({ child: Widget.Box({
vertical: true, vertical: true,
hpack: "fill", hpack: "fill",
hexpand: true, hexpand: true,
class_name: "menu-items-container", class_name: "menu-items-container audio",
children: [ children: [
activeDevices(), activeDevices(),
availableDevices(), availableDevices(),
], ],
}), }),
}), }),
}); });
}; };

15
options.ts
View File

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

2
scss/main.scss
View File

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

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

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

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

@@ -1,174 +1,184 @@
.menu-items.audio { .menu-items-container.audio {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color); min-width: 18em * $bar-menus-menu-volume-scaling/100;
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 { @import "./menu.scss";
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
.menu-label.audio { * {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color); font-size: $font-size * $bar-menus-menu-volume-scaling/100;
}
.menu-active.playback,
.menu-active.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
.menu-button-isactive.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
.menu-slider.playback {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-audio_slider-primary);
}
} }
&:hover { .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 {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
.menu-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
.menu-active.playback,
.menu-active.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
.menu-button-isactive.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
.menu-slider.playback {
trough { trough {
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-audio_slider-backgroundhover); background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-audio_slider-primary);
}
} }
slider { &:hover {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck); trough {
} background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-audio_slider-backgroundhover);
} }
}
.menu-slider.inputs { slider {
trough { background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background); }
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-input_slider-primary);
} }
} }
&:hover { .menu-slider.inputs {
trough { trough {
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-input_slider-backgroundhover); background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-input_slider-primary);
}
} }
slider { &:hover {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck); trough {
} background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-input_slider-backgroundhover);
} }
}
.menu-active-percentage.playback, slider {
.menu-active-percentage.input { background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text); }
}
.menu-active-button {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
opacity: 1;
}
&.muted {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 1;
} }
} }
&:hover { .menu-active-percentage.playback,
.menu-active-percentage.input {
.menu-active-icon.playback, color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 0.3;
}
} }
&.muted:hover { .menu-active-button {
.menu-active-icon.playback, .menu-active-icon.playback,
.menu-active-icon.input { .menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active); color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
opacity: 1; opacity: 1;
} }
}
}
.menu-button-icon.playback, &.muted {
.menu-button-icon.input {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
&.active { .menu-active-icon.playback,
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active); .menu-active-icon.input {
} color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
} opacity: 1;
}
}
.menu-button.audio { &:hover {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
.menu-button-name.playback, .menu-active-icon.playback,
.menu-button-name.input { .menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text); color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 0.3;
}
}
&.muted:hover {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
opacity: 1;
}
}
} }
.menu-button-icon.playback,
.menu-button-icon.input {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
&:hover { &.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
}
.menu-button.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
.menu-button-name.playback, .menu-button-name.playback,
.menu-button-name.input { .menu-button-name.input {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active); color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
&:hover {
.menu-button-name.playback,
.menu-button-name.input {
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; margin-bottom: 0.65em;
} }
.menu-section-container.playback { .menu-section-container.playback {
margin-top: 0em; margin-top: 0em;
margin-bottom: 1em; margin-bottom: 1em;
} }
.menu-section-container.input { .menu-section-container.input {
margin-top: 0em; margin-top: 0em;
} }
.menu-label-container.input { .menu-label-container.input {
border-radius: 0em; border-radius: 0em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color); 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); 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); 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); 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); 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); 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; 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 { .menu-items.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color); 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); border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
opacity: $bar-menus-opacity/100; opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
} }
.menu-items-container.bluetooth { .menu-items-container.bluetooth {
min-width: 18em * $bar-menus-menu-bluetooth-scaling/100;
font-size: 1.3em; font-size: 1.3em;
.menu-section-container { .menu-section-container {
@@ -26,7 +36,7 @@
.menu-items-section { .menu-items-section {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color); 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; 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 { .calendar-content-container {
margin-top: 0em; margin-top: 0em;
min-width: 27em; min-width: 27em;

12
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 { .dashboard-content-items {
margin-left: 0.50em; margin-left: 0.50em;
min-width: 28.5em; min-width: 28.5em;
@@ -87,6 +91,8 @@
} }
.shortcuts-container { .shortcuts-container {
font-size: 1em;
.dashboard-card { .dashboard-card {
padding: 1.5em; padding: 1.5em;
@@ -121,10 +127,8 @@
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
min-height: 3em; min-height: 3em;
&.discord { label {
label { font-size: 1.5em;
margin-right: 0.15em;
}
} }
&.record.active { &.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 { .menu-items.energy {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color); 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); border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
opacity: $bar-menus-opacity/100; opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
} }
@import "./menu.scss";
.menu-items-container.energy { .menu-items-container.energy {
min-width: 18em * $bar-menus-menu-battery-scaling/100;
.menu-label { .menu-label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color); 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); 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); border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
opacity: $bar-menus-opacity/100; opacity: $bar-menus-opacity/100;
} }
.menu-items-container.media { .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 { .menu-section-container {
margin: 1em 0em; margin: 1em 0em;

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

@@ -85,14 +85,12 @@
background: $crust; background: $crust;
border: $bar-menus-border-size solid $bar-menus-border-color; border: $bar-menus-border-size solid $bar-menus-border-color;
border-radius: $bar-menus-border-radius; border-radius: $bar-menus-border-radius;
min-width: 18em;
color: $text; color: $text;
} }
.menu-items-container { .menu-items-container {
border-radius: 0.4em; border-radius: 0.4em;
font-size: 1.3em; font-size: 1.3em;
min-width: 18em;
} }
.menu-section-container { .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 { .menu-items.network {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color); 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); border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
opacity: $bar-menus-opacity/100; opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-network-scaling/100;
} }
.menu-items-container.network { .menu-items-container.network {
min-width: 18em * $bar-menus-menu-network-scaling/100;
font-size: 1.3em; font-size: 1.3em;
.menu-items-section { .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 { .notification-card-container.menu {
margin: 0em; margin: 0em;
min-width: 30.6em; min-width: 30.6em * $bar-menus-menu-notifications-scaling/100;
min-height: 48em; min-height: 48em * $bar-menus-menu-notifications-scaling/100;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background); 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: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: $bar-menus-border-radius; border-radius: $bar-menus-border-radius;
@@ -28,7 +32,8 @@
.notification-card.menu { .notification-card.menu {
background: $notification-background; 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: 0.15em solid $notification-border;
border-radius: 0em; border-radius: 0em;
border-bottom-left-radius: 0.4em; border-bottom-left-radius: 0.4em;
@@ -50,6 +55,7 @@
.menu-label.notifications { .menu-label.notifications {
margin: 0em; 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); color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
} }
@@ -107,11 +113,11 @@
} }
.bell { .bell {
font-size: 10em; font-size: 10em * $bar-menus-menu-notifications-scaling/100;
} }
.message { .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; $popover-padding: 0.6rem * 1.6;
window#verification .verification { window#verification .verification {
* {
font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling/100;
}
@include floating-widget; @include floating-widget;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background); 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); 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; padding: 0.35em * 1.6 * 1.5;
min-width: 20em; min-width: 20em;
min-height: 6em; min-height: 6em;
font-size: 1.3em;
opacity: $bar-menus-opacity/100; opacity: $bar-menus-opacity/100;
.verification-content { .verification-content {

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

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

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

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

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

@@ -16,6 +16,7 @@ export const BarSettings = () => {
Header('Spacing'), 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.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.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.buttons.radius, title: 'Button Radius', type: 'string' }),
Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }), Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),

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

@@ -4,25 +4,42 @@ import { Header } from "widget/settings/shared/Header";
import options from "options"; import options from "options";
export const BarGeneral = () => { export const BarGeneral = () => {
return Widget.Box({ return Widget.Scrollable({
class_name: "bar-theme-page paged-container", class_name: "bar-theme-page paged-container",
vertical: true, vscroll: "automatic",
children: [ child: Widget.Box({
Header('General Settings'), vertical: true,
Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }), children: [
Option({ opt: options.theme.font.size, title: 'Font Size', type: 'string' }), Header('General Settings'),
Option({ opt: options.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number', increment: 100, min: 100, max: 900 }), Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }),
Option({ Option({ opt: options.theme.font.size, title: 'Font Size', type: 'string' }),
opt: options.dummy, Option({ opt: options.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number', increment: 100, min: 100, max: 900 }),
title: 'Config', Option({
subtitle: 'WARNING: Importing a configuration will replace your current configuration settings.', opt: options.dummy,
type: 'config_import', title: 'Config',
exportData: { subtitle: 'WARNING: Importing a configuration will replace your current configuration settings.',
filePath: OPTIONS, type: 'config_import',
themeOnly: false exportData: {
} filePath: OPTIONS,
}), themeOnly: false
Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }), }
] }),
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 }),
]
})
}) })
} }

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

@@ -4,18 +4,21 @@ import { Header } from "widget/settings/shared/Header";
import options from "options"; import options from "options";
export const ClockMenuSettings = () => { export const ClockMenuSettings = () => {
return Widget.Box({ return Widget.Scrollable({
class_name: "bar-theme-page paged-container", vscroll: "automatic",
vertical: true, child: Widget.Box({
children: [ class_name: "bar-theme-page paged-container",
Header('Time'), vertical: true,
Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }), children: [
Header('Time'),
Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
Header('Weather'), Header('Weather'),
Option({ opt: options.menus.clock.weather.location, title: 'Location', subtitle: 'Zip Code, Postal Code, City, etc.', type: 'string' }), Option({ opt: options.menus.clock.weather.location, title: 'Location', subtitle: 'Zip Code, Postal Code, City, etc.', type: 'string' }),
Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }), Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }),
Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }), Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }),
Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }), Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }),
] ]
})
}) })
} }

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

@@ -4,16 +4,19 @@ import { Header } from "widget/settings/shared/Header";
import options from "options"; import options from "options";
export const NotificationSettings = () => { export const NotificationSettings = () => {
return Widget.Box({ return Widget.Scrollable({
class_name: "bar-theme-page paged-container", vscroll: "automatic",
vertical: true, child: Widget.Box({
children: [ class_name: "bar-theme-page paged-container",
Header('Notification Settings'), vertical: true,
Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }), children: [
Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }), Header('Notification Settings'),
Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }), Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'] }),
Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }), Option({ opt: options.notifications.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the notification', type: 'number' }),
Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }), Option({ opt: options.notifications.active_monitor, title: 'Follow Cursor', subtitle: 'The notification will follow the monitor of your cursor', type: 'boolean' }),
] Option({ opt: options.notifications.timeout, title: 'Notification Timeout', subtitle: 'How long notification popups will last (in milliseconds).', type: 'number' }),
Option({ opt: options.notifications.cache_actions, title: 'Preserve Actions', subtitle: 'This will persist the action buttons of a notification after rebooting.', type: 'boolean' }),
]
})
}) })
} }

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

@@ -4,18 +4,21 @@ import { Header } from "widget/settings/shared/Header";
import options from "options"; import options from "options";
export const OSDSettings = () => { export const OSDSettings = () => {
return Widget.Box({ return Widget.Scrollable({
class_name: "bar-theme-page paged-container", vscroll: "automatic",
vertical: true, child: Widget.Box({
children: [ class_name: "bar-theme-page paged-container",
Header('On Screen Display'), vertical: true,
Option({ opt: options.theme.osd.enable, title: 'Enabled', type: 'boolean' }), children: [
Option({ opt: options.theme.osd.orientation, title: 'Orientation', type: 'enum', enums: ["horizontal", "vertical"] }), Header('On Screen Display'),
Option({ opt: options.theme.osd.location, title: 'Position', subtitle: 'Position of the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }), Option({ opt: options.theme.osd.enable, title: 'Enabled', type: 'boolean' }),
Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }), Option({ opt: options.theme.osd.orientation, title: 'Orientation', type: 'enum', enums: ["horizontal", "vertical"] }),
Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }), Option({ opt: options.theme.osd.location, title: 'Position', subtitle: 'Position of the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }),
Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }), Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }),
Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }), Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
] Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following format: top right bottom left', type: 'string' }),
]
})
}) })
} }