event-widget: Style overhaul

This reworks the style of the event widgets to make them match the
latest designs. This also supports the light and dark theme preferences
and fixes some spacing inconsistencies and errors.
- The orientation of events only affects how their content is laid out,
  not their style.
- Events are fully colored accordingly to their calendar's color.
- Timed events have a semi-transparent background and a kind of opaque
  knob on their left.
- Timed events have their text colored according to the theme.
- Lasting events are fully opaque, with no knob.
- Lasting events have their text colored according to their calendar's
  color.

This purposefully leaves the indentation broken to help reviewing the
changes.

src/gui/css-code.h

@@ -23,14 +23,11 @@
 ".color-%1$d {"\
 "  background-color: %2$s;"\
 "}"\
-".color-%1$d.horizontal.timed {"\
+".color-%1$d.timed {"\
-"  background-color: transparent;"\
+"  background-color: alpha(%2$s, 0.17);"\
 "}"\
-".color-%1$d.horizontal.timed box.icon-box{"\
+".color-%1$d.timed widget.edge{"\
 "  background-color: %2$s;"\
-"  border-radius: 2px;"\
-"  min-height: 16px;"\
-"  min-width: 16px;"\
 "}"\
 ".color-%1$d.slanted {"\
 "  background-color: transparent;"\
@@ -68,11 +65,6 @@
 "  background-repeat: no-repeat;"\
 "  background-origin: padding-box, padding-box, border-box, border-box;"\
 "  background-clip: padding-box, padding-box, border-box, border-box;"\
-"  padding-left: 24px;"\
-"  padding-right: 24px;"\
-"  padding-top: 3px;"\
-"  padding-bottom: 4px;"\
-"  border-radius: 0;"\
 "}"\
 ".color-%1$d.slanted:backdrop {"\
 "  background-image: linear-gradient(100deg, /* left edge */"\
@@ -157,7 +149,6 @@
 "  background-size: 100%% 100%%, 100%% 100%%;"\
 "  background-origin: padding-box, border-box;"\
 "  background-clip: padding-box, border-box;"\
-"  border-radius: 0 2px 2px 0;"\
 "}"\
 ".color-%1$d.slanted-start:backdrop {"\
 "  background-image: linear-gradient(100deg, /* left edge */"\
@@ -185,7 +176,6 @@
 "                                    @event_shadow_color	17px);"\
 "  border-bottom: 1px solid transparent; /* for the shadow displacement */"\
 "  background-position: right bottom, right bottom;"\
-"  border-radius: 2px 0 0 2px;"\
 "}"\
 ".color-%1$d.slanted-start:dir(rtl):backdrop {"\
 "  background-image: linear-gradient(260deg, /* right edge */"\
@@ -217,7 +207,6 @@
 "  background-size: 100%% 100%%, 100%% 100%%;"\
 "  background-origin: padding-box, border-box;"\
 "  background-clip: padding-box, border-box;"\
-"  border-radius: 2px 0 0 2px;"\
 "}"\
 ".color-%1$d.slanted-end:backdrop {"\
 "  background-image: linear-gradient(280deg, /* right edge */"\
@@ -244,7 +233,6 @@
 "                                    transparent         16px,"\
 "                                    @event_shadow_color	17px);"\
 "  background-position: left bottom, left bottom;"\
-"  border-radius: 0 2px 2px 0;"\
 "}"\
 ".color-%1$d.slanted-end:dir(rtl):backdrop {"\
 "  background-image: linear-gradient(80deg, /* left edge */"\
@@ -254,12 +242,7 @@
 "                                    alpha(%2$s, 0) 10px,"\
 "                                    alpha(%2$s, 0) 16px,"\
 "                                    %2$s	   17px);"\
-"}"\
+"}"
-".color-%1$d.slanted > stack { margin: 0 16px 0 16px; }"\
-".color-%1$d.slanted-start > stack { margin-left: 16px; }"\
-".color-%1$d.slanted-start:dir(rtl) > stack { margin-right: 16px; }"\
-".color-%1$d.slanted-end > stack { margin-right: 16px; }"\
-".color-%1$d.slanted-end:dir(rtl) > stack { margin-left: 16px; }"
 
 #endif /* CSS_CODE_H */
 

src/gui/gcal-event-widget.c

@@ -51,7 +51,6 @@ struct _GcalEventWidget
   GDateTime          *dt_end;
 
   /* widgets */
-  GtkWidget          *color_box;
   GtkWidget          *horizontal_box;
   GtkWidget          *timestamp_label;
   GtkWidget          *squeezer;
