year-view: add navigator drawing

data/theme/gtk-styles.css

@@ -57,6 +57,57 @@
     color: alpha(@theme_fg_color, 0.4);
 }
 
+.calendar-view.first-view-header {
+    font: bold 18;
+    color: @theme_selected_bg_color;
+    padding: 12px;
+}
+
+.calendar-view.second-view-header {
+    font: bold 18;
+    padding: 12px;
+}
+
+/* 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 */
+.year-navigator {
+    padding: 6px 12px;
+    color: @theme_selected_bg_color;
+}
+
+.year-navigator.header {
+    color: @theme_selected_bg_color;
+    font-weight: bold;
+}
+
+.year-navigator.lines {
+    color: alpha(@theme_fg_color, 0.4);
+}
+
+.year-navigator.days {
+    color: @theme_fg_color;
+    font: 9;
+}
+
+.year-navigator.sunday {
+    color: alpha(@theme_fg_color, 0.5);
+}
+
+.year-navigator.week-numbers {
+    color: alpha(@theme_fg_color, 0.2);
+    font: 6;
+}
+
+/* this is supposed be changed in sync with .calendar-view.current */
+.year-navigator.current {
+    background-color: @theme_fg_color;
+    border-radius: 2px;
+    color: white;
+    font: bold;
+}
+
 GcalEventWidget {
     border-radius: 6px;
     margin-top: 2px;

data/ui/year-view.ui

@@ -2,12 +2,15 @@
 <interface>
   <!-- interface-requires gtk+ 3.10 -->
   <template class="GcalYearView" parent="GtkBox">
-    <property name="visible">True</property>
     <child>
-      <object class="GtkDrawingArea" id="year_view_navigator">
+      <object class="GtkDrawingArea" id="navigator">
         <property name="visible">True</property>
+        <property name="hexpand">True</property>
         <signal name="draw" handler="draw_navigator" object="GcalYearView" swapped="yes" />
-        <!-- FIXME: add some other necessary signals -->
+        <style>
+          <class name="year-navigator" />
+        </style>
+        <!-- FIXME: add some other signals handlers -->
       </object>
      <packing>
        <property name="position">0</property>
@@ -15,12 +18,12 @@
     </child>
     <child>
       <object class="GtkOverlay" id="sidebar">
-        <property name="visible">True</property>
+        <property name="width_request">200</property>
         <child type="overlay">
           <object class="GtkButton" id="add_event_button">
             <property name="visible">True</property>
             <property name="valign">end</property>
-            <property name="label" translatable="yes">Add new event...</property>
+            <property name="label" translatable="yes">Add new event…</property>
             <signal name="clicked" handler="add_event_clicked_cb" object="GcalYearView" swapped="yes" />
           </object>
         </child>