[gnome-shell/wip/fmuellner/notification-redux: 2/88] dateMenu: Make "today" button more prominent

[Florian Müllner <fmuellner src gnome org>]

commit 6fb919d409cf4ea4c8bc445b6d5d46f93acc7caa
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Dec 5 16:03:59 2014 +0100

    dateMenu: Make "today" button more prominent
    
    Split the weekday from the date and increase the latter's size to
    match the latest calendar mockups.

 data/theme/gnome-shell.css |   17 ++++++---
 js/ui/dateMenu.js          |   86 +++++++++++++++++++++++++++++---------------
 2 files changed, 68 insertions(+), 35 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 072f18b..943f3bc 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1368,20 +1368,25 @@ StScrollBar StButton#vhandle:active {
     background-color: #aaaaaa;
 }
 
-.datemenu-date-label {
+.datemenu-today-button {
     padding: .4em 1.7em;
-    font-weight: bold;
-    text-align: center;
     color: #eeeeec;
     border-radius: 4px;
 }
 
-.datemenu-date-label:hover,
-.datemenu-date-label:focus {
+.datemenu-today-button .day-label {
+}
+
+.datemenu-today-button .date-label {
+    font-size: 1.5em;
+}
+
+.datemenu-today-button:hover,
+.datemenu-today-button:focus {
     background-color: #999999;
 }
 
-.datemenu-date-label:active {
+.datemenu-today-button:active {
     background-color: #aaaaaa;
 }
 
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 7ff75f7..0c63bbf 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -35,6 +35,58 @@ function _onVertSepRepaint(area) {
     cr.$dispose();
 }
 
+const TodayButton = new Lang.Class({
+    Name: 'TodayButton',
+
+    _init: function(calendar) {
+        // Having the ability to go to the current date if the user is already
+        // on the current date can be confusing. So don't make the button reactive
+        // until the selected date changes.
+        this.actor = new St.Button({ style_class: 'datemenu-today-button',
+                                     reactive: false
+                                   });
+        this.actor.connect('clicked', Lang.bind(this,
+            function() {
+                this._calendar.setDate(new Date(), false);
+            }));
+
+        let hbox = new St.BoxLayout({ vertical: true });
+        this.actor.add_actor(hbox);
+
+        this._dayLabel = new St.Label({ style_class: 'day-label',
+                                        x_align: Clutter.ActorAlign.START });
+        hbox.add_actor(this._dayLabel);
+
+        this._dateLabel = new St.Label({ style_class: 'date-label' });
+        hbox.add_actor(this._dateLabel);
+
+        this._calendar = calendar;
+        this._calendar.connect('selected-date-changed', Lang.bind(this,
+            function(calendar, date) {
+                // Make the button reactive only if the selected date is not the
+                // current date.
+                this.actor.can_focus = this.actor.reactive = !this._isToday(date)
+            }));
+    },
+
+    setDate: function(date) {
+        this._dayLabel.set_text(date.toLocaleFormat('%A'));
+
+        /* Translators: This is the date format to use when the calendar popup is
+         * shown - it is shown just below the time in the shell (e.g. "Tue 9:29 AM").
+         */
+        let dateFormat = Shell.util_translate_time_string (N_("%B %e %Y"));
+        this._dateLabel.set_text(date.toLocaleFormat(dateFormat));
+    },
+
+    _isToday: function(date) {
+        let now = new Date();
+        return now.getYear() == date.getYear() &&
+               now.getMonth() == date.getMonth() &&
+               now.getDate() == date.getDate();
+    }
+});
+
 const DateMenuButton = new Lang.Class({
     Name: 'DateMenuButton',
     Extends: PanelMenu.Button,
@@ -62,22 +114,13 @@ const DateMenuButton = new Lang.Class({
         vbox = new St.BoxLayout({vertical: true});
         hbox.add(vbox);
 
-        // Date
-        // Having the ability to go to the current date if the user is already
-        // on the current date can be confusing. So don't make the button reactive
-        // until the selected date changes.
-        this._date = new St.Button({ style_class: 'datemenu-date-label',
-                                     reactive: false
-                                   });
-        this._date.connect('clicked',
-                           Lang.bind(this, function() {
-                               this._calendar.setDate(new Date(), false);
-                           }));
-        vbox.add(this._date, { x_fill: false  });
-
         this._eventList = new Calendar.EventsList();
         this._calendar = new Calendar.Calendar();
 
+        // Date
+        this._date = new TodayButton(this._calendar);
+        vbox.add(this._date.actor, { x_fill: false  });
+
         this._calendar.connect('selected-date-changed',
                                Lang.bind(this, function(calendar, date) {
                                   // we know this._eventList is defined here, because selected-data-changed
@@ -85,9 +128,6 @@ const DateMenuButton = new Lang.Class({
                                   // and the calender makes those dates unclickable when instantiated with
                                   // a null event source
                                    this._eventList.setDate(date);
-
-                                   // Make the button reactive only if the selected date is not the current 
date.
-                                   this._date.can_focus = this._date.reactive = !this._isToday(date)
                                }));
         vbox.add(this._calendar.actor);
 
@@ -125,12 +165,7 @@ const DateMenuButton = new Lang.Class({
             if (isOpen) {
                 let now = new Date();
                 this._calendar.setDate(now);
-
-                /* Translators: This is the date format to use when the calendar popup is
-                 * shown - it is shown just below the time in the shell (e.g. "Tue 9:29 AM").
-                 */
-                let dateFormat = Shell.util_translate_time_string (N_("%A %B %e, %Y"));
-                this._date.set_label(now.toLocaleFormat(dateFormat));
+                this._date.setDate(now);
             }
         }));
 
@@ -143,13 +178,6 @@ const DateMenuButton = new Lang.Class({
         this._sessionUpdated();
     },
 
-    _isToday: function(date) {
-        let now = new Date();
-        return now.getYear() == date.getYear() &&
-               now.getMonth() == date.getMonth() &&
-               now.getDate() == date.getDate();
-    },
-
     _appInstalledChanged: function() {
         this._calendarApp = undefined;
         this._updateEventsVisibility();