views: sync header labels' style

The Week view exposed a bug where we had different
CSS selectors for the exact same label. This made
them look inconsistent, with different colors and
paddings.

Fix that by ensuring they all use the same style
class. The Year view drawing code needed to be
reworked a little.

https://bugzilla.gnome.org/show_bug.cgi?id=778391

data/theme/gtk-styles.css

@@ -7,16 +7,17 @@
 
 /* nav-bar labels */
 .start-header {
-    font-size: 18pt;
+    font-size: 16pt;
     font-weight: bold;
     color: @theme_selected_bg_color;
     padding: 12px;
 }
 
 .end-header {
-    font-size: 18pt;
+    font-size: 16pt;
     font-weight: bold;
     padding: 12px;
+    color: alpha(@theme_fg_color, 0.55);
 }
 
 calendar-view {
@@ -25,7 +26,9 @@ calendar-view {
 }
 
 calendar-view.header {
+    font-size: 10pt;
     font-weight: bold;
+    color: alpha(@theme_fg_color, 0.55);
 }
 
 calendar-view.current,
@@ -53,20 +56,6 @@ calendar-view.lines {
     color: alpha(@theme_fg_color, 0.4);
 }
 
-calendar-view .first-view-header {
-    font-size: 16pt;
-    font-weight: bold;
-    color: @theme_selected_bg_color;
-    padding: 12px;
-}
-
-calendar-view .second-view-header {
-    font-size: 16pt;
-    font-weight: bold;
-    padding: 12px;
-    color: alpha(@theme_fg_color, 0.55);
-}
-
 /* Year View CSS */
 .year-view {
     padding: 0px;
@@ -75,9 +64,9 @@ calendar-view .second-view-header {
 /* Header the padding if for sizing, on drawing the spacing between cells,
  * and the padding will be automatically calculated
  * Because of year-view widget internals, the color property should be the same
- * of .calendar-view.first-view-header selector */
+ * of .start-header selector */
 .year-navigator {
-    padding: 6px 12px;
+    padding: 12px;
     color: @theme_selected_bg_color;
 }
 

data/ui/week-header.ui

@@ -17,7 +17,7 @@
             <property name="label">Month</property>
             <property name="yalign">0</property>
             <style>
-              <class name="month-name" />
+              <class name="start-header" />
             </style>
           </object>
         </child>
@@ -29,7 +29,7 @@
             <property name="yalign">0</property>
             <property name="label">Week</property>
             <style>
-              <class name="week-number" />
+              <class name="end-header" />
             </style>
           </object>
         </child>
@@ -39,7 +39,7 @@
             <property name="label">Year</property>
             <property name="yalign">0</property>
             <style>
-              <class name="week-number" />
+              <class name="end-header" />
             </style>
           </object>
         </child>

src/views/gcal-month-view.c

@@ -413,7 +413,7 @@ get_start_grid_y (GtkWidget *widget)
   layout = gtk_widget_create_pango_layout (widget, NULL);
 
   gtk_style_context_save (context);
-  gtk_style_context_add_class (context, "first-view-header");
+  gtk_style_context_add_class (context, "start-header");
   gtk_style_context_get (context, state_flags, "padding-top", &padding_top, "font", &font_desc, NULL);
 
   pango_layout_set_font_description (layout, font_desc);
@@ -1675,7 +1675,7 @@ gcal_month_view_draw (GtkWidget *widget,
 
   /* view headers */
   gtk_style_context_save (context);
-  gtk_style_context_add_class (context, "first-view-header");
+  gtk_style_context_add_class (context, "start-header");
 
   gtk_style_context_get (context, state, "font", &font_desc, NULL);
   gtk_style_context_get_padding (context, state, &padding);
@@ -1692,7 +1692,7 @@ gcal_month_view_draw (GtkWidget *widget,
   gtk_style_context_restore (context);
 
   gtk_style_context_save (context);
-  gtk_style_context_add_class (context, "second-view-header");
+  gtk_style_context_add_class (context, "end-header");
 
   gtk_style_context_get (context, state, "font", &font_desc, NULL);
   gtk_style_context_get_padding (context, state, &padding);

src/views/gcal-year-view.c

@@ -994,8 +994,9 @@ draw_navigator (GcalYearView *year_view,
 {
   GtkStyleContext *context;
   GtkStateFlags state_flags;
+  GtkBorder padding;
 
-  gint header_padding_left, header_padding_top, header_height, layout_width, layout_height;
+  gint header_height, layout_width, layout_height;
   gint real_padding_left, real_padding_top, i, sw, weeks_counter, number_of_rows;
   gdouble width, height;
 
@@ -1004,7 +1005,7 @@ draw_navigator (GcalYearView *year_view,
   PangoLayout *header_layout;
   PangoFontDescription *font_desc;
 
-  context = gtk_widget_get_style_context (GTK_WIDGET (year_view));
+  context = gtk_widget_get_style_context (widget);
   state_flags = gtk_style_context_get_state (context);
   sw = 1 - 2 * year_view->k;
   width = gtk_widget_get_allocated_width (widget);
@@ -1012,32 +1013,29 @@ draw_navigator (GcalYearView *year_view,
 
   /* read header from CSS code related to the view */
   gtk_style_context_save (context);
-  gtk_style_context_add_class (context, "first-view-header");
+  gtk_style_context_add_class (context, "start-header");
 
   header_str = g_strdup_printf ("%d", year_view->date->year);
-  gtk_style_context_get (context, state_flags,
-                         "padding-left", &header_padding_left, "padding-top", &header_padding_top,
-                         "font", &font_desc, NULL);
+  gtk_style_context_get (context, state_flags, "font", &font_desc, NULL);
+  gtk_style_context_get_padding (context, state_flags, &padding);
 
   gtk_style_context_restore (context);
 
-  /* draw header on navigator */
-  context = gtk_widget_get_style_context (widget);
-  state_flags = gtk_style_context_get_state (context);
-
   header_layout = gtk_widget_create_pango_layout (widget, header_str);
   pango_layout_set_font_description (header_layout, font_desc);
   pango_layout_get_pixel_size (header_layout, &layout_width, &layout_height);
   /* XXX: here the color of the text isn't read from year-view but from navigator widget,
    * which has the same color on the CSS file */
   gtk_render_layout (context, cr,
-                     year_view->k * (width - layout_width) + sw * header_padding_left, header_padding_top, header_layout);
+                     year_view->k * (width - layout_width) + sw * padding.left,
+                     padding.top,
+                     header_layout);
 
   pango_font_description_free (font_desc);
   g_object_unref (header_layout);
   g_free (header_str);
 
-  header_height = header_padding_top * 2 + layout_height;
+  header_height = padding.top * 2 + layout_height;
   height = gtk_widget_get_allocated_height (widget) - header_height;
 
   real_padding_left = (width - year_view->column_width * year_view->number_of_columns) / (year_view->number_of_columns + 1);
@@ -1301,7 +1299,7 @@ calculate_sizes (GcalYearView *self)
   /* get header info from CSS */
   context = gtk_widget_get_style_context (GTK_WIDGET (self));
   gtk_style_context_save (context);
-  gtk_style_context_add_class (context, "first-view-header");
+  gtk_style_context_add_class (context, "start-header");
   gtk_style_context_get (context, gtk_style_context_get_state (context),
                          "padding-top", &padding_top,
                          "padding-bottom", &padding_bottom,