diff --git a/modules/bar/bluetooth/index.ts b/modules/bar/bluetooth/index.ts index 402af23..2243cd0 100644 --- a/modules/bar/bluetooth/index.ts +++ b/modules/bar/bluetooth/index.ts @@ -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", }); diff --git a/modules/menus/bluetooth/devices/devicelist.ts b/modules/menus/bluetooth/devices/devicelist.ts index 2066857..17626e3 100644 --- a/modules/menus/bluetooth/devices/devicelist.ts +++ b/modules/menus/bluetooth/devices/devicelist.ts @@ -14,7 +14,7 @@ const devices = (bluetooth: Bluetooth, self: Box) => { hpack: "center", children: [ Widget.Label({ - class_name: "dim", + class_name: "bluetooth-disabled dim", hexpand: true, label: "Bluetooth is disabled", }), diff --git a/scss/style/menus/bluetooth.scss b/scss/style/menus/bluetooth.scss index 4f123fe..0924ea5 100644 --- a/scss/style/menus/bluetooth.scss +++ b/scss/style/menus/bluetooth.scss @@ -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; + } } diff --git a/scss/style/menus/menu.scss b/scss/style/menus/menu.scss index 8c6e35c..631d883 100644 --- a/scss/style/menus/menu.scss +++ b/scss/style/menus/menu.scss @@ -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; }