Add scroll-wheel support to the calendar

Make the calendar reactive and handle scroll events to change the month.
(GtkCalendar and hence the old gnome-panel calendar supported this and
it is apparently a handy way to flip through months.)

The padding is moved from the CalenderPopup to the Calendar so that the
scroll region extends all the way to the edge of the popup.

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

data/theme/gnome-shell.css

@@ -116,6 +116,9 @@ StScrollBar StButton#vhandle:hover
     background: rgba(0,0,0,0.9);
     border: 1px solid rgba(128,128,128,0.45);
     color: white;
+}
+
+#calendarPopup .calendar {
     padding: 10px;
 }
 

js/ui/calendar.js

@@ -1,5 +1,6 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
 
+const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const St = imports.gi.St;
 
@@ -51,7 +52,11 @@ Calendar.prototype = {
         this.date = new Date();
 
         this.actor = new St.Table({ homogeneous: false,
-                                    style_class: "calendar" });
+                                    style_class: "calendar",
+                                    reactive: true });
+
+        this.actor.connect('scroll-event',
+                           Lang.bind(this, this._onScroll));
 
         // Top line of the calendar '<| September 2009 |>'
         this._topBox = new St.BoxLayout();
@@ -93,6 +98,19 @@ Calendar.prototype = {
         }
     },
 
+    _onScroll : function(actor, event) {
+        switch (event.get_scroll_direction()) {
+        case Clutter.ScrollDirection.UP:
+        case Clutter.ScrollDirection.LEFT:
+            this._prevMonth();
+            break;
+        case Clutter.ScrollDirection.DOWN:
+        case Clutter.ScrollDirection.RIGHT:
+            this._nextMonth();
+            break;
+        }
+    },
+
     _prevMonth: function() {
         if (this.date.getMonth() == 0) {
             this.date.setMonth(11);