[gnome-calendar] event-widget: use a 16px rounded rectangle for event colors

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

commit e8468ec0df978a684f70b5b25a22996948646ff2
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Nov 30 14:14:01 2017 -0200

    event-widget: use a 16px rounded rectangle for event colors
    
    This looks better than the thin borders, helps a lot colorblind
    people and makes the overall layout just as good.
    
    Ship it!
    
    [#211]

 data/ui/event-widget.ui | 17 +++++++++++++++--
 src/css-code.h          | 11 ++++++-----
 src/gcal-event-widget.c | 15 ++++++++++-----
 3 files changed, 31 insertions(+), 12 deletions(-)
---
diff --git a/data/ui/event-widget.ui b/data/ui/event-widget.ui
index 8eb78c9..f98b09e 100644
--- a/data/ui/event-widget.ui
+++ b/data/ui/event-widget.ui
@@ -19,6 +19,19 @@
             <property name="can_focus">False</property>
             <property name="column_spacing">4</property>
             <child>
+              <object class="GtkBox" id="color_box">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <style>
+                  <class name="icon-box" />
+                </style>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+            <child>
               <object class="GtkLabel"  id="summary_label">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
@@ -27,7 +40,7 @@
                 <property name="ellipsize">end</property>
               </object>
               <packing>
-                <property name="left_attach">0</property>
+                <property name="left_attach">1</property>
                 <property name="top_attach">0</property>
               </packing>
             </child>
@@ -40,7 +53,7 @@
                 </style>
               </object>
               <packing>
-                <property name="left_attach">1</property>
+                <property name="left_attach">2</property>
                 <property name="top_attach">0</property>
               </packing>
             </child>
diff --git a/src/css-code.h b/src/css-code.h
index f8f3d1a..a10912d 100644
--- a/src/css-code.h
+++ b/src/css-code.h
@@ -23,13 +23,14 @@
 ".color-%1$d {"\
 "  background-color: %2$s"\
 "}"\
-".color-%1$d.horizontal.timed:dir(ltr) {"\
+".color-%1$d.horizontal.timed {"\
 "  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.horizontal.timed box.icon-box{"\
+"  background-color: %2$s;"\
+"  border-radius: 2px;"\
+"  min-height: 16px;"\
+"  min-width: 16px;"\
 "}"\
 ".color-%1$d.slanted {"\
 "  background-color: transparent;"\
diff --git a/src/gcal-event-widget.c b/src/gcal-event-widget.c
index b4f2ffd..fc23625 100644
--- a/src/gcal-event-widget.c
+++ b/src/gcal-event-widget.c
@@ -38,6 +38,7 @@ struct _GcalEventWidget
   GDateTime          *dt_end;
 
   /* widgets */
+  GtkWidget          *color_box;
   GtkWidget          *horizontal_grid;
   GtkWidget          *hour_label;
   GtkWidget          *stack;
@@ -173,6 +174,7 @@ gcal_event_widget_update_style (GcalEventWidget *self)
   GtkStyleContext *context;
   gboolean slanted_start;
   gboolean slanted_end;
+  gboolean timed;
 
   context = gtk_widget_get_style_context (GTK_WIDGET (self));
   slanted_start = FALSE;
@@ -221,17 +223,19 @@ gcal_event_widget_update_style (GcalEventWidget *self)
    * 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))
+  timed = !gcal_event_get_all_day (self->event) && !gcal_event_is_multiday (self->event);
+
+  gtk_widget_set_visible (self->color_box, timed);
+
+  if (timed)
     {
       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->stack, 8);
+      gtk_widget_set_margin_start (self->stack, 0);
+      gtk_widget_set_margin_end (self->stack, 2);
     }
 }
 
@@ -924,6 +928,7 @@ gcal_event_widget_class_init (GcalEventWidgetClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/calendar/event-widget.ui");
 
+  gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, color_box);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, horizontal_grid);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, hour_label);
   gtk_widget_class_bind_template_child (widget_class, GcalEventWidget, stack);