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]
This commit is contained in:
Georges Basile Stavracas Neto
2017-11-30 14:45:47 -02:00
parent 3c6df94be9
commit e8468ec0df
3 changed files with 31 additions and 12 deletions
+15 -2
View File
@@ -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>
+6 -5
View File
@@ -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;"\
+10 -5
View File
@@ -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);