@@ -170,8 +169,6 @@ gcal_event_widget_update_style (GcalEventWidget *self)
    */
   timed = !gcal_event_get_all_day (self->event) && !gcal_event_is_multiday (self->event);
 
-  gtk_widget_set_visible (self->color_box, timed && self->orientation == GTK_ORIENTATION_HORIZONTAL);
-
   if (timed)
     gtk_widget_add_css_class (GTK_WIDGET (self), "timed");
 }
@@ -760,7 +757,6 @@ gcal_event_widget_class_init (GcalEventWidgetClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/calendar/ui/gui/gcal-event-widget.ui");
 
-  gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, color_box);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, drag_source);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, horizontal_box);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, timestamp_label);

src/gui/gcal-event-widget.ui

@@ -20,10 +20,25 @@
       </object>
     </child>
 
+    <child>
+      <object class="GtkBox">
+        <property name="hexpand">False</property>
+        <child>
+          <object class="AdwBin" id="edge">
+            <style>
+              <class name="edge" />
+            </style>
+          </object>
+        </child>
+
     <!-- Overflow Bin -->
     <child>
       <object class="GcalOverflowBin">
+        <property name="hexpand">True</property>
         <property name="request-mode">width-for-height</property>
+        <style>
+          <class name="content" />
+        </style>
 
         <!-- Main Stack -->
         <child>
@@ -72,17 +87,6 @@
             <child>
               <object class="GtkBox" id="horizontal_box">
                 <property name="spacing">4</property>
-                <child>
-                  <object class="GtkBox" id="color_box">
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="width-request">16</property>
-                    <property name="height-request">16</property>
-                    <style>
-                      <class name="icon-box" />
-                    </style>
-                  </object>
-                </child>
                 <child>
                   <object class="GtkLabel"  id="summary_label">
                     <property name="hexpand">True</property>
@@ -104,5 +108,7 @@
         </child>
       </object>
     </child>
+      </object>
+    </child>
   </template>
 </interface>

src/theme/style-dark.css

@@ -0,0 +1,8 @@
+/*
+ * Event widget
+ */
+
+event.timed {
+    color: @light_1;
+    outline-color: rgba(0, 0, 0, 0.3);
+}

src/theme/style.css

@@ -1,5 +1,3 @@
-@define-color event_shadow_color alpha(black, 0.2);
-
 /* Header labels */
 label.primary-label {
     font-size: 16pt;
@@ -69,47 +67,50 @@ popover.events button {
  */
 
 event {
-    border-radius: 2px;
+    margin: 1px;
-    margin: 0 1px 1px 2px;
     font-size: 0.9rem;
 }
 
-event squeezer {
+event widget.content {
-  margin: 1px 4px 1px 6px;
+    margin: 4px;
 }
 
-event.horizontal.timed squeezer {
+event.timed,
-  margin: 1px 2px 1px 0px;
+event:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: 2.5px;
 }
 
-event.vertical.timed {
+event.timed widget.edge {
-  padding: 3px 6px;
+    border-radius: 2.5px;
+    min-width: 5px;
 }
 
-event.color-dark.horizontal.timed,
+event.slanted,
-event.color-light.horizontal.timed {
+event.slanted-start,
-    margin-bottom: 0;
+event.slanted-end:dir(rtl) {
-    border-radius: 0;
+    padding-left: 16px;
-    color: inherit;
+    border-radius: 0 2.5px 2.5px 0;
 }
 
-event.color-dark {
+event.slanted,
+event.slanted-end,
+event.slanted-start:dir(rtl) {
+    padding-right: 16px;
+    border-radius: 2.5px 0 0 2.5px;
+}
+
+event:not(.timed).color-dark {
+    /* Keep in symc with the dark style's event.timed colors */
     color: @light_1;
     outline-color: rgba(0, 0, 0, 0.3);
 }
 
-event.color-dark:backdrop {
+event.timed,
-    color: @light_3;
+event:not(.timed).color-light {
-}
-
-event.color-light {
     color: alpha(@dark_5, 0.8);
     outline-color: rgba(255, 255, 255, 0.5);
 }
 
-event.color-light:backdrop {
-    color: @dark_3;
-}
 
 /* Event Popover */
 popover.event-popover,

src/theme/theme.gresource.xml

@@ -2,5 +2,6 @@
 <gresources>
   <gresource prefix="/org/gnome/calendar">
     <file>style.css</file>
+    <file>style-dark.css</file>
   </gresource>
 </gresources>