diff --git a/data/Makefile.am b/data/Makefile.am index eef11bd01..f0ca34ec1 100644 --- a/data/Makefile.am +++ b/data/Makefile.am @@ -15,7 +15,6 @@ gnome-shell.desktop: gnome-shell.desktop.in imagesdir = $(pkgdatadir)/images dist_images_DATA = \ add-workspace.svg \ - app-well-glow.png \ close-black.svg \ magnifier.svg \ remove-workspace.svg diff --git a/data/app-well-glow.png b/data/app-well-glow.png deleted file mode 100644 index 2a8984f03..000000000 Binary files a/data/app-well-glow.png and /dev/null differ diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index b8c388186..71a5084a2 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -296,21 +296,27 @@ StTooltip { /* Apps */ #dashAppWell { - spacing: 2px; - -shell-grid-item-size: 74px; + spacing: 6px; + -shell-grid-item-size: 70px; } .app-well-app { border: 1px solid #080808; - border-radius: 2px; + border-radius: 4px; padding: 2px; - width: 74px; - height: 74px; + width: 70px; + height: 70px; font-size: 10px; } +.app-well-app.running { + background-gradient-direction: vertical; + background-gradient-start: #3c3c3c; + background-gradient-end: #000000; +} + .app-well-app:hover { - border: 1px solid #202020; + border: 1px solid #666666; } .app-well-app:active { @@ -318,11 +324,6 @@ StTooltip { border: 1px solid #5f5f5f; } -.app-well-app-glow { - -shell-glow-extend-vertical: 3px; - -shell-glow-shrink-horizontal: 3px; -} - .app-well-menu { border: 1px solid #5f5f5f; border-radius: 4px; diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index fbe096a1b..26e43c1f8 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -299,15 +299,10 @@ AppIcon.prototype = { _init : function(app) { this.app = app; - this._glowExtendVertical = 0; - this._glowShrinkHorizontal = 0; - this.actor = new St.Bin({ style_class: 'app-icon', x_fill: true, y_fill: true }); this.actor._delegate = this; - this.actor.connect('destroy', Lang.bind(this, this._onDestroy)); - this._workId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._rerenderGlow)); let box = new St.BoxLayout({ vertical: true }); this.actor.set_child(box); @@ -316,95 +311,9 @@ AppIcon.prototype = { box.add(this.icon, { expand: true, x_fill: false, y_fill: false }); - let nameBox = new Shell.GenericContainer(); - nameBox.connect('get-preferred-width', Lang.bind(this, this._nameBoxGetPreferredWidth)); - nameBox.connect('get-preferred-height', Lang.bind(this, this._nameBoxGetPreferredHeight)); - nameBox.connect('allocate', Lang.bind(this, this._nameBoxAllocate)); - this._nameBox = nameBox; - this._name = new St.Label({ text: this.app.get_name() }); this._name.clutter_text.line_alignment = Pango.Alignment.CENTER; - nameBox.add_actor(this._name); - this._glowBox = new St.BoxLayout({ style_class: 'app-well-app-glow' }); - this._glowBox.connect('style-changed', Lang.bind(this, this._onStyleChanged)); - this._nameBox.add_actor(this._glowBox); - this._glowBox.lower(this._name); - this._appWindowChangedId = this.app.connect('windows-changed', Lang.bind(this, this._queueRerenderGlow)); - - box.add(nameBox); - }, - - _nameBoxGetPreferredWidth: function (nameBox, forHeight, alloc) { - let [min, natural] = this._name.get_preferred_width(forHeight); - alloc.min_size = min; - alloc.natural_size = natural; - }, - - _nameBoxGetPreferredHeight: function (nameBox, forWidth, alloc) { - let [min, natural] = this._name.get_preferred_height(forWidth); - alloc.min_size = min + this._glowExtendVertical * 2; - alloc.natural_size = natural + this._glowExtendVertical * 2; - }, - - _nameBoxAllocate: function (nameBox, box, flags) { - let childBox = new Clutter.ActorBox(); - let [minWidth, naturalWidth] = this._name.get_preferred_width(-1); - let [minHeight, naturalHeight] = this._name.get_preferred_height(-1); - let availWidth = box.x2 - box.x1; - let availHeight = box.y2 - box.y1; - let targetWidth = availWidth; - let xPadding = 0; - if (naturalWidth < availWidth) { - xPadding = Math.floor((availWidth - naturalWidth) / 2); - } - childBox.x1 = xPadding; - childBox.x2 = availWidth - xPadding; - childBox.y1 = this._glowExtendVertical; - childBox.y2 = availHeight - this._glowExtendVertical; - this._name.allocate(childBox, flags); - - // Now the glow - let glowPaddingHoriz = Math.max(0, xPadding - this._glowShrinkHorizontal); - glowPaddingHoriz = Math.max(this._glowShrinkHorizontal, glowPaddingHoriz); - childBox.x1 = glowPaddingHoriz; - childBox.x2 = availWidth - glowPaddingHoriz; - childBox.y1 = 0; - childBox.y2 = availHeight; - this._glowBox.allocate(childBox, flags); - }, - - _onDestroy: function() { - if (this._appWindowChangedId > 0) - this.app.disconnect(this._appWindowChangedId); - }, - - _queueRerenderGlow: function() { - Main.queueDeferredWork(this._workId); - }, - - _onStyleChanged: function() { - let themeNode = this._glowBox.get_theme_node(); - - let success, len; - [success, len] = themeNode.get_length('-shell-glow-extend-vertical', false); - if (success) - this._glowExtendVertical = len; - [success, len] = themeNode.get_length('-shell-glow-shrink-horizontal', false); - if (success) - this._glowShrinkHorizontal = len; - this.actor.queue_relayout(); - }, - - _rerenderGlow: function() { - this._glowBox.destroy_children(); - let glowPath = GLib.filename_to_uri(global.imagedir + 'app-well-glow.png', ''); - let windows = this.app.get_windows(); - for (let i = 0; i < windows.length && i < 3; i++) { - let glow = Shell.TextureCache.get_default().load_uri_sync(Shell.TextureCachePolicy.FOREVER, - glowPath, -1, -1); - glow.keep_aspect_ratio = false; - this._glowBox.add(glow); - } + box.add_actor(this._name); } } @@ -415,6 +324,7 @@ function AppWellIcon(app) { AppWellIcon.prototype = { _init : function(app) { this.app = app; + this._running = false; this.actor = new St.Clickable({ style_class: 'app-well-app', reactive: true, x_fill: true, @@ -433,6 +343,33 @@ AppWellIcon.prototype = { this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPress)); this.actor.connect('notify::hover', Lang.bind(this, this._onHoverChange)); + this.actor.connect('show', Lang.bind(this, this._onShow)); + this.actor.connect('hide', Lang.bind(this, this._onHideDestroy)); + this.actor.connect('destroy', Lang.bind(this, this._onHideDestroy)); + + this._appWindowChangedId = 0; + }, + + _onShow: function() { + this._appWindowChangedId = this.app.connect('windows-changed', + Lang.bind(this, + this._updateStyleClass)); + this._updateStyleClass(); + }, + + _onHideDestroy: function() { + if (this._appWindowChangedId > 0) + this.app.disconnect(this._appWindowChangedId); + }, + + _updateStyleClass: function() { + let windows = this.app.get_windows(); + let running = windows.length > 0; + if (running == this._running) + return; + this._running = running; + this.actor.style_class = this._running ? "app-well-app running" + : "app-well-app"; }, _onButtonPress: function(actor, event) {