Added media, menu, network and power modules to bar.

This commit is contained in:
Jas Singh
2024-06-09 03:44:16 -07:00
parent 6ff50006f2
commit 3579e563b8
17 changed files with 156 additions and 27 deletions

View File

@@ -1,12 +1,15 @@
import { Menu } from "./menu/index.js";
import { Workspaces } from "./workspaces/index.js";
import { ClientTitle } from "./window_title/index.js";
import { Media } from "./media/index.js";
import { Notification } from "./notification/index.js";
import { Volume } from "./volume/index.js";
import { Network } from "./network/index.js";
import { Bluetooth } from "./bluetooth/index.js";
import { BatteryLabel } from "./battery/index.js";
import { Clock } from "./clock/index.js";
import { SysTray } from "./systray/index.js";
import { Power } from "./power/index.js";
import { BarItemBox } from "../shared/barItemBox.js";
@@ -16,7 +19,7 @@ const Left = () => {
class_name: "box-left",
hpack: "start",
spacing: 5,
children: [BarItemBox(Workspaces()), BarItemBox(ClientTitle())],
children: [Menu(), BarItemBox(Workspaces()), BarItemBox(ClientTitle())],
});
};
@@ -35,10 +38,12 @@ const Right = () => {
spacing: 5,
children: [
BarItemBox(Volume()),
BarItemBox(Network()),
BarItemBox(Bluetooth()),
BarItemBox(BatteryLabel()),
BarItemBox(SysTray()),
BarItemBox(Clock()),
BarItemBox(Power()),
],
});
};

View File

@@ -1,24 +1,49 @@
const mpris = await Service.import("mpris");
const Media = () => {
const activePlayer = Variable(mpris.players[0]);
mpris.connect("changed", (value) => {
const statusOrder = {
Playing: 1,
Paused: 2,
Stopped: 3,
};
const isPlaying = value.players.find(
(p) => p["play-back-status"] === "Playing",
);
if (isPlaying) {
activePlayer.value = value.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
}
});
const label = Utils.watch("", mpris, "player-changed", () => {
if (mpris.players[0]) {
const { track_artists, track_title } = mpris.players[0];
return `${track_artists.join(", ")} - ${track_title}`;
if (activePlayer.value) {
const { track_artists, track_title } = activePlayer.value;
return `󰝚 ${track_title} - ${track_artists.join(", ")} 󰝚`;
} else {
return "Nothing is playing";
}
});
return {
component: Widget.Button({
class_name: "media",
on_primary_click: () => mpris.getPlayer("")?.playPause(),
on_scroll_up: () => mpris.getPlayer("")?.next(),
on_scroll_down: () => mpris.getPlayer("")?.previous(),
child: Widget.Label({ label }),
component: Widget.Box({
visible: false,
child: Widget.Button({
class_name: "media",
on_primary_click: () => mpris.getPlayer("")?.playPause(),
on_scroll_up: () => mpris.getPlayer("")?.next(),
on_scroll_down: () => mpris.getPlayer("")?.previous(),
child: Widget.Label({ label }),
}),
}),
isVisible: false,
name: "media",
};
};

10
modules/bar/menu/index.js Normal file
View File

@@ -0,0 +1,10 @@
export const Menu = () => {
return Widget.Box({
child: Widget.Button({
child: Widget.Label({
class_name: "bar-menu_label",
label: "󰣇",
}),
}),
});
};

View File

@@ -0,0 +1,32 @@
const network = await Service.import("network");
const Network = () => {
const wifiIndicator = [
Widget.Icon({
icon: network.wifi.bind("icon_name"),
}),
Widget.Label({
label: network.wifi
.bind("ssid")
.as((ssid) => (ssid ? ` ${ssid}` : " Unknown")),
}),
];
const wiredIndicator = [
Widget.Label({
label: network.bind("wired").as(() => "󰈀 Wired"),
}),
];
return {
component: Widget.Box({
class_name: "bar-network",
children: network
.bind("primary")
.as((w) => (w === "wired" ? wiredIndicator : wifiIndicator)),
}),
isVisible: true,
};
};
export { Network };

View File

@@ -0,0 +1,13 @@
export const Power = () => {
return {
component: Widget.Box({
child: Widget.Button({
child: Widget.Label({
class_name: "bar-power_label",
label: "⏻",
}),
}),
}),
isVisible: true,
};
};

View File

@@ -15,8 +15,10 @@ const filterTitle = (titleString) => {
[" ", "󰇄 Desktop"],
["(.*) Spotify Free", "󰓇 Spotify"],
["(.*)Spotify Premium", "󰓇 Spotify"],
["Spotify", "󰓇 Spotify"],
[" ~", " Terminal"],
["(.*) - Obsidian(.*)", "󱓧 Obsidian"],
["(.*)", `󰣆 ${titleString.charAt(0).toUpperCase() + titleString.slice(1)}`],
];
const foundMatch = windowTitleMap.find((wt) =>

View File

@@ -5,11 +5,11 @@ export const BarItemBox = (child) => {
}
return child.isVisible;
}
};
return Widget.Box({
class_name: "bar_item_box_visible",
child: child.component,
visible: computeVisible()
visible: computeVisible(),
});
};

View File

@@ -27,7 +27,7 @@
}
.bar-volume_icon {
font-size: 17px;
font-size: 1.3rem;
color: $peach;
}

