[gnome-shell/wip/sass: 27/86] panelMenu: Use a normal St.Bin to allow styling



commit 3ddb5aad5cf5a32a09572b5a50d95b0b06921b15
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Oct 28 10:56:46 2014 +0100

    panelMenu: Use a normal St.Bin to allow styling
    
    Currently we don't add some style to ButtonBox like padding etc, we add
    it programatically taking into account minimum padding and natural
    padding. The thing is that with natural padding it works as expected
    even for low resolutions.
    
    As a design request, we need to style from css, and since the current
    ButtonBox class doesn't add any worth functionality, change that and use
    a simple St.Bin that allow normal styling.

 data/theme/_common.scss    |    3 +-
 data/theme/gnome-shell.css |    3 +-
 js/ui/panel.js             |   15 ++-----
 js/ui/panelMenu.js         |   90 +++-----------------------------------------
 4 files changed, 12 insertions(+), 99 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index c50331f..df23782 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -265,8 +265,7 @@ StScrollBar {
   }
 
   .panel-button {
-    -natural-hpadding: 12px;
-    -minimum-hpadding: 6px;
+    padding: 0px 12px;
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 9189a0b..1698a85 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1201,8 +1201,7 @@ StScrollBar {
       -panel-corner-background-color: transparent;
       -panel-corner-border-color: transparent; }
   #panel .panel-button {
-    -natural-hpadding: 12px;
-    -minimum-hpadding: 6px;
+    padding: 0px 12px;
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms; }
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 87930aa..9871b49 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -820,7 +820,7 @@ const AggregateMenu = new Lang.Class({
         this.menu.actor.add_style_class_name('aggregate-menu');
 
         this._indicators = new St.BoxLayout({ style_class: 'panel-status-indicators-box' });
-        this.actor.add_child(this._indicators);
+        this.actor.add_actor(this._indicators);
 
         if (Config.HAVE_NETWORKMANAGER) {
             this._network = new imports.ui.status.network.NMApplet();
@@ -1106,7 +1106,7 @@ const Panel = new Lang.Class({
                 continue;
             if (indicator.menu)
                 indicator.menu.close();
-            indicator.container.hide();
+            indicator.actor.hide();
         }
     },
 
@@ -1138,21 +1138,14 @@ const Panel = new Lang.Class({
     },
 
     _addToPanelBox: function(role, indicator, position, box) {
-        let container = indicator.container;
-        container.show();
-
-        let parent = container.get_parent();
-        if (parent)
-            parent.remove_actor(container);
-
-        box.insert_child_at_index(container, position);
+        indicator.actor.show();
+        box.insert_child_at_index(indicator.actor, position);
         if (indicator.menu)
             this.menuManager.addMenu(indicator.menu);
         this.statusArea[role] = indicator;
         let destroyId = indicator.connect('destroy', Lang.bind(this, function(emitter) {
             delete this.statusArea[role];
             emitter.disconnect(destroyId);
-            container.destroy();
         }));
     },
 
diff --git a/js/ui/panelMenu.js b/js/ui/panelMenu.js
index 092ca23..7a72401 100644
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -13,92 +13,16 @@ const Main = imports.ui.main;
 const Params = imports.misc.params;
 const PopupMenu = imports.ui.popupMenu;
 
-const ButtonBox = new Lang.Class({
-    Name: 'ButtonBox',
-
-    _init: function(params) {
-        params = Params.parse(params, { style_class: 'panel-button' }, true);
-        this.actor = new Shell.GenericContainer(params);
-        this.actor._delegate = this;
-
-        this.container = new St.Bin({ y_fill: true,
-                                      x_fill: true,
-                                      child: this.actor });
-
-        this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
-        this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
-        this.actor.connect('allocate', Lang.bind(this, this._allocate));
-
-        this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
-        this._minHPadding = this._natHPadding = 0.0;
-    },
-
-    _onStyleChanged: function(actor) {
-        let themeNode = actor.get_theme_node();
-
-        this._minHPadding = themeNode.get_length('-minimum-hpadding');
-        this._natHPadding = themeNode.get_length('-natural-hpadding');
-    },
-
-    _getPreferredWidth: function(actor, forHeight, alloc) {
-        let child = actor.get_first_child();
-
-        if (child) {
-            [alloc.min_size, alloc.natural_size] = child.get_preferred_width(-1);
-        } else {
-            alloc.min_size = alloc.natural_size = 0;
-        }
-
-        alloc.min_size += 2 * this._minHPadding;
-        alloc.natural_size += 2 * this._natHPadding;
-    },
-
-    _getPreferredHeight: function(actor, forWidth, alloc) {
-        let child = actor.get_first_child();
-
-        if (child) {
-            [alloc.min_size, alloc.natural_size] = child.get_preferred_height(-1);
-        } else {
-            alloc.min_size = alloc.natural_size = 0;
-        }
-    },
-
-    _allocate: function(actor, box, flags) {
-        let child = actor.get_first_child();
-        if (!child)
-            return;
-
-        let [minWidth, natWidth] = child.get_preferred_width(-1);
-
-        let availWidth = box.x2 - box.x1;
-        let availHeight = box.y2 - box.y1;
-
-        let childBox = new Clutter.ActorBox();
-        if (natWidth + 2 * this._natHPadding <= availWidth) {
-            childBox.x1 = this._natHPadding;
-            childBox.x2 = availWidth - this._natHPadding;
-        } else {
-            childBox.x1 = this._minHPadding;
-            childBox.x2 = availWidth - this._minHPadding;
-        }
-
-        childBox.y1 = 0;
-        childBox.y2 = availHeight;
-
-        child.allocate(childBox, flags);
-    },
-});
-
 const Button = new Lang.Class({
     Name: 'PanelMenuButton',
-    Extends: ButtonBox,
 
     _init: function(menuAlignment, nameText, dontCreateMenu) {
-        this.parent({ reactive: true,
-                      can_focus: true,
-                      track_hover: true,
-                      accessible_name: nameText ? nameText : "",
-                      accessible_role: Atk.Role.MENU });
+        this.actor = new St.Bin({ style_class: 'panel-button',
+                                  reactive: true,
+                                  can_focus: true,
+                                  track_hover: true,
+                                  accessible_name: nameText ? nameText : "",
+                                  accessible_role: Atk.Role.MENU });
 
         this.actor.connect('event', Lang.bind(this, this._onEvent));
         this.actor.connect('notify::visible', Lang.bind(this, this._onVisibilityChanged));
@@ -178,8 +102,6 @@ const Button = new Lang.Class({
     },
 
     destroy: function() {
-        this.actor._delegate = null;
-
         if (this.menu)
             this.menu.destroy();
         this.actor.destroy();


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]