diff options
| -rw-r--r-- | scss/sidebar.scss | 23 | ||||
| -rw-r--r-- | src/modules/bar.tsx | 13 | ||||
| -rw-r--r-- | src/modules/sidebar/time.tsx | 12 |
3 files changed, 36 insertions, 12 deletions
diff --git a/scss/sidebar.scss b/scss/sidebar.scss index 1ca19b7..9f5bd39 100644 --- a/scss/sidebar.scss +++ b/scss/sidebar.scss @@ -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); diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index 29f4f88..2aa45b6 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -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)) } diff --git a/src/modules/sidebar/time.tsx b/src/modules/sidebar/time.tsx index c7b68ba..1f5ef99 100644 --- a/src/modules/sidebar/time.tsx +++ b/src/modules/sidebar/time.tsx @@ -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"> |