[gnome-shell/modekill: 4/10] dash: Refactor favRemoveTarget to showAppsIcon

[Florian MÃllner <fmuellner src gnome org>]

commit 63e628e96dd195735f191e2f37e46c5107adc6c2
Author: Joost Verdoorn <jpverdoorn gmail com>
Date:   Tue Aug 14 16:34:14 2012 +0200

    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 |   47 +++++++++++++++++++++++++++++++------------
 js/ui/dash.js              |   42 +++++++++++++++++++++-----------------
 2 files changed, 57 insertions(+), 32 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index cc568fb..59ca5c4 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -50,7 +50,7 @@ stage {
 .switcher-list, 
 .source-title,
 .app-well-app > .overview-icon,
-.remove-favorite > .overview-icon,
+.show-apps > .overview-icon,
 .search-result-content > .overview-icon {
     font-size: 9pt;
     font-weight: bold;
@@ -804,21 +804,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;
@@ -834,15 +825,45 @@ 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,
+.contact:selected,
 .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 b672cd5..edcaa46 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 Apps"),
                                            { 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;