[gnome-shell] search-entry: Update style

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

commit 9925264410914a9f5df9f7e3ae8c5b74b416c407
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Feb 10 22:11:48 2011 +0100

    search-entry: Update style
    
    Update the style of the search entry to match the latest mockups[0].
    
     - use a (non-reactive) loupe icon when no search is active
     - use themed symbolic icons
     - make the entry rounder
     - tweak gradient colors
     - use an inset shadow
    
    [0] http://git.gnome.org/browse/gnome-shell-design/plain/mockups/static/searchbox.png
    
    https://bugzilla.gnome.org/show_bug.cgi?id=642335

 data/Makefile.am           |    5 ---
 data/close-black.svg       |   66 ------------------------------------
 data/magnifier.svg         |   80 --------------------------------------------
 data/theme/gnome-shell.css |   35 +++++++++++--------
 js/ui/viewSelector.js      |   45 ++++++++++++++++++------
 5 files changed, 54 insertions(+), 177 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 359c729..b5f902b 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -17,11 +17,6 @@ dist_searchproviders_DATA =				\
 	search_providers/google.xml				\
 	search_providers/wikipedia.xml
 
-imagesdir = $(pkgdatadir)/images
-dist_images_DATA =				\
-	close-black.svg				\
-	magnifier.svg
-
 themedir = $(pkgdatadir)/theme
 dist_theme_DATA =				\
 	theme/calendar-arrow-left.svg		\
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 56befaa..7b8a699 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -346,34 +346,41 @@ StTooltip StLabel {
 }
 
 #searchEntry {
-    padding: 4px 8px;
-    border-radius: 12px;
+    padding: 4px 12px;
+    border-radius: 17px;
     color: rgb(128, 128, 128);
-    border: 2px solid rgba(128, 128, 128, 0.4);
-    background-gradient-start: rgba(0, 0, 0, 0.2);
-    background-gradient-end: rgba(128, 128, 128, 0.2);
+    border: 2px solid rgba(245,245,245,0.2);
+    background-gradient-start: rgba(5,5,6,0.1);
+    background-gradient-end: rgba(254,254,254,0.1);
     background-gradient-direction: vertical;
     caret-color: rgb(128, 128, 128);
     caret-size: 1px;
     width: 250px;
     transition-duration: 300;
+    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
 }
 
-#searchEntry:focus {
-    border: 2px solid #ffffff;
-    background-gradient-start: rgba(0, 0, 0, 0.2);
-    background-gradient-end: #ffffff;
+#searchEntry:focus,
+#searchEntry:hover {
+    border: 2px solid rgb(136,138,133);
+    background-gradient-start: rgb(200,200,200);
+    background-gradient-end: white;
     background-gradient-direction: vertical;
+}
+
+#searchEntry:hover {
+    transition-duration: 300;
+}
+
+#searchEntry:focus {
     color: rgb(64, 64, 64);
     font-weight: bold;
-    box-shadow: 0px 0px 6px 2px rgba(255,255,255,0.9);
     transition-duration: 0;
 }
 
-#searchEntry:hover {
-    border: 2px solid #e8e8e8;
-    caret-color: #545454;
-    transition-duration: 500;
+.search-entry-icon {
+    icon-size: 1.4em;
+    color: #8d8f8a;
 }
 
 .view-tab-title {
diff --git a/js/ui/viewSelector.js b/js/ui/viewSelector.js
index be031b5..33122cc 100644
--- a/js/ui/viewSelector.js
+++ b/js/ui/viewSelector.js
@@ -31,18 +31,18 @@ SearchEntry.prototype = {
                                     track_hover: true });
         this.entry = this.actor.clutter_text;
 
-        this.actor.clutter_text.connect('text-changed', Lang.bind(this,
-            function() {
-                if (this.isActive())
-                    this.actor.set_secondary_icon_from_file(global.imagedir +
-                                                            'close-black.svg');
-                else
-                    this.actor.set_secondary_icon_from_file(null);
-            }));
-        this.actor.connect('secondary-icon-clicked', Lang.bind(this,
-            function() {
-                this.reset();
-            }));
+        this._inactiveIcon = new St.Icon({ style_class: 'search-entry-icon',
+                                           icon_name: 'edit-find',
+                                           icon_type: St.IconType.SYMBOLIC });
+        this._activeIcon = new St.Icon({ style_class: 'search-entry-icon',
+                                         icon_name: 'edit-clear',
+                                         icon_type: St.IconType.SYMBOLIC });
+        this.actor.set_secondary_icon(this._inactiveIcon);
+
+        this._iconClickedId = 0;
+
+        this.actor.clutter_text.connect('text-changed',
+                                        Lang.bind(this, this._onTextChanged));
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
         this.actor.connect('notify::mapped', Lang.bind(this, this._onMapped));
 
@@ -157,11 +157,32 @@ SearchEntry.prototype = {
         }
     },
 
+    _onTextChanged: function() {
+        if (this.isActive()) {
+            this.actor.set_secondary_icon(this._activeIcon);
+
+            if (this._iconClickedId == 0)
+            this._iconClickedId = this.actor.connect('secondary-icon-clicked',
+                Lang.bind(this, function() {
+                    this.reset();
+                }));
+        } else {
+            if (this._iconClickedId > 0)
+                this.actor.disconnect(this._iconClickedId);
+            this._iconClickedId = 0;
+
+            this.actor.set_secondary_icon(this._inactiveIcon);
+        }
+    },
+
     _onDestroy: function() {
         if (this._capturedEventId > 0) {
             global.stage.disconnect(this._capturedEventId);
             this._capturedEventId = 0;
         }
+
+        this._activeIcon = null;
+        this._inactiveIcon = null;
     }
 };
 Signals.addSignalMethods(SearchEntry.prototype);