[gnome-shell/wip/fmuellner/notification-redux+sass: 97/141] dateMenu: Make "today" button more prominent

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

commit bc44240b57f981184ad493677ae6b0eafee90d69
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/_common.scss    |   30 +++++++++++---
 data/theme/gnome-shell.css |   23 ++++++++---
 js/ui/dateMenu.js          |   90 ++++++++++++++++++++++++++++++--------------
 3 files changed, 101 insertions(+), 42 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index a8f07c7..ae8b208 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -698,21 +698,37 @@ StScrollBar {
   }
 
   .calendar {
-    margin: 0 1.5em;
     margin-bottom: 1em;
   }
 
+    .calendar,
+    .datemenu-today-button {
+      margin: 0 1.5em;
+    }
+
     .datemenu-calendar-column {
       spacing: 0.5em;
       padding-bottom: 3em;
     }
 
-    .datemenu-date-label { //topmost date label
-      padding: .4em 1.7em;
-      text-align: center;
-      color: $fg_color;
-      font-weight: bold;
-      font-size: 110%;
+    .datemenu-today-button {
+      border-radius: 4px;
+      padding: .4em;
+    }
+
+    .datemenu-today-button {
+      &:hover,&:focus { background-color: lighten($bg_color,5%); }
+      &:active {
+        color: lighten($selected_fg_color,5%);
+        background-color: $selected_bg_color;
+      }
+    }
+
+    .datemenu-today-button .day-label {
+    }
+
+    .datemenu-today-button .date-label {
+      font-size: 1.5em;
     }
 
     .calendar-month-label {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index a9ae329..45d73b2 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -589,19 +589,28 @@ StScrollBar {
   padding: 0.75em 1.0em; }
 
 .calendar {
-  margin: 0 1.5em;
   margin-bottom: 1em; }
 
+.calendar,
+.datemenu-today-button {
+  margin: 0 1.5em; }
+
 .datemenu-calendar-column {
   spacing: 0.5em;
   padding-bottom: 3em; }
 
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  text-align: center;
-  color: #eeeeec;
-  font-weight: bold;
-  font-size: 110%; }
+.datemenu-today-button {
+  border-radius: 4px;
+  padding: .4em; }
+
+.datemenu-today-button:hover, .datemenu-today-button:focus {
+  background-color: #454c4c; }
+.datemenu-today-button:active {
+  color: white;
+  background-color: #215d9c; }
+
+.datemenu-today-button .date-label {
+  font-size: 1.5em; }
 
 .calendar-month-label {
   color: #e2e2df;
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 673a752..7ffc4e8 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -19,6 +19,65 @@ const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
 const Calendar = imports.ui.calendar;
 
+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',
+                                     x_align: St.Align.START,
+                                     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));
+
+        /* Translators: This is the accessible name of the date button shown
+         * below the time in the shell; it should combine the weekday and the
+         * date, e.g. "Tuesday February 17 2015".
+         */
+        let dateFormat = Shell.util_translate_time_string (N_("%A %B %e %Y"));
+        this.actor.accessible_name = 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',
@@ -46,9 +105,6 @@ const DateMenuButton = new Lang.Class({
         this._calendar.connect('selected-date-changed',
                                Lang.bind(this, function(calendar, date) {
                                    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)
                                }));
 
         // Whenever the menu is opened, select today
@@ -56,12 +112,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);
             }
         }));
 
@@ -74,18 +125,8 @@ const DateMenuButton = new Lang.Class({
                                   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._date = new TodayButton(this._calendar);
+        vbox.add_actor(this._date.actor);
 
         vbox.add(this._calendar.actor);
 
@@ -120,13 +161,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();