[gnome-shell] Bug 588462 - Use a plain black panel with a different layout

[Sander Dijkhuis <sanderd src gnome org>]

commit 9e85d197fddf5f4dc421d2f4460367920e9a533e
Author: Sander Dijkhuis <sander dijkhuis gmail com>
Date:   Mon Jul 13 18:49:06 2009 +0200

    Bug 588462 - Use a plain black panel with a different layout
    
    The semi-transparent gradient on the panel is replaced by a
    solid black background. The shadow below the panel is removed.
    The clock is put at the center instead of the right side of
    the panel and has the date removed. The user icon is hidden.
    Instead of boldface, a regular font is used. Padding is added
    on each side and between panel elements.
    
    button.js: Allow for custom text colors and fonts.
    panel.js: Change the panel colors and layout, remove the shadow.

 js/ui/button.js |   29 +++++++++++++++++----
 js/ui/panel.js  |   75 +++++++++++++++++++++++-------------------------------
 2 files changed, 55 insertions(+), 49 deletions(-)
---
diff --git a/js/ui/button.js b/js/ui/button.js
index 4ce88ad..60d1d8c 100644
--- a/js/ui/button.js
+++ b/js/ui/button.js
@@ -14,12 +14,20 @@ DEFAULT_BUTTON_COLOR.from_pixel(0xeeddcc66);
 const DEFAULT_PRESSED_BUTTON_COLOR = new Clutter.Color();
 DEFAULT_PRESSED_BUTTON_COLOR.from_pixel(0xccbbaa66);
 
