month-view: rewrite was a template widget

data/calendar.gresource.xml

@@ -7,6 +7,8 @@
     <file alias="date-selector.ui" compressed="true" preprocess="xml-stripblanks">ui/date-selector.ui</file>
     <file alias="edit-dialog.ui" compressed="true" preprocess="xml-stripblanks">ui/edit-dialog.ui</file>
     <file alias="event-widget.ui" compressed="true" preprocess="xml-stripblanks">ui/event-widget.ui</file>
+    <file alias="month-cell.ui" compressed="true" preprocess="xml-stripblanks">ui/month-cell.ui</file>
+    <file alias="month-view.ui" compressed="true" preprocess="xml-stripblanks">ui/month-view.ui</file>
     <file alias="multi-choice.ui" compressed="true" preprocess="xml-stripblanks">ui/multi-choice.ui</file>
     <file alias="online-account-row.ui" compressed="true" preprocess="xml-stripblanks">ui/online-account-row.ui</file>
     <file alias="quick-add-popover.ui" compressed="true" preprocess="xml-stripblanks">ui/quick-add-popover.ui</file>

data/meson.build

@@ -54,6 +54,8 @@ resource_data = files(
   'ui/edit-dialog.ui',
   'ui/help-overlay.ui',
   'ui/menus.ui',
+  'ui/month-cell.ui',
+  'ui/month-view.ui',
   'ui/multi-choice.ui',
   'ui/quick-add-popover.ui',
   'ui/search-view.ui',

data/theme/gtk-styles.css

@@ -1,19 +1,14 @@
 @define-color event_shadow_color alpha(black, 0.2);
 
-.nav-button {
-    background-color: transparent;
-    background-image: none;
-}
-
-/* nav-bar labels */
-.start-header {
+/* Header labels */
+label.primary-label {
     font-size: 16pt;
     font-weight: bold;
     color: @theme_selected_bg_color;
     padding: 12px;
 }
 
-.end-header {
+label.secondary-label {
     font-size: 16pt;
     font-weight: bold;
     padding: 12px;
@@ -25,7 +20,8 @@ calendar-view {
     font-size: 10pt;
 }
 
-calendar-view.header {
+calendar-view.header,
+label.header {
     font-size: 10pt;
     font-weight: bold;
     color: alpha(@theme_fg_color, 0.55);
@@ -41,25 +37,6 @@ calendar-view:selected {
     font-weight: bold;
 }
 
-calendar-view.overflow:hover {
-    font-weight: bold;
-    color: @theme_selected_bg_color;
-    background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.9), alpha(@theme_bg_color, 0.2) 10%,
-                                      alpha(@theme_bg_color, 0.2) 95%, shade(@theme_bg_color, 0.95) 100%);
-}
-
-calendar-view.overflow {
-    font-size: 8pt;
-}
-
-calendar-view.lines {
-    color: alpha(@theme_fg_color, 0.4);
-}
-
-calendar-view.offset {
-    background-color: alpha(@theme_bg_color, 0.5);
-}
-
 /* Year View CSS */
 .year-view {
     padding: 0px;
@@ -364,6 +341,13 @@ datechooser day:selected:hover {
   font-weight: bold;
 }
 
+label.month-name {
+    font-size: 16pt;
+    font-weight: bold;
+    color: alpha(@theme_selected_bg_color, 0.75);
+    padding: 12px;
+}
+
 /* Week View CSS */
 
 .week-header {
@@ -371,13 +355,6 @@ datechooser day:selected:hover {
     border-bottom: solid @borders 1px;
 }
 
-.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;
@@ -437,3 +414,58 @@ weekgrid:selected,
 .week-header:selected {
     border: solid 1px alpha(@theme_selected_bg_color, 0.8);
 }
+
+
+/*
+ * Month cell
+ */
+
+monthcell {
+	border: solid 1px @borders;
+	border-width: 1px 0 0 1px;
+	background: transparent;
+	padding: 1px 0 1px 0;
+	transition: background-color 200ms;
+}
+
+monthcell:selected {
+    font-weight: bold;
+    background-color: alpha(@theme_selected_bg_color, 0.1);
+}
+
+monthcell.today {
+    background-color: alpha(@theme_selected_bg_color, 0.25);
+}
+
+monthcell:selected.today {
+    background-color: alpha(@theme_selected_bg_color, 0.33);
+}
+
+monthcell.out-of-month {
+    background-color: alpha(@theme_bg_color, 0.4);
+}
+
+monthcell label {
+    color: @theme_fg_color;
+    font-size: 0.9rem;
+}
+
+monthcell:hover:not(.out-of-month) {
+    background-color: @theme_bg_color;
+    transition: background-color 200ms;
+}
+
+monthcell:dir(ltr):nth-child(7n + 1) {
+	border-left-width: 0;
+}
+
+monthcell:dir(rtl):nth-child(7n + 1) {
+	border-right-width: 0;
+}
+
+monthcell button {
+    padding: 0 4px;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+}

data/ui/month-cell.ui

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="GcalMonthCell" parent="GtkEventBox">
+    <property name="visible">True</property>
+    <property name="can-focus">True</property>
+    <property name="expand">True</property>
+    <signal name="enter-notify-event" handler="enter_notify_event_cb" object="GcalMonthCell" swapped="no" />
+    <signal name="leave-notify-event" handler="leave_notify_event_cb" object="GcalMonthCell" swapped="no" />
+    <child>
+      <object class="GtkOverlay" id="overlay">
+        <property name="visible">True</property>
+        <property name="can-focus">True</property>
+
+        <!-- HACK: in Gtk3, insensitive widgets receive no events. We "fix" this
+             limitation by adding an always-sensitive GtkEventBox above the event,
+             and when the event is insensitive, the event box's event window is
+             above it -->
+        <child type="overlay">
+          <object class="GtkEventBox" id="button_event_box">
+            <property name="visible">True</property>
+            <property name="can-focus">False</property>
+            <property name="above-child" bind-source="overflow_button" bind-property="sensitive" bind-flags="default|invert-boolean|sync-create" />
+            <signal name="enter-notify-event" handler="enter_notify_event_cb" object="GcalMonthCell" swapped="no" />
+            <signal name="leave-notify-event" handler="leave_notify_event_cb" object="GcalMonthCell" swapped="no" />
+            <child>
+              <object class="GtkButton" id="overflow_button">
+                <property name="visible">True</property>
+                <property name="can-focus">True</property>
+                <property name="valign">end</property>
+                <property name="receives-default">True</property>
+                <signal name="clicked" handler="overflow_button_clicked_cb" object="GcalMonthCell" swapped="no" />
+                <style>
+                  <class name="flat" />
+                </style>
+                <child>
+                  <object class="GtkBox">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="spacing">6</property>
+                    <property name="valign">center</property>
+                    <child type="center">
+                      <object class="GtkLabel" id="overflow_label">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="ellipsize">end</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="day_label">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                      </object>
+                      <packing>
+                        <property name="pack-type">end</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkImage" id="weather_icon">
+                        <property name="can-focus">False</property>
+                        <property name="stock">gtk-missing-image</property>
+                      </object>
+                      <packing>
+                        <property name="pack-type">end</property>
+                      </packing>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

data/ui/month-view.ui

@@ -0,0 +1,206 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="GcalMonthView" parent="GtkContainer">
+
+    <!-- Header -->
+    <child type="header">
+      <object class="GtkBox">
+        <property name="visible">true</property>
+        <property name="can_focus">false</property>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">true</property>
+            <child>
+              <object class="GtkLabel" id="month_label">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="month-name" />
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="year_label">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">1.0</property>
+                <style>
+                  <class name="secondary-label" />
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkBox">
+            <property name="visible">true</property>
+            <property name="spacing">6</property>
+            <property name="margin-start">6</property>
+            <property name="margin-end">6</property>
+            <property name="margin-bottom">6</property>
+            <child>
+              <object class="GtkLabel" id="label_0">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="label_1">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="label_2">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="label_3">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="label_4">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="label_5">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkLabel" id="label_6">
+                <property name="visible">true</property>
+                <property name="can_focus">false</property>
+                <property name="hexpand">true</property>
+                <property name="xalign">0.0</property>
+                <style>
+                  <class name="header" />
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+    <!-- Grid -->
+    <child type="grid">
+      <object class="GtkGrid" id="grid">
+        <property name="visible">true</property>
+        <property name="can-focus">false</property>
+        <property name="row-homogeneous">true</property>
+        <property name="column-homogeneous">true</property>
+      </object>
+    </child>
+  </template>
+
+  <!-- Overflow popover -->
+  <object class="GtkPopover" id="overflow_popover">
+    <property name="can-focus">false</property>
+    <property name="position">bottom</property>
+    <signal name="drag-motion" handler="cancel_dnd_from_overflow_popover" object="GcalMonthView" swapped="yes" />
+    <style>
+      <class name="events" />
+    </style>
+
+    <child>
+      <object class="GtkBox">
+        <property name="visible">true</property>
+        <property name="can-focus">false</property>
+        <property name="spacing">6</property>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkLabel" id="popover_title">
+            <property name="visible">true</property>
+            <property name="can-focus">false</property>
+            <property name="margin-top">6</property>
+            <property name="margin-start">6</property>
+            <property name="margin-end">6</property>
+            <property name="xalign">0.0</property>
+            <style>
+              <class name="sidebar-header" />
+            </style>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkScrolledWindow">
+            <property name="visible">true</property>
+            <property name="can-focus">false</property>
+            <property name="hscrollbar-policy">never</property>
+            <property name="vscrollbar-policy">automatic</property>
+            <property name="max-content-height">400</property>
+            <property name="propagate-natural-height">true</property>
+            <child>
+              <object class="GtkBox" id="events_box">
+                <property name="visible">true</property>
+                <property name="orientation">vertical</property>
+                <property name="margin-start">2</property>
+                <property name="margin-end">2</property>
+                <property name="spacing">2</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkButton">
+            <property name="visible">true</property>
+            <property name="hexpand">true</property>
+            <property name="label" translatable="yes">Add Event…</property>
+            <signal name="clicked" handler="add_new_event_button_cb" object="GcalMonthView" swapped="no" />
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

data/ui/week-header.ui

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