added Batterymenu and refactor
This commit is contained in:
wt committed
1 parent
0bcecde4c7
commit
a7824e0128
14 files changed
+230
-36
No files matched your search
@@ -0,0 +1,38 @@
|
||||
.Batterymenu {
|
||||
background-color: transparent;
|
||||
padding: 10px;
|
||||
box {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.BatteryMainBox {
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
icon {
|
||||
font-size: 25px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.BatteryTopTitle {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.BatteryInfoTable {
|
||||
padding: 10px;
|
||||
background-color: rgb(55, 55, 55);
|
||||
border-radius: 25px;
|
||||
min-width: 300px;
|
||||
label {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
label.BatteryInfoTableRowTitle {
|
||||
color: rgb(170, 170, 170);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Astal, App, Gtk } from "astal/gtk3";
|
||||
import Battery from "gi://AstalBattery";
|
||||
import { bind } from "astal";
|
||||
|
||||
const BatteryMenu = () => {
|
||||
const { TOP, RIGHT } = Astal.WindowAnchor;
|
||||
const { START, END } = Gtk.Align;
|
||||
const bat = Battery.get_default();
|
||||
console.log(
|
||||
bat.charging,
|
||||
bat.capacity,
|
||||
bat.energyFull,
|
||||
bat.energy_full_design,
|
||||
);
|
||||
return (
|
||||
<window
|
||||
anchor={TOP | RIGHT}
|
||||
name="batterymenu"
|
||||
className="Batterymenu"
|
||||
application={App}
|
||||
visible={false}
|
||||
>
|
||||
<box vertical className="BatteryMainBox">
|
||||
<box className="Top">
|
||||
<icon icon={bind(bat, "batteryIconName")} />
|
||||
<box vertical>
|
||||
<label
|
||||
className="BatteryTopTitle"
|
||||
label={bind(bat, "percentage").as(
|
||||
(p) => `Battery ${Math.floor(p * 100)} %`,
|
||||
)}
|
||||
/>
|
||||
</box>
|
||||
</box>
|
||||
<box vertical className="BatteryInfoTable">
|
||||
<box>
|
||||
<label
|
||||
className="BatteryInfoTableRowTitle"
|
||||
hexpand
|
||||
halign={START}
|
||||
label="Status:"
|
||||
/>
|
||||
<label
|
||||
hexpand
|
||||
halign={END}
|
||||
label={bind(bat, "charging").as((p) =>
|
||||
p ? "CHARGING" : "PENDING_CHARGE",
|
||||
)}
|
||||
/>
|
||||
</box>
|
||||
<box>
|
||||
<label
|
||||
className="BatteryInfoTableRowTitle"
|
||||
hexpand
|
||||
halign={START}
|
||||
label="Health:"
|
||||
/>
|
||||
<label hexpand halign={END} label="92.5 %" />
|
||||
</box>
|
||||
<box>
|
||||
<label
|
||||
className="BatteryInfoTableRowTitle"
|
||||
hexpand
|
||||
halign={START}
|
||||
label="Charge cycles:"
|
||||
/>
|
||||
<label hexpand halign={END} label="325" />
|
||||
</box>
|
||||
<box>
|
||||
<label
|
||||
className="BatteryInfoTableRowTitle"
|
||||
hexpand
|
||||
halign={START}
|
||||
label="Power draw:"
|
||||
/>
|
||||
<label hexpand halign={END} label="0.0 W" />
|
||||
</box>
|
||||
<box>
|
||||
<label
|
||||
className="BatteryInfoTableRowTitle"
|
||||
hexpand
|
||||
halign={START}
|
||||
label="Voltage:"
|
||||
/>
|
||||
<label hexpand halign={END} label="12.1 V" />
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
</window>
|
||||
);
|
||||
};
|
||||
|
||||
export default BatteryMenu;
|
||||
@@ -0,0 +1,53 @@
|
||||
window.Media {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
box {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
}
|
||||
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 {
|
||||
min-width: 120px;
|
||||
min-height: 120px;
|
||||
border-radius: 9px;
|
||||
margin-right: 0.6rem;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
label.artist {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { App } from "astal/gtk3";
|
||||
import { bind } from "astal";
|
||||
import { Astal, Gtk } from "astal/gtk3";
|
||||
import Mpris from "gi://AstalMpris";
|
||||
|
||||
function lengthStr(length: number) {
|
||||
const min = Math.floor(length / 60);
|
||||
const sec = Math.floor(length % 60);
|
||||
const sec0 = sec < 10 ? "0" : "";
|
||||
return `${min}:${sec0}${sec}`;
|
||||
}
|
||||
|
||||
export default function MediaMenu() {
|
||||
const { TOP, RIGHT } = Astal.WindowAnchor;
|
||||
const mpris = Mpris.get_default();
|
||||
|
||||
return (
|
||||
<window
|
||||
anchor={TOP | RIGHT}
|
||||
name="Mediamenu"
|
||||
className="Media"
|
||||
application={App}
|
||||
visible={false}
|
||||
>
|
||||
<box vertical>
|
||||
{bind(mpris, "players").as((ps) =>
|
||||
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 vertical>
|
||||
<box className="title">
|
||||
<label
|
||||
truncate
|
||||
hexpand
|
||||
halign={Gtk.Align.START}
|
||||
label={bind(psi, "metadata").as(() => `${psi.title}`)}
|
||||
/>
|
||||
<icon
|
||||
icon={bind(psi, "entry").as((e) =>
|
||||
Astal.Icon.lookup_icon(e)
|
||||
? e
|
||||
: "audio-x-generic-symbolic",
|
||||
)}
|
||||
/>
|
||||
</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>
|
||||
</box>
|
||||
</box>
|
||||
) : (
|
||||
<label label="Nothing Playing" />
|
||||
),
|
||||
),
|
||||
)}
|
||||
</box>
|
||||
</window>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
window.Powermenu {
|
||||
margin: 5px;
|
||||
background-color: transparent;
|
||||
box {
|
||||
margin: 5px;
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
button {
|
||||
all: unset;
|
||||
margin: 2px;
|
||||
padding: 5px 15px 5px 13px;
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
transition: 300ms;
|
||||
background-color: rgb(70, 70, 70);
|
||||
|
||||
&:hover {
|
||||
background-color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Astal, App } from "astal/gtk3";
|
||||
|
||||
export default function PowerMenu() {
|
||||
const { TOP, RIGHT } = Astal.WindowAnchor
|
||||
const powermenulist = [
|
||||
{action: "/home/tola/.config/ags/scripts/powermenu lock", label: ""},
|
||||
{action: "/home/tola/.config/ags/scripts/powermenu suspend", label: ""},
|
||||
{action: "/home/tola/.config/ags/scripts/powermenu logout", label: ""},
|
||||
{action: "/home/tola/.config/ags/scripts/powermenu reboot", label: ""},
|
||||
{action: "/home/tola/.config/ags/scripts/powermenu poweroff", label: ""}
|
||||
]
|
||||
|
||||
return <window
|
||||
anchor={TOP | RIGHT}
|
||||
name="powermenu"
|
||||
className="Powermenu"
|
||||
application={App}
|
||||
visible={false}
|
||||
>
|
||||
<box>
|
||||
{powermenulist.map(data => (
|
||||
<button onClicked={data.action}>{data.label}</button>
|
||||
))}
|
||||
</box>
|
||||
</window>
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@use "./BatteryMenu/BatteryMenu.scss";
|
||||
@use "./MediaMenu/MediaMenu.scss";
|
||||
@use "./Powermenu/PowerMenu.scss";
|
||||
@@ -0,0 +1,5 @@
|
||||
import BatteryMenu from "./BatteryMenu/BatteryMenu";
|
||||
import MediaMenu from "./MediaMenu/MediaMenu";
|
||||
import PowerMenu from "./Powermenu/PowerMenu";
|
||||
|
||||
export { BatteryMenu, MediaMenu, PowerMenu };
|
||||
Reference in new issue
Block a user