From 27fbe4cd83d67245094d2e78815408ec60972afd Mon Sep 17 00:00:00 2001 From: Joost Verdoorn Date: Tue, 14 Aug 2012 16:34:14 +0200 Subject: [PATCH] dash: Refactor favRemoveTarget to showAppsIcon In the new designs, we no longer need favRemoveTarget. As it shares a lot of its functionality with the new showAppsIcon, we refactor and restyle it accordingly. https://bugzilla.gnome.org/show_bug.cgi?id=682109 --- data/theme/gnome-shell.css | 46 +++++++++++++++++++++++++++----------- js/ui/dash.js | 42 ++++++++++++++++++---------------- 2 files changed, 56 insertions(+), 32 deletions(-) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index e48280366..978e9a13e 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -49,7 +49,7 @@ stage { .window-caption, .switcher-list, .app-well-app > .overview-icon, -.remove-favorite > .overview-icon, +.show-apps > .overview-icon, .search-result-content > .overview-icon { font-size: 9pt; font-weight: bold; @@ -803,21 +803,12 @@ StButton.popup-menu-item:insensitive { outline: 1px solid #aaa; } -.dash-item-container > .app-well-app { +.dash-item-container > StButton { padding: 4px 8px; } -.remove-favorite-icon { - color: #a0a0a0; -} - -.remove-favorite-icon:hover { - color: white; - icon-shadow: black 0px 2px 2px; -} - .app-well-app > .overview-icon, -.remove-favorite > .overview-icon, +.show-apps > .overview-icon, .search-result-content > .overview-icon { border-radius: 4px; padding: 3px; @@ -833,15 +824,44 @@ StButton.popup-menu-item:insensitive { } .app-well-app:hover > .overview-icon, -.remove-favorite:hover > .overview-icon, +.show-apps:hover > .overview-icon, .search-result-content:hover > .overview-icon { background-color: rgba(255,255,255,0.1); text-shadow: black 0px 2px 2px; transition-duration: 100; + color:white; +} + +.show-apps { + padding: 4px 0; +} + +.show-apps-icon { + color: #a0a0a0; +} + +.show-apps:hover .show-apps-icon { + color: white; +} + +.show-apps:checked > .overview-icon { + background-gradient-start: rgba(255, 255, 255, .05); + background-gradient-end: rgba(255, 255, 255, .15); + background-gradient-direction: vertical; + border-radius: 4px; + box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 1); + transition-duration: 100; +} + +.show-apps:checked .show-apps-icon, +.show-apps:focus .show-apps-icon { + color: white; + transition-duration: 100; } .app-well-app:focus > .overview-icon, .search-result-content:focus > .overview-icon, +.show-apps:focus > .overview-icon, .app-well-app:selected > .overview-icon, .search-result-content:selected > .overview-icon { background-color: rgba(255,255,255,0.33); diff --git a/js/ui/dash.js b/js/ui/dash.js index b672cd559..e421e584c 100644 --- a/js/ui/dash.js +++ b/js/ui/dash.js @@ -226,34 +226,39 @@ const DashItemContainer = new Lang.Class({ } }); -const RemoveFavoriteIcon = new Lang.Class({ - Name: 'RemoveFavoriteIcon', +const ShowAppsIcon = new Lang.Class({ + Name: 'ShowAppsIcon', Extends: DashItemContainer, _init: function() { this.parent(); - this._iconBin = new St.Bin({ style_class: 'remove-favorite' }); + this._button = new St.Button({ style_class: 'show-apps', + track_hover: true, + can_focus: true, + toggle_mode: true }); this._iconActor = null; - this.icon = new IconGrid.BaseIcon(_("Remove"), + this.icon = new IconGrid.BaseIcon(_("Show Applications"), { setSizeManually: true, showLabel: false, createIcon: Lang.bind(this, this._createIcon) }); - this._iconBin.set_child(this.icon.actor); - this._iconBin._delegate = this; + this._button.add_actor(this.icon.actor); + this._button._delegate = this; - this.setChild(this._iconBin); + this.setChild(this._button); }, _createIcon: function(size) { - this._iconActor = new St.Icon({ icon_name: 'user-trash', - style_class: 'remove-favorite-icon', + this._iconActor = new St.Icon({ icon_name: 'view-grid-symbolic', + style_class: 'show-apps-icon', + track_hover: true, + icon_type: St.IconType.SYMBOLIC, icon_size: size }); return this._iconActor; }, setHover: function(hovered) { - this._iconBin.set_hover(hovered); + this._button.set_hover(hovered); if (this._iconActor) this._iconActor.set_hover(hovered); }, @@ -306,7 +311,6 @@ const Dash = new Lang.Class({ this._dragPlaceholder = null; this._dragPlaceholderPos = -1; this._animatingPlaceholdersCount = 0; - this._favRemoveTarget = null; this._showLabelTimeoutId = 0; this._resetHoverTimeoutId = 0; this._labelShowing = false; @@ -320,10 +324,10 @@ const Dash = new Lang.Class({ this._box._delegate = this; this._container.add(this._box); - this._favRemoveTarget = new RemoveFavoriteIcon(); - this._favRemoveTarget.icon.setIconSize(this.iconSize); + this._showAppsIcon = new ShowAppsIcon(); + this._showAppsIcon.icon.setIconSize(this.iconSize); - this._container.add(this._favRemoveTarget.actor); + this._container.add(this._showAppsIcon.actor); this.actor = new St.Bin({ child: this._container, y_align: St.Align.START }); @@ -397,13 +401,13 @@ const Dash = new Lang.Class({ let srcIsFavorite = (id in favorites); - let favRemoveHovered = - this._favRemoveTarget.actor.contains(dragEvent.targetActor); + let showAppsHovered = + this._showAppsIcon.actor.contains(dragEvent.targetActor); - if (!this._box.contains(dragEvent.targetActor) || favRemoveHovered) + if (!this._box.contains(dragEvent.targetActor) || showAppsHovered) this._clearDragPlaceholder(); - this._favRemoveTarget.setHover(favRemoveHovered); + this._showAppsIcon.setHover(showAppsHovered); return DND.DragMotionResult.CONTINUE; }, @@ -497,7 +501,7 @@ const Dash = new Lang.Class({ !actor._delegate.animatingOut; }); - iconChildren.push(this._favRemoveTarget.actor); + iconChildren.push(this._showAppsIcon.actor); if (this._maxHeight == -1) return;