From 9925264410914a9f5df9f7e3ae8c5b74b416c407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Thu, 10 Feb 2011 22:11:48 +0100 Subject: [PATCH] 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 | 39 +++++++++++-------- js/ui/viewSelector.js | 45 +++++++++++++++------ 5 files changed, 56 insertions(+), 179 deletions(-) delete mode 100644 data/close-black.svg delete mode 100644 data/magnifier.svg diff --git a/data/Makefile.am b/data/Makefile.am index 359c729dc..b5f902b74 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/close-black.svg b/data/close-black.svg deleted file mode 100644 index c37074527..000000000 --- a/data/close-black.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - -image/svg+xml - - diff --git a/data/magnifier.svg b/data/magnifier.svg deleted file mode 100644 index 31eff887a..000000000 --- a/data/magnifier.svg +++ /dev/null @@ -1,80 +0,0 @@ - - - -image/svg+xml - - - - - - - \ No newline at end of file diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 56befaa9d..7b8a699d7 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; - 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; + transition-duration: 300; +} + +#searchEntry:focus { + color: rgb(64, 64, 64); + font-weight: bold; + transition-duration: 0; +} + +.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 be031b541..33122cc5b 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);