View File

@@ -2,16 +2,14 @@
.bar {
background: $mantle;
}
.bar * {
font-weight: bold;
font-size: 1.15rem;
font-weight: 800;
}
.bar_item_box_visible {
background: $surface0;
border-radius: 8px;
padding: 1px 12px;
padding: 2px 12px;
margin: 6px 3px;
}

View File

@@ -1,7 +1,7 @@
@import '../colors';
.bar-bt_icon {
font-size: 17px;
font-size: 1.3rem;
color: $sky;
}

5
scss/bar/media.scss Normal file
View File

@@ -0,0 +1,5 @@
@import "../colors";
.media {
color: $green;
}

7
scss/bar/menu.scss Normal file
View File

@@ -0,0 +1,7 @@
@import "../colors";
.bar-menu_label {
color: $teal;
margin-right: 20px;
font-size: 2rem;
}

5
scss/bar/network.scss Normal file
View File

@@ -0,0 +1,5 @@
@import "../colors";
.bar-network {
color: $mauve;
}

6
scss/bar/power.scss Normal file
View File

@@ -0,0 +1,6 @@
@import "../colors";
.bar-power_label {
color: $red;
margin-right: 2px;
}

View File

@@ -8,10 +8,14 @@
@import "common";
//modules - bar
@import "bar/menu";
@import "bar/audio";
@import "bar/media";
@import "bar/network";
@import "bar/bluetooth";
@import "bar/clock";
@import "bar/workspace";
@import "bar/window_title";
@import "bar/systray";
@import "bar/power";
@import "bar/bar";

View File

@@ -232,6 +232,12 @@ spinner:checked {
animation: spin 1s linear infinite;
}
.bar-menu_label {
color: #94e2d5;
margin-right: 20px;
font-size: 2rem;
}
.audio-volume-box .audio-volume-label {
min-width: 3rem;
}
@@ -253,7 +259,7 @@ spinner:checked {
}
.bar-volume_icon {
font-size: 17px;
font-size: 1.3rem;
color: #fab387;
}
@@ -261,8 +267,16 @@ spinner:checked {
color: #fab387;
}
.media {
color: #a6e3a1;
}
.bar-network {
color: #cba6f7;
}
.bar-bt_icon {
font-size: 17px;
font-size: 1.3rem;
color: #89dceb;
}
@@ -328,18 +342,21 @@ spinner:checked {
background-color: #b4befe;
}
.bar {
background: #181825;
.bar-power_label {
color: #f38ba8;
margin-right: 2px;
}
.bar * {
font-weight: bold;
.bar {
background: #181825;
font-size: 1.15rem;
font-weight: 800;
}
.bar_item_box_visible {
background: #313244;
border-radius: 8px;
padding: 1px 12px;
padding: 2px 12px;
margin: 6px 3px;
}

View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common.scss","scss/colors.scss","scss/bar/audio.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC9CW;;;ADiDb;AAAA;AAAA;EAGE;EACA,kBCrDW;;;ADwDb;AAAA;AAAA;EAGE;EACA,kBC5DW;;;AD+Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC3EW;;;AD8Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCzHW;;;AD4Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC3IW;ED4IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AEjOA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,ODRM;;;ACWR;EACE,ODZM;;;AEpBR;EACE;EACA,OFsBI;;;AEnBN;EACE,OFkBI;;;AGxBN;EACE,OHeK;;;AIfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBJmBO;;AIjBP;EACE,kBJQG;EIPH;EACA;;AAGF;EACE,kBJOA;EINA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OLoBO;;;AMrBT;EACE;;;AAGF;EACE,YNiCO;;;AM/BT;EACE;EACA,ONkBS;;;AMfX;EACE,kBNsBS;;;AMnBX;EACE,kBNmBS;EMlBT;;;AAGF;EACE,kBNKS;;;AO3BX;EACE,YPqCO;;;AOlCT;EACE;;;AAGF;EACE,YP2BS;EO1BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common.scss","scss/colors.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC9CW;;;ADiDb;AAAA;AAAA;EAGE;EACA,kBCrDW;;;ADwDb;AAAA;AAAA;EAGE;EACA,kBC5DW;;;AD+Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC3EW;;;AD8Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCzHW;;;AD4Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC3IW;ED4IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AElOF;EACE,ODsBK;ECrBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OFRM;;;AEWR;EACE,OFZM;;;AGpBR;EACE,OHqBM;;;AItBR;EACE,OJgBM;;;AKjBR;EACE;EACA,OLsBI;;;AKnBN;EACE,OLkBI;;;AMxBN;EACE,ONeK;;;AOfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBPmBO;;AOjBP;EACE,kBPQG;EOPH;EACA;;AAGF;EACE,kBPOA;EONA;EACA;;;AAMN;EACE;;;AC1BF;EACE,ORoBO;;;ASrBT;EACE;;;AAGF;EACE,YTiCO;;;AS/BT;EACE;EACA,OTkBS;;;ASfX;EACE,kBTsBS;;;ASnBX;EACE,kBTmBS;ESlBT;;;AAGF;EACE,kBTKS;;;AU3BX;EACE,OViBI;EUhBJ;;;ACFF;EACE,YXqCO;EWpCP;EACA;;;AAGF;EACE,YX6BS;EW5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"style.css"}