[gnome-shell/eos3.8: 19/255] bottomPanel: Reorganize elements and style in the bottom panel

[Matthew Leeds <mwleeds src gnome org>]

commit fcd48bd387a5a1690fc0e78e9ac5fc4c7076b52b
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 c028dd563e..09596f0b2b 100644
--- a/data/theme/gnome-shell-sass/_endless.scss
+++ b/data/theme/gnome-shell-sass/_endless.scss
@@ -61,9 +61,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 e41d54b9c1..e90ea4cb6f 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -716,7 +716,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)
@@ -752,7 +760,8 @@ class AggregateMenu extends PanelMenu.Button {
         this._indicators.add_child(this._rfkill);
         this._indicators.add_child(this._volume);
         this._indicators.add_child(this._power);
-        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 b75a32e513..6a21c2618f 100644
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -136,6 +136,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 e12fc2ef48..5974b3edd7 100644
--- a/js/ui/sessionMode.js
+++ b/js/ui/sessionMode.js
@@ -48,7 +48,7 @@ const _modes = {
         components: ['polkitAgent'],
         panel: {
             left: [],
-            center: ['dateMenu'],
+            center: [],
             right: ['dwellClick', 'a11y', 'keyboard', 'aggregateMenu'],
         },
         panelStyle: 'login-screen',
@@ -87,9 +87,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'],
         },
     },
 };