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

Added the ability to define button, progress bar, tooltip and popover radius. (#448)

Browse Source 
* Added the ability to define button, progress bar, tooltip and popover radius.

* Border updates

* Fix notification scaling
This commit is contained in:
Jas Singh
2024-11-06 21:47:22 -08:00
committed by GitHub
parent 22055b727a
commit dbd932941b
12 changed files with 419 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
modules/menus/notifications/notification/index.ts
View File

@@ -19,8 +19,8 @@ const NotificationCard = (notifs: Notifications, curPage: Variable<number>): Scr
vscroll: 'automatic',
child: Widget.Box({
class_name: 'menu-content-container notifications',
hpack: 'center',
vexpand: true,
hpack: 'fill',
spacing: 0,
vertical: true,
setup: (self) => {
@@ -66,11 +66,11 @@ const NotificationCard = (notifs: Notifications, curPage: Variable<number>): Scr
},
child: Widget.Box({
class_name: 'notification-card-content-container',
hexpand: true,
children: [
Widget.Box({
class_name: 'notification-card menu',
vpack: 'start',
hexpand: true,
vexpand: false,
children: [
Image(notif),

4
options.ts
View File

@@ -393,6 +393,7 @@ const options = mkOptions(OPTIONS, {
label: opt(colors.lavender),
popover: {
scaling: opt(100),
radius: opt('0.4em'),
text: opt(colors.lavender),
background: opt(secondary_colors.mantle),
border: opt(secondary_colors.mantle),
@@ -421,6 +422,7 @@ const options = mkOptions(OPTIONS, {
active: opt(secondary_colors.pink),
disabled: opt(tertiary_colors.surface2),
text: opt(secondary_colors.mantle),
radius: opt('0.4em'),
},
iconbuttons: {
passive: opt(secondary_colors.text),
@@ -429,6 +431,7 @@ const options = mkOptions(OPTIONS, {
progressbar: {
foreground: opt(colors.lavender),
background: opt(colors.surface1),
radius: opt('0.3rem'),
},
slider: {
primary: opt(colors.lavender),
@@ -444,6 +447,7 @@ const options = mkOptions(OPTIONS, {
divider: opt(colors.base),
},
tooltip: {
radius: opt('0.3em'),
background: opt(colors.crust),
text: opt(tertiary_colors.lavender),
},

6
scss/main.scss
View File

@@ -30,6 +30,9 @@
@import 'style/bar/power';
@import 'style/bar/battery';
//notifications
@import 'style/notifications/popups';
//modules - menus
@import 'style/menus/menu';
@import 'style/menus/power';
@@ -43,9 +46,6 @@
@import 'style/menus/energy';
@import 'style/menus/dashboard';
//notifications
@import 'style/notifications/popups';
//osd
@import 'style/osd/index';

2
scss/style/common/general.scss
View File

@@ -33,7 +33,7 @@ tooltip {
> * > * {
padding: 0.6em;
border-radius: $bar-menus-border-radius * 0.5;
border-radius: $bar-menus-tooltip-radius;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
}

4
scss/style/common/popover_menu.scss
View File

@@ -6,6 +6,7 @@ window.popup {
opacity: $bar-menus-opacity * $popoverScaling;
menu {
border-radius: $bar-menus-popover-radius;
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
}
@@ -13,6 +14,7 @@ window.popup {
menuitem {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
border-radius: $bar-menus-popover-radius;
label {
font-size: 1.2rem * $popoverScaling;
@@ -72,7 +74,7 @@ window.popup {
}
check {
border-radius: $bar-buttons-radius;
border-radius: $bar-menus-buttons-radius * 0.2;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}

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

@@ -6,17 +6,9 @@
margin-top: 0em;
min-width: 27em;
min-height: 6em;
background: if(
$bar-menus-monochrome,
$bar-menus-background,
$bar-menus-menu-clock-background-color
);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
border: $bar-menus-border-size solid
if(
$bar-menus-monochrome,
$bar-menus-border-color,
$bar-menus-menu-clock-border-color
);
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
border-radius: $bar-menus-border-radius;
margin-right: 0.5em;
opacity: $bar-menus-opacity * 0.01;
@@ -25,11 +17,7 @@
.calendar-menu-item-container {
border-radius: $bar-menus-card_radius;
margin-bottom: 1.35em;
background: if(
$bar-menus-monochrome,
$bar-menus-cards,
$bar-menus-menu-clock-card-color
);
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
}
.calendar-content-items {
@@ -43,42 +31,20 @@
.calendar-menu-widget {
border-radius: 0.4em;
color: if(
$bar-menus-monochrome,
$bar-menus-text,
$bar-menus-menu-clock-calendar-days
);
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
&:selected {
box-shadow:
inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
inset -0.4em -0.3em 0 0
if(
$bar-menus-monochrome,
$bar-menus-cards,
$bar-menus-menu-clock-card-color
),
inset 0.4em 0 0 0.01em
if(
$bar-menus-monochrome,
$bar-menus-cards,
$bar-menus-menu-clock-card-color
);
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-calendar-currentday
);
inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday);
border-radius: 0em;
}
&.header {
background-color: transparent;
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-calendar-yearmonth
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
}
&.button {
@@ -88,30 +54,15 @@
}
&:hover {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-calendar-paginator
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
}
&.highlight {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-calendar-weekdays
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
}
&:indeterminate {
color: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-text,
$bar-menus-menu-clock-calendar-days
),
0.65
);
color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
}
font-size: 1.1em;
@@ -123,22 +74,14 @@
.clock-content-time {
font-size: 4em;
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-time-time
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
}
.clock-content-period {
font-size: 1.75em;
margin-bottom: 1.35em;
margin-right: -0.875em;
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-time-timeperiod
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod);
}
}
@@ -156,21 +99,13 @@
.calendar-menu-weather.today.icon {
label {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-icon
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
font-size: 5em;
}
}
.calendar-menu-weather.today.temp.label {
color: if(
$bar-menus-monochrome,
$bar-menus-text,
$bar-menus-menu-clock-weather-temperature
);
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
margin-left: 0.2em;
font-size: 2.5em;
@@ -180,11 +115,7 @@
}
.calendar-menu-weather.today.condition.label {
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-weather-status
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status);
font-size: 1.5em;
margin-bottom: 0.4em;
}
@@ -198,27 +129,15 @@
}
.calendar-menu-weather.today.temp.label.icon.weather-color.orange {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-hot
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
}
.calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-moderate
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
}
.calendar-menu-weather.today.temp.label.icon.weather-color.blue {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-thermometer-cold
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
}
.calendar-menu-weather.today.temp.label.icon.weather-color.sky {
@@ -232,11 +151,7 @@
.calendar-menu-weather.today.stats.container {
margin-bottom: 0.75em;
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-weather-stats
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats);
.weather.label {
margin-left: 0.35em;
@@ -248,30 +163,18 @@
}
.hourly-weather-time {
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-weather-hourly-time
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time);
margin-bottom: 0.5em;
}
.hourly-weather-icon {
color: if(
$bar-menus-monochrome,
$bar-menus-icons-active,
$bar-menus-menu-clock-weather-hourly-icon
);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
margin-bottom: 0.25em;
font-size: 1.8em;
}
.hourly-weather-temp {
color: if(
$bar-menus-monochrome,
$bar-menus-label,
$bar-menus-menu-clock-weather-hourly-temperature
);
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
}
.weather.precip.icon {

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

@@ -12,7 +12,7 @@
opacity: $bar-menus-opacity * 0.01;
button {
border-radius: 0.4em;
border-radius: $bar-menus-buttons-radius;
}
.dashboard-card {
@@ -499,7 +499,7 @@
}
block {
border-radius: 0.4em;
border-radius: $bar-menus-progressbar-radius;
&.empty {
background: if(

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

@@ -22,7 +22,7 @@
}
.menu-content {
border-radius: 0.4em;
border-radius: $bar-menus-buttons-radius;
background-size: cover;
background-position: center;
}
@@ -68,7 +68,7 @@
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
min-height: 1.8em;
min-width: 2.5em;
border-radius: 0.2rem;
border-radius: $bar-menus-buttons-radius * 0.75;
&.disabled {
background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);

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

@@ -176,7 +176,7 @@
.menu-active-slider * {
min-height: 0.85em;
border-radius: 0.2em;
border-radius: $bar-menus-slider-progress-radius;
}
.menu-slider-container {

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

@@ -7,13 +7,14 @@
min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01;
min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling * 0.01;
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;
margin-right: 0.45em;
opacity: $bar-menus-opacity * 0.01;
.window-content.notificationsmenu-window {
margin-right: 0.50em;
margin-right: 0.5em;
}
.menu-content-container.notifications {
@@ -32,7 +33,8 @@
.notification-card.menu {
background: $notification-background;
min-width: 26.2em * $bar-menus-menu-notifications-scaling * 0.01;
min-width: 0em;
min-height: 0em;
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
border: 0.15em solid $notification-border;
border-radius: 0em;
@@ -61,33 +63,65 @@
.menu-separator.notification-controls {
min-width: 0.1em;
background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-divider, $bar-menus-menu-notifications-switch_divider);
background-color: if(
$bar-menus-monochrome,
$bar-menus-dropdownmenu-divider,
$bar-menus-menu-notifications-switch_divider
);
margin: 0em 1em;
}
.menu-switch.notifications {
background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
* {
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
}
background-color: if(
$bar-menus-monochrome,
$bar-menus-switch-disabled,
$bar-menus-menu-notifications-switch-disabled
);
&:checked {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
background: if(
$bar-menus-monochrome,
$bar-menus-switch-enabled,
$bar-menus-menu-notifications-switch-enabled
);
}
slider {
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
background-color: if(
$bar-menus-monochrome,
$bar-menus-switch-puck,
$bar-menus-menu-notifications-switch-puck
);
}
&:hover {
trough {
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
background: if(
$bar-menus-monochrome,
$bar-menus-switch-disabled,
$bar-menus-menu-notifications-switch-disabled
);
}
slider {
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
background: if(
$bar-menus-monochrome,
$bar-menus-switch-puck,
$bar-menus-menu-notifications-switch-puck
);
}
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
background: if(
$bar-menus-monochrome,
$bar-menus-switch-enabled,
$bar-menus-menu-notifications-switch-enabled
);
}
}
@@ -95,13 +129,16 @@
margin-right: 0.3em;
&:hover label:not(.removing) {
color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5);
color: transparentize(
if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear),
0.5
);
}
}
.clear-notifications-label {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
font-size: 1.5em;
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
&.removing {
color: $bar-menus-buttons-disabled;
@@ -110,16 +147,31 @@
scrollbar {
margin-right: 0.2em;
min-width: $bar-menus-menu-notifications-scrollbar-width;
min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: $bar-menus-menu-notifications-scrollbar-radius;
background: transparent;
slider {
min-width: $bar-menus-menu-notifications-scrollbar-width;
min-width: $bar-menus-menu-notifications-scrollbar-width * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: $bar-menus-menu-notifications-scrollbar-radius;
background: $bar-menus-menu-notifications-scrollbar-color;
}
}
.notification-card-header-label {
font-size: 0.95em;
}
.notification-card-body-label {
font-size: 0.84em;
}
.notification-icon {
font-size: 1.3em;
}
.notification-time {
font-size: 0.85em;
}
}
.notification-label-container {
@@ -141,11 +193,11 @@
.close-notification-button.menu {
background: $notification-close_button-background;
color: $notification-close_button-label;
min-width: 2.1em;
min-width: 2.1em * $bar-menus-menu-notifications-scaling * 0.01;
border-radius: 0rem $notification-border_radius $notification-border_radius 0em;
label {
font-size: 1.5em;
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
}
&:hover {
@@ -165,7 +217,7 @@
color: $bar-menus-menu-notifications-pager-button;
.pager-button-label {
font-size: 2em;
font-size: 2em * $bar-menus-menu-notifications-scaling * 0.01;
}
&:hover {

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

@@ -4,7 +4,7 @@
margin: 0.45em;
border: 0.15em solid transparentize($notification-border, 0.5);
min-width: 26em;
min-height: 6rem;
min-height: 4em;
border-radius: $notification-border_radius;
opacity: $notification-opacity * 0.01;
}
@@ -42,7 +42,7 @@
.notification-card-content.noimg {
margin-left: 0.5em;
margin-top: .15em;
margin-top: 0.15em;
}
.notification-card-header-label {
@@ -67,7 +67,7 @@
background: $notification-actions-background;
min-width: 4em;
min-height: 1.65em;
border-radius: 0.2em;
border-radius: $bar-menus-buttons-radius;
&:not(:last-child) {
margin-right: 2rem;

16
widget/settings/pages/theme/menus/index.ts
View File

@@ -71,6 +71,11 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }),
Header('Popover'),
Option({
opt: options.theme.bar.menus.popover.radius,
title: 'Popover Radius',
type: 'string',
}),
Option({ opt: options.theme.bar.menus.popover.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.menus.popover.background, title: 'Background', type: 'color' }),
@@ -108,6 +113,7 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.check_radio_button.active, title: 'Active', type: 'color' }),
Header('Buttons'),
Option({ opt: options.theme.bar.menus.buttons.radius, title: 'Button Radius', type: 'string' }),
Option({ opt: options.theme.bar.menus.buttons.default, title: 'Primary', type: 'color' }),
Option({ opt: options.theme.bar.menus.buttons.active, title: 'Active', type: 'color' }),
Option({ opt: options.theme.bar.menus.buttons.disabled, title: 'Disabled', type: 'color' }),
@@ -118,6 +124,11 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.iconbuttons.active, title: 'Active/Hovered', type: 'color' }),
Header('Progress Bar'),
Option({
opt: options.theme.bar.menus.progressbar.radius,
title: 'Progress Bar Radius',
type: 'string',
}),
Option({ opt: options.theme.bar.menus.progressbar.foreground, title: 'Primary', type: 'color' }),
Option({ opt: options.theme.bar.menus.progressbar.background, title: 'Background', type: 'color' }),
@@ -147,6 +158,11 @@ export const MenuTheme = (): Scrollable<Child, Attribute> => {
Option({ opt: options.theme.bar.menus.dropdownmenu.divider, title: 'Divider', type: 'color' }),
Header('Tooltips'),
Option({
opt: options.theme.bar.menus.tooltip.radius,
title: 'Tooltip Radius',
type: 'string',
}),
Option({ opt: options.theme.bar.menus.tooltip.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.menus.tooltip.text, title: 'Text', type: 'color' }),
],