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

Added a 'Connected' indicator if one or more bluetooth devices are connected.

Browse Source
This commit is contained in:
Jas Singh
2024-07-27 02:41:57 -07:00
parent d8e58546ad
commit 40a24b3425
4 changed files with 302 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
modules/bar/bluetooth/index.ts
View File

@@ -10,13 +10,19 @@ const Bluetooth = () => {
}); });
const btText = Widget.Label({ const btText = Widget.Label({
label: Utils.merge([bluetooth.bind("enabled"), options.bar.bluetooth.label.bind("value")], (btEnabled, showLabel) => { label: Utils.merge([
if (showLabel) { bluetooth.bind("enabled"),
return btEnabled ? " On" : " Off" bluetooth.bind("connected_devices"),
} options.bar.bluetooth.label.bind("value")],
return ""; (btEnabled, btDevices, showLabel) => {
if (showLabel) {
return btEnabled && btDevices.length ? ` Connected (${btDevices.length})`
: btEnabled ? " On"
: " Off"
}
return "";
}), }),
class_name: "bar-bt_label", class_name: "bar-bt_label",
}); });

2
modules/menus/bluetooth/devices/devicelist.ts
View File

@@ -14,7 +14,7 @@ const devices = (bluetooth: Bluetooth, self: Box<any, any>) => {
hpack: "center", hpack: "center",
children: [ children: [
Widget.Label({ Widget.Label({
class_name: "dim", class_name: "bluetooth-disabled dim",
hexpand: true, hexpand: true,
label: "Bluetooth is disabled", label: "Bluetooth is disabled",
}), }),

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

@@ -2,143 +2,153 @@
@import '../../variables'; @import '../../variables';
.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);
} }
.menu-items-container.bluetooth { .menu-items-container.bluetooth {
font-size: 1.3em; font-size: 1.3em;
.menu-section-container { .menu-section-container {
margin: 1em 0em; margin: 1em 0em;
}
.menu-label-container {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
.menu-label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-bluetooth-label-color);
} }
.menu-label-container { .controls-container {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color); margin: 0.5em 1em;
.menu-label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-bluetooth-label-color);
}
.controls-container {
margin: 0.5em 1em;
}
} }
}
.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;
font-size: 1em; font-size: 1em;
} }
button { button {
margin-right: 0.5em; margin-right: 0.5em;
&.search { &.search {
image { image {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
}
&:hover image {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
font-size: 0.8em;
margin-bottom: 0em;
}
&:hover {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
}
.menu-icon-button.bluetooth {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive); color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
}
&:hover { &:hover image {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
}
.bluetooth-element-item {
margin-bottom: 0.4em;
&:hover {
.menu-button-icon, .menu-button-name {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
}
image {
margin-right: 0em;
margin-top: 0.0em;
min-height: 1em;
min-width: 1em;
&.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
}
}
label {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
font-size: 1em;
}
.menu-button-icon {
font-size: 1.5em;
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-bluetooth-icons-passive);
&.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
}
}
.connection-status {
font-size: 0.9em;
margin-left: 0.6rem;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
opacity: 0.4;
}
}
spinner {
min-height: 1.3em;
min-width: 1.3em;
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active); color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
font-size: 0.8em;
margin-bottom: 0em;
} }
.menu-separator { &:hover {
margin: 0em 1em; color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
}
.menu-icon-button.bluetooth {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
&:hover {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
}
.bluetooth-element-item {
margin-bottom: 0.4em;
&:hover {
.menu-button-icon,
.menu-button-name {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
} }
.menu-switch.bluetooth { image {
background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-bluetooth-switch-disabled); margin-right: 0em;
margin-top: 0.0em;
min-height: 1em;
min-width: 1em;
&:checked { &.active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
} }
slider {
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
}
&:hover {
trough {
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-bluetooth-switch-disabled);
}
slider {
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
}
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
}
} }
.no-bluetooth-devices.dim, .search-bluetooth-label.dim{ label {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text); color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
opacity: 0.5; font-size: 1em;
} }
.menu-button-icon {
font-size: 1.5em;
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-bluetooth-icons-passive);
&.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-bluetooth-icons-active);
}
}
.connection-status {
font-size: 0.9em;
margin-left: 0.6rem;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
opacity: 0.4;
}
}
spinner {
min-height: 1.3em;
min-width: 1.3em;
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
}
.menu-separator {
margin: 0em 1em;
}
.menu-switch.bluetooth {
background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-bluetooth-switch-disabled);
&:checked {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
}
slider {
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
}
&:hover {
trough {
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-bluetooth-switch-disabled);
}
slider {
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-bluetooth-switch-puck);
}
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
}
}
.no-bluetooth-devices.dim,
.search-bluetooth-label.dim,
.bluetooth-disabled.dim {
&:last-child {
margin-bottom: 2em;
}
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
opacity: 0.5;
}
} }

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

