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({
label: Utils.merge([bluetooth.bind("enabled"), options.bar.bluetooth.label.bind("value")], (btEnabled, showLabel) => {
if (showLabel) {
return btEnabled ? " On" : " Off"
}
return "";
label: Utils.merge([
bluetooth.bind("enabled"),
bluetooth.bind("connected_devices"),
options.bar.bluetooth.label.bind("value")],
(btEnabled, btDevices, showLabel) => {
if (showLabel) {
return btEnabled && btDevices.length ? ` Connected (${btDevices.length})`
: btEnabled ? " On"
: " Off"
}
return "";
}),
}),
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",
children: [
Widget.Label({
class_name: "dim",
class_name: "bluetooth-disabled dim",
hexpand: true,
label: "Bluetooth is disabled",
}),

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

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