✨ feat: use gtk icons instead of nerdfonts across the shell
also removed hour count from recording widgets
This commit is contained in:
retrozinndev
+46
-32
@@ -1,16 +1,15 @@
|
||||
import { bind, execAsync, GLib } from "astal";
|
||||
import { bind } from "astal";
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
import AstalMpris from "gi://AstalMpris";
|
||||
import { Separator, SeparatorProps } from "../Separator";
|
||||
import { Windows } from "../../windows";
|
||||
import { Clipboard } from "../../scripts/clipboard";
|
||||
|
||||
|
||||
const playerIcons = {
|
||||
spotify: '',
|
||||
clapper: '',
|
||||
mpv: '',
|
||||
spotube: '',
|
||||
firefox: ''
|
||||
spotify: "spotify-symbolic",
|
||||
mpv: "mpv-symbolic",
|
||||
Clapper: "com.github.rafostar.Clapper-symbolic"
|
||||
}
|
||||
|
||||
export function Media(): Gtk.Widget {
|
||||
@@ -28,35 +27,46 @@ export function Media(): Gtk.Widget {
|
||||
children: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
|
||||
players[0] ? [
|
||||
new Widget.Button({
|
||||
className: "link nf",
|
||||
label: "",
|
||||
className: "link",
|
||||
image: new Widget.Icon({
|
||||
icon: "edit-paste-symbolic"
|
||||
} as Widget.IconProps),
|
||||
tooltipText: "Copy link to Clipboard",
|
||||
visible: bind(players[0], "metadata").as((_metadata: GLib.HashTable) =>
|
||||
players[0].get_meta("xesam:url") === null),
|
||||
onClick: () => execAsync(`sh -c "wl-copy \\"$(playerctl metadata 'xesam:url')\\""`)
|
||||
visible: bind(players[0], "metadata").as((meta) =>
|
||||
Boolean(meta["xesam:url"]?.get_string()[0])),
|
||||
onClick: () => Clipboard.getDefault().copyAsync(
|
||||
players[0].metadata["xesam:url"].get_string()[0]
|
||||
)
|
||||
} as Widget.ButtonProps),
|
||||
new Widget.Button({
|
||||
className: "previous nf",
|
||||
label: "",
|
||||
className: "previous",
|
||||
image: new Widget.Icon({
|
||||
icon: "media-skip-backward-symbolic"
|
||||
} as Widget.IconProps),
|
||||
tooltipText: "Previous",
|
||||
onClick: () => players[0].canGoPrevious && players[0].previous()
|
||||
} as Widget.ButtonProps),
|
||||
new Widget.Button({
|
||||
className: "pause nf",
|
||||
tooltipText: bind(players[0], "playback_status").as((status: AstalMpris.PlaybackStatus) =>
|
||||
status === AstalMpris.PlaybackStatus.PLAYING ? "Pause" : "Play"),
|
||||
label: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) =>
|
||||
status === AstalMpris.PlaybackStatus.PLAYING ? "" : ""),
|
||||
onClick: () => {
|
||||
players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
|
||||
players[0].play()
|
||||
:
|
||||
players[0].pause()
|
||||
}
|
||||
className: "play-pause",
|
||||
tooltipText: bind(players[0], "playback_status").as((status) =>
|
||||
status === AstalMpris.PlaybackStatus.PLAYING ?
|
||||
"Pause"
|
||||
: "Play"),
|
||||
image: new Widget.Icon({
|
||||
icon: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) =>
|
||||
status === AstalMpris.PlaybackStatus.PLAYING ?
|
||||
"media-playback-pause-symbolic"
|
||||
: "media-playback-start-symbolic")
|
||||
} as Widget.IconProps),
|
||||
onClick: () => players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
|
||||
players[0].play()
|
||||
: players[0].pause()
|
||||
} as Widget.ButtonProps),
|
||||
new Widget.Button({
|
||||
className: "next nf",
|
||||
label: "",
|
||||
className: "next",
|
||||
image: new Widget.Icon({
|
||||
icon: "media-skip-forward-symbolic"
|
||||
} as Widget.IconProps),
|
||||
tooltipText: "Next",
|
||||
onClick: () => players[0].canGoNext && players[0].next()
|
||||
} as Widget.ButtonProps)
|
||||
@@ -80,13 +90,17 @@ export function Media(): Gtk.Widget {
|
||||
spacing: 4,
|
||||
children: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
|
||||
players[0] ? [
|
||||
new Widget.Label({
|
||||
className: "icon nf",
|
||||
label: bind(players[0], "busName").as((busName: string) => {
|
||||
const playerName: string = busName.split('.')[busName.split('.').length-1];
|
||||
return playerIcons[playerName.toLowerCase() as keyof typeof playerIcons] || "";
|
||||
new Widget.Icon({
|
||||
icon: bind(players[0], "busName").as((busName: string) => {
|
||||
const splitName = busName.split('.').filter(str => str !== "");
|
||||
|
||||
return playerIcons[
|
||||
Object.keys(playerIcons).filter(icon =>
|
||||
splitName[splitName.length - 1].includes(icon))?.[0] as keyof typeof playerIcons
|
||||
]
|
||||
?? "folder-music-symbolic";
|
||||
})
|
||||
} as Widget.LabelProps),
|
||||
} as Widget.IconProps),
|
||||
new Widget.Label({
|
||||
className: "title",
|
||||
label: bind(players[0], "title").as((title: string) => title || "No Title"),
|
||||
|
||||
+38
-38
@@ -24,13 +24,15 @@ export function Status(): Gtk.Widget {
|
||||
className: "sink",
|
||||
endpoint: Wireplumber.getDefault().getDefaultSink(),
|
||||
icon: bind(Wireplumber.getDefault().getDefaultSink(), "volumeIcon").as(icon =>
|
||||
!Wireplumber.getDefault().isMutedSink() && Wireplumber.getDefault().getSinkVolume() > 0 ? icon : "audio-volume-muted-symbolic"),
|
||||
!Wireplumber.getDefault().isMutedSink() && Wireplumber.getDefault().getSinkVolume() > 0 ?
|
||||
icon : "audio-volume-muted-symbolic"),
|
||||
}),
|
||||
volumeStatus({
|
||||
className: "source",
|
||||
endpoint: Wireplumber.getDefault().getDefaultSource(),
|
||||
icon: bind(Wireplumber.getDefault().getDefaultSource(), "volumeIcon").as(icon =>
|
||||
!Wireplumber.getDefault().isMutedSource() && Wireplumber.getDefault().getSourceVolume() > 0 ? icon : "microphone-sensitivity-muted-symbolic"),
|
||||
!Wireplumber.getDefault().isMutedSource() && Wireplumber.getDefault().getSourceVolume() > 0 ?
|
||||
icon : "microphone-sensitivity-muted-symbolic"),
|
||||
}),
|
||||
StatusIcons()
|
||||
]
|
||||
@@ -69,9 +71,10 @@ function StatusIcons(): Gtk.Widget {
|
||||
bind(AstalBluetooth.get_default(), "isConnected")
|
||||
], (powered, connected) => {
|
||||
return powered ? (
|
||||
connected ? ""
|
||||
: ""
|
||||
) : ""
|
||||
connected ?
|
||||
"bluetooth-active-symbolic"
|
||||
: "bluetooth-symbolic"
|
||||
) : "bluetooth-disabled-symbolic"
|
||||
});
|
||||
|
||||
const networkIcon: Variable<string> = Variable.derive([
|
||||
@@ -82,15 +85,15 @@ function StatusIcons(): Gtk.Widget {
|
||||
(primary, wired, wifi) => {
|
||||
switch(primary) {
|
||||
case AstalNetwork.Primary.WIRED: return wired ?
|
||||
""
|
||||
: "";
|
||||
"network-wired-symbolic"
|
||||
: "network-wired-no-route-symbolic";
|
||||
|
||||
case AstalNetwork.Primary.WIFI: return wifi ?
|
||||
""
|
||||
: "";
|
||||
"network-wireless-signal-excellent-symbolic"
|
||||
: "network-wireless-offline-symbolic";
|
||||
}
|
||||
|
||||
return "";
|
||||
return "network-no-route-symbolic";
|
||||
});
|
||||
|
||||
const recordingTimer: Variable<string> = Variable.derive([
|
||||
@@ -103,18 +106,15 @@ function StatusIcons(): Gtk.Widget {
|
||||
const startedAtSeconds = dateTime.to_unix() - Recording.getDefault().startedAt!.to_unix();
|
||||
if(startedAtSeconds <= 0) return "00:00";
|
||||
|
||||
const hours = Math.floor(startedAtSeconds / 120);
|
||||
const minutes = Math.floor(startedAtSeconds / 60);
|
||||
const seconds = Math.floor(startedAtSeconds % 60);
|
||||
|
||||
return `${ hours > 0 ? `${hours < 10 ? `0${hours}` : hours }:` : ""
|
||||
}${ minutes < 10 ? `0${minutes}` : minutes
|
||||
}:${ seconds < 10 ? `0${seconds}` : seconds }`;
|
||||
return `${ minutes < 10 ? `0${minutes}` : minutes }:${ seconds < 10 ? `0${seconds}` : seconds }`;
|
||||
});
|
||||
|
||||
return new Widget.Box({
|
||||
className: "status-icons",
|
||||
spacing: 3,
|
||||
spacing: 8,
|
||||
children: [
|
||||
new Widget.Revealer({
|
||||
revealChild: bind(Recording.getDefault(), "recording"),
|
||||
@@ -127,10 +127,11 @@ function StatusIcons(): Gtk.Widget {
|
||||
tooltipText: tr("control_center.tiles.recording.enabled_desc"),
|
||||
child: new Widget.Box({
|
||||
children: [
|
||||
new Widget.Label({
|
||||
className: "recording nf state",
|
||||
label: ''
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Icon({
|
||||
className: "recording state",
|
||||
icon: "media-record-symbolic",
|
||||
css: "margin-right: 4px;"
|
||||
} as Widget.IconProps),
|
||||
new Widget.Label({
|
||||
className: "rec-time",
|
||||
label: recordingTimer()
|
||||
@@ -139,32 +140,31 @@ function StatusIcons(): Gtk.Widget {
|
||||
} as Widget.BoxProps)
|
||||
} as Widget.EventBoxProps)
|
||||
} as Widget.RevealerProps),
|
||||
new Widget.Label({
|
||||
className: "bluetooth nf state",
|
||||
new Widget.Icon({
|
||||
className: "bluetooth state",
|
||||
visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),
|
||||
label: bluetoothIcon(),
|
||||
icon: bluetoothIcon(),
|
||||
onDestroy: () => bluetoothIcon.drop()
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "network nf state",
|
||||
label: networkIcon(),
|
||||
} as Widget.IconProps),
|
||||
new Widget.Icon({
|
||||
className: "network state",
|
||||
icon: networkIcon(),
|
||||
onDestroy: () => networkIcon.drop()
|
||||
} as Widget.LabelProps),
|
||||
} as Widget.IconProps),
|
||||
new Widget.Box({
|
||||
children: [
|
||||
new Widget.Label({
|
||||
className: "bell nf state",
|
||||
label: bind(Notifications.getDefault().getNotifd(), "dontDisturb").as((dnd: boolean) =>
|
||||
dnd ? "" : "")
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "notification-count nf",
|
||||
xalign: 0,
|
||||
yalign: 0.25,
|
||||
new Widget.Icon({
|
||||
className: "bell state",
|
||||
icon: bind(Notifications.getDefault().getNotifd(), "dontDisturb").as((dnd) =>
|
||||
dnd ? "minus-circle-filled-symbolic"
|
||||
: "preferences-system-notifications-symbolic")
|
||||
} as Widget.IconProps),
|
||||
new Widget.Icon({
|
||||
className: "notification-count",
|
||||
visible: bind(Notifications.getDefault(), "history").as(history =>
|
||||
history.length > 0),
|
||||
label: ''
|
||||
} as Widget.LabelProps)
|
||||
icon: "circle-filled-symbolic"
|
||||
} as Widget.IconProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user