From faa0ddafff7bc30ab16d9a6149ead909554526d4 Mon Sep 17 00:00:00 2001 From: Rares Visalom Date: Thu, 13 Jul 2017 02:51:59 +0300 Subject: [PATCH] search: Refactor providerIcon into providerInfo In order to match the current mockups, the providerIcon class needed to include both the name of the provider and the label that informs the user about how many more search results are available for that specific provider. The latter replaces the plus sign icon that has been used so far. https://bugzilla.gnome.org/show_bug.cgi?id=749957 --- data/gnome-shell-theme.gresource.xml | 1 - data/theme/gnome-shell-high-contrast.css | 13 ++- data/theme/gnome-shell-sass | 2 +- data/theme/gnome-shell.css | 13 ++- data/theme/more-results.svg | 114 ----------------------- js/ui/search.js | 58 +++++++----- 6 files changed, 52 insertions(+), 149 deletions(-) delete mode 100644 data/theme/more-results.svg diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 76aeaa579..25769a477 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -18,7 +18,6 @@ gnome-shell.css gnome-shell-high-contrast.css logged-in-indicator.svg - more-results.svg no-events.svg no-notifications.svg noise-texture.png diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css index d639e3094..fc16943c5 100644 --- a/data/theme/gnome-shell-high-contrast.css +++ b/data/theme/gnome-shell-high-contrast.css @@ -1189,14 +1189,17 @@ StScrollBar { .list-search-result-description { color: #cacac4; } +.list-search-provider-details { + width: 150px; + color: #e2e2df; + margin-top: 0.24em; } + +.list-search-provider-content { + spacing: 20px; } + .search-provider-icon { padding: 15px; } -.search-provider-icon-more { - width: 16px; - height: 16px; - background-image: url("resource:///org/gnome/shell/theme/more-results.svg"); } - /* DASHBOARD */ #dash { font-size: 9pt; diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass index 6a5935538..07f43e042 160000 --- a/data/theme/gnome-shell-sass +++ b/data/theme/gnome-shell-sass @@ -1 +1 @@ -Subproject commit 6a5935538568835462fa853f746620967d047bcf +Subproject commit 07f43e04251e0daedf2828a5b15c007e8e57fb05 diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 6d5559a2d..e1132c79e 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -1189,14 +1189,17 @@ StScrollBar { .list-search-result-description { color: #cacac4; } +.list-search-provider-details { + width: 150px; + color: #e2e2df; + margin-top: 0.24em; } + +.list-search-provider-content { + spacing: 20px; } + .search-provider-icon { padding: 15px; } -.search-provider-icon-more { - width: 16px; - height: 16px; - background-image: url("resource:///org/gnome/shell/theme/more-results.svg"); } - /* DASHBOARD */ #dash { font-size: 9pt; diff --git a/data/theme/more-results.svg b/data/theme/more-results.svg deleted file mode 100644 index d2fe5f253..000000000 --- a/data/theme/more-results.svg +++ /dev/null @@ -1,114 +0,0 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - diff --git a/js/ui/search.js b/js/ui/search.js index 0dd4870ff..4f9729ea8 100644 --- a/js/ui/search.js +++ b/js/ui/search.js @@ -102,6 +102,7 @@ const ListSearchResult = new Lang.Class({ y_fill: false, x_align: St.Align.START, y_align: St.Align.MIDDLE }); + this.actor.label_actor = title; if (this.metaInfo['description']) { @@ -189,7 +190,7 @@ const SearchResultsBase = new Lang.Class({ Main.overview.toggle(); }, - _setMoreIconVisible: function(visible) { + _setMoreCount: function(count) { }, _ensureResultActors: function(results, callback) { @@ -240,7 +241,7 @@ const SearchResultsBase = new Lang.Class({ } else { let maxResults = this._getMaxDisplayedResults(); let results = this.provider.filterResults(providerResults, maxResults); - let hasMoreResults = results.length < providerResults.length; + let moreCount = Math.max(providerResults.length - results.length, 0); this._ensureResultActors(results, Lang.bind(this, function(successful) { if (!successful) { @@ -257,7 +258,7 @@ const SearchResultsBase = new Lang.Class({ results.forEach(Lang.bind(this, function(resultId) { this._addItem(this._resultDisplays[resultId]); })); - this._setMoreIconVisible(hasMoreResults && this.provider.canLaunchSearch); + this._setMoreCount(this.provider.canLaunchSearch ? moreCount : 0); this.actor.show(); callback(); })); @@ -273,16 +274,16 @@ const ListSearchResults = new Lang.Class({ this.parent(provider); this._container = new St.BoxLayout({ style_class: 'search-section-content' }); - this.providerIcon = new ProviderIcon(provider); - this.providerIcon.connect('key-focus-in', Lang.bind(this, this._keyFocusIn)); - this.providerIcon.connect('clicked', Lang.bind(this, + this.providerInfo = new ProviderInfo(provider); + this.providerInfo.connect('key-focus-in', Lang.bind(this, this._keyFocusIn)); + this.providerInfo.connect('clicked', Lang.bind(this, function() { - this.providerIcon.animateLaunch(); + this.providerInfo.animateLaunch(); provider.launchSearch(this._terms); Main.overview.toggle(); })); - this._container.add(this.providerIcon, { x_fill: false, + this._container.add(this.providerInfo, { x_fill: false, y_fill: false, x_align: St.Align.START, y_align: St.Align.START }); @@ -294,8 +295,8 @@ const ListSearchResults = new Lang.Class({ this._resultDisplayBin.set_child(this._container); }, - _setMoreIconVisible: function(visible) { - this.providerIcon.moreIcon.visible = visible; + _setMoreCount: function(count) { + this.providerInfo.setMoreCount(count); }, _getMaxDisplayedResults: function() { @@ -679,8 +680,8 @@ const SearchResults = new Lang.Class({ } }); -const ProviderIcon = new Lang.Class({ - Name: 'ProviderIcon', +const ProviderInfo = new Lang.Class({ + Name: 'ProviderInfo', Extends: St.Button, PROVIDER_ICON_SIZE: 48, @@ -693,22 +694,28 @@ const ProviderIcon = new Lang.Class({ accessible_name: provider.appInfo.get_name(), track_hover: true }); - this._content = new St.Widget({ layout_manager: new Clutter.BinLayout() }); + this._content = new St.BoxLayout({ vertical: false, + style_class: 'list-search-provider-content' }); this.set_child(this._content); - let rtl = (this.get_text_direction() == Clutter.TextDirection.RTL); - - this.moreIcon = new St.Widget({ style_class: 'search-provider-icon-more', - visible: false, - x_align: rtl ? Clutter.ActorAlign.START : Clutter.ActorAlign.END, - y_align: Clutter.ActorAlign.END, - x_expand: true, - y_expand: true }); - let icon = new St.Icon({ icon_size: this.PROVIDER_ICON_SIZE, gicon: provider.appInfo.get_icon() }); + + let detailsBox = new St.BoxLayout({ style_class: 'list-search-provider-details', + vertical: true, + x_expand: true }); + + let nameLabel = new St.Label({ text: provider.appInfo.get_name(), + x_align: Clutter.ActorAlign.START }); + + this._moreLabel = new St.Label({ x_align: Clutter.ActorAlign.START }); + + detailsBox.add_actor(nameLabel); + detailsBox.add_actor(this._moreLabel); + + this._content.add_actor(icon); - this._content.add_actor(this.moreIcon); + this._content.add_actor(detailsBox); }, animateLaunch: function() { @@ -716,5 +723,10 @@ const ProviderIcon = new Lang.Class({ let app = appSys.lookup_app(this.provider.appInfo.get_id()); if (app.state == Shell.AppState.STOPPED) IconGrid.zoomOutActor(this._content); + }, + + setMoreCount: function(count) { + this._moreLabel.text = _("%d more").format(count); + this._moreLabel.visible = count > 0; } });