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

modules/bar/bluetooth/index.ts

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

modules/menus/bluetooth/devices/devicelist.ts

@@ -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",
                     }),

scss/style/menus/bluetooth.scss

@@ -5,6 +5,7 @@
   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;
 
@@ -14,6 +15,7 @@
 
   .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);
     }
@@ -63,7 +65,9 @@
     margin-bottom: 0.4em;
 
     &:hover {
-            .menu-button-icon, .menu-button-name {
+
+      .menu-button-icon,
+      .menu-button-name {
         color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
       }
     }
@@ -137,7 +141,13 @@
     }
   }
 
-    .no-bluetooth-devices.dim, .search-bluetooth-label.dim{
+  .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;
   }

scss/style/menus/menu.scss

@@ -43,6 +43,7 @@
   }
 
   trough {
+
     highlight,
     progress {
       background-color: $peach;
@@ -74,12 +75,6 @@
   &:active {
     background-color: $sky;
   }
-
-    &:disabled {
-    }
-
-    trough:focus {
-    }
 }
 
 tooltip label {
@@ -120,7 +115,7 @@ tooltip label {
     border-radius: $bar-menus-card_radius;
     border-bottom-left-radius: 0em;
     border-bottom-right-radius: 0em;
-        margin: 0em 1em ;
+    margin: 0em 1em;
     min-height: 2em;
   }
 
@@ -162,6 +157,7 @@ tooltip label {
 .menu-active-button {
   padding: 0.1em;
   margin-bottom: -0.2em;
+
   .menu-active-icon {
     font-size: 1.4em;
     font-weight: bold;
@@ -171,6 +167,7 @@ tooltip label {
   &.muted image {
     color: $maroon;
   }
+
   &:hover image {
     color: $maroon;
   }
@@ -191,6 +188,7 @@ tooltip label {
   min-height: 0.85em;
   border-radius: .2em;
 }
+
 .menu-slider-container {
   margin-bottom: .7rem;
 }
@@ -233,6 +231,7 @@ tooltip label {
 .menu-item-box {
   margin-bottom: 0.5rem;
 }
+
 .dropdown-menu-container {
   min-height: 10em;
 }
@@ -248,7 +247,9 @@ tooltip label {
 }
 
 @keyframes spin {
-to { -gtk-icon-transform: rotate(1turn); }
+  to {
+    -gtk-icon-transform: rotate(1turn);
+  }
 }
 
 image.spinning {