loginDialog: Only highlight a single item at any time

The user list uses the same indication for hover and focus, so it
is possible for two items to be highlighted at the same time. Using
different styling would improve the situation, but only to some
extent - the user would still need to figure out which highlight
corresponds to which activation method. So instead, copy the
approach we use in popup menus and use a single property for
highlights that is updated by both focus- and hover changes.

https://bugzilla.gnome.org/show_bug.cgi?id=772284
This commit is contained in:
Florian Müllner
2017-06-09 17:34:43 +02:00
parent 79aa404c14
commit 526f2c8bcf
4 changed files with 22 additions and 9 deletions

View File

@@ -1724,7 +1724,7 @@ StScrollBar {
spacing: 12px; spacing: 12px;
padding: .2em; padding: .2em;
width: 23em; } width: 23em; }
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus { .login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
background-color: #215d9c; background-color: #215d9c;
color: #ffffff; } color: #ffffff; }
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
@@ -1738,9 +1738,6 @@ StScrollBar {
padding-right: 1em; } padding-right: 1em; }
.login-dialog-user-list-item:rtl { .login-dialog-user-list-item:rtl {
padding-left: 1em; } padding-left: 1em; }
.login-dialog-user-list-item:hover {
background-color: #215d9c;
color: #ffffff; }
.login-dialog-user-list-item .login-dialog-timed-login-indicator { .login-dialog-user-list-item .login-dialog-timed-login-indicator {
height: 2px; height: 2px;
margin: 2px 0 0 0; margin: 2px 0 0 0;

View File

@@ -1724,7 +1724,7 @@ StScrollBar {
spacing: 12px; spacing: 12px;
padding: .2em; padding: .2em;
width: 23em; } width: 23em; }
.login-dialog-user-list:expanded .login-dialog-user-list-item:focus { .login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
background-color: #215d9c; background-color: #215d9c;
color: #ffffff; } color: #ffffff; }
.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
@@ -1738,9 +1738,6 @@ StScrollBar {
padding-right: 1em; } padding-right: 1em; }
.login-dialog-user-list-item:rtl { .login-dialog-user-list-item:rtl {
padding-left: 1em; } padding-left: 1em; }
.login-dialog-user-list-item:hover {
background-color: #215d9c;
color: #ffffff; }
.login-dialog-user-list-item .login-dialog-timed-login-indicator { .login-dialog-user-list-item .login-dialog-timed-login-indicator {
height: 2px; height: 2px;
margin: 2px 0 0 0; margin: 2px 0 0 0;

View File

@@ -70,6 +70,16 @@ const UserListItem = new Lang.Class({
this.actor.connect('destroy', this.actor.connect('destroy',
Lang.bind(this, this._onDestroy)); Lang.bind(this, this._onDestroy));
this.actor.connect('key-focus-in', () => {
this._setSelected(true);
});
this.actor.connect('key-focus-out', () => {
this._setSelected(false);
});
this.actor.connect('notify::hover', () => {
this._setSelected(this.actor.hover);
});
this._userWidget = new UserWidget.UserWidget(this.user); this._userWidget = new UserWidget.UserWidget(this.user);
layout.add(this._userWidget.actor); layout.add(this._userWidget.actor);
@@ -103,6 +113,15 @@ const UserListItem = new Lang.Class({
this.emit('activate'); this.emit('activate');
}, },
_setSelected: function(selected) {
if (selected) {
this.actor.add_style_pseudo_class('selected');
this.actor.grab_key_focus();
} else {
this.actor.remove_style_pseudo_class('selected');
}
},
showTimedLoginIndicator: function(time) { showTimedLoginIndicator: function(time) {
let hold = new Batch.Hold(); let hold = new Batch.Hold();