-function Button(widget, buttonColor, pressedButtonColor, staysPressed, minWidth, minHeight) {
-    this._init(widget, buttonColor, pressedButtonColor, staysPressed, minWidth, minHeight);
+const DEFAULT_TEXT_COLOR = new Clutter.Color();
+DEFAULT_TEXT_COLOR.from_pixel(0x000000ff);
+
+const DEFAULT_FONT = 'Sans Bold 16px';
+
+// Padding on the left and right side of the button.
+const SIDE_PADDING = 14;
+
+function Button(widget, buttonColor, pressedButtonColor, textColor, staysPressed, minWidth, minHeight, font) {
+    this._init(widget, buttonColor, pressedButtonColor, textColor, staysPressed, minWidth, minHeight, font);
 }
 
 Button.prototype = {
-    _init : function(widgetOrText, buttonColor, pressedButtonColor, staysPressed, minWidth, minHeight) {
+    _init : function(widgetOrText, buttonColor, pressedButtonColor, textColor, staysPressed, minWidth, minHeight, font) {
         let me = this;
 
         this._buttonColor = buttonColor
@@ -30,10 +38,18 @@ Button.prototype = {
         if (pressedButtonColor == null)
             this._pressedButtonColor = DEFAULT_PRESSED_BUTTON_COLOR;
 
+        this._textColor = textColor;
+        if (textColor == null)
+            this._textColor = DEFAULT_TEXT_COLOR;
+
         this._staysPressed = staysPressed
         if (staysPressed == null)
             this._staysPressed = false;
 
+        this._font = font;
+        if (font == null)
+            this._font = DEFAULT_FONT;
+
         if (minWidth == null)
             minWidth = 0;
         if (minHeight == null)
@@ -47,13 +63,14 @@ Button.prototype = {
 
         this.button = new Big.Box({ reactive: true,
                                     corner_radius: 5,
-                                    padding_left: 4,
-                                    padding_right: 4,
+                                    padding_left: SIDE_PADDING,
+                                    padding_right: SIDE_PADDING,
                                     orientation: Big.BoxOrientation.HORIZONTAL,
                                     y_align: Big.BoxAlignment.CENTER
                                   });
         if (typeof widgetOrText == 'string') {
-            this._widget = new Clutter.Text({ font_name: "Sans Bold 16px",
+            this._widget = new Clutter.Text({ font_name: this._font,
+                                              color: this._textColor,
                                               text: widgetOrText });
         } else {
             this._widget = widgetOrText;
diff --git a/js/ui/panel.js b/js/ui/panel.js
index bddb6ae..ec6f00b 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -12,31 +12,29 @@ const Tweener = imports.ui.tweener;
 const Button = imports.ui.button;
 const Main = imports.ui.main;
 
-const PANEL_HEIGHT = 32;
+const PANEL_HEIGHT = 26;
 const TRAY_HEIGHT = PANEL_HEIGHT - 1;
-const SHADOW_HEIGHT = 6;
-
-// The panel has a transparent white background with a gradient.
-const PANEL_TOP_COLOR = new Clutter.Color();
-PANEL_TOP_COLOR.from_pixel(0xffffff99);
-const PANEL_MIDDLE_COLOR = new Clutter.Color();
-PANEL_MIDDLE_COLOR.from_pixel(0xffffff88);
-const PANEL_BOTTOM_COLOR = new Clutter.Color();
-PANEL_BOTTOM_COLOR.from_pixel(0xffffffaa);
-
-const SHADOW_COLOR = new Clutter.Color();
-SHADOW_COLOR.from_pixel(0x00000033);
+
+const PANEL_BACKGROUND_COLOR = new Clutter.Color();
+PANEL_BACKGROUND_COLOR.from_pixel(0x000000ff);
+const PANEL_FOREGROUND_COLOR = new Clutter.Color();
+PANEL_FOREGROUND_COLOR.from_pixel(0xffffffff);
+
 const TRANSPARENT_COLOR = new Clutter.Color();
 TRANSPARENT_COLOR.from_pixel(0x00000000);
 
-// Darken (pressed) buttons; lightening has no effect on white backgrounds.
+// Don't make the mouse hover effect visible to the user for a menu feel.
 const PANEL_BUTTON_COLOR = new Clutter.Color();
-PANEL_BUTTON_COLOR.from_pixel(0x00000015);
+PANEL_BUTTON_COLOR.from_pixel(0x00000000);
+
+// Lighten pressed buttons; darkening has no effect on a black background.
 const PRESSED_BUTTON_BACKGROUND_COLOR = new Clutter.Color();
-PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x00000030);
+PRESSED_BUTTON_BACKGROUND_COLOR.from_pixel(0x324c6ffa);
+
+const DEFAULT_FONT = 'Sans 16px';
 
 const TRAY_PADDING = 0;
-const TRAY_SPACING = 2;
+const TRAY_SPACING = 14;
 
 // Used for the tray icon container with gtk pre-2.16, which doesn't
 // fully support tray icon transparency
@@ -58,26 +56,11 @@ Panel.prototype = {
         // Put the background under the panel within a group.
         this.actor = new Clutter.Group();
 
-        // Create backBox, which contains two boxes, backUpper and backLower,
-        // for the background gradients and one for the shadow. The shadow at
-        // the bottom has a fixed height (packing flag NONE), and the rest of
-        // the height above is divided evenly between backUpper and backLower
-        // (with packing flag EXPAND).
-        let backBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                    x: 0,
-                                    y: 0,
-                                    width: global.screen_width,
-                                    height: PANEL_HEIGHT + SHADOW_HEIGHT });
-        let backUpper = global.create_vertical_gradient(PANEL_TOP_COLOR,
-                                                        PANEL_MIDDLE_COLOR);
-        let backLower = global.create_vertical_gradient(PANEL_MIDDLE_COLOR,
-                                                        PANEL_BOTTOM_COLOR);
-        let shadow = global.create_vertical_gradient(SHADOW_COLOR,
-                                                     TRANSPARENT_COLOR);
-        shadow.set_height(SHADOW_HEIGHT + 1);
-        backBox.append(backUpper, Big.BoxPackFlags.EXPAND);
-        backBox.append(backLower, Big.BoxPackFlags.EXPAND);
-        backBox.append(shadow, Big.BoxPackFlags.NONE);
+        // backBox contains the panel background and the clock.
+        let backBox = new Big.Box({ width: global.screen_width,
+                                    height: PANEL_HEIGHT,
+                                    backgroundColor: PANEL_BACKGROUND_COLOR,
+                                    x_align: Big.BoxAlignment.CENTER });
         this.actor.add_actor(backBox);
 
         let box = new Big.Box({ x: 0,
@@ -87,15 +70,20 @@ Panel.prototype = {
                                 orientation: Big.BoxOrientation.HORIZONTAL,
                                 spacing: 4 });
 
-        this.button = new Button.Button("Activities", PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, true, null, PANEL_HEIGHT);
+        this.button = new Button.Button("Activities", PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR, PANEL_FOREGROUND_COLOR, true, null, PANEL_HEIGHT, DEFAULT_FONT);
 
         box.append(this.button.button, Big.BoxPackFlags.NONE);
 
         let statusbox = new Big.Box();
         let statusmenu = this._statusmenu = new Shell.StatusMenu();
-        statusmenu.get_name().fontName = 'Sans Bold 16px';
+        statusmenu.get_icon().hide();
+        statusmenu.get_name().fontName = DEFAULT_FONT;
+        statusmenu.get_name().color = PANEL_FOREGROUND_COLOR;
         statusbox.append(this._statusmenu, Big.BoxPackFlags.NONE);
-        let statusbutton = new Button.Button(statusbox, PANEL_BUTTON_COLOR, PRESSED_BUTTON_BACKGROUND_COLOR,
+        let statusbutton = new Button.Button(statusbox,
+                                             PANEL_BUTTON_COLOR,
+                                             PRESSED_BUTTON_BACKGROUND_COLOR,
+                                             PANEL_FOREGROUND_COLOR,
                                              true, null, PANEL_HEIGHT);
         statusbutton.button.connect('button-press-event', function (b, e) {
             statusmenu.toggle(e);
@@ -107,13 +95,14 @@ Panel.prototype = {
             statusbutton.release();
         });
 
-        this._clock = new Clutter.Text({ font_name: "Sans Bold 16px",
+        this._clock = new Clutter.Text({ font_name: DEFAULT_FONT,
+                                         color: PANEL_FOREGROUND_COLOR,
                                          text: "" });
         let clockbox = new Big.Box({ y_align: Big.BoxAlignment.CENTER,
                                      padding_left: 4,
                                      padding_right: 4 });
         clockbox.append(this._clock, Big.BoxPackFlags.NONE);
-        box.append(clockbox, Big.BoxPackFlags.END);
+        backBox.append(clockbox, Big.BoxPackFlags.EXPAND);
 
         // The tray icons live in trayBox within trayContainer.
         // The trayBox is hidden when there are no tray icons.
@@ -193,7 +182,7 @@ Panel.prototype = {
             displayDate.setMinutes(displayDate.getMinutes() + 1);
             msecRemaining += 60000;
         }
-        this._clock.set_text(displayDate.toLocaleFormat("%a %b %e, %l:%M %p"));
+        this._clock.set_text(displayDate.toLocaleFormat("%a %l:%M %p"));
         Mainloop.timeout_add(msecRemaining, Lang.bind(this, this._updateClock));
         return false;
     }