From 2c5d825c8769c04b1c150771978427b568a31dca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Thu, 14 Oct 2010 14:27:28 +0200 Subject: [PATCH] search-display: Change the default display to use iconGrid Current mockups display all search results as icons as used by application results, so change the default result display to use iconGrid/BaseIcon. Remove the custom application results display, as it is no longer needed. https://bugzilla.gnome.org/show_bug.cgi?id=634948 --- data/theme/gnome-shell.css | 18 +++------ js/ui/appDisplay.js | 78 ++----------------------------------- js/ui/search.js | 2 +- js/ui/searchDisplay.js | 80 +++++++++++++++++++++++++------------- 4 files changed, 64 insertions(+), 114 deletions(-) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 5e2b00085..785b290dc 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -433,15 +433,6 @@ StTooltip StLabel { spacing: 4px; } -.search-result-content { - padding: 4px; -} - -.search-result-content:selected { - border-radius: 4px; - background: rgba(255,255,255,0.33); -} - .results-container { spacing: 4px; } @@ -511,7 +502,8 @@ StTooltip StLabel { padding: 6px 12px; } -.app-well-app > .overview-icon { +.app-well-app > .overview-icon, +.search-result-content > .overview-icon { border-radius: 4px; padding: 4px; font-size: 10px; @@ -525,11 +517,13 @@ StTooltip StLabel { background-image: url("running-indicator.svg"); } -.app-well-app.selected > .overview-icon { +.app-well-app:selected > .overview-icon, +.search-result-content:selected > .overview-icon { background: rgba(255,255,255,0.33); } -.app-well-app:hover > .overview-icon { +.app-well-app:hover > .overview-icon, +.search-result-content:hover > .overview-icon { background: rgba(255,255,255,0.33); text-shadow: black 0px 2px 2px; transition-duration: 100; diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 632f89c8e..09c7c8827 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -21,8 +21,6 @@ const Tweener = imports.ui.tweener; const Workspace = imports.ui.workspace; const Params = imports.misc.params; -const WELL_MAX_COLUMNS = 16; -const WELL_MAX_SEARCH_ROWS = 1; const MENU_POPUP_TIMEOUT = 600; function AlphabeticalView() { @@ -171,68 +169,8 @@ AllAppDisplay.prototype = { this._appView.refresh(apps); } }; - Signals.addSignalMethods(AllAppDisplay.prototype); -function AppSearchResultDisplay(provider) { - this._init(provider); -} - -AppSearchResultDisplay.prototype = { - __proto__: Search.SearchResultDisplay.prototype, - - _init: function (provider) { - Search.SearchResultDisplay.prototype._init.call(this, provider); - this._grid = new IconGrid.IconGrid({ rowLimit: WELL_MAX_SEARCH_ROWS }); - this.actor = new St.Bin({ name: 'dashAppSearchResults', - x_align: St.Align.START }); - this.actor.set_child(this._grid.actor); - }, - - renderResults: function(results, terms) { - let appSys = Shell.AppSystem.get_default(); - let maxItems = WELL_MAX_SEARCH_ROWS * WELL_MAX_COLUMNS; - for (let i = 0; i < results.length && i < maxItems; i++) { - let result = results[i]; - let app = appSys.get_app(result); - let display = new AppWellIcon(app); - this._grid.addItem(display.actor); - } - }, - - clear: function () { - this._grid.removeAll(); - this.selectionIndex = -1; - }, - - getVisibleResultCount: function() { - return this._grid.visibleItemsCount(); - }, - - selectIndex: function (index) { - let nVisible = this.getVisibleResultCount(); - if (this.selectionIndex >= 0) { - let prevActor = this._grid.getItemAtIndex(this.selectionIndex); - prevActor._delegate.setSelected(false); - } - this.selectionIndex = -1; - if (index >= nVisible) - return false; - else if (index < 0) - return false; - let targetActor = this._grid.getItemAtIndex(index); - targetActor._delegate.setSelected(true); - this.selectionIndex = index; - return true; - }, - - activateSelected: function() { - if (this.selectionIndex < 0) - return; - let targetActor = this._grid.getItemAtIndex(this.selectionIndex); - this.provider.activateResult(targetActor._delegate.app.get_id()); - } -}; function BaseAppSearchProvider() { this._init(); @@ -285,12 +223,10 @@ AppSearchProvider.prototype = { return this._appSys.subsearch(false, previousResults, terms); }, - createResultContainerActor: function () { - return new AppSearchResultDisplay(this); - }, - createResultActor: function (resultMeta, terms) { - return new AppIcon(resultMeta.id); + let app = this._appSys.get_app(resultMeta['id']); + let icon = new AppWellIcon(app); + return icon.actor; }, expandSearch: function(terms) { @@ -489,14 +425,6 @@ AppWellIcon.prototype = { } }, - setSelected: function (isSelected) { - this._selected = isSelected; - if (this._selected) - this.actor.add_style_class_name('selected'); - else - this.actor.remove_style_class_name('selected'); - }, - _onMenuPoppedUp: function() { if (this._getRunning()) { Main.overview.getWorkspacesForWindow(null).setApplicationWindowSelection(this.app.get_id()); diff --git a/js/ui/search.js b/js/ui/search.js index 33ecce8a8..adc561198 100644 --- a/js/ui/search.js +++ b/js/ui/search.js @@ -2,7 +2,7 @@ const Signals = imports.signals; -const RESULT_ICON_SIZE = 24; +const RESULT_ICON_SIZE = 48; // Not currently referenced by the search API, but // this enumeration can be useful for provider diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js index 10d1739cc..3f094546f 100644 --- a/js/ui/searchDisplay.js +++ b/js/ui/searchDisplay.js @@ -4,14 +4,16 @@ const Clutter = imports.gi.Clutter; const Lang = imports.lang; const Gettext = imports.gettext.domain('gnome-shell'); const _ = Gettext.gettext; +const Gtk = imports.gi.Gtk; +const St = imports.gi.St; const DND = imports.ui.dnd; +const IconGrid = imports.ui.iconGrid; const Main = imports.ui.main; const Search = imports.ui.search; +const MAX_SEARCH_RESULTS_ROWS = 2; -// 25 search results (per result type) should be enough for everyone -const MAX_RENDERED_SEARCH_RESULTS = 25; function SearchResult(provider, metaInfo, terms) { this._init(provider, metaInfo, terms); @@ -24,17 +26,19 @@ SearchResult.prototype = { this.actor = new St.Clickable({ style_class: 'search-result', reactive: true, x_align: St.Align.START, - x_fill: true, y_fill: true }); this.actor._delegate = this; let content = provider.createResultActor(metaInfo, terms); if (content == null) { - content = new St.BoxLayout({ style_class: 'search-result-content' }); - let title = new St.Label({ text: this.metaInfo['name'] }); - let icon = this.metaInfo['icon']; - content.add(icon, { y_fill: false }); - content.add(title, { expand: true, y_fill: false }); + content = new St.Bin({ style_class: 'search-result-content', + reactive: true, + track_hover: true }); + let icon = new IconGrid.BaseIcon(this.metaInfo['name'], + { createIcon: Lang.bind(this, function(size) { + return this.metaInfo['icon']; + })}); + content.set_child(icon.actor); } this._content = content; this.actor.set_child(content); @@ -84,36 +88,45 @@ SearchResult.prototype = { } }; -function OverflowSearchResults(provider) { + +function GridSearchResults(provider) { this._init(provider); } -OverflowSearchResults.prototype = { +GridSearchResults.prototype = { __proto__: Search.SearchResultDisplay.prototype, _init: function(provider) { Search.SearchResultDisplay.prototype._init.call(this, provider); - this.actor = new St.OverflowBox({ style_class: 'search-section-list-results' }); + this._grid = new IconGrid.IconGrid({ rowLimit: MAX_SEARCH_RESULTS_ROWS, + xAlign: St.Align.START }); + this.actor = new St.Bin({ x_align: St.Align.START }); + this.actor.set_child(this._grid.actor); + this.selectionIndex = -1; }, getVisibleResultCount: function() { - return this.actor.get_n_visible(); + return this._grid.visibleItemsCount(); }, renderResults: function(results, terms) { - for (let i = 0; i < results.length && i < MAX_RENDERED_SEARCH_RESULTS; i++) { + for (let i = 0; i < results.length; i++) { let result = results[i]; let meta = this.provider.getResultMeta(result); let display = new SearchResult(this.provider, meta, terms); - this.actor.add_actor(display.actor); + this._grid.addItem(display.actor); } }, - selectIndex: function(index) { - let nVisible = this.actor.get_n_visible(); - let children = this.actor.get_children(); + clear: function () { + this._grid.removeAll(); + this.selectionIndex = -1; + }, + + selectIndex: function (index) { + let nVisible = this.getVisibleResultCount(); if (this.selectionIndex >= 0) { - let prevActor = children[this.selectionIndex]; + let prevActor = this._grid.getItemAtIndex(this.selectionIndex); prevActor._delegate.setSelected(false); } this.selectionIndex = -1; @@ -121,19 +134,21 @@ OverflowSearchResults.prototype = { return false; else if (index < 0) return false; - let targetActor = children[index]; + let targetActor = this._grid.getItemAtIndex(index); targetActor._delegate.setSelected(true); this.selectionIndex = index; return true; }, activateSelected: function() { - let children = this.actor.get_children(); - let targetActor = children[this.selectionIndex]; + if (this.selectionIndex < 0) + return; + let targetActor = this._grid.getItemAtIndex(this.selectionIndex); targetActor._delegate.activate(); } }; + function SearchResults(searchSystem) { this._init(searchSystem); } @@ -142,10 +157,23 @@ SearchResults.prototype = { _init: function(searchSystem) { this._searchSystem = searchSystem; - this.actor = new St.BoxLayout({ name: 'searchResults', - vertical: true }); + this.actor = new St.Bin({ name: 'searchResults', + y_align: St.Align.START, + x_align: St.Align.START, + x_fill: true }); + this._content = new St.BoxLayout({ name: 'searchResultsContent', + vertical: true }); + + let scrollView = new St.ScrollView({ x_fill: true, + y_fill: false, + vshadows: true }); + scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC); + scrollView.add_actor(this._content); + + this.actor.set_child(scrollView); + this._statusText = new St.Label({ style_class: 'search-statustext' }); - this.actor.add(this._statusText); + this._content.add(this._statusText); this._selectedProvider = -1; this._providers = this._searchSystem.getProviders(); this._providerMeta = []; @@ -175,14 +203,14 @@ SearchResults.prototype = { providerBox.add(resultDisplayBin, { expand: true }); let resultDisplay = provider.createResultContainerActor(); if (resultDisplay == null) { - resultDisplay = new OverflowSearchResults(provider); + resultDisplay = new GridSearchResults(provider); } resultDisplayBin.set_child(resultDisplay.actor); this._providerMeta.push({ actor: providerBox, resultDisplay: resultDisplay, count: count }); - this.actor.add(providerBox); + this._content.add(providerBox); }, _clearDisplay: function() {