From 3b86d23e093a71017fdb721af2cad6ac753cb0a8 Mon Sep 17 00:00:00 2001 From: Carlos Soriano Date: Tue, 28 Oct 2014 10:56:46 +0100 Subject: [PATCH] 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 f42aee538..5bacd0b8a 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 9e5116f7e..f5e530efd 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 006eb3705..b259c1a08 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -814,7 +814,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(); @@ -1100,7 +1100,7 @@ const Panel = new Lang.Class({ continue; if (indicator.menu) indicator.menu.close(); - indicator.container.hide(); + indicator.actor.hide(); } }, @@ -1132,21 +1132,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 29acd29b4..9571a67a2 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)); @@ -177,8 +101,6 @@ const Button = new Lang.Class({ }, destroy: function() { - this.actor._delegate = null; - if (this.menu) this.menu.destroy(); this.actor.destroy();