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

Added the ability to scale a popover. (#443)

Browse Source 
* Added the ability to scale a popover.

* Removed redundant code
This commit is contained in:
Jas Singh
2024-11-05 20:59:29 -08:00
committed by GitHub
parent b88644833d
commit 6250c2b3be
7 changed files with 714 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
options.ts
View File

@@ -383,6 +383,7 @@ const options = mkOptions(OPTIONS, {
feinttext: opt(colors.surface0),
label: opt(colors.lavender),
popover: {
scaling: opt(100),
text: opt(colors.lavender),
background: opt(secondary_colors.mantle),
border: opt(secondary_colors.mantle),

67
scss/main.scss
View File

@@ -6,49 +6,50 @@
}
//general
@import "style/colors";
@import "style/common/common.scss";
@import "style/common/floating-widget.scss";
@import "style/common/widget-button.scss";
@import 'style/colors';
@import 'style/common/common.scss';
@import 'style/common/floating-widget.scss';
@import 'style/common/widget-button.scss';
@import 'style/common/popover_menu.scss';
//general styles
@import "style/common/general";
@import 'style/common/general';
//modules - bar
@import "style/bar/bar";
@import "style/bar/menu";
@import "style/bar/audio";
@import "style/bar/media";
@import "style/bar/network";
@import "style/bar/bluetooth";
@import "style/bar/clock";
@import "style/bar/workspace";
@import "style/bar/window_title";
@import "style/bar/systray";
@import "style/bar/notifications";
@import "style/bar/power";
@import "style/bar/battery";
@import 'style/bar/bar';
@import 'style/bar/menu';
@import 'style/bar/audio';
@import 'style/bar/media';
@import 'style/bar/network';
@import 'style/bar/bluetooth';
@import 'style/bar/clock';
@import 'style/bar/workspace';
@import 'style/bar/window_title';
@import 'style/bar/systray';
@import 'style/bar/notifications';
@import 'style/bar/power';
@import 'style/bar/battery';
//modules - menus
@import "style/menus/menu";
@import "style/menus/power";
@import "style/menus/powerdropdown";
@import "style/menus/audiomenu";
@import "style/menus/network";
@import "style/menus/bluetooth";
@import "style/menus/media";
@import "style/menus/notifications";
@import "style/menus/calendar";
@import "style/menus/energy";
@import "style/menus/dashboard";
@import 'style/menus/menu';
@import 'style/menus/power';
@import 'style/menus/powerdropdown';
@import 'style/menus/audiomenu';
@import 'style/menus/network';
@import 'style/menus/bluetooth';
@import 'style/menus/media';
@import 'style/menus/notifications';
@import 'style/menus/calendar';
@import 'style/menus/energy';
@import 'style/menus/dashboard';
//notifications
@import "style/notifications/popups";
@import 'style/notifications/popups';
//osd
@import "style/osd/index";
@import 'style/osd/index';
//settings dialog
@import "style/settings/dialog";
@import 'style/settings/dialog';
@import "style/customModules/style";
@import 'style/customModules/style';

32
scss/style/common/common.scss
View File

@@ -1,4 +1,4 @@
@import "../colors";
@import '../colors';
menu {
margin: 6px;
@@ -13,7 +13,7 @@ menu {
min-height: 20px;
min-width: 40px;
padding: 4px 8px;
color: #FFFFFF;
color: #ffffff;
font: initial;
text-shadow: none;
border-radius: 6px;
@@ -30,7 +30,7 @@ menu {
arrow {
min-height: 16px;
min-width: 16px;
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
margin-left: 8px;
}
}
@@ -38,28 +38,28 @@ menu {
separator {
min-height: 1px;
margin: 4px 0;
background-color: $secondary_bg
background-color: $secondary_bg;
}
}
menu>arrow {
menu > arrow {
min-height: 16px;
min-width: 16px;
padding: 4px;
color: $secondary_bg;
}
menu>arrow.top {
menu > arrow.top {
margin-top: 0;
border-radius: 6px;
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}
menu>arrow.bottom {
menu > arrow.bottom {
margin-top: 8px;
margin-bottom: -12px;
border-radius: 6px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
check,
@@ -70,7 +70,9 @@ radio {
padding: 0;
color: transparent;
background-color: $secondary_bg;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
transition:
all 75ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
}
radio {
@@ -199,11 +201,15 @@ scale slider {
}
scale slider:hover {
box-shadow: inset 0 0 0 2px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
box-shadow:
inset 0 0 0 2px $primary_fg,
0 0 0 8px transparentize($primary_fg, 0.9);
}
scale slider:active {
box-shadow: inset 0 0 0 4px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
box-shadow:
inset 0 0 0 4px $primary_fg,
0 0 0 8px transparentize($primary_fg, 0.9);
}
tooltip {
@@ -225,7 +231,7 @@ separator {
spinner {
background: none;
opacity: 0;
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
}
spinner:checked {

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

@@ -22,34 +22,6 @@
font-size: 1.2em;
}
window.popup {
opacity: $bar-menus-opacity * 0.01;
menuitem {
label {
color: $bar-menus-popover-text;
}
&:hover {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
}
}
menu {
border-color: $bar-menus-popover-border;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
}
separator {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em;
}
arrow {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
}
}
tooltip {
* {
all: unset;

114
scss/style/common/popover_menu.scss Normal file
View File

@@ -0,0 +1,114 @@
@import '../colors';
$popoverScaling: $bar-menus-popover-scaling * 0.01;
window.popup {
opacity: $bar-menus-opacity * $popoverScaling;
menu {
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);
}
menuitem {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
label {
font-size: 1.2rem * $popoverScaling;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
&:hover,
&:active {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
}
&:disabled {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
arrow {
min-height: 1.2em * $popoverScaling;
min-width: 1.2em * $popoverScaling;
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
margin-left: 0.5em * $popoverScaling;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
}
}
separator {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em * $popoverScaling;
}
arrow.top {
margin-top: 0;
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}
arrow.bottom {
margin-top: 0.5em * $popoverScaling;
margin-bottom: -0.6em * $popoverScaling;
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
check,
radio {
min-height: 0.8em * $popoverScaling;
min-width: 0.8em * $popoverScaling;
margin-right: 0.5em * $popoverScaling;
padding: 0;
color: transparent;
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
transition:
all 100ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
}
radio {
border-radius: 9999px;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check {
border-radius: $bar-buttons-radius;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:hover,
radio:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:active,
radio:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked:hover,
check:indeterminate:hover,
radio:checked:hover,
radio:indeterminate:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:checked:active,
check:indeterminate:active,
radio:checked:active,
radio:indeterminate:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
}

109
scss/style/settings/dialog.scss
View File

@@ -19,7 +19,6 @@ window.settings-dialog {
button {
font-weight: bold;
}
button.close {
@@ -36,7 +35,7 @@ window.settings-dialog {
button.reset {
color: $bar-menus-iconbuttons-passive;
padding: $padding*.5;
padding: $padding * 0.5;
image {
font-size: 1.25em;
@@ -49,9 +48,8 @@ window.settings-dialog {
}
.page {
.page-content {
padding: $padding*2;
padding: $padding * 2;
padding-top: 0;
}
}
@@ -59,12 +57,12 @@ window.settings-dialog {
.group {
.group-title {
color: $bar-menus-text;
margin-bottom: $spacing*.5;
margin-bottom: $spacing * 0.5;
}
.group-reset {
margin: $spacing * .5;
padding: $padding * .5;
margin: $spacing * 0.5;
padding: $padding * 0.5;
&:disabled {
color: transparent;
@@ -102,7 +100,7 @@ window.settings-dialog {
label.id,
label.note {
color: transparentize($fg, .4)
color: transparentize($fg, 0.4);
}
entry,
@@ -143,7 +141,7 @@ window.settings-dialog {
&.wallpaper {
button {
margin-top: $spacing * .5;
margin-top: $spacing * 0.5;
}
.preview {
@@ -172,7 +170,6 @@ window.settings-dialog {
}
.options-sublabel-link {
label {
font-size: 0.75em;
margin-top: 0.2em;
@@ -321,7 +318,7 @@ dialog {
}
viewport {
border-right: .25em solid $bar-menus-border-color;
border-right: 0.25em solid $bar-menus-border-color;
list {
row {
@@ -338,7 +335,6 @@ dialog {
}
}
}
}
stack {
@@ -359,12 +355,12 @@ dialog {
label {
margin: 0em 0.25em;
color: $bar-menus-buttons-text
color: $bar-menus-buttons-text;
}
image {
margin: 0em 0.5em;
color: $bar-menus-buttons-text
color: $bar-menus-buttons-text;
}
margin: 0.25em;
@@ -374,12 +370,95 @@ dialog {
treeview header button {
padding: 0.25em;
border: .15em solid $bar-menus-border-color;
border: 0.15em solid $bar-menus-border-color;
}
headerbar {
color: $bar-menus-label;
}
popover {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
border-radius: $bar-buttons-radius;
modelbutton {
margin-bottom: 0.5em;
}
modelbutton:hover label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
modelbutton:disabled label {
color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.5);
}
separator {
margin: 0.5em 0em;
}
}
separator {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em * $popoverScaling;
}
check,
radio {
min-height: 0.8em * $popoverScaling;
min-width: 0.8em * $popoverScaling;
margin-right: 0.5em * $popoverScaling;
padding: 0;
color: transparent;
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
transition:
all 100ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
}
radio {
border-radius: 9999px;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check {
border-radius: $bar-buttons-radius;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:hover,
radio:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:active,
radio:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked:hover,
check:indeterminate:hover,
radio:checked:hover,
radio:indeterminate:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:checked:active,
check:indeterminate:active,
radio:checked:active,
radio:indeterminate:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
}
.unsaved-icon {

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

@@ -196,6 +196,15 @@ export const BarGeneral = (): Scrollable<Child, Attribute> => {
max: 100,
increment: 5,
}),
Option({
opt: options.theme.bar.menus.popover.scaling,
title: 'Popovers',
subtitle: 'Ex: Right click menu of system tray items.',
type: 'number',
min: 1,
max: 100,
increment: 5,
}),
],
}),
});