isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dateMenu: Make "today" button more prominent

Browse Source 
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
This commit is contained in:
Florian Müllner 2014-12-05 16:03:59 +01:00
parent 26330fde7e
commit 33c5f5726e
3 changed files with 79 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass

@ -1 +1 @@
Subproject commit 8409846c837c96f26533c7e9116c1009a4cc8bce
Subproject commit a1ea9bf18ae85deaffdedbf2f52c7c1a820086a9

23
data/theme/gnome-shell.css
View File

@ -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;

90
js/ui/dateMenu.js
View File

@ -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();