week-header: adjust theming to match the mockups

Set correct font weight, size and draw lines where required.

data/theme/gtk-styles.css

@@ -358,3 +358,43 @@ datechooser day:selected:hover {
   background-color: @theme_selected_bg_color;
   font-weight: bold;
 }
+
+/* Week View CSS */
+
+.week-header {
+    padding: 0px;
+}
+
+.week-header .month-name {
+    font-size: 16pt;
+    font-weight: bold;
+    color: alpha(@theme_selected_bg_color, 0.75);
+    padding: 12px;
+}
+
+.week-header .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: 12px;
+    color: alpha(@theme_fg_color, 0.25);
+}
+
+.week-header.week-names {
+    font-size: 10pt;
+    font-weight: bold;
+    color: alpha(@theme_fg_color, 0.55);
+}
+
+.week-header.week-dates {
+    font-size: 16pt;
+    font-weight: bold;
+    color: alpha(@theme_fg_color, 0.70);
+}
+
+.week-header.lines {
+    color: alpha(@theme_fg_color, 0.4);
+}
+
+.week-header .margin {
+    color: alpha(@theme_fg_color, 0.6);
+}

data/ui/week-header.ui

@@ -3,6 +3,9 @@
   <template class="GcalWeekHeader" parent="GtkGrid">
     <property name="visible">True</property>
     <property name="hexpand">True</property>
+    <style>
+      <class name="week-header" />
+    </style>
     <child>
       <object class="GtkGrid">
         <property name="visible">True</property>
@@ -16,7 +19,7 @@
                 <property name="visible">True</property>
                 <property name="label">Month</property>
                 <style>
-                  <class name="first-view-header" />
+                  <class name="month-name" />
                 </style>
               </object>
             </child>
@@ -27,7 +30,7 @@
                 <property name="xalign">0</property>
                 <property name="label">Week</property>
                 <style>
-                  <class name="second-view-header" />
+                  <class name="week-number" />
                 </style>
               </object>
             </child>
@@ -36,7 +39,7 @@
                 <property name="visible">True</property>
                 <property name="label">Year</property>
                 <style>
-                  <class name="second-view-header" />
+                  <class name="week-number" />
                 </style>
               </object>
             </child>
@@ -50,6 +53,9 @@
                 <property name="visible">True</property>
                 <property name="height-request">100</property>
                 <signal name="draw" handler="gcal_week_header_draw" object="GcalWeekHeader" swapped="yes"/>
+                <style>
+                  <class name="week-header" />
+                </style>
               </object>
             </child>
             <child type="overlay">

src/views/gcal-week-header.c

@@ -161,12 +161,12 @@ update_headers (GcalWeekHeader *self)
 
   if (g_date_time_get_year (week_start) == g_date_time_get_year (week_end))
     {
-      week_label = g_strdup_printf ("Week %d", g_date_time_get_week_of_year (week_start));
+      week_label = g_strdup_printf ("week %d", g_date_time_get_week_of_year (week_start));
       year_label = g_strdup_printf ("%d", g_date_time_get_year (week_start));
     }
   else
     {
-      week_label = g_strdup_printf ("Week %d/%d",
+      week_label = g_strdup_printf ("week %d/%d",
                                     g_date_time_get_week_of_year (week_start),
                                     g_date_time_get_week_of_year (week_end));
       year_label = g_strdup_printf ("%d-%d",
@@ -427,7 +427,7 @@ gcal_week_header_draw (GcalWeekHeader *self,
   PangoLayout *layout;
   PangoFontDescription *bold_font;
 
-  gint i, pos_i, start_grid_y, current_cell;
+  gint i, pos_i, start_grid_y;
   gint font_height;
   gdouble sidebar_width, cell_width;
   icaltimetype *start_of_week, *end_of_week;
@@ -458,7 +458,7 @@ gcal_week_header_draw (GcalWeekHeader *self,
 
   layout = pango_cairo_create_layout (cr);
   gtk_style_context_get (context, state, "font", &bold_font, NULL);
-  pango_font_description_set_weight (bold_font, PANGO_WEIGHT_SEMIBOLD);
+  pango_font_description_set_weight (bold_font, PANGO_WEIGHT_MEDIUM);
   pango_layout_set_font_description (layout, bold_font);
 
   week_start = get_start_of_week (self);
@@ -493,7 +493,12 @@ gcal_week_header_draw (GcalWeekHeader *self,
       /* Draws the date of days in the week */
       weekday_date = g_strdup_printf ("%d", n_day);
 
-      pango_font_description_set_size (bold_font, 1.5 * pango_font_description_get_size (bold_font));
+      gtk_style_context_save (context);
+      gtk_style_context_add_class (context, "week-dates");
+      gtk_style_context_get (context, state, "font", &bold_font, NULL);
+      gtk_style_context_get_color (context, state, &color);
+      gdk_cairo_set_source_rgba (cr, &color);
+
       pango_layout_set_font_description (layout, bold_font);
       pango_layout_set_text (layout, weekday_date, -1);
       cairo_move_to (cr,
@@ -501,10 +506,15 @@ gcal_week_header_draw (GcalWeekHeader *self,
                      font_height + padding.bottom);
       pango_cairo_show_layout (cr,layout);
 
+      gtk_style_context_restore (context);
+
       /* Draws the days name */
-      weekday_abv = g_strdup_printf ("%s", gcal_get_weekday ((i + self->first_weekday) % 7));
+      weekday_abv = g_strdup_printf ("%s", g_utf8_strup (gcal_get_weekday ((i + self->first_weekday) % 7), -1));
+
+      gtk_style_context_save (context);
+      gtk_style_context_add_class (context, "week-names");
+      gtk_style_context_get (context, state, "font", &bold_font, NULL);
 
-      pango_font_description_set_size (bold_font, pango_font_description_get_size (bold_font)/1.5);
       pango_layout_set_font_description (layout, bold_font);
       pango_layout_set_text (layout, weekday_abv, -1);
       cairo_move_to (cr,
@@ -512,6 +522,8 @@ gcal_week_header_draw (GcalWeekHeader *self,
                      0);
       pango_cairo_show_layout (cr, layout);
 
+      gtk_style_context_restore (context);
+
       /* Draws the lines after each day of the week */
       cairo_save (cr);
       cairo_move_to (cr,
@@ -526,12 +538,21 @@ gcal_week_header_draw (GcalWeekHeader *self,
       g_free (weekday_abv);
     }
 
-  gtk_style_context_get_color (context,
+  cairo_save (cr);
-                               state | GTK_STATE_FLAG_INSENSITIVE,
+  cairo_move_to (cr,
-                               &color);
+                 cell_width * 7 + sidebar_width - 3,
+                 font_height + padding.bottom + 3);
+  cairo_set_line_width (cr, 0.25);
+  cairo_rel_line_to (cr, 0.0, gtk_widget_get_allocated_height (self->draw_area));
+  cairo_stroke (cr);
+  cairo_restore (cr);
+
+  gtk_style_context_add_class (context, "margin");
+
+  gtk_style_context_get_color (context, state, &color);
   gdk_cairo_set_source_rgba (cr, &color);
-  pos_i = font_height + padding.bottom;
+  cairo_move_to (cr, 0, gtk_widget_get_allocated_height (self->draw_area));
-  cairo_move_to (cr, sidebar_width, pos_i + 0.3);
+  cairo_rel_line_to (cr, gtk_widget_get_allocated_width (self->draw_area), 0);
 
   cairo_stroke (cr);