From 34e837562f915e9e0b3991641e2c112ae940311a Mon Sep 17 00:00:00 2001 From: Makesesama Date: Mon, 29 Sep 2025 18:45:36 +0200 Subject: [PATCH] better calendar styling --- bar/modules/calendar.py | 63 ++++++++++++++++++++++++++++--------- bar/styles/calendar.css | 69 +++++++++++++++++------------------------ example-stylix-dev.yaml | 2 +- 3 files changed, 78 insertions(+), 56 deletions(-) diff --git a/bar/modules/calendar.py b/bar/modules/calendar.py index 48a3d9f..1c18940 100644 --- a/bar/modules/calendar.py +++ b/bar/modules/calendar.py @@ -191,13 +191,14 @@ class CalendarPopup(Window): if not events: logger.info("[Calendar] No events, showing 'no events' message") - no_events_label = Label("No upcoming events today", name="no-events") + no_events_label = Label("No events today", name="no-events") self.events_box.add(no_events_label) return - # Check current time for determining past vs upcoming + # Check current time for time indicator placement now = datetime.now() current_time = now.strftime("%H:%M") + current_time_added = False for i, event in enumerate(events): logger.info(f"[Calendar] Processing event {i+1} for display") @@ -206,8 +207,10 @@ class CalendarPopup(Window): end_time = event.get("end", "").split()[1] if event.get("end") else "" location = event.get("location", "") - # Determine if event is in the past - is_past = end_time and end_time <= current_time + # Check if we should add current time indicator before this event + if not current_time_added and start_time and start_time > current_time: + self.add_current_time_indicator(current_time) + current_time_added = True # Format time display time_str = "" @@ -216,17 +219,14 @@ class CalendarPopup(Window): elif start_time: time_str = start_time - logger.info( - f"[Calendar] Creating widget for: {title} ({time_str}) - {'Past' if is_past else 'Upcoming'}" - ) + logger.info(f"[Calendar] Creating widget for: {title} ({time_str})") # Create event item with horizontal layout - time on left, content on right - event_status = "past" if is_past else "upcoming" event_box = Box( name="event-item", orientation="h", # Horizontal layout spacing=12, - style_classes=[f"event-item", event_status], + style_classes=["event-item"], ) # Left side: Time display (fixed width for alignment) @@ -234,7 +234,7 @@ class CalendarPopup(Window): time_label = Label( time_display, name="event-time", - style_classes=["event-time", event_status], + style_classes=["event-time"], style="min-width: 100px;" # Fixed width for consistent alignment ) @@ -245,12 +245,11 @@ class CalendarPopup(Window): spacing=2 ) - # Title with status prefix - title_prefix = "✓ " if is_past else "" + # Title (no more status prefix) title_label = Label( - f"{title_prefix}{title}", + title, name="event-title", - style_classes=["event-title", event_status], + style_classes=["event-title"], ) content_box.add(title_label) @@ -258,7 +257,7 @@ class CalendarPopup(Window): location_label = Label( f"📍 {location}", name="event-location", - style_classes=["event-location", event_status], + style_classes=["event-location"], ) content_box.add(location_label) @@ -269,10 +268,44 @@ class CalendarPopup(Window): self.events_box.add(event_box) logger.info(f"[Calendar] Added event widget to events_box") + # Add current time indicator at the end if not added yet + if not current_time_added: + self.add_current_time_indicator(current_time) + # Force refresh the popup display self.events_box.show_all() logger.info(f"[Calendar] Finished updating popup") + def add_current_time_indicator(self, current_time): + """Add a current time indicator to the events list""" + time_indicator = Box( + name="current-time-indicator", + orientation="h", + spacing=8, + style_classes=["current-time-indicator"], + ) + + # Current time label + time_label = Label( + current_time, + name="current-time-label", + style_classes=["current-time-label"], + style="min-width: 100px; font-weight: bold;" + ) + + # Line indicator + line_label = Label( + "━━━ NOW", + name="current-time-line", + style_classes=["current-time-line"], + ) + + time_indicator.add(time_label) + time_indicator.add(line_label) + + self.events_box.add(time_indicator) + logger.info(f"[Calendar] Added current time indicator at {current_time}") + class CalendarWidget(Button): def __init__(self, **kwargs): diff --git a/bar/styles/calendar.css b/bar/styles/calendar.css index 366d4ba..0c4d8b8 100644 --- a/bar/styles/calendar.css +++ b/bar/styles/calendar.css @@ -1,4 +1,4 @@ -/* Calendar widget styling (fallback when Stylix is disabled) */ +/* Calendar widget styling */ /* Date time button */ #date-time-button { @@ -9,10 +9,17 @@ box-shadow: none; } +#date-time { + color: var(--foreground); + background-color: var(--module-bg); + padding: 4px 8px; + border-radius: 12px; +} + /* Calendar popup */ #calendar-popup { - background-color: var(--background-alt); - border: solid 2px var(--surface); + background-color: var(--window-bg); + border: solid 2px var(--border-color); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); animation: slide-down 200ms ease-out; @@ -32,20 +39,18 @@ #calendar-title { color: var(--foreground); font-weight: bold; - font-size: 1.1em; margin-bottom: 8px; } #events-box { - background-color: var(--background-alt); - border: solid 1px var(--surface); + background-color: var(--window-bg); + border: none; /* Remove outline */ border-radius: 8px; padding: 16px; } #no-events { - color: var(--muted); - font-size: 0.85em; + color: var(--light-grey); padding: 4px; } @@ -54,6 +59,8 @@ border-radius: 6px; padding: 8px 12px; margin: 4px 0px; + background-color: var(--module-bg); + border: none; /* Remove outline */ transition: background-color 0.15s ease; } @@ -61,49 +68,31 @@ margin-left: 8px; } -.event-item.upcoming { - background-color: var(--surface); -} - -.event-item.past { - background-color: var(--surface); - opacity: 0.6; -} - .event-title { font-weight: bold; - font-size: 1em; -} - -.event-title.upcoming { color: var(--foreground); } -.event-title.past { - color: var(--muted); -} - .event-time { - font-size: 0.85em; -} - -.event-time.upcoming { - color: var(--muted); -} - -.event-time.past { - color: var(--muted-dark); + color: var(--dark-fg); } .event-location { - font-size: 0.85em; + color: var(--light-grey); } -.event-location.upcoming { - color: var(--muted-dark); +/* Current time indicator */ +.current-time-indicator { + margin: 8px 0px; + padding: 4px 0px; } -.event-location.past { - color: var(--muted-dark); - opacity: 0.8; +#current-time-label { + color: var(--blue); + font-weight: bold; +} + +#current-time-line { + color: var(--blue); + font-weight: bold; } \ No newline at end of file diff --git a/example-stylix-dev.yaml b/example-stylix-dev.yaml index 7cd9d0d..f110d04 100644 --- a/example-stylix-dev.yaml +++ b/example-stylix-dev.yaml @@ -30,7 +30,7 @@ stylix: serif: "Times New Roman" monospace: "JetBrains Mono" sizes: - desktop: 14 + desktop: 16 applications: 14 terminal: 16 popups: 14 \ No newline at end of file