update and refactor
This commit is contained in:
+4
-1
@@ -9,12 +9,15 @@ window.Bar {
|
||||
background: transparent;
|
||||
border-radius: 20px;
|
||||
margin: 2px 5px 0 5px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.Menubutton {
|
||||
all: unset;
|
||||
background-color: black;
|
||||
/* background-color: black; */
|
||||
border-radius: 25px;
|
||||
border: 3pt solid black;
|
||||
background-color: rgb(70, 70, 70);
|
||||
&:hover label {
|
||||
transition: 300ms;
|
||||
background-color: gray;
|
||||
|
||||
@@ -13,10 +13,14 @@ import {
|
||||
LauncherButton,
|
||||
PowerMenuButton,
|
||||
MediaPlayerButton,
|
||||
Volume,
|
||||
} from "./modules/export";
|
||||
// import Wp from "gi://AstalWp";
|
||||
// import { bind } from "astal";
|
||||
|
||||
export default function Bar(gdkmonitor: Gdk.Monitor) {
|
||||
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
|
||||
// const speaker = Wp.get_default()?.audio.defaultSpeaker!;
|
||||
return (
|
||||
<>
|
||||
<window
|
||||
@@ -39,6 +43,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
|
||||
<Workspaces />
|
||||
</box>
|
||||
<box hexpand halign={Gtk.Align.END} className="RoudedBlock">
|
||||
<Volume />
|
||||
<MediaPlayerButton />
|
||||
<SysTray />
|
||||
<BatteryLevel />
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
.Cpu {
|
||||
padding: 0 5px;
|
||||
border: 3pt solid black;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
@@ -4,18 +4,33 @@ window.Media {
|
||||
background-color: transparent;
|
||||
box {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
padding: 2px;
|
||||
}
|
||||
box.MediaContent {
|
||||
margin: 5px;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
padding: 5px;
|
||||
box {
|
||||
background-color: rgb(70, 70, 70);
|
||||
}
|
||||
}
|
||||
|
||||
box.title {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
/* background-color: rgb(70, 70, 70); */
|
||||
label {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
icon {
|
||||
font-size: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Cover {
|
||||
@@ -30,4 +45,9 @@ window.Media {
|
||||
label.artist {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,98 +22,102 @@ export default function Media() {
|
||||
application={App}
|
||||
visible={false}
|
||||
>
|
||||
<box>
|
||||
<box vertical>
|
||||
{bind(mpris, "players").as((ps) =>
|
||||
ps[0] ? (
|
||||
<box>
|
||||
<box
|
||||
className="Cover"
|
||||
valign={Gtk.Align.CENTER}
|
||||
css={bind(ps[0], "coverArt").as(
|
||||
(cover) => `background-image: url('${cover}');`,
|
||||
)}
|
||||
/>
|
||||
<box vertical>
|
||||
<box className="title">
|
||||
<label
|
||||
truncate
|
||||
hexpand
|
||||
halign={Gtk.Align.START}
|
||||
label={bind(ps[0], "metadata").as(() => `${ps[0].title}`)}
|
||||
/>
|
||||
<icon
|
||||
icon={bind(ps[0], "entry").as((e) =>
|
||||
Astal.Icon.lookup_icon(e)
|
||||
? e
|
||||
: "audio-x-generic-symbolic",
|
||||
ps.map((psi) =>
|
||||
psi ? (
|
||||
<box className="MediaContent">
|
||||
<box>
|
||||
<box
|
||||
className="Cover"
|
||||
valign={Gtk.Align.CENTER}
|
||||
css={bind(psi, "coverArt").as(
|
||||
(cover) => `background-image: url('${cover}');`,
|
||||
)}
|
||||
/>
|
||||
</box>
|
||||
<label
|
||||
halign={Gtk.Align.START}
|
||||
valign={Gtk.Align.START}
|
||||
className="artist"
|
||||
vexpand
|
||||
wrap
|
||||
label={bind(ps[0], "metadata").as(() => `${ps[0].artist}`)}
|
||||
/>
|
||||
<slider
|
||||
visible={bind(ps[0], "length").as((l) => l > 0)}
|
||||
onDragged={({ value }) =>
|
||||
(ps[0].position = value * ps[0].length)
|
||||
}
|
||||
value={bind(ps[0], "position").as((p) =>
|
||||
ps[0].length > 0 ? p / ps[0].length : 0,
|
||||
)}
|
||||
/>
|
||||
<centerbox className="actions">
|
||||
<label
|
||||
hexpand
|
||||
className="position"
|
||||
halign={Gtk.Align.START}
|
||||
visible={bind(ps[0], "length").as((l) => l > 0)}
|
||||
label={bind(ps[0], "position").as(lengthStr)}
|
||||
/>
|
||||
<box>
|
||||
<button
|
||||
onClicked={() => ps[0].previous()}
|
||||
visible={bind(ps[0], "canGoPrevious")}
|
||||
>
|
||||
<icon icon="media-skip-backward-symbolic" />
|
||||
</button>
|
||||
<button
|
||||
onClicked={() => ps[0].play_pause()}
|
||||
visible={bind(ps[0], "canControl")}
|
||||
>
|
||||
<box vertical>
|
||||
<box className="title">
|
||||
<label
|
||||
truncate
|
||||
hexpand
|
||||
halign={Gtk.Align.START}
|
||||
label={bind(psi, "metadata").as(() => `${psi.title}`)}
|
||||
/>
|
||||
<icon
|
||||
icon={bind(ps[0], "playbackStatus").as((s) =>
|
||||
s === Mpris.PlaybackStatus.PLAYING
|
||||
? "media-playback-pause-symbolic"
|
||||
: "media-playback-start-symbolic",
|
||||
icon={bind(psi, "entry").as((e) =>
|
||||
Astal.Icon.lookup_icon(e)
|
||||
? e
|
||||
: "audio-x-generic-symbolic",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClicked={() => ps[0].next()}
|
||||
visible={bind(ps[0], "canGoNext")}
|
||||
>
|
||||
<icon icon="media-skip-forward-symbolic" />
|
||||
</button>
|
||||
</box>
|
||||
<label
|
||||
halign={Gtk.Align.START}
|
||||
valign={Gtk.Align.START}
|
||||
className="artist"
|
||||
vexpand
|
||||
wrap
|
||||
label={bind(psi, "metadata").as(() => `${psi.artist}`)}
|
||||
/>
|
||||
<slider
|
||||
visible={bind(psi, "length").as((l) => l > 0)}
|
||||
onDragged={({ value }) =>
|
||||
(psi.position = value * psi.length)
|
||||
}
|
||||
value={bind(psi, "position").as((p) =>
|
||||
psi.length > 0 ? p / psi.length : 0,
|
||||
)}
|
||||
/>
|
||||
<centerbox className="actions">
|
||||
<label
|
||||
hexpand
|
||||
className="position"
|
||||
halign={Gtk.Align.START}
|
||||
visible={bind(psi, "length").as((l) => l > 0)}
|
||||
label={bind(psi, "position").as(lengthStr)}
|
||||
/>
|
||||
<box>
|
||||
<button
|
||||
onClicked={() => psi.previous()}
|
||||
visible={bind(psi, "canGoPrevious")}
|
||||
>
|
||||
<icon icon="media-skip-backward-symbolic" />
|
||||
</button>
|
||||
<button
|
||||
onClicked={() => psi.play_pause()}
|
||||
visible={bind(psi, "canControl")}
|
||||
>
|
||||
<icon
|
||||
icon={bind(psi, "playbackStatus").as((s) =>
|
||||
s === Mpris.PlaybackStatus.PLAYING
|
||||
? "media-playback-pause-symbolic"
|
||||
: "media-playback-start-symbolic",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClicked={() => psi.next()}
|
||||
visible={bind(psi, "canGoNext")}
|
||||
>
|
||||
<icon icon="media-skip-forward-symbolic" />
|
||||
</button>
|
||||
</box>
|
||||
<label
|
||||
className="length"
|
||||
hexpand
|
||||
halign={Gtk.AlignEND}
|
||||
visible={bind(psi, "length").as((l) => l > 0)}
|
||||
label={bind(psi, "length").as((l) =>
|
||||
l > 0 ? lengthStr(l) : "0:00",
|
||||
)}
|
||||
/>
|
||||
</centerbox>
|
||||
</box>
|
||||
<label
|
||||
className="length"
|
||||
hexpand
|
||||
halign={Gtk.AlignEND}
|
||||
visible={bind(ps[0], "length").as((l) => l > 0)}
|
||||
label={bind(ps[0], "length").as((l) =>
|
||||
l > 0 ? lengthStr(l) : "0:00",
|
||||
)}
|
||||
/>
|
||||
</centerbox>
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
) : (
|
||||
<label label="Nothing Playing" />
|
||||
) : (
|
||||
<label label="Nothing Playing" />
|
||||
),
|
||||
),
|
||||
)}
|
||||
</box>
|
||||
|
||||
@@ -12,6 +12,7 @@ window.Powermenu {
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
transition: 300ms;
|
||||
background-color: rgb(70, 70, 70);
|
||||
|
||||
&:hover {
|
||||
background-color: gray;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
.Ram {
|
||||
padding: 0 5px;
|
||||
border: 3pt solid black;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
.Storage {
|
||||
padding: 0 15px 0 5px;
|
||||
border: 3pt solid black;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
all: unset;
|
||||
padding: 5px 7px;
|
||||
border-radius: 25px;
|
||||
border: 1pt solid black;
|
||||
border: 3pt solid black;
|
||||
transition: 300ms;
|
||||
background-color: rgb(70, 70, 70);
|
||||
&:hover {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
.Time {
|
||||
padding: 0 15px;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
border: 3pt solid black;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
.VolumeMenuButton {
|
||||
all: unset;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
border: 3pt solid black;
|
||||
.VolumeBlock {
|
||||
border-radius: 25px;
|
||||
icon {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import Wp from "gi://AstalWp";
|
||||
import { bind } from "astal";
|
||||
|
||||
export default function Volume() {
|
||||
const speaker = Wp.get_default()?.audio.defaultSpeaker!;
|
||||
const microphone = Wp.get_default()?.audio.defaultMicrophone!;
|
||||
return (
|
||||
<button className="VolumeMenuButton" onClicked="pavucontrol">
|
||||
<box className="VolumeBlock">
|
||||
<icon className="VolumeIcon" icon={bind(speaker, "volumeIcon")} />
|
||||
<icon className="VolumeIcon" icon={bind(microphone, "volumeIcon")} />
|
||||
</box>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -20,7 +20,7 @@
|
||||
transition: 300ms;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
border: 1pt solid transparent;
|
||||
border: 3pt solid black;
|
||||
}
|
||||
|
||||
.focused label {
|
||||
|
||||
@@ -11,6 +11,7 @@ import Media from "./Media/Media";
|
||||
import LauncherButton from "./LauncherButton";
|
||||
import PowerMenuButton from "./PowerMenuButton";
|
||||
import MediaPlayerButton from "./MediaPlayerButton";
|
||||
import Volume from "./Volume/Volume";
|
||||
|
||||
export {
|
||||
BatteryLevel,
|
||||
@@ -26,4 +27,5 @@ export {
|
||||
LauncherButton,
|
||||
PowerMenuButton,
|
||||
MediaPlayerButton,
|
||||
Volume,
|
||||
};
|
||||
|
||||
@@ -7,3 +7,4 @@
|
||||
@use "./Storage/Storage.scss";
|
||||
@use "./Workspaces/Workspaces.scss";
|
||||
@use "./FocusedClient/FocusedClient.scss";
|
||||
@use "./Volume/Volume.scss";
|
||||
|
||||
Reference in New Issue
Block a user