[gnome-calendar] event-widget: draw horizontal timed events differently

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 2a923939d9ebd32238d0e32b435ad18903342e05
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Sep 14 11:53:17 2017 -0300

    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 |    9 +++++-
 data/ui/event-widget.ui   |    2 +-
 src/css-code.h            |    8 +++++
 src/gcal-event-widget.c   |   63 +++++++++++++++++++++++----------------------
 4 files changed, 49 insertions(+), 33 deletions(-)
---
diff --git a/data/theme/gtk-styles.css b/data/theme/gtk-styles.css
index abaa206..81b5c2b 100644
--- a/data/theme/gtk-styles.css
+++ b/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);
diff --git a/data/ui/event-widget.ui b/data/ui/event-widget.ui
index 68bc3ee..9e73cf4 100644
--- a/data/ui/event-widget.ui
+++ b/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>
diff --git a/src/css-code.h b/src/css-code.h
index e1e9061..f8f3d1a 100644
--- a/src/css-code.h
+++ b/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 */"\
diff --git a/src/gcal-event-widget.c b/src/gcal-event-widget.c
index 3ebb50b..da66089 100644
--- a/src/gcal-event-widget.c
+++ b/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;
-  GtkStyleContext *context;
-
-  self = GCAL_EVENT_WIDGET (object);
-  context = gtk_widget_get_style_context (GTK_WIDGET (self));
+  GcalEventWidget *self = GCAL_EVENT_WIDGET (object);
 
   switch (property_id)
     {
@@ -660,19 +672,8 @@ gcal_event_widget_set_property (GObject      *object,
 
     case PROP_ORIENTATION:
       self->orientation = g_value_get_enum (value);
-
-      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");
-        }
-
-      gtk_widget_queue_draw (GTK_WIDGET (object));
+      gcal_event_widget_update_style (self);
+      gtk_widget_queue_allocate (GTK_WIDGET (object));
       g_object_notify (object, "orientation");
       break;