From 33c5f5726eac099f1546e4a8e1e7701ce9b1ddd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Fri, 5 Dec 2014 16:03:59 +0100 Subject: [PATCH] dateMenu: Make "today" button more prominent Split the weekday from the date and increase the latter's size to match the latest calendar mockups. https://bugzilla.gnome.org/show_bug.cgi?id=744817 --- data/theme/gnome-shell-sass | 2 +- data/theme/gnome-shell.css | 23 +++++++--- js/ui/dateMenu.js | 90 +++++++++++++++++++++++++------------ 3 files changed, 79 insertions(+), 36 deletions(-) diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass index 8409846c8..a1ea9bf18 160000 --- a/data/theme/gnome-shell-sass +++ b/data/theme/gnome-shell-sass @@ -1 +1 @@ -Subproject commit 8409846c837c96f26533c7e9116c1009a4cc8bce +Subproject commit a1ea9bf18ae85deaffdedbf2f52c7c1a820086a9 diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 29e53e5e6..b5926c48b 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 673a752c0..7ffc4e87c 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();