[gnome-shell/wip/aggregate-menu: 70/101] system: Use icons for actions at the bottom of the system menu

[Jasper St. Pierre <jstpierre src gnome org>]

commit 7015c418d3f98beb1f335497d6fafa63ae5bf318
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Jun 11 17:17:09 2013 -0400

    system: Use icons for actions at the bottom of the system menu

 data/theme/gnome-shell.css |   15 ++++++++++
 js/ui/status/system.js     |   67 +++++++++++++++++++++++++++++++++----------
 2 files changed, 66 insertions(+), 16 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ddf755d..4a0de2e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -606,6 +606,21 @@ StScrollBar StButton#vhandle:active {
     border: 1px solid #8b8b8b;
 }
 
+.system-menu-action {
+    color: #e6e6e6;
+    border-radius: 4px;
+    padding: 6px;
+}
+
+.system-menu-action:hover {
+    color: white;
+    background-color: rgba(255,255,255,0.1);
+}
+
+.system-menu-action > StIcon {
+    icon-size: 32px;
+}
+
 /* Overview */
 
 #overview {
diff --git a/js/ui/status/system.js b/js/ui/status/system.js
index 3038c1d..495257f 100644
--- a/js/ui/status/system.js
+++ b/js/ui/status/system.js
@@ -6,6 +6,7 @@ const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
+const Shell = imports.gi.Shell;
 const St = imports.gi.St;
 const Clutter = imports.gi.Clutter;
 
@@ -97,15 +98,20 @@ const Indicator = new Lang.Class({
     },
 
     _sessionUpdated: function() {
-        this.actor.visible = !Main.sessionMode.isGreeter;
-        this.setSensitive(!Main.sessionMode.isLocked);
+        let isLocked = Main.sessionMode.isLocked;
+        let isGreeter = Main.sessionMode.isGreeter;
+
+        this._lockScreenAction.visible = !Main.sessionMode.isLocked && !Main.sessionMode.isGreeter;
+        this._powerOffAction.visible = !Main.sessionMode.isLocked;
+        this._settingsAction.visible = Main.sessionMode.allowSettings;
     },
 
     _updateMultiUser: function() {
+        let shouldShowInMode = !Main.sessionMode.isLocked && !Main.sessionMode.isGreeter;
         let hasSwitchUser = this._updateSwitchUser();
         let hasLogout = this._updateLogout();
 
-        this._switchUserSubMenu.actor.visible = (hasSwitchUser || hasLogout);
+        this._switchUserSubMenu.actor.visible = shouldShowInMode && (hasSwitchUser || hasLogout);
     },
 
     _updateSwitchUser: function() {
@@ -148,7 +154,7 @@ const Indicator = new Lang.Class({
 
     _updateLockScreen: function() {
         let allowLockScreen = !this._lockdownSettings.get_boolean(DISABLE_LOCK_SCREEN_KEY);
-        this._lockScreenItem.actor.visible = allowLockScreen && LoginManager.canLock();
+        this._lockScreenAction.visible = allowLockScreen && LoginManager.canLock();
     },
 
     _updateHaveShutdown: function() {
@@ -162,7 +168,17 @@ const Indicator = new Lang.Class({
     },
 
     _updatePowerOff: function() {
-        this._powerOffItem.actor.visible = this._haveShutdown;
+        this._powerOffAction.visible = this._haveShutdown;
+    },
+
+    _createActionButton: function(iconName, accessibleName) {
+        let icon = new St.Button({ reactive: true,
+                                   can_focus: true,
+                                   track_hover: true,
+                                   accessible_name: accessibleName,
+                                   style_class: 'system-menu-action' });
+        icon.child = new St.Icon({ icon_name: iconName });
+        return icon;
     },
 
     _createSubMenu: function() {
@@ -170,7 +186,6 @@ const Indicator = new Lang.Class({
 
         this._switchUserSubMenu = new PopupMenu.PopupSubMenuMenuItem('', true);
         this._switchUserSubMenu.icon.style_class = 'system-switch-user-submenu-icon';
-        this.menu.addMenuItem(this._switchUserSubMenu);
 
         item = new PopupMenu.PopupMenuItem(_("Switch User"));
         item.connect('activate', Lang.bind(this, this._onLoginScreenActivate));
@@ -185,20 +200,39 @@ const Indicator = new Lang.Class({
         this._user.connect('notify::is-loaded', Lang.bind(this, this._updateSwitchUserSubMenu));
         this._user.connect('changed', Lang.bind(this, this._updateSwitchUserSubMenu));
 
-        this.menu.addSettingsAction(_("Settings"), 'gnome-control-center.desktop');
+        this.menu.addMenuItem(this._switchUserSubMenu);
 
-        item = new PopupMenu.PopupMenuItem(_("Lock"));
-        item.connect('activate', Lang.bind(this, this._onLockScreenActivate));
-        this.menu.addMenuItem(item);
-        this._lockScreenItem = item;
+        this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
+
+        let hbox = new St.BoxLayout({ style_class: 'system-menu-actions-box' });
+
+        this._settingsAction = this._createActionButton('preferences-system-symbolic', _("Settings"));
+        this._settingsAction.connect('clicked', Lang.bind(this, this._onSettingsClicked));
+        hbox.add(this._settingsAction, { expand: true, x_fill: false });
+
+        this._lockScreenAction = this._createActionButton('changes-prevent-symbolic', _("Lock"));
+        this._lockScreenAction.connect('clicked', Lang.bind(this, this._onLockScreenClicked));
+        hbox.add(this._lockScreenAction, { expand: true, x_fill: false });
+
+        this._powerOffAction = this._createActionButton('system-shutdown-symbolic', _("Power Off"));
+        this._powerOffAction.connect('clicked', Lang.bind(this, this._onPowerOffClicked));
+        hbox.add(this._powerOffAction, { expand: true, x_fill: false });
+
+        item = new PopupMenu.PopupBaseMenuItem({ reactive: false,
+                                                 can_focus: false });
+        item.addActor(hbox, { span: -1, expand: true });
 
-        item = new PopupMenu.PopupMenuItem(_("Power Off"));
         this.menu.addMenuItem(item);
-        item.connect('activate', Lang.bind(this, this._onPowerOffActivate));
-        this._powerOffItem = item;
     },
 
-    _onLockScreenActivate: function() {
+    _onSettingsClicked: function() {
+        this.menu.itemActivated();
+        let app = Shell.AppSystem.get_default().lookup_app('gnome-control-center.desktop');
+        Main.overview.hide();
+        app.activate();
+    },
+
+    _onLockScreenClicked: function() {
         this.menu.itemActivated(BoxPointer.PopupAnimation.NONE);
         Main.overview.hide();
         Main.screenShield.lock(true);
@@ -284,7 +318,8 @@ const Indicator = new Lang.Class({
         dialog.open();
     },
 
-    _onPowerOffActivate: function() {
+    _onPowerOffClicked: function() {
+        this.menu.itemActivated();
         Main.overview.hide();
         this._loginManager.listSessions(Lang.bind(this, function(result) {
             let sessions = [];