[gnome-shell/T27795: 28/138] bottomPanel: Reorganize elements and style in the bottom panel

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 12e69d3b853c37c31fb6433d3f5d05e71ee2803f
Author: Mario Sanchez Prada <mario endlessm com>
Date:   Mon Jan 29 18:35:55 2018 +0000

    bottomPanel: Reorganize elements and style in the bottom panel
    
      - Removed Activities and AppMenu buttoms from the panel.
      - Moved the clock button to the right of the panel and adjust style.
      - Make sure that the clock button is only shown in the 'user' session mode.
      - Adapt style of boxpointers and popup menus.
      - Adapt style of the system indicators area.
      - Change transparency of the bottom panel to be 90% opaque (upstream is 35%).
    
    https://phabricator.endlessm.com/T17880
    https://phabricator.endlessm.com/T20327

 data/theme/gnome-shell-sass/_endless.scss | 51 +++++++++++++++++++++++++++++++
 js/ui/panel.js                            | 13 ++++++--
 js/ui/panelMenu.js                        |  7 +++++
 js/ui/sessionMode.js                      |  8 ++---
 4 files changed, 73 insertions(+), 6 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_endless.scss b/data/theme/gnome-shell-sass/_endless.scss
index 61d8bea059..63a5e0335c 100644
--- a/data/theme/gnome-shell-sass/_endless.scss
+++ b/data/theme/gnome-shell-sass/_endless.scss
@@ -58,9 +58,60 @@
 
 // Bottom panel
 
+#panel {
+    .clock-display {
+        font-size: 14px;
+        font-weight: bold;
+    }
+}
+
 .popup-menu {
+    .popup-menu-item.selected {
+        background-color: rgba(95, 95, 95, 1.0);
+    }
+
     &.panel-menu {
         -boxpointer-gap: 0px;
         margin-bottom: 0px;
     }
 }
+
+.popup-menu-boxpointer,
+.candidate-popup-boxpointer {
+    -arrow-background-color: #000000;
+}
+
+// System Indicators
+
+#panelRight {
+    .panel-button {
+        -natural-hpadding: 10px;
+        -minimum-hpadding: 10px;
+
+        .user-mode-indicators-box {
+            padding: 6px 4px;
+            color: rgba(255, 255, 255, 0.6);
+            background-color: rgba(255, 255, 255, 0.08);
+            border-radius: 3px;
+        }
+
+        &:hover {
+            .user-mode-indicators-box {
+                background-color: rgba(255, 255, 255, 0.12);
+                color: white;
+            }
+        }
+
+        &:clicked {
+            .user-mode-indicators-box {
+                background-color: rgba(255, 255, 255, 0.05);
+            }
+        }
+
+        &:active {
+            .user-mode-indicators-box {
+                color: white;
+            }
+        }
+    }
+}
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 7f10539462..8df104d757 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -703,7 +703,15 @@ class AggregateMenu extends PanelMenu.Button {
         let menuLayout = new AggregateLayout();
         this.menu.box.set_layout_manager(menuLayout);
 
-        this._indicators = new St.BoxLayout({ style_class: 'panel-status-indicators-box' });
+        this._indicators = new St.BoxLayout({
+            style_class: 'panel-status-indicators-box',
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+
+        let userMode = Main.sessionMode.hasOverview;
+        if (userMode)
+            this._indicators.add_style_class_name('user-mode-indicators-box');
+
         this.add_child(this._indicators);
 
         if (Config.HAVE_NETWORKMANAGER) {
@@ -742,7 +750,8 @@ class AggregateMenu extends PanelMenu.Button {
         this._indicators.add_child(this._rfkill.indicators);
         this._indicators.add_child(this._volume.indicators);
         this._indicators.add_child(this._power.indicators);
-        this._indicators.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
+        if (!userMode)
+            this._indicators.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.menu.addMenuItem(this._volume.menu);
         this.menu.addMenuItem(this._brightness.menu);
diff --git a/js/ui/panelMenu.js b/js/ui/panelMenu.js
index 543ac92955..8d6a4ee9aa 100644
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -138,6 +138,13 @@ var Button = GObject.registerClass({
              event.type() == Clutter.EventType.BUTTON_PRESS))
             this.menu.toggle();
 
+        if ((event.get_state() & Clutter.ModifierType.BUTTON1_MASK) ||
+            (event.get_state() & Clutter.ModifierType.BUTTON2_MASK) ||
+            (event.get_state() & Clutter.ModifierType.BUTTON3_MASK))
+            this.add_style_pseudo_class('clicked');
+        else
+            this.remove_style_pseudo_class('clicked');
+
         return Clutter.EVENT_PROPAGATE;
     }
 
diff --git a/js/ui/sessionMode.js b/js/ui/sessionMode.js
index e47bb97b13..99c521be4b 100644
--- a/js/ui/sessionMode.js
+++ b/js/ui/sessionMode.js
@@ -47,7 +47,7 @@ const _modes = {
         components: ['polkitAgent'],
         panel: {
             left: [],
-            center: ['dateMenu'],
+            center: [],
             right: ['dwellClick', 'a11y', 'keyboard', 'aggregateMenu']
         },
         panelStyle: 'login-screen'
@@ -99,9 +99,9 @@ const _modes = {
                'keyring', 'autorunManager', 'automountManager'],
 
         panel: {
-            left: ['activities', 'appMenu'],
-            center: ['dateMenu'],
-            right: ['dwellClick', 'a11y', 'keyboard', 'aggregateMenu']
+            left: [],
+            center: [],
+            right: ['dwellClick', 'a11y', 'keyboard', 'aggregateMenu', 'dateMenu']
         }
     }
 };