nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

sidebar: add date time to time pane

Browse source
This commit is contained in:
2 * r + 2 * t 2025-04-02 15:02:36 +11:00
parent 205712b422
commit dcc3c1fd4c
3 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
scss/sidebar.scss
View file

@ -792,6 +792,29 @@
}
}
.time-date {
padding: lib.s(12) lib.s(8);
font-size: lib.s(48);
font-weight: bold;
color: scheme.$primary;
& > * {
@include lib.spacing(3);
}
.ampm {
font-size: lib.s(24);
font-weight: normal;
margin-top: lib.s(18);
color: scheme.$secondary;
}
.date {
font-size: lib.s(20);
color: scheme.$tertiary;
}
}
.calendar {
@include lib.rounded(20);

13
src/modules/bar.tsx
View file

@ -7,7 +7,6 @@ import { ellipsize } from "@/utils/strings";
import { bindCurrentTime, osIcon } from "@/utils/system";
import type { AstalWidget } from "@/utils/types";
import { setupCustomTooltip } from "@/utils/widgets";
import type PopupWindow from "@/widgets/popupwindow";
import ScreenCorner from "@/widgets/screencorner";
import { execAsync, Variable } from "astal";
import Binding, { bind, kebabify } from "astal/binding";
@ -66,14 +65,6 @@ const hookFocusedClientProp = (
callback(lastClient);
};
const togglePopup = (self: JSX.Element, event: Astal.ClickEvent, name: string) => {
const popup = App.get_window(name) as PopupWindow | null;
if (popup) {
if (popup.visible) popup.hide();
else popup.popup_at_widget(self, event);
}
};
const switchPane = (name: string) => {
const sidebar = App.get_window("sidebar") as SideBar | null;
if (sidebar) {
@ -511,7 +502,7 @@ const Battery = () => {
const DateTime = () => (
<button
onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")}
setup={self =>
setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self))
}
@ -532,7 +523,7 @@ const DateTime = () => (
const DateTimeVertical = () => (
<button
onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")}
setup={self =>
setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self))
}

12
src/modules/sidebar/time.tsx
View file

@ -1,7 +1,17 @@
import { bindCurrentTime } from "@/utils/system";
import { Gtk } from "astal/gtk3";
import Calendar from "./modules/calendar";
import Upcoming from "./modules/upcoming";
const TimeDate = () => <box></box>;
const TimeDate = () => (
<box vertical className="time-date">
<box halign={Gtk.Align.CENTER}>
<label label={bindCurrentTime("%I:%M:%S")} />
<label className="ampm" label={bindCurrentTime("%p", c => (c.get_hour() < 12 ? "AM" : "PM"))} />
</box>
<label className="date" label={bindCurrentTime("%A, %d %B")} />
</box>
);
export default () => (
<box vertical className="pane time" name="time">