wt/ags
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added Batterymenu and refactor

Browse Source
This commit is contained in:
wt committed 2025-03-13 12:21:24 +07:00
1 parent 0bcecde4c7
commit a7824e0128
14 files changed
+230 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

widget/modules/Battery/Battery.scss
+14 -10
View File
@@ -1,12 +1,16 @@
.Battery {
background-color: rgb(70, 70, 70);
border-radius: 25px;
border: 3pt solid black;
padding: 0 5px;
icon {
margin: 0 5px;
}
label {
margin: 0 5px 0 0;
}
background-color: rgb(70, 70, 70);
border-radius: 25px;
border: 3pt solid black;
padding: 0 5px;
transition: 300ms;
&:hover {
background-color: gray;
}
icon {
margin: 0 5px;
}
label {
margin: 0 5px 0 0;
}
}
widget/modules/Battery/Battery.tsx
+22 -11
View File
@@ -1,15 +1,26 @@
import { bind } from "astal"
import Battery from "gi://AstalBattery"
import { bind } from "astal";
import Battery from "gi://AstalBattery";
import { close_all_menus } from "../../utils/windows";
import { App } from "astal/gtk3";
export default function BatteryLevel() {
const bat = Battery.get_default()
console.log(bat.charging, bat.capacity, bat.energyFull, bat.energy_full_design)
const bat = Battery.get_default();
return <box className="Battery"
visible={bind(bat, "isPresent")}>
return (
<button
onClicked={() => {
close_all_menus("batterymenu");
App.toggle_window("batterymenu");
}}
className="Battery"
visible={bind(bat, "isPresent")}
>
<box>
<icon icon={bind(bat, "batteryIconName")} />
<label label={bind(bat, "percentage").as(p =>
`${Math.floor(p * 100)} %`
)} />
</box>
}
<label
label={bind(bat, "percentage").as((p) => `${Math.floor(p * 100)} %`)}
/>
</box>
</button>
);
}
widget/modules/Media/Media.scss
-53
View File
@@ -1,53 +0,0 @@
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;
}
}
widget/modules/Media/Media.tsx
-126
View File
@@ -1,126 +0,0 @@
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 Media() {
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>
);
}
widget/modules/export.ts
-4
View File
@@ -1,13 +1,11 @@
import BatteryLevel from "./Battery/Battery";
import Cpu from "./Cpu/Cpu";
import FocusedClient from "./FocusedClient/FocusedClient";
import PowerMenu from "./Powermenu/PowerMenu";
import Ram from "./Ram/Ram";
import Storage from "./Storage/Storage";
import SysTray from "./SysTray/SysTray";
import Time from "./Time/Time";
import Workspaces from "./Workspaces/Workspaces";
import Media from "./Media/Media";
import LauncherButton from "./LauncherButton";
import PowerMenuButton from "./PowerMenuButton";
import MediaPlayerButton from "./MediaPlayerButton";
@@ -17,13 +15,11 @@ export {
BatteryLevel,
Cpu,
FocusedClient,
PowerMenu,
Ram,
Storage,
SysTray,
Time,
Workspaces,
Media,
LauncherButton,
PowerMenuButton,
MediaPlayerButton,
widget/modules/modules.scss
+1 -3
View File
@@ -1,5 +1,3 @@
@use "./Media/Media.scss";
@use "./Powermenu/PowerMenu.scss";
@use "./Cpu/Cpu.scss";
@use "./Ram/Ram.scss";
@use "./Time/Time.scss";
@@ -8,4 +6,4 @@
@use "./Workspaces/Workspaces.scss";
@use "./FocusedClient/FocusedClient.scss";
@use "./Volume/Volume.scss";
@use "./Battery/Battery.scss"
@use "./Battery/Battery.scss";