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

@@ -18,6 +18,19 @@
             <property name="visible">True</property>
             <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>
@@ -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>

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) {"\
+".color-%1$d.horizontal.timed box.icon-box{"\
-"  background-color: transparent;"\
+"  background-color: %2$s;"\
-"  border-right: solid 4px %2$s;"\
+"  border-radius: 2px;"\
+"  min-height: 16px;"\
+"  min-width: 16px;"\
 "}"\
 ".color-%1$d.slanted {"\
 "  background-color: transparent;"\

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... */
+      gtk_widget_set_margin_start (self->stack, 0);
-      if (self->orientation == GTK_ORIENTATION_HORIZONTAL)
+      gtk_widget_set_margin_end (self->stack, 2);
-        gtk_widget_set_margin_start (self->stack, 8);
     }
 }
 
@@ -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);