[gnome-shell/wip/swarm: 28/30] Search: use AppIcon for grid results
- From: Carlos Soriano <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/swarm: 28/30] Search: use AppIcon for grid results
- Date: Wed, 25 Jun 2014 15:04:58 +0000 (UTC)
commit 448de21d5277a15d417c20030cff9795def354e7
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Wed Jun 25 13:19:52 2014 +0200
Search: use AppIcon for grid results
data/theme/gnome-shell.css | 14 ++----
js/ui/appDisplay.js | 86 ++++++++++++++++++++-----------------
js/ui/search.js | 102 +++++++++++++------------------------------
3 files changed, 81 insertions(+), 121 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c2d1f18..1bcae20 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -47,8 +47,7 @@ stage {
.window-caption,
.switcher-list,
.app-well-app > .overview-icon,
-.show-apps > .overview-icon,
-.grid-search-result .overview-icon {
+.show-apps > .overview-icon {
font-size: 9pt;
font-weight: bold;
}
@@ -1078,8 +1077,7 @@ StScrollBar StButton#vhandle:active {
background-image: url("more-results.svg");
}
-.app-well-app > .overview-icon.overview-icon-with-label,
-.grid-search-result .overview-icon.overview-icon-with-label {
+.app-well-app > .overview-icon.overview-icon-with-label {
/* since the label controls its own spacing, it is visually more
consistent to use different padding values for top and bottom */
padding: 10px 8px 5px 8px;
@@ -1089,8 +1087,7 @@ StScrollBar StButton#vhandle:active {
.app-well-app > .overview-icon,
.show-apps > .overview-icon,
.search-provider-icon,
-.list-search-result,
-.grid-search-result .overview-icon {
+.list-search-result {
border-radius: 4px;
padding: 6px;
border: 1px rgba(0,0,0,0);
@@ -1126,8 +1123,7 @@ StScrollBar StButton#vhandle:active {
.app-well-app:hover > .overview-icon,
.show-apps:hover > .overview-icon,
.search-provider-icon:hover,
-.list-search-result:hover,
-.grid-search-result:hover .overview-icon {
+.list-search-result:hover {
background-color: rgba(255,255,255,0.1);
text-shadow: black 0px 2px 2px;
transition-duration: 100ms;
@@ -1175,12 +1171,10 @@ StScrollBar StButton#vhandle:active {
}
.app-well-app:focus > .overview-icon,
-.grid-search-result:focus .overview-icon,
.show-apps:focus > .overview-icon,
.search-provider-icon:focus,
.list-search-result:focus,
.app-well-app:selected > .overview-icon,
-.grid-search-result:selected .overview-icon,
.search-provider-icon:selected,
.list-search-result:selected {
background-color: rgba(255,255,255,0.33);
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 567f124..b30739e 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -48,7 +48,7 @@ const INDICATORS_ANIMATION_MAX_TIME = 0.75;
// Since we will animate the page indicators only when aniamting with swarm too,
// make the time of the animation consistent with the swarm one which is divided
-// by two to make the out animation. Also, make sure we don't exceed swarm animation
+// by two to make the out animation. Also, make sure we don't exceed swarm animation
// total time.
const INDICATORS_BASE_TIME_OUT = 0.125;
const INDICATORS_ANIMATION_DELAY_OUT = 0.0625;
@@ -467,14 +467,14 @@ const AllView = new Lang.Class({
apps.forEach(Lang.bind(this, function(appId) {
let app = appSys.lookup_app(appId);
- let icon = new AppIcon(app);
+ let icon = new AppIcon(app, {}, { animateOnNewWindow: true });
this.addItem(icon);
}));
this.loadGrid();
this._refilterApps();
},
-
+
animate: function(animationDirection, onCompleteOut) {
let dashPosition = Main.overview._dash._showAppsIcon.get_transformed_position();
let dashSize = Main.overview._dash._showAppsIcon.get_transformed_size();
@@ -498,7 +498,6 @@ const AllView = new Lang.Class({
// to not show them for a moment before the animation is
// started
this._grid.actor.opacity = 0;
- log("------- animate before redraw");
Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this,
function() {
this._grid.actor.opacity = 255;
@@ -512,6 +511,9 @@ const AllView = new Lang.Class({
this._grid.disconnect(animationDoneId);
if (onCompleteOut)
onCompleteOut();
+ // Reset to the default, so when we open again AllView it
+ // opens in the page 0.
+ this._currentPage = 0;
}));
if (this._displayingPopup && this._currentPopup) {
@@ -765,11 +767,11 @@ const FrequentView = new Lang.Class({
for (let i = 0; i < mostUsed.length; i++) {
if (!mostUsed[i].get_app_info().should_show())
continue;
- let appIcon = new AppIcon(mostUsed[i]);
+ let appIcon = new AppIcon(mostUsed[i], {}, { animateOnNewWindow: true });
this._grid.addItem(appIcon, -1);
}
},
-
+
animate: function(animationDirection, onCompleteOut) {
let dashPosition = Main.overview._dash._showAppsIcon.get_transformed_position();
let dashSize = Main.overview._dash._showAppsIcon.get_transformed_size();
@@ -927,7 +929,7 @@ const AppDisplay = new Lang.Class({
this._showView(initialView);
this._updateFrequentVisibility();
},
-
+
animate: function(animationDirection, onCompleteOut) {
let view = this._views[global.settings.get_uint('app-picker-view')].view;
view.animate(animationDirection, onCompleteOut);
@@ -1031,29 +1033,9 @@ const AppSearchProvider = new Lang.Class({
this.getInitialResultSet(terms, callback, cancellable);
},
- activateResult: function(result) {
- let app = this._appSys.lookup_app(result);
- let event = Clutter.get_current_event();
- let modifiers = event ? event.get_state() : 0;
- let openNewWindow = modifiers & Clutter.ModifierType.CONTROL_MASK;
-
- if (openNewWindow)
- app.open_new_window(-1);
- else
- app.activate();
- },
-
- dragActivateResult: function(id, params) {
- params = Params.parse(params, { workspace: -1,
- timestamp: 0 });
-
- let app = this._appSys.lookup_app(id);
- app.open_new_window(workspace);
- },
-
createResultObject: function (resultMeta) {
let app = this._appSys.lookup_app(resultMeta['id']);
- return new AppIcon(app);
+ return new AppIcon(app, {}, { animateOnNewWindow: true });
}
});
@@ -1081,7 +1063,7 @@ const FolderView = new Lang.Class({
_keyFocusIn: function(actor) {
Util.ensureActorVisibleInScrollView(this.actor, actor);
},
-
+
animate: function(animationType, animationDirection, params) {
this._grid.animate(animationType, animationDirection, params);
},
@@ -1416,13 +1398,13 @@ const AppFolderPopup = new Lang.Class({
this.actor.show();
this._boxPointer.setArrowActor(this._source.actor);
- // We need to hide the icons of the view until the boxpointer animation
+ // We need to hide the icons of the view until the boxpointer animation
// is completed so we can animate the icons after as we like withouth
// showing them while boxpointer is animating.
this._view.actor.opacity = 0;
this._boxPointer.show(BoxPointer.PopupAnimation.FADE |
BoxPointer.PopupAnimation.SLIDE,
- Lang.bind(this,
+ Lang.bind(this,
function() {
// Restore the view opacity, so now we show the icons and animate
// them
@@ -1472,10 +1454,11 @@ Signals.addSignalMethods(AppFolderPopup.prototype);
const AppIcon = new Lang.Class({
Name: 'AppIcon',
- _init : function(app, iconParams) {
+ _init : function(app, iconParams, params) {
this.app = app;
this.id = app.get_id();
this.name = app.get_name();
+ this.params = Params.parse(params, { animateOnNewWindow: false });
this.actor = new St.Button({ style_class: 'app-well-app',
reactive: true,
@@ -1553,6 +1536,7 @@ const AppIcon = new Lang.Class({
_onButtonPress: function(actor, event) {
let button = event.get_button();
+ log("555555555555555555555555555555555 Pushing button " + button);
if (button == 1) {
this._removeMenuTimeout();
this._menuTimeoutId = Mainloop.timeout_add(MENU_POPUP_TIMEOUT,
@@ -1572,12 +1556,18 @@ const AppIcon = new Lang.Class({
_onClicked: function(actor, button) {
this._removeMenuTimeout();
+ if (this.params.animateOnNewWindow &&
+ this.app.state == Shell.AppState.STOPPED)
+ this.icon.animateOut();
+
if (button == 1) {
- this._onActivate(Clutter.get_current_event());
+ this.activate();
} else if (button == 2) {
this.app.open_new_window(-1);
- Main.overview.hide();
}
+
+ Main.overview.hide();
+
return false;
},
@@ -1632,15 +1622,20 @@ const AppIcon = new Lang.Class({
this.emit('menu-state-changed', false);
},
- _onActivate: function (event) {
- let modifiers = event.get_state();
+ activate: function () {
+ let event = Clutter.get_current_event();
+ let modifiers = event ? event.get_state() : 0;
+ let openNewWindow = modifiers & Clutter.ModifierType.CONTROL_MASK &&
+ this.app.state == Shell.AppState.RUNNING;
+
+ if (this.params.animateOnNewWindow &&
+ this.app.state == Shell.AppState.STOPPED)
+ this.icon.animateOut();
- if (modifiers & Clutter.ModifierType.CONTROL_MASK
- && this.app.state == Shell.AppState.RUNNING) {
+ if (openNewWindow)
this.app.open_new_window(-1);
- } else {
+ else
this.app.activate();
- }
Main.overview.hide();
},
@@ -1665,6 +1660,13 @@ const AppIcon = new Lang.Class({
shouldShowTooltip: function() {
return this.actor.hover && (!this._menu || !this._menu.isOpen);
},
+
+ setSelected: function(selected) {
+ if (selected)
+ this.actor.add_style_pseudo_class('selected');
+ else
+ this.actor.remove_style_pseudo_class('selected');
+ }
});
Signals.addSignalMethods(AppIcon.prototype);
@@ -1725,6 +1727,10 @@ const AppIconMenu = new Lang.Class({
this._newWindowMenuItem = this._appendMenuItem(_("New Window"));
this._newWindowMenuItem.connect('activate', Lang.bind(this, function() {
+ if (this._source.params.animateOnNewWindow &&
+ this._source.app.state == Shell.AppState.STOPPED)
+ this._source.animateOut();
+
this._source.app.open_new_window(-1);
this.emit('activate-window', null);
}));
diff --git a/js/ui/search.js b/js/ui/search.js
index d85fd19..032af0d 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -144,47 +144,26 @@ const MaxWidthBin = new Lang.Class({
}
});
-const SearchResult = new Lang.Class({
- Name: 'SearchResult',
+const ListSearchResult = new Lang.Class({
+ Name: 'ListSearchResult',
+
+ ICON_SIZE: 64,
- _init: function(provider, metaInfo) {
+ _init: function(provider, metaInfo, terms) {
this.provider = provider;
this.metaInfo = metaInfo;
+ this._terms = terms;
this.actor = new St.Button({ reactive: true,
can_focus: true,
track_hover: true,
x_align: St.Align.START,
- y_fill: true });
+ x_fill: true,
+ y_fill: true,
+ style_class: 'list-search-result'});
this.actor._delegate = this;
this.actor.connect('clicked', Lang.bind(this, this.activate));
- },
-
- activate: function() {
- this.emit('activate', this.metaInfo.id);
- },
-
- setSelected: function(selected) {
- if (selected)
- this.actor.add_style_pseudo_class('selected');
- else
- this.actor.remove_style_pseudo_class('selected');
- }
-});
-Signals.addSignalMethods(SearchResult.prototype);
-
-const ListSearchResult = new Lang.Class({
- Name: 'ListSearchResult',
- Extends: SearchResult,
-
- ICON_SIZE: 64,
-
- _init: function(provider, metaInfo) {
- this.parent(provider, metaInfo);
-
- this.actor.style_class = 'list-search-result';
- this.actor.x_fill = true;
let content = new St.BoxLayout({ style_class: 'list-search-result-content',
vertical: false });
@@ -218,45 +197,31 @@ const ListSearchResult = new Lang.Class({
x_align: St.Align.START,
y_align: St.Align.END });
}
+ },
+
+ activate: function(result, id) {
+ this.provider.activateResult(id, this._terms);
+ Main.overview.toggle();
+ },
+
+ setSelected: function(selected) {
+ if (selected)
+ this.actor.add_style_pseudo_class('selected');
+ else
+ this.actor.remove_style_pseudo_class('selected');
}
});
const GridSearchResult = new Lang.Class({
Name: 'GridSearchResult',
- Extends: SearchResult,
-
- _init: function(provider, metaInfo) {
- this.parent(provider, metaInfo);
-
- this.actor.style_class = 'grid-search-result';
- let content = provider.createResultObject(metaInfo);
- log("content " + content);
- this._dragActorSource = content;
-
- this.actor.set_child(content.actor);
-
- let draggable = DND.makeDraggable(this.actor);
- draggable.connect('drag-begin',
- Lang.bind(this, function() {
- Main.overview.beginItemDrag(this);
- }));
- draggable.connect('drag-cancelled',
- Lang.bind(this, function() {
- Main.overview.cancelledItemDrag(this);
- }));
- draggable.connect('drag-end',
- Lang.bind(this, function() {
- Main.overview.endItemDrag(this);
- }));
- },
-
- getDragActorSource: function() {
- return this._dragActorSource;
- },
+ _init: function(provider, metaInfo, terms) {
+ this.provider = provider;
+ this.metaInfo = metaInfo;
- getDragActor: function() {
- return this.metaInfo['createIcon'](Main.overview.dashIconSize);
+ // Expect an AppIcon which already takes management of drag,
+ // activation, selection, etc.
+ this.actor = provider.createResultObject(metaInfo).actor;
}
});
@@ -292,8 +257,9 @@ const SearchResultsBase = new Lang.Class({
},
clear: function() {
- for (let resultId in this._resultDisplays)
+ for (let resultId in this._resultDisplays) {
this._resultDisplays[resultId].actor.destroy();
+ }
this._resultDisplays = {};
this._clearResultDisplay();
this.actor.hide();
@@ -303,11 +269,6 @@ const SearchResultsBase = new Lang.Class({
this.emit('key-focus-in', actor);
},
- _activateResult: function(result, id) {
- this.provider.activateResult(id, this._terms);
- Main.overview.toggle();
- },
-
_setMoreIconVisible: function(visible) {
},
@@ -336,7 +297,6 @@ const SearchResultsBase = new Lang.Class({
metasNeeded.forEach(Lang.bind(this, function(resultId, i) {
let meta = metas[i];
let display = this._createResultDisplay(meta);
- display.connect('activate', Lang.bind(this, this._activateResult));
display.actor.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
this._resultDisplays[resultId] = display;
}));
@@ -419,7 +379,7 @@ const ListSearchResults = new Lang.Class({
},
_createResultDisplay: function(meta) {
- return new ListSearchResult(this.provider, meta);
+ return new ListSearchResult(this.provider, meta, this._terms);
},
_addItem: function(display) {
@@ -459,7 +419,7 @@ const GridSearchResults = new Lang.Class({
},
_createResultDisplay: function(meta) {
- return new GridSearchResult(this.provider, meta);
+ return new GridSearchResult(this.provider, meta, this._terms);
},
_addItem: function(display) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
