From 3732a6891db1194940882bf64ffcc6969b4fb26a Mon Sep 17 00:00:00 2001 From: Carlos Soriano Date: Tue, 11 Nov 2014 16:30:11 +0100 Subject: [PATCH] panelMenu: Don't fade appMenuButton icon and put it on the side Design request, don't fade the icon of the appMenuButton and put it on the side instead of overlaping with the text. https://bugzilla.gnome.org/show_bug.cgi?id=744680 --- data/theme/_common.scss | 11 ----- data/theme/gnome-shell.css | 4 -- js/ui/panel.js | 99 +++----------------------------------- 3 files changed, 7 insertions(+), 107 deletions(-) diff --git a/data/theme/_common.scss b/data/theme/_common.scss index c88b5c7c0..43bd225d5 100644 --- a/data/theme/_common.scss +++ b/data/theme/_common.scss @@ -283,17 +283,6 @@ StScrollBar { color: #ccc; transition-duration: 100ms; - #appMenuIcon { - app-icon-bottom-clip: 1px; - - .panel-button:active &, - .panel-button:overview &, - .panel-button:focus &, - .panel-button:checked & { - app-icon-bottom-clip: 2px; - } - - } &:hover { color: lighten($fg_color, 10%); text-shadow: black 0 2px 2px; diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index dc25e8429..14b2e4c4e 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -1215,10 +1215,6 @@ StScrollBar { font-weight: bold; color: #ccc; transition-duration: 100ms; } - #panel .panel-button #appMenuIcon { - app-icon-bottom-clip: 1px; } - .panel-button:active #panel .panel-button #appMenuIcon, .panel-button:overview #panel .panel-button #appMenuIcon, .panel-button:focus #panel .panel-button #appMenuIcon, .panel-button:checked #panel .panel-button #appMenuIcon { - app-icon-bottom-clip: 2px; } #panel .panel-button:hover { color: white; text-shadow: black 0 2px 2px; } diff --git a/js/ui/panel.js b/js/ui/panel.js index 87930aa64..13b091a65 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -26,6 +26,7 @@ const Main = imports.ui.main; const Tweener = imports.ui.tweener; const PANEL_ICON_SIZE = 24; +const APP_MENU_ICON_MARGIN = 2; const BUTTON_DND_ACTIVATION_TIMEOUT = 250; @@ -190,33 +191,21 @@ const AppMenuButton = new Lang.Class({ this.actor.bind_property("reactive", this.actor, "can-focus", 0); this.actor.reactive = false; - this._container = new Shell.GenericContainer(); + this._container = new St.BoxLayout({ style_class: 'panel-status-menu-box' }); bin.set_child(this._container); - this._container.connect('get-preferred-width', Lang.bind(this, this._getContentPreferredWidth)); - this._container.connect('get-preferred-height', Lang.bind(this, this._getContentPreferredHeight)); - this._container.connect('allocate', Lang.bind(this, this._contentAllocate)); let textureCache = St.TextureCache.get_default(); textureCache.connect('icon-theme-changed', Lang.bind(this, this._onIconThemeChanged)); - this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' }); - this._iconBox.connect('style-changed', - Lang.bind(this, this._onIconBoxStyleChanged)); - this._iconBox.connect('notify::allocation', - Lang.bind(this, this._updateIconBoxClip)); + this._iconBox = new St.Bin(); this._container.add_actor(this._iconBox); - this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' }); - this._container.add_actor(this._hbox); - this._label = new TextShadower(); this._label.actor.y_align = Clutter.ActorAlign.CENTER; - this._hbox.add_actor(this._label.actor); + this._container.add_actor(this._label.actor); this._arrow = PopupMenu.arrowIcon(St.Side.BOTTOM); - this._hbox.add_actor(this._arrow); - - this._iconBottomClip = 0; + this._container.add_actor(this._arrow); this._visible = !Main.overview.visible; if (!this._visible) @@ -278,21 +267,15 @@ const AppMenuButton = new Lang.Class({ return; this._spinnerIcon = icon; this._spinner = new Animation.AnimatedIcon(this._spinnerIcon, PANEL_ICON_SIZE); - this._hbox.add_actor(this._spinner.actor); + this._container.add_actor(this._spinner.actor); this._spinner.actor.hide(); }, - _onIconBoxStyleChanged: function() { - let node = this._iconBox.get_theme_node(); - this._iconBottomClip = node.get_length('app-icon-bottom-clip'); - this._updateIconBoxClip(); - }, - _syncIcon: function() { if (!this._targetApp) return; - let icon = this._targetApp.get_faded_icon(2 * PANEL_ICON_SIZE, this._iconBox.text_direction); + let icon = this._targetApp.create_icon_texture(PANEL_ICON_SIZE - APP_MENU_ICON_MARGIN); this._iconBox.set_child(icon); }, @@ -303,16 +286,6 @@ const AppMenuButton = new Lang.Class({ this._syncIcon(); }, - _updateIconBoxClip: function() { - let allocation = this._iconBox.allocation; - if (this._iconBottomClip > 0) - this._iconBox.set_clip(0, 0, - allocation.x2 - allocation.x1, - allocation.y2 - allocation.y1 - this._iconBottomClip); - else - this._iconBox.remove_clip(); - }, - stopAnimation: function() { if (this._stop) return; @@ -345,64 +318,6 @@ const AppMenuButton = new Lang.Class({ this._spinner.actor.show(); }, - _getContentPreferredWidth: function(actor, forHeight, alloc) { - let [minSize, naturalSize] = this._iconBox.get_preferred_width(forHeight); - alloc.min_size = minSize; - alloc.natural_size = naturalSize; - [minSize, naturalSize] = this._hbox.get_preferred_width(forHeight); - alloc.min_size = alloc.min_size + Math.max(0, minSize - Math.floor(alloc.min_size / 2)); - alloc.natural_size = alloc.natural_size + Math.max(0, naturalSize - Math.floor(alloc.natural_size / 2)); - }, - - _getContentPreferredHeight: function(actor, forWidth, alloc) { - let [minSize, naturalSize] = this._iconBox.get_preferred_height(forWidth); - alloc.min_size = minSize; - alloc.natural_size = naturalSize; - [minSize, naturalSize] = this._hbox.get_preferred_height(forWidth); - if (minSize > alloc.min_size) - alloc.min_size = minSize; - if (naturalSize > alloc.natural_size) - alloc.natural_size = naturalSize; - }, - - _contentAllocate: function(actor, box, flags) { - let allocWidth = box.x2 - box.x1; - let allocHeight = box.y2 - box.y1; - let childBox = new Clutter.ActorBox(); - - let [minWidth, minHeight, naturalWidth, naturalHeight] = this._iconBox.get_preferred_size(); - - let direction = this.actor.get_text_direction(); - - let yPadding = Math.floor(Math.max(0, allocHeight - naturalHeight) / 2); - childBox.y1 = yPadding; - childBox.y2 = childBox.y1 + Math.min(naturalHeight, allocHeight); - if (direction == Clutter.TextDirection.LTR) { - childBox.x1 = 0; - childBox.x2 = childBox.x1 + Math.min(naturalWidth, allocWidth); - } else { - childBox.x1 = Math.max(0, allocWidth - naturalWidth); - childBox.x2 = allocWidth; - } - this._iconBox.allocate(childBox, flags); - - let iconWidth = childBox.x2 - childBox.x1; - - [minWidth, naturalWidth] = this._hbox.get_preferred_width(-1); - - childBox.y1 = 0; - childBox.y2 = allocHeight; - - if (direction == Clutter.TextDirection.LTR) { - childBox.x1 = Math.floor(iconWidth / 2); - childBox.x2 = Math.min(childBox.x1 + naturalWidth, allocWidth); - } else { - childBox.x2 = allocWidth - Math.floor(iconWidth / 2); - childBox.x1 = Math.max(0, childBox.x2 - naturalWidth); - } - this._hbox.allocate(childBox, flags); - }, - _onAppStateChanged: function(appSys, app) { let state = app.state; if (state != Shell.AppState.STARTING) {