Fix NerdFont icon alignments. (#143)
* WIP * Fix nerdfont icon alignments * Ship needed fonts * Remove italicised fonts * Update readme and separate OSD settings into their own category. * Dashboard styling updates --------- Co-authored-by: matavach <erik@matijevich.org>
This commit is contained in:
Jas Singh
GitHub
@@ -37,8 +37,8 @@ const renderInputDevices = (inputDevices: Stream[]) => {
|
||||
.bind("description")
|
||||
.as((v) =>
|
||||
device.description === v
|
||||
? "menu-button-icon active input"
|
||||
: "menu-button-icon input",
|
||||
? "menu-button-icon active input txt-icon"
|
||||
: "menu-button-icon input txt-icon",
|
||||
),
|
||||
label: "",
|
||||
}),
|
||||
|
||||
@@ -31,8 +31,8 @@ const renderPlaybacks = (playbackDevices: Stream[]) => {
|
||||
.bind("description")
|
||||
.as((v) =>
|
||||
device.description === v
|
||||
? "menu-button-icon active playback"
|
||||
: "menu-button-icon playback",
|
||||
? "menu-button-icon active playback txt-icon"
|
||||
: "menu-button-icon playback txt-icon",
|
||||
),
|
||||
label: "",
|
||||
}),
|
||||
|
||||
@@ -13,7 +13,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
|
||||
class_name: "menu-icon-button unpair bluetooth",
|
||||
child: Widget.Label({
|
||||
tooltip_text: dev.paired ? "Unpair" : "Pair",
|
||||
class_name: "menu-icon-button-label unpair bluetooth",
|
||||
class_name: "menu-icon-button-label unpair bluetooth txt-icon",
|
||||
label: dev.paired ? "" : "",
|
||||
}),
|
||||
on_primary_click: () =>
|
||||
@@ -32,7 +32,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
|
||||
class_name: "menu-icon-button disconnect bluetooth",
|
||||
child: Widget.Label({
|
||||
tooltip_text: dev.connected ? "Disconnect" : "Connect",
|
||||
class_name: "menu-icon-button-label disconnect bluetooth",
|
||||
class_name: "menu-icon-button-label disconnect bluetooth txt-icon",
|
||||
label: dev.connected ? "" : "",
|
||||
}),
|
||||
on_primary_click: () => dev.setConnection(!dev.connected),
|
||||
@@ -41,7 +41,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
|
||||
class_name: "menu-icon-button untrust bluetooth",
|
||||
child: Widget.Label({
|
||||
tooltip_text: dev.trusted ? "Untrust" : "Trust",
|
||||
class_name: "menu-icon-button-label untrust bluetooth",
|
||||
class_name: "menu-icon-button-label untrust bluetooth txt-icon",
|
||||
label: dev.trusted ? "" : "",
|
||||
}),
|
||||
on_primary_click: () =>
|
||||
@@ -60,7 +60,7 @@ const connectedControls = (dev: BluetoothDevice, connectedDevices: BluetoothDevi
|
||||
class_name: "menu-icon-button delete bluetooth",
|
||||
child: Widget.Label({
|
||||
tooltip_text: "Forget",
|
||||
class_name: "menu-icon-button-label delete bluetooth",
|
||||
class_name: "menu-icon-button-label delete bluetooth txt-icon",
|
||||
label: "",
|
||||
}),
|
||||
on_primary_click: () => {
|
||||
|
||||
@@ -86,7 +86,7 @@ const devices = (bluetooth: Bluetooth, self: Box<any, any>) => {
|
||||
children: [
|
||||
Widget.Label({
|
||||
vpack: "start",
|
||||
class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""}`,
|
||||
class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""} txt-icon`,
|
||||
label: getBluetoothIcon(`${device["icon-name"]}-symbolic`),
|
||||
}),
|
||||
Widget.Box({
|
||||
|
||||
@@ -16,7 +16,7 @@ export const TodayStats = (theWeather: Variable<Weather>) => {
|
||||
class_name: "weather wind",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "weather wind icon",
|
||||
class_name: "weather wind icon txt-icon",
|
||||
label: "",
|
||||
}),
|
||||
Widget.Label({
|
||||
@@ -37,7 +37,7 @@ export const TodayStats = (theWeather: Variable<Weather>) => {
|
||||
class_name: "weather precip",
|
||||
children: [
|
||||
Widget.Label({
|
||||
class_name: "weather precip icon",
|
||||
class_name: "weather precip icon txt-icon",
|
||||
label: "",
|
||||
}),
|
||||
Widget.Label({
|
||||
|
||||
@@ -64,7 +64,7 @@ export const TodayTemperature = (theWeather: Variable<Weather>) => {
|
||||
.bind("value")
|
||||
.as(
|
||||
(v) =>
|
||||
`calendar-menu-weather today temp label icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
|
||||
`calendar-menu-weather today temp label icon txt-icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
|
||||
),
|
||||
label: theWeather
|
||||
.bind("value")
|
||||
|
||||
@@ -4,93 +4,98 @@ const notifications = await Service.import("notifications");
|
||||
const audio = await Service.import("audio");
|
||||
|
||||
const Controls = () => {
|
||||
return Widget.Box({
|
||||
class_name: "dashboard-card controls-container",
|
||||
hpack: "fill",
|
||||
vpack: "fill",
|
||||
expand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Wifi",
|
||||
return Widget.Box({
|
||||
class_name: "dashboard-card controls-container",
|
||||
hpack: "fill",
|
||||
vpack: "fill",
|
||||
expand: true,
|
||||
setup: (self) => {
|
||||
self.hook(network, () => {
|
||||
return (self.class_name = `dashboard-button wifi ${!network.wifi.enabled ? "disabled" : ""}`);
|
||||
});
|
||||
},
|
||||
on_primary_click: () => network.toggleWifi(),
|
||||
child: Widget.Label({
|
||||
setup: (self) => {
|
||||
self.hook(network, () => {
|
||||
return (self.label = network.wifi.enabled ? "" : "");
|
||||
});
|
||||
},
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Bluetooth",
|
||||
expand: true,
|
||||
class_name: bluetooth
|
||||
.bind("enabled")
|
||||
.as(
|
||||
(btOn) => `dashboard-button bluetooth ${!btOn ? "disabled" : ""}`,
|
||||
),
|
||||
on_primary_click: () => bluetooth.toggle(),
|
||||
child: Widget.Label({
|
||||
label: bluetooth.bind("enabled").as((btOn) => (btOn ? "" : "")),
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Notifications",
|
||||
expand: true,
|
||||
class_name: notifications
|
||||
.bind("dnd")
|
||||
.as(
|
||||
(dnd) => `dashboard-button notifications ${dnd ? "disabled" : ""}`,
|
||||
),
|
||||
on_primary_click: () => (notifications.dnd = !notifications.dnd),
|
||||
child: Widget.Label({
|
||||
label: notifications.bind("dnd").as((dnd) => (dnd ? "" : "")),
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Mute (Playback)",
|
||||
expand: true,
|
||||
on_primary_click: () =>
|
||||
(audio.speaker.is_muted = !audio.speaker.is_muted),
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? "disabled" : ""}`);
|
||||
});
|
||||
},
|
||||
child: Widget.Label({
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.label = audio.speaker.is_muted ? "" : "");
|
||||
});
|
||||
},
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Mute (Microphone)",
|
||||
expand: true,
|
||||
on_primary_click: () =>
|
||||
(audio.microphone.is_muted = !audio.microphone.is_muted),
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? "disabled" : ""}`);
|
||||
});
|
||||
},
|
||||
child: Widget.Label({
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.label = audio.microphone.is_muted ? "" : "");
|
||||
});
|
||||
},
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
children: [
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Wifi",
|
||||
expand: true,
|
||||
setup: (self) => {
|
||||
self.hook(network, () => {
|
||||
return (self.class_name = `dashboard-button wifi ${!network.wifi.enabled ? "disabled" : ""}`);
|
||||
});
|
||||
},
|
||||
on_primary_click: () => network.toggleWifi(),
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
setup: (self) => {
|
||||
self.hook(network, () => {
|
||||
return (self.label = network.wifi.enabled ? "" : "");
|
||||
});
|
||||
},
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Bluetooth",
|
||||
expand: true,
|
||||
class_name: bluetooth
|
||||
.bind("enabled")
|
||||
.as(
|
||||
(btOn) => `dashboard-button bluetooth ${!btOn ? "disabled" : ""}`,
|
||||
),
|
||||
on_primary_click: () => bluetooth.toggle(),
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
label: bluetooth.bind("enabled").as((btOn) => (btOn ? "" : "")),
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Notifications",
|
||||
expand: true,
|
||||
class_name: notifications
|
||||
.bind("dnd")
|
||||
.as(
|
||||
(dnd) => `dashboard-button notifications ${dnd ? "disabled" : ""}`,
|
||||
),
|
||||
on_primary_click: () => (notifications.dnd = !notifications.dnd),
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
label: notifications.bind("dnd").as((dnd) => (dnd ? "" : "")),
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Mute (Playback)",
|
||||
expand: true,
|
||||
on_primary_click: () =>
|
||||
(audio.speaker.is_muted = !audio.speaker.is_muted),
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? "disabled" : ""}`);
|
||||
});
|
||||
},
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.label = audio.speaker.is_muted ? "" : "");
|
||||
});
|
||||
},
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
tooltip_text: "Toggle Mute (Microphone)",
|
||||
expand: true,
|
||||
on_primary_click: () =>
|
||||
(audio.microphone.is_muted = !audio.microphone.is_muted),
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? "disabled" : ""}`);
|
||||
});
|
||||
},
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
setup: (self) => {
|
||||
self.hook(audio, () => {
|
||||
return (self.label = audio.microphone.is_muted ? "" : "");
|
||||
});
|
||||
},
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
export { Controls };
|
||||
|
||||
@@ -88,7 +88,7 @@ const Shortcuts = () => {
|
||||
.bind("value")
|
||||
.as((cmd) => () => handleClick(cmd)),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: left.shortcut1.icon.bind("value"),
|
||||
}),
|
||||
}),
|
||||
@@ -99,7 +99,7 @@ const Shortcuts = () => {
|
||||
.bind("value")
|
||||
.as((cmd) => () => handleClick(cmd)),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: left.shortcut2.icon.bind("value"),
|
||||
}),
|
||||
}),
|
||||
@@ -117,7 +117,7 @@ const Shortcuts = () => {
|
||||
.as((cmd) => () => handleClick(cmd)),
|
||||
child: Widget.Label({
|
||||
hpack: "center",
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: left.shortcut3.icon.bind("value"),
|
||||
}),
|
||||
}),
|
||||
@@ -128,7 +128,7 @@ const Shortcuts = () => {
|
||||
.bind("value")
|
||||
.as((cmd) => () => handleClick(cmd)),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: left.shortcut4.icon.bind("value"),
|
||||
}),
|
||||
}),
|
||||
@@ -152,7 +152,7 @@ const Shortcuts = () => {
|
||||
.bind("value")
|
||||
.as((cmd) => () => handleClick(cmd)),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: right.shortcut1.icon.bind("value"),
|
||||
}),
|
||||
}),
|
||||
@@ -164,7 +164,7 @@ const Shortcuts = () => {
|
||||
App.toggleWindow("settings-dialog");
|
||||
},
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
@@ -181,7 +181,7 @@ const Shortcuts = () => {
|
||||
.bind("value")
|
||||
.as((cmd) => () => handleClick(cmd)),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: right.shortcut3.icon.bind("value"),
|
||||
}),
|
||||
}),
|
||||
@@ -206,7 +206,7 @@ const Shortcuts = () => {
|
||||
});
|
||||
},
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
class_name: "button-label txt-icon",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
|
||||
@@ -128,7 +128,10 @@ const Stats = () => {
|
||||
);
|
||||
}
|
||||
}),
|
||||
label: "",
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
label: "",
|
||||
})
|
||||
}),
|
||||
Widget.Button({
|
||||
on_primary_click: terminal.bind("value").as(term => {
|
||||
@@ -227,7 +230,10 @@ const Stats = () => {
|
||||
);
|
||||
}
|
||||
}),
|
||||
label: "",
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
label: "",
|
||||
})
|
||||
}),
|
||||
Widget.Button({
|
||||
on_primary_click: terminal.bind("value").as(term => {
|
||||
@@ -273,7 +279,10 @@ const Stats = () => {
|
||||
);
|
||||
}
|
||||
}),
|
||||
label: "",
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
label: "",
|
||||
})
|
||||
}),
|
||||
Widget.Button({
|
||||
on_primary_click: terminal.bind("value").as(term => {
|
||||
@@ -318,7 +327,10 @@ const Stats = () => {
|
||||
);
|
||||
}
|
||||
}),
|
||||
label: "",
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon",
|
||||
label: "",
|
||||
})
|
||||
}),
|
||||
Widget.Button({
|
||||
on_primary_click: terminal.bind("value").as(term => {
|
||||
|
||||
@@ -132,7 +132,7 @@ const renderWAPs = (self: any, network: Network, staging: Variable<AccessPoint>,
|
||||
children: [
|
||||
Widget.Label({
|
||||
vpack: "start",
|
||||
class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""}`,
|
||||
class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""} txt-icon`,
|
||||
label: getWifiIcon(`${ap["iconName"]}`),
|
||||
}),
|
||||
Widget.Box({
|
||||
@@ -202,6 +202,7 @@ const renderWAPs = (self: any, network: Network, staging: Variable<AccessPoint>,
|
||||
});
|
||||
},
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon delete-network",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
|
||||
@@ -23,6 +23,7 @@ const Controls = (notifs) => {
|
||||
children: [
|
||||
Widget.Switch({
|
||||
class_name: "menu-switch notifications",
|
||||
vpack: "center",
|
||||
active: notifs.bind("dnd").as((dnd: boolean) => !dnd),
|
||||
on_activate: ({ active }) => {
|
||||
notifs.dnd = !active;
|
||||
@@ -41,7 +42,7 @@ const Controls = (notifs) => {
|
||||
tooltip_text: "Clear Notifications",
|
||||
on_primary_click: () => notifs.clear(),
|
||||
child: Widget.Label({
|
||||
class_name: "clear-notifications-label",
|
||||
class_name: "clear-notifications-label txt-icon",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
|
||||
@@ -6,6 +6,7 @@ export const CloseButton = (notif: Notification, notifs: Notifications) => {
|
||||
notifs.CloseNotification(notif.id);
|
||||
},
|
||||
child: Widget.Label({
|
||||
class_name: "txt-icon notif-close",
|
||||
label: "",
|
||||
hpack: "center",
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user