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

calendar: Ensure clicked calendar item retains key focus

Browse Source 
The date actors get destroyed and recreated on every date change which drops
key focus for the selected date. Restore key focus in such a case, but only
when the selected date was actually clicked. Whenever the next/prev month
buttons code is used (for scrolling, mouse click, or keyboard click), have
the corresponding button grab focus. Changing months currently causes the
calendar to update twice as the eventSource gets changed, so key focus gets
lost if it is on a date when the month changes.

https://bugzilla.gnome.org/show_bug.cgi?id=667434
This commit is contained in:
Tanner Doshier 2013-04-30 17:32:43 -05:00 committed by Jasper St. Pierre
parent cc7630c236
commit 31478e9fb4
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
js/ui/calendar.js
View File

@ -443,18 +443,18 @@ const Calendar = new Lang.Class({
this.actor.add(this._topBox, this.actor.add(this._topBox,
{ row: 0, col: 0, col_span: offsetCols + 7 }); { row: 0, col: 0, col_span: offsetCols + 7 });
let back = new St.Button({ style_class: 'calendar-change-month-back', this._backButton = new St.Button({ style_class: 'calendar-change-month-back',
can_focus: true }); can_focus: true });
this._topBox.add(back); this._topBox.add(this._backButton);
back.connect('clicked', Lang.bind(this, this._onPrevMonthButtonClicked)); this._backButton.connect('clicked', Lang.bind(this, this._onPrevMonthButtonClicked));
this._monthLabel = new St.Label({style_class: 'calendar-month-label'}); this._monthLabel = new St.Label({style_class: 'calendar-month-label'});
this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE }); this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
let forward = new St.Button({ style_class: 'calendar-change-month-forward', this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward',
can_focus: true }); can_focus: true });
this._topBox.add(forward); this._topBox.add(this._forwardButton);
forward.connect('clicked', Lang.bind(this, this._onNextMonthButtonClicked)); this._forwardButton.connect('clicked', Lang.bind(this, this._onNextMonthButtonClicked));
// Add weekday labels... // Add weekday labels...
// //
@ -513,10 +513,12 @@ const Calendar = new Lang.Class({
} }
} }
this.setDate(newDate, false); this._backButton.grab_key_focus();
},
_onNextMonthButtonClicked: function() { this.setDate(newDate, false);
},
_onNextMonthButtonClicked: function() {
let newDate = new Date(this._selectedDate); let newDate = new Date(this._selectedDate);
let oldMonth = newDate.getMonth(); let oldMonth = newDate.getMonth();
if (oldMonth == 11) { if (oldMonth == 11) {
@ -535,7 +537,9 @@ const Calendar = new Lang.Class({
} }
} }
this.setDate(newDate, false); this._forwardButton.grab_key_focus();
this.setDate(newDate, false);
}, },
_onSettingsChange: function() { _onSettingsChange: function() {
@ -601,8 +605,12 @@ const Calendar = new Lang.Class({
let iterStr = iter.toUTCString(); let iterStr = iter.toUTCString();
button.connect('clicked', Lang.bind(this, function() { button.connect('clicked', Lang.bind(this, function() {
this._shouldDateGrabFocus = true;
let newlySelectedDate = new Date(iterStr); let newlySelectedDate = new Date(iterStr);
this.setDate(newlySelectedDate, false); this.setDate(newlySelectedDate, false);
this._shouldDateGrabFocus = false;
})); }));
let hasEvents = this._eventSource.hasEvents(iter); let hasEvents = this._eventSource.hasEvents(iter);
@ -627,9 +635,6 @@ const Calendar = new Lang.Class({
else if (iter.getMonth() != this._selectedDate.getMonth()) else if (iter.getMonth() != this._selectedDate.getMonth())
styleClass += ' calendar-other-month-day'; styleClass += ' calendar-other-month-day';
if (_sameDay(this._selectedDate, iter))
button.add_style_pseudo_class('active');
if (hasEvents) if (hasEvents)
styleClass += ' calendar-day-with-events' styleClass += ' calendar-day-with-events'
@ -639,6 +644,13 @@ const Calendar = new Lang.Class({
this.actor.add(button, this.actor.add(button,
{ row: row, col: offsetCols + (7 + iter.getDay() - this._weekStart) % 7 }); { row: row, col: offsetCols + (7 + iter.getDay() - this._weekStart) % 7 });
if (_sameDay(this._selectedDate, iter)) {
button.add_style_pseudo_class('active');
if (this._shouldDateGrabFocus)
button.grab_key_focus();
}
if (this._useWeekdate && iter.getDay() == 4) { if (this._useWeekdate && iter.getDay() == 4) {
let label = new St.Label({ text: _getCalendarWeekForDate(iter).toString(), let label = new St.Label({ text: _getCalendarWeekForDate(iter).toString(),
style_class: 'calendar-day-base calendar-week-number'}); style_class: 'calendar-day-base calendar-week-number'});