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

Update bluetooth battery indicator padding and provide option to define when to show battery icon. (#403)

Browse Source 
* Update bluetooth battery indicator visuals and behavior.

* Remove log

* Update default battery state to paired.

* Change to connected
This commit is contained in:
Jas Singh
2024-10-30 02:34:04 -07:00
committed by GitHub
parent 9bb582c8cf
commit 776e07b7bc
6 changed files with 225 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/types/options.d.ts vendored
View File

@@ -215,3 +215,5 @@ export type ColorMapKey = keyof typeof defaultColorMap;
export type ColorMapValue = (typeof defaultColorMap)[ColorMapKey]; export type ColorMapValue = (typeof defaultColorMap)[ColorMapKey];
export type ScalingPriority = 'gdk' | 'hyprland' | 'both'; export type ScalingPriority = 'gdk' | 'hyprland' | 'both';
export type BluetoothBatteryState = 'paired' | 'connected' | 'always';

6
modules/bar/network/index.ts
View File

@@ -13,7 +13,11 @@ const formatFrequency = (frequency: number): string => {
}; };
const formatWifiInfo = (wifi: Wifi): string => { const formatWifiInfo = (wifi: Wifi): string => {
return `Network: ${wifi.ssid === '' ? 'None' : wifi.ssid} \nSignal Strength: ${wifi.strength >= 0 ? wifi.strength : '--'}% \nFrequency: ${wifi.frequency >= 0 ? formatFrequency(wifi.frequency) : '--'}`; const netSsid = wifi.ssid === '' ? 'None' : wifi.ssid;
const wifiStrength = wifi.strength >= 0 ? wifi.strength : '--';
const wifiFreq = wifi.frequency >= 0 ? formatFrequency(wifi.frequency) : '--';
return `Network: ${netSsid} \nSignal Strength: ${wifiStrength}% \nFrequency: ${wifiFreq}`;
}; };
const { const {

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

@@ -1,12 +1,13 @@
import { Bluetooth } from 'types/service/bluetooth.js'; import { Bluetooth, BluetoothDevice } from 'types/service/bluetooth.js';
import Box from 'types/widgets/box.js'; import Box from 'types/widgets/box.js';
import { connectedControls } from './connectedControls.js'; import { connectedControls } from './connectedControls.js';
import { getBluetoothIcon } from '../utils.js'; import { getBluetoothIcon } from '../utils.js';
import Gtk from 'types/@girs/gtk-3.0/gtk-3.0.js'; import Gtk from 'types/@girs/gtk-3.0/gtk-3.0.js';
import { Attribute, Child } from 'lib/types/widget.js'; import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options'; import options from 'options';
import Label from 'types/widgets/label.js';
const { showBattery, batteryIcon } = options.menus.bluetooth; const { showBattery, batteryIcon, batteryState } = options.menus.bluetooth;
const devices = (bluetooth: Bluetooth, self: Box<Gtk.Widget, unknown>): Box<Child, Attribute> => { const devices = (bluetooth: Bluetooth, self: Box<Gtk.Widget, unknown>): Box<Child, Attribute> => {
return self.hook(bluetooth, () => { return self.hook(bluetooth, () => {
@@ -65,6 +66,33 @@ const devices = (bluetooth: Bluetooth, self: Box<Gtk.Widget, unknown>): Box<Chil
})); }));
} }
const getConnectionStatusLabel = (device: BluetoothDevice): Label<Attribute> => {
return Widget.Label({
hpack: 'start',
class_name: 'connection-status dim',
label: device.connected ? 'Connected' : 'Paired',
});
};
const getBatteryInfo = (device: BluetoothDevice, batIcon: string): Gtk.Widget[] => {
if (typeof device.battery_percentage === 'number' && device.battery_percentage >= 0) {
return [
Widget.Separator({
class_name: 'menu-separator bluetooth-battery',
}),
Widget.Label({
class_name: 'connection-status txt-icon',
label: `${batIcon}`,
}),
Widget.Label({
class_name: 'connection-status battery',
label: `${device.battery_percentage}%`,
}),
];
}
return [];
};
return (self.child = Widget.Box({ return (self.child = Widget.Box({
vertical: true, vertical: true,
children: availableDevices.map((device) => { children: availableDevices.map((device) => {
@@ -107,50 +135,24 @@ const devices = (bluetooth: Bluetooth, self: Box<Gtk.Widget, unknown>): Box<Chil
child: Widget.Box({ child: Widget.Box({
hpack: 'start', hpack: 'start',
children: Utils.merge( children: Utils.merge(
[showBattery.bind('value'), batteryIcon.bind('value')], [
(showBat, batIcon) => { showBattery.bind('value'),
if (!showBat) { batteryIcon.bind('value'),
return [ batteryState.bind('value'),
Widget.Label({ ],
hpack: 'start', (showBat, batIcon, batState) => {
class_name: 'connection-status dim', if (
label: device.connected !showBat ||
? 'Connected' (batState === 'paired' && !device.paired) ||
: 'Paired', (batState === 'connected' && !device.connected)
}), ) {
]; return [getConnectionStatusLabel(device)];
} }
return [ return [
Widget.Label({ getConnectionStatusLabel(device),
hpack: 'start',
class_name: 'connection-status dim',
label: device.connected
? 'Connected'
: 'Paired',
}),
Widget.Box({ Widget.Box({
children: children: getBatteryInfo(device, batIcon),
typeof device.battery_percentage ===
'number' &&
device.battery_percentage >= 0
? [
Widget.Separator({
class_name:
'menu-separator',
}),
Widget.Label({
class_name:
'connection-status txt-icon',
label: `${batIcon}`,
}),
Widget.Label({
class_name:
'connection-status battery',
label: `${device.battery_percentage}%`,
}),
]
: [],
}), }),
]; ];
}, },

2
options.ts
View File

@@ -5,6 +5,7 @@ import {
ActiveWsIndicator, ActiveWsIndicator,
BarButtonStyles, BarButtonStyles,
BarLocation, BarLocation,
BluetoothBatteryState,
NotificationAnchor, NotificationAnchor,
OSDAnchor, OSDAnchor,
OSDOrientation, OSDOrientation,
@@ -1057,6 +1058,7 @@ const options = mkOptions(OPTIONS, {
transitionTime: opt(200), transitionTime: opt(200),
bluetooth: { bluetooth: {
showBattery: opt(false), showBattery: opt(false),
batteryState: opt<BluetoothBatteryState>('connected'),
batteryIcon: opt('󰥉'), batteryIcon: opt('󰥉'),
}, },
volume: { volume: {

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

@@ -2,7 +2,7 @@
font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01; font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
} }
@import "./menu.scss"; @import './menu.scss';
.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);
@@ -12,7 +12,6 @@
} }
.menu-items-container.bluetooth { .menu-items-container.bluetooth {
min-width: 18em * $bar-menus-menu-bluetooth-scaling * 0.01; min-width: 18em * $bar-menus-menu-bluetooth-scaling * 0.01;
font-size: 1.3em; font-size: 1.3em;
@@ -33,7 +32,6 @@
} }
} }
.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 * $bar-menus-menu-bluetooth-scaling * 0.01; min-height: 20em * $bar-menus-menu-bluetooth-scaling * 0.01;
@@ -45,11 +43,19 @@
&.search { &.search {
image { image {
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 image { &:hover image {
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; font-size: 0.8em;
@@ -57,7 +63,11 @@
} }
&:hover { &:hover {
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
);
} }
} }
@@ -65,7 +75,11 @@
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 {
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
);
} }
} }
@@ -73,16 +87,19 @@
margin-bottom: 0.4em; margin-bottom: 0.4em;
&:hover { &:hover {
.menu-button-icon, .menu-button-icon,
.menu-button-name { .menu-button-name {
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
);
} }
} }
image { image {
margin-right: 0em; margin-right: 0em;
margin-top: 0.0em; margin-top: 0em;
min-height: 1em; min-height: 1em;
min-width: 1em; min-width: 1em;
@@ -111,7 +128,7 @@
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.4; opacity: 0.4;
} }
.battery{ .battery {
opacity: 0.6; opacity: 0.6;
} }
} }
@@ -127,7 +144,11 @@
} }
.menu-switch.bluetooth { .menu-switch.bluetooth {
background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-bluetooth-switch-disabled); background-color: if(
$bar-menus-monochrome,
$bar-menus-switch-disabled,
$bar-menus-menu-bluetooth-switch-disabled
);
&:checked { &:checked {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled); background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
@@ -139,7 +160,11 @@
&:hover { &:hover {
trough { trough {
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-bluetooth-switch-disabled); background: if(
$bar-menus-monochrome,
$bar-menus-switch-disabled,
$bar-menus-menu-bluetooth-switch-disabled
);
} }
slider { slider {
@@ -162,4 +187,11 @@
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; opacity: 0.5;
} }
.menu-separator.bluetooth-battery {
margin: 0.2em 0.5em;
min-width: 0.1em;
}
.connection-status.txt-icon {
margin-left: 0.2em;
}
} }

6
widget/settings/pages/config/menus/bluetooth.ts
View File

@@ -18,6 +18,12 @@ export const BluetoothMenuSettings = (): Scrollable<Child, Attribute> => {
title: 'Show Battery Percentage for Connected Devices (If Supported)', title: 'Show Battery Percentage for Connected Devices (If Supported)',
type: 'boolean', type: 'boolean',
}), }),
Option({
opt: options.menus.bluetooth.batteryState,
title: 'Show Battery When',
type: 'enum',
enums: ['connected', 'paired', 'always'],
}),
Option({ Option({
opt: options.menus.bluetooth.batteryIcon, opt: options.menus.bluetooth.batteryIcon,
title: 'Battery Icon', title: 'Battery Icon',