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

Update how conditional elements are rendered for bar modules. (#688)

Browse Source
This commit is contained in:
Jas Singh
2025-01-03 00:23:10 -08:00
committed by GitHub
parent 0533965c86
commit e525d9e03a
6 changed files with 105 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/bar/modules/bluetooth/index.tsx
View File

@@ -11,11 +11,11 @@ import { Astal } from 'astal/gtk3';
const { rightClick, middleClick, scrollDown, scrollUp } = options.bar.bluetooth;
const Bluetooth = (): BarBoxChild => {
const btIcon = (isPowered: boolean): JSX.Element => (
const BluetoothIcon = ({ isPowered }: BluetoothIconProps): JSX.Element => (
<label className={'bar-button-icon bluetooth txt-icon bar'} label={isPowered ? '󰂯' : '󰂲'} />
);
const btText = (isPowered: boolean, devices: AstalBluetooth.Device[]): JSX.Element => {
const BluetoothLabel = ({ isPowered, devices }: BluetoothLabelProps): JSX.Element => {
const connectDevices = devices.filter((device) => device.connected);
const label =
@@ -39,11 +39,17 @@ const Bluetooth = (): BarBoxChild => {
const componentBinding = Variable.derive(
[bind(options.bar.bluetooth.label), bind(bluetoothService, 'isPowered'), bind(bluetoothService, 'devices')],
(showLabel: boolean, isPowered: boolean, devices: AstalBluetooth.Device[]): JSX.Element[] => {
(showLabel: boolean, isPowered: boolean, devices: AstalBluetooth.Device[]): JSX.Element => {
if (showLabel) {
return [btIcon(isPowered), btText(isPowered, devices)];
return (
<box>
<BluetoothIcon isPowered={isPowered} />
<BluetoothLabel isPowered={isPowered} devices={devices} />
</box>
);
}
return [btIcon(isPowered)];
return <BluetoothIcon isPowered={isPowered} />;
},
);
@@ -101,4 +107,13 @@ const Bluetooth = (): BarBoxChild => {
};
};
interface BluetoothIconProps {
isPowered: boolean;
}
interface BluetoothLabelProps {
isPowered: boolean;
devices: AstalBluetooth.Device[];
}
export { Bluetooth };

15
src/components/bar/modules/clock/index.tsx
View File

@@ -13,8 +13,8 @@ const { style } = options.theme.bar.buttons;
const time = Variable.derive([systemTime, format], (c, f) => c.format(f) || '');
const Clock = (): BarBoxChild => {
const clockTime = <label className={'bar-button-label clock bar'} label={bind(time)} />;
const clockIcon = <label className={'bar-button-icon clock txt-icon bar'} label={bind(icon)} />;
const ClockTime = (): JSX.Element => <label className={'bar-button-label clock bar'} label={bind(time)} />;
const ClockIcon = (): JSX.Element => <label className={'bar-button-icon clock txt-icon bar'} label={bind(icon)} />;
const componentClassName = Variable.derive(
[bind(style), bind(showIcon), bind(showTime)],
@@ -31,11 +31,16 @@ const Clock = (): BarBoxChild => {
const componentChildren = Variable.derive([bind(showIcon), bind(showTime)], (shIcn, shTm) => {
if (shIcn && !shTm) {
return [clockIcon];
return <ClockIcon />;
} else if (shTm && !shIcn) {
return [clockTime];
return <ClockTime />;
}
return [clockIcon, clockTime];
return (
<box>
<ClockIcon />
<ClockTime />
</box>
);
});
const component = (

7
src/components/bar/modules/network/index.tsx
View File

@@ -23,7 +23,7 @@ const Network = (): BarBoxChild => {
},
);
const networkIcon = <icon className={'bar-button-icon network-icon'} icon={iconBinding()} />;
const NetworkIcon = (): JSX.Element => <icon className={'bar-button-icon network-icon'} icon={iconBinding()} />;
const networkLabel = Variable.derive(
[
@@ -66,8 +66,6 @@ const Network = (): BarBoxChild => {
},
);
const componentChildren = [networkIcon, networkLabel()];
const component = (
<box
vexpand
@@ -79,7 +77,8 @@ const Network = (): BarBoxChild => {
componentClassName.drop();
}}
>
{componentChildren}
<NetworkIcon />
{networkLabel()}
</box>
);

15
src/components/bar/modules/notifications/index.tsx
View File

@@ -44,7 +44,7 @@ export const Notifications = (): BarBoxChild => {
) => {
const filteredNotifications = filterNotifications(notif, ignoredNotifs);
const notifIcon = (
const NotifIcon = (): JSX.Element => (
<label
halign={Gtk.Align.CENTER}
className={'bar-button-icon notifications txt-icon bar'}
@@ -52,7 +52,7 @@ export const Notifications = (): BarBoxChild => {
/>
);
const notifLabel = (
const NotifLabel = (): JSX.Element => (
<label
halign={Gtk.Align.CENTER}
className={'bar-button-label notifications'}
@@ -62,11 +62,16 @@ export const Notifications = (): BarBoxChild => {
if (showTotal) {
if (hideCountForZero && filteredNotifications.length === 0) {
return [notifIcon];
return <NotifIcon />;
}
return [notifIcon, notifLabel];
return (
<box>
<NotifIcon />
<NotifLabel />
</box>
);
}
return [notifIcon];
return <NotifIcon />;
},
);

27
src/components/bar/modules/volume/index.tsx
View File

@@ -11,12 +11,12 @@ import { Astal } from 'astal/gtk3';
const { rightClick, middleClick, scrollUp, scrollDown } = options.bar.volume;
const Volume = (): BarBoxChild => {
const volumeIcon = (isMuted: boolean, vol: number): JSX.Element => {
return <label className={'bar-button-icon volume txt-icon bar'} label={getIcon(isMuted, vol)} />;
const VolumeIcon = ({ isMuted, volume }: VolumeIconProps): JSX.Element => {
return <label className={'bar-button-icon volume txt-icon bar'} label={getIcon(isMuted, volume)} />;
};
const volumeLabel = (vol: number): JSX.Element => {
return <label className={'bar-button-label volume'} label={`${Math.round(vol * 100)}%`} />;
const VolumeLabel = ({ volume }: VolumeLabelProps): JSX.Element => {
return <label className={'bar-button-label volume'} label={`${Math.round(volume * 100)}%`} />;
};
const componentTooltip = Variable.derive(
@@ -49,9 +49,15 @@ const Volume = (): BarBoxChild => {
],
(showLabel, vol, isMuted) => {
if (showLabel) {
return [volumeIcon(isMuted, vol), volumeLabel(vol)];
return (
<box>
<VolumeIcon isMuted={isMuted} volume={vol} />
<VolumeLabel volume={vol} />
</box>
);
}
return [volumeIcon(isMuted, vol)];
return <VolumeIcon isMuted={isMuted} volume={vol} />;
},
);
const component = (
@@ -117,4 +123,13 @@ const Volume = (): BarBoxChild => {
};
};
interface VolumeIconProps {
isMuted: boolean;
volume: number;
}
interface VolumeLabelProps {
volume: number;
}
export { Volume };

53
src/components/bar/modules/window_title/index.tsx
View File

@@ -13,6 +13,26 @@ const { leftClick, rightClick, middleClick, scrollDown, scrollUp } = options.bar
const ClientTitle = (): BarBoxChild => {
const { custom_title, class_name, label, icon, truncation, truncation_size } = options.bar.windowtitle;
const ClientIcon = ({ client }: ClientIconProps): JSX.Element => {
return <label className={'bar-button-icon windowtitle txt-icon bar'} label={getWindowMatch(client).icon} />;
};
const ClientLabel = ({
client,
useCustomTitle,
useClassName,
showIcon,
truncate,
truncationSize,
}: ClientLabelProps): JSX.Element => {
return (
<label
className={`bar-button-label windowtitle ${showIcon ? '' : 'no-icon'}`}
label={truncateTitle(getTitle(client, useCustomTitle, useClassName), truncate ? truncationSize : -1)}
/>
);
};
const componentClassName = Variable.derive(
[bind(options.theme.bar.buttons.style), bind(label)],
(style: string, showLabel: boolean) => {
@@ -48,22 +68,18 @@ const ClientTitle = (): BarBoxChild => {
const children: JSX.Element[] = [];
if (showIcon) {
children.push(
<label
className={'bar-button-icon windowtitle txt-icon bar'}
label={getWindowMatch(client).icon}
/>,
);
children.push(<ClientIcon client={client} />);
}
if (showLabel) {
children.push(
<label
className={`bar-button-label windowtitle ${showIcon ? '' : 'no-icon'}`}
label={truncateTitle(
getTitle(client, useCustomTitle, useClassName),
truncate ? truncationSize : -1,
)}
<ClientLabel
client={client}
useCustomTitle={useCustomTitle}
useClassName={useClassName}
truncate={truncate}
truncationSize={truncationSize}
showIcon={showIcon}
/>,
);
}
@@ -122,4 +138,17 @@ const ClientTitle = (): BarBoxChild => {
};
};
interface ClientIconProps {
client: AstalHyprland.Client;
}
interface ClientLabelProps {
client: AstalHyprland.Client;
useCustomTitle: boolean;
useClassName: boolean;
showIcon: boolean;
truncate: boolean;
truncationSize: number;
}
export { ClientTitle };