@@ -1,259 +1,260 @@
@import '../../variables'; @import '../../variables';
.menu-slider { .menu-slider {
trough { trough {
border-radius: 0.3rem; border-radius: 0.3rem;
background: $surface0; background: $surface0;
highlight, highlight,
progress { progress {
background: $peach; background: $peach;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
}
slider {
box-shadow: none;
background-color: transparent;
min-height: 0.6rem;
min-width: 0.6rem;
border: 0rem solid transparent;
border-radius: 0.3rem;
}
&:hover {
trough {
background: $surface0;
} }
slider { slider {
box-shadow: none; background: $overlay0;
background-color: transparent; box-shadow: none;
min-height: 0.6rem;
min-width: 0.6rem;
border: 0rem solid transparent;
border-radius: 0.3rem;
}
&:hover {
trough {
background: $surface0;
}
slider {
background: $overlay0;
box-shadow: none;
}
} }
}
} }
.menu-switch { .menu-switch {
font-size: 1.3em; font-size: 1.3em;
background-color: $surface0; background-color: $surface0;
border-radius: 0.2em; border-radius: 0.2em;
&:checked { &:checked {
background: $sky; background: $sky;
}
trough {
highlight,
progress {
background-color: $peach;
border-radius: 0.3em;
} }
}
slider {
box-shadow: none;
background-color: $overlay0;
min-height: 1em;
min-width: 1em;
border: 0em solid transparent;
border-radius: 0.2em;
margin: 0.1em 0.15em;
}
&:hover {
trough { trough {
highlight, background: $surface0;
progress {
background-color: $peach;
border-radius: 0.3em;
}
} }
slider { slider {
box-shadow: none; background: $overlay0;
background-color: $overlay0; box-shadow: none;
min-height: 1em;
min-width: 1em;
border: 0em solid transparent;
border-radius: 0.2em;
margin: 0.1em 0.15em;
} }
}
&:hover { &:active {
trough { background-color: $sky;
background: $surface0; }
}
slider {
background: $overlay0;
box-shadow: none;
}
}
&:active {
background-color: $sky;
}
&:disabled {
}
trough:focus {
}
} }
tooltip label { tooltip label {
font-size: 0.9em; font-size: 0.9em;
} }
.menu-separator { .menu-separator {
min-height: .1rem; min-height: .1rem;
margin: .6rem 0rem; margin: .6rem 0rem;
background: $surface1; background: $surface1;
} }
.menu-items { .menu-items {
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; 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; min-width: 18em;
} }
.menu-section-container { .menu-section-container {
margin: 1em 0em; margin: 1em 0em;
.menu-label { .menu-label {
color: $text; color: $text;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
.menu-label-container { .menu-label-container {
background: $base; background: $base;
border-radius: $bar-menus-card_radius; border-radius: $bar-menus-card_radius;
border-bottom-left-radius: 0em; border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em; border-bottom-right-radius: 0em;
margin: 0em 1em ; margin: 0em 1em;
min-height: 2em; min-height: 2em;
} }
&:first-child { &:first-child {
margin-bottom: 0em; margin-bottom: 0em;
} }
&:last-child { &:last-child {
margin-top: 0em; margin-top: 0em;
} }
&:nth-child(2) { &:nth-child(2) {
margin-top: 1em; margin-top: 1em;
} }
.menu-items-section { .menu-items-section {
background: $base; background: $base;
border-radius: $bar-menus-card_radius; border-radius: $bar-menus-card_radius;
border-top-left-radius: 0em; border-top-left-radius: 0em;
border-top-right-radius: 0em; border-top-right-radius: 0em;
padding: 0.9em; padding: 0.9em;
margin: 0em 1em; margin: 0em 1em;
} }
} }
.menu-active { .menu-active {
font-size: 0.9em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
margin: 0rem 1em; margin: 0rem 1em;
margin-bottom: 0.9em; margin-bottom: 0.9em;
} }
.menu-active-container { .menu-active-container {
&:first-child { &:first-child {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
} }
.menu-active-button { .menu-active-button {
padding: 0.1em; padding: 0.1em;
margin-bottom: -0.2em; margin-bottom: -0.2em;
.menu-active-icon {
font-size: 1.4em;
font-weight: bold;
} .menu-active-icon {
font-size: 1.4em;
font-weight: bold;
&.muted image { }
color: $maroon;
} &.muted image {
&:hover image { color: $maroon;
color: $maroon; }
}
&:hover image {
color: $maroon;
}
} }
.menu-active-percentage { .menu-active-percentage {
font-size: 0.9em; font-size: 0.9em;
min-width: 2.5em; min-width: 2.5em;
font-weight: bold; font-weight: bold;
} }
.menu-active-slider { .menu-active-slider {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1.5rem; margin-right: 1.5rem;
} }
.menu-active-slider * { .menu-active-slider * {
min-height: 0.85em; min-height: 0.85em;
border-radius: .2em; border-radius: .2em;
} }
.menu-slider-container { .menu-slider-container {
margin-bottom: .7rem; margin-bottom: .7rem;
} }
.menu-label-dim { .menu-label-dim {
color: $overlay0; color: $overlay0;
margin-right: 1rem; margin-right: 1rem;
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
} }
.menu-icon-button { .menu-icon-button {
&:hover { &:hover {
color: $surface2; color: $surface2;
} }
} }
.menu-dropdown-label-container { .menu-dropdown-label-container {
background: $base; background: $base;
border-radius: 0.4em; border-radius: 0.4em;
} }
.menu-button { .menu-button {
margin-bottom: .4em; margin-bottom: .4em;
} }
.menu-button-name { .menu-button-name {
font-size: 0.95em; font-size: 0.95em;
font-weight: bold; font-weight: bold;
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 1.2rem; margin-right: 1.2rem;
} }
.menu-button-icon { .menu-button-icon {
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
margin-right: .5rem; margin-right: .5rem;
} }
.menu-item-box { .menu-item-box {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.dropdown-menu-container { .dropdown-menu-container {
min-height: 10em; min-height: 10em;
} }
.menu-label { .menu-label {
margin: 0.5em 1em; margin: 0.5em 1em;
color: $sky; color: $sky;
} }
.event-top-padding * { .event-top-padding * {
min-height: 0em; min-height: 0em;
margin-top: 2.8em; margin-top: 2.8em;
} }
@keyframes spin { @keyframes spin {
to { -gtk-icon-transform: rotate(1turn); } to {
-gtk-icon-transform: rotate(1turn);
}
} }
image.spinning { image.spinning {
animation-name: spin; animation-name: spin;
animation-duration: 1s; animation-duration: 1s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }