event-widget: draw horizontal timed events differently

This makes more clear which events are timed, and which events
are all day. They are also super cute!

data/theme/gtk-styles.css

@@ -219,10 +219,17 @@ popover.events button {
 
 event {
     border-radius: 2px;
-    margin: 1px 1px 0 2px;
+    margin: 0 1px 1px 2px;
     font-size: 9pt;
 }
 
+event.color-dark.horizontal.timed,
+event.color-light.horizontal.timed {
+    margin-bottom: 0;
+    border-radius: 0;
+    color: @theme_fg_color;
+}
+
 event.color-dark {
     color: white;
     outline-color: rgba(0, 0, 0, 0.3);

data/ui/event-widget.ui

@@ -15,7 +15,7 @@
             <property name="column_spacing">6</property>
             <property name="margin-top">1</property>
             <property name="margin-bottom">1</property>
-            <property name="margin-start">4</property>
+            <property name="margin-start">6</property>
             <property name="margin-end">4</property>
             <property name="hexpand">False</property>
             <child>

src/css-code.h

@@ -23,6 +23,14 @@
 ".color-%1$d {"\
 "  background-color: %2$s"\
 "}"\
+".color-%1$d.horizontal.timed:dir(ltr) {"\
+"  background-color: transparent;"\
+"  border-left: solid 4px %2$s;"\
+"}"\
+".color-%1$d.horizontal.timed:dir(rtl) {"\
+"  background-color: transparent;"\
+"  border-right: solid 4px %2$s;"\
+"}"\
 ".color-%1$d.slanted {"\
 "  background-color: transparent;"\
 "  background-image: linear-gradient(100deg, /* left edge */"\

src/gcal-event-widget.c

@@ -163,6 +163,35 @@ gcal_event_widget_update_style (GcalEventWidget *self)
   /* TODO: adjust margins based on the CSS gradients sizes, not hardcoded */
   gtk_widget_set_margin_start (self->main_grid, slanted_start ? 20 : 4);
   gtk_widget_set_margin_end (self->main_grid, slanted_end ? 20 : 4);
+
+  /* Add style classes for orientation selectors */
+  if (self->orientation == GTK_ORIENTATION_HORIZONTAL)
+    {
+      gtk_style_context_add_class (context, "horizontal");
+      gtk_style_context_remove_class (context, "vertical");
+    }
+  else
+    {
+      gtk_style_context_add_class (context, "vertical");
+      gtk_style_context_remove_class (context, "horizontal");
+    }
+
+  /*
+   * If the event is a timed, single-day event, draw it differently
+   * from all-day or multi-day events.
+   */
+  if (!gcal_event_get_all_day (self->event) && !gcal_event_is_multiday (self->event))
+    {
+      GtkStyleContext *context;
+
+      context = gtk_widget_get_style_context (GTK_WIDGET (self));
+
+      gtk_style_context_add_class (context, "timed");
+
+      /* XXX: hardcoding these values isn't really great... */
+      if (self->orientation == GTK_ORIENTATION_HORIZONTAL)
+        gtk_widget_set_margin_start (self->main_grid, 8);
+    }
 }
 
 static void
@@ -437,19 +466,6 @@ gcal_event_widget_set_event_internal (GcalEventWidget *self,
                           self->summary_label,
                           "label",
                           G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
-
-  /*
-   * If the event is a timed, single-day event, draw it differently
-   * from all-day or multi-day events.
-   */
-  if (!gcal_event_get_all_day (event) && !gcal_event_is_multiday (event))
-    {
-      GtkStyleContext *context;
-
-      context = gtk_widget_get_style_context (GTK_WIDGET (self));
-
-      gtk_style_context_add_class (context, "timed");
-    }
 }
 
 
@@ -638,11 +654,7 @@ gcal_event_widget_set_property (GObject      *object,
                                 const GValue *value,
                                 GParamSpec   *pspec)
 {
-  GcalEventWidget *self;
+  GcalEventWidget *self = GCAL_EVENT_WIDGET (object);
-  GtkStyleContext *context;
-
-  self = GCAL_EVENT_WIDGET (object);
-  context = gtk_widget_get_style_context (GTK_WIDGET (self));
 
   switch (property_id)
     {
@@ -660,19 +672,8 @@ gcal_event_widget_set_property (GObject      *object,
 
     case PROP_ORIENTATION:
       self->orientation = g_value_get_enum (value);
-
+      gcal_event_widget_update_style (self);
-      if (self->orientation == GTK_ORIENTATION_HORIZONTAL)
+      gtk_widget_queue_allocate (GTK_WIDGET (object));
-        {
-          gtk_style_context_add_class (context, "horizontal");
-          gtk_style_context_remove_class (context, "vertical");
-        }
-      else
-        {
-          gtk_style_context_add_class (context, "vertical");
-          gtk_style_context_remove_class (context, "horizontal");
-        }
-
-      gtk_widget_queue_draw (GTK_WIDGET (object));
       g_object_notify (object, "orientation");
       break;