[gnome-shell/overview-relayout: 6/15] overview: Replace dash with stand-alone app well
- From: Florian Müllner <fmuellner src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/overview-relayout: 6/15] overview: Replace dash with stand-alone app well
- Date: Thu, 14 Oct 2010 12:25:01 +0000 (UTC)
commit 2947a8e28f857271d32543349d71e3790effaa14
Author: Florian Müllner <fmuellner gnome org>
Date: Thu Jul 22 01:29:02 2010 +0200
overview: Replace dash with stand-alone app well
The app well now is implemented as a sidebar, whose items are
scaled dynamically according to their number.
data/Makefile.am | 1 +
data/theme/gnome-shell.css | 26 ++++++------
data/theme/running-indicator.svg | 89 ++++++++++++++++++++++++++++++++++++++
js/ui/appDisplay.js | 59 ++++++++++++++++++-------
js/ui/overview.js | 37 ++++++---------
5 files changed, 161 insertions(+), 51 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 68dcc1d..e17b0e7 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -32,6 +32,7 @@ dist_theme_DATA = \
theme/move-window-on-new.svg \
theme/process-working.png \
theme/remove-workspace.svg \
+ theme/running-indicator.svg \
theme/scroll-button-down-hover.png \
theme/scroll-button-down.png \
theme/scroll-button-up-hover.png \
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index de5f3f5..b4838e2 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -361,10 +361,15 @@ StTooltip {
/* Dash */
-#dash {
+#AppWell {
color: #5f5f5f;
font-size: 12px;
- padding: 0px 14px;
+ padding: 12px;
+ spacing: 6px;
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ border-left: 0px;
+ border-radius: 0px 9px 9px 0px;
}
#dashSections {
@@ -551,31 +556,26 @@ StTooltip {
}
.app-well-app {
- border: 1px solid #181818;
border-radius: 4px;
padding: 4px;
- width: 70px;
- height: 70px;
font-size: 10px;
+ color: white;
transition-duration: 100;
text-align: center;
}
.app-well-app.running {
- background-gradient-direction: vertical;
- background-gradient-start: #3d3d3d;
- background-gradient-end: #181818;
+ text-shadow: black 0px 2px 2px;
+ background-image: url("running-indicator.svg");
}
.app-well-app.selected {
- border: 1px solid #666666;
+ background: rgba(255,255,255,0.33);
}
.app-well-app:hover {
- border: 1px solid #666666;
- background-gradient-direction: vertical;
- background-gradient-start: rgba(61,61,61,0.8);
- background-gradient-end: rgba(24,24,24,0.2);
+ background: rgba(255,255,255,0.33);
+ text-shadow: black 0px 2px 2px;
transition-duration: 100;
}
diff --git a/data/theme/running-indicator.svg b/data/theme/running-indicator.svg
new file mode 100644
index 0000000..d721e64
--- /dev/null
+++ b/data/theme/running-indicator.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:xlink="http://www.w3.org/1999/xlink";
+ width="74.01342"
+ height="74.006706"
+ id="svg7355"
+ version="1.1">
+ <defs
+ id="defs7357">
+ <radialGradient
+ xlink:href="#linearGradient36429"
+ id="radialGradient7461"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.0525552,0,0,1.0525552,-2.5162753,-9.0000838)"
+ cx="47.878681"
+ cy="171.25"
+ fx="47.878681"
+ fy="171.25"
+ r="37" />
+ <linearGradient
+ id="linearGradient36429">
+ <stop
+ id="stop36431"
+ offset="0"
+ style="stop-color:#ffffff;stop-opacity:1;" />
+ <stop
+ id="stop36433"
+ offset="1"
+ style="stop-color:#ffffff;stop-opacity:0;" />
+ </linearGradient>
+ <radialGradient
+ xlink:href="#linearGradient36471"
+ id="radialGradient7463"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(1.1891549,0,0,0.55513246,-9.281289,36.12653)"
+ cx="49.067139"
+ cy="242.50381"
+ fx="49.067139"
+ fy="242.50381"
+ r="37.00671" />
+ <linearGradient
+ id="linearGradient36471">
+ <stop
+ id="stop36473"
+ offset="0"
+ style="stop-color:#ffffff;stop-opacity:1;" />
+ <stop
+ id="stop36475"
+ offset="1"
+ style="stop-color:#ffffff;stop-opacity:0;" />
+ </linearGradient>
+ <radialGradient
+ r="37.00671"
+ fy="242.50381"
+ fx="49.067139"
+ cy="242.50381"
+ cx="49.067139"
+ gradientTransform="matrix(1.1891549,0,0,0.55513246,-9.281289,36.12653)"
+ gradientUnits="userSpaceOnUse"
+ id="radialGradient7488"
+ xlink:href="#linearGradient36471" />
+ </defs>
+ <g
+ id="layer1"
+ transform="translate(-266.21629,-168.11809)">
+ <g
+ style="display:inline"
+ id="g30864"
+ transform="translate(255.223,70.118091)">
+ <rect
+ ry="3.5996203"
+ rx="3.5996203"
+ y="98"
+ x="11"
+ height="74"
+ width="74"
+ id="rect14000"
+ style="opacity:0.371875;fill:url(#radialGradient7461);fill-opacity:1;stroke:none" />
+ <path
+ id="rect34520"
+ d="m 84.506708,167.95508 c 6e-6,1.96759 -1.584022,3.55162 -3.551629,3.55163 l -65.910146,0 c -1.967608,-1e-5 -3.551648,-1.58402 -3.551643,-3.55164"
+ style="opacity:0.2;fill:none;stroke:url(#radialGradient7488);stroke-width:1;stroke-opacity:1" />
+ </g>
+ </g>
+</svg>
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 55d0768..822786d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -375,7 +375,9 @@ AppIcon.prototype = {
let label = this.app.get_name();
- IconGrid.BaseIcon.prototype._init.call(this, label);
+ IconGrid.BaseIcon.prototype._init.call(this,
+ label,
+ { setSizeManually: true });
},
createIcon: function(iconSize) {
@@ -396,8 +398,8 @@ AppWellIcon.prototype = {
y_fill: true });
this.actor._delegate = this;
- this._icon = new AppIcon(app);
- this.actor.set_child(this._icon.actor);
+ this.icon = new AppIcon(app);
+ this.actor.set_child(this.icon.actor);
this.actor.connect('clicked', Lang.bind(this, this._onClicked));
@@ -582,13 +584,13 @@ AppWellIcon.prototype = {
},
getDragActor: function() {
- return this.app.create_icon_texture(this._icon.iconSize);
+ return this.app.create_icon_texture(this.icon.iconSize);
},
// Returns the original actor that should align with the actor
// we show as the item is being dragged.
getDragActorSource: function() {
- return this._icon.icon;
+ return this.icon.icon;
}
};
Signals.addSignalMethods(AppWellIcon.prototype);
@@ -767,14 +769,24 @@ AppWell.prototype = {
this._placeholderText = null;
this._menus = [];
this._menuDisplays = [];
+ this._maxHeight = -1;
this._favorites = [];
- this._grid = new IconGrid.IconGrid();
- this.actor = this._grid.actor;
- this.actor._delegate = this;
+ this._box = new St.BoxLayout({ name: 'AppWell',
+ vertical: true,
+ clip_to_allocation: true });
+ this._box._delegate = this;
+
+ this.actor = new St.Bin({ y_align: St.Align.START, child: this._box });
+ this.actor.connect('notify::height', Lang.bind(this,
+ function() {
+ if (this._maxHeight != this.actor.height)
+ this._queueRedisplay();
+ this._maxHeight = this.actor.height;
+ }));
- this._workId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._redisplay));
+ this._workId = Main.initializeDeferredWork(this._box, Lang.bind(this, this._redisplay));
this._tracker = Shell.WindowTracker.get_default();
this._appSystem = Shell.AppSystem.get_default();
@@ -796,7 +808,8 @@ AppWell.prototype = {
},
_redisplay: function () {
- this._grid.removeAll();
+ this._box.hide();
+ this._box.remove_all();
let favorites = AppFavorites.getAppFavorites().getFavoriteMap();
@@ -806,12 +819,10 @@ AppWell.prototype = {
let running = this._tracker.get_running_apps(contextId);
let runningIds = this._appIdListToHash(running);
- let nFavorites = 0;
for (let id in favorites) {
let app = favorites[id];
let display = new AppWellIcon(app);
- this._grid.addItem(display.actor);
- nFavorites++;
+ this._box.add(display.actor);
}
for (let i = 0; i < running.length; i++) {
@@ -819,17 +830,33 @@ AppWell.prototype = {
if (app.get_id() in favorites)
continue;
let display = new AppWellIcon(app);
- this._grid.addItem(display.actor);
+ this._box.add(display.actor);
}
if (this._placeholderText) {
this._placeholderText.destroy();
this._placeholderText = null;
}
- if (running.length == 0 && nFavorites == 0) {
+ let children = this._box.get_children();
+ if (children.length == 0) {
this._placeholderText = new St.Label({ text: _("Drag here to add favorites") });
- this.actor.add_actor(this._placeholderText);
+ this._box.add_actor(this._placeholderText);
+ } else if (this._maxHeight > -1) {
+ let iconSizes = [ 48, 32, 24, 22, 16 ];
+
+ for (let i = 0; i < iconSizes.length; i++) {
+ let minHeight, natHeight;
+
+ for (let j = 0; j < children.length; j++)
+ children[j]._delegate.icon.setIconSize(iconSizes[i]);
+
+ [minHeight, natHeight] = this.actor.get_preferred_height(-1);
+
+ if (natHeight <= this._maxHeight)
+ break;
+ }
}
+ this._box.show();
},
handleDragOver : function(source, actor, x, y, time) {
diff --git a/js/ui/overview.js b/js/ui/overview.js
index 70a8e3f..bc06e3a 100644
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -14,7 +14,7 @@ const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main;
const MessageTray = imports.ui.messageTray;
const Panel = imports.ui.panel;
-const Dash = imports.ui.dash;
+const AppDisplay = imports.ui.appDisplay;
const Tweener = imports.ui.tweener;
const WorkspacesView = imports.ui.workspacesView;
@@ -220,8 +220,8 @@ Overview.prototype = {
global.overlay_group.add_actor(this._group);
// TODO - recalculate everything when desktop size changes
- this._dash = new Dash.Dash();
- this._group.add_actor(this._dash.actor);
+ this._appWell = new AppDisplay.AppWell();
+ this._group.add_actor(this._appWell.actor);
// Container to hold popup pane chrome.
this._paneContainer = new St.BoxLayout({ style_class: 'overview-pane' });
@@ -259,7 +259,7 @@ Overview.prototype = {
// Show new workspacesView
this._group.add_actor(this.workspaces.actor);
this._workspacesBar.raise(this.workspaces.actor);
- this._dash.actor.raise(this.workspaces.actor);
+ this._appWell.actor.raise(this.workspaces.actor);
},
_recalculateGridSizes: function () {
@@ -311,16 +311,12 @@ Overview.prototype = {
this._workspacesY = Math.floor(displayGridRowHeight + WORKSPACE_GRID_PADDING * (primary.height / primary.width));
if (rtl) {
- this._dash.actor.set_position(primary.width - displayGridColumnWidth, contentY);
+ this._appWell.actor.set_position(primary.width - displayGridColumnWidth - WORKSPACE_GRID_PADDING / 2,
+ this._workspacesY);
} else {
- this._dash.actor.set_position(0, contentY);
+ this._appWell.actor.set_position(0, this._workspacesY);
}
- this._dash.actor.set_size(displayGridColumnWidth, contentHeight);
- this._dash.searchArea.height = this._workspacesY - contentY;
- this._dash.sectionArea.height = this._workspacesHeight;
- this._dash.searchResults.actor.height = this._workspacesHeight;
-
// place the 'Add Workspace' button in the bottom row of the grid
this._workspacesBarX = this._workspacesX;
this._workspacesBarWidth = this._workspacesWidth;
@@ -331,13 +327,13 @@ Overview.prototype = {
this._backOver.set_position(- primary.x, - primary.y);
this._backOver.set_size(global.screen_width, global.screen_height);
- this._paneContainer.set_position(this._dash.actor.x + this._dash.actor.width + DEFAULT_PADDING,
+ this._paneContainer.set_position(this._appWell.actor.x + this._appWell.actor.width + DEFAULT_PADDING,
this._workspacesY);
// Dynamic width
this._paneContainer.height = this._workspacesHeight;
if (rtl) {
this._paneContainer.connect('notify::width', Lang.bind(this, function (paneContainer) {
- paneContainer.x = this._dash.actor.x - (DEFAULT_PADDING + paneContainer.width);
+ paneContainer.x = this._appWell.actor.x - (DEFAULT_PADDING + paneContainer.width);
}));
}
@@ -436,14 +432,12 @@ Overview.prototype = {
show : function() {
if (this.visible)
return;
- if (!Main.pushModal(this._dash.actor))
+ if (!Main.pushModal(this._appWell.actor))
return;
this.visible = true;
this.animationInProgress = true;
- this._dash.show();
-
/* TODO: make this stuff dynamic */
this._workspacesManager =
new WorkspacesView.WorkspacesManager(this._workspacesWidth,
@@ -458,7 +452,7 @@ Overview.prototype = {
// The workspaces actor is as big as the screen, so we have to raise the dash above it
// for drag and drop to work. In the future we should fix the workspaces to not
// be as big as the screen.
- this._dash.actor.raise(this.workspaces.actor);
+ this._appWell.actor.raise(this.workspaces.actor);
this._workspacesBar = this._workspacesManager.controlsBar.actor;
this._workspacesBar.set_position(this._workspacesBarX,
@@ -510,8 +504,8 @@ Overview.prototype = {
});
// Make Dash fade in so that it doesn't appear too big.
- this._dash.actor.opacity = 0;
- Tweener.addTween(this._dash.actor,
+ this._appWell.actor.opacity = 0;
+ Tweener.addTween(this._appWell.actor,
{ opacity: 255,
transition: 'easeOutQuad',
time: ANIMATION_TIME
@@ -559,7 +553,7 @@ Overview.prototype = {
});
// Make Dash fade out so that it doesn't appear to big.
- Tweener.addTween(this._dash.actor,
+ Tweener.addTween(this._appWell.actor,
{ opacity: 0,
transition: 'easeOutQuad',
time: ANIMATION_TIME
@@ -612,7 +606,6 @@ Overview.prototype = {
this._workspacesManager = null;
- this._dash.hide();
this._desktop.hide();
this._group.hide();
@@ -622,7 +615,7 @@ Overview.prototype = {
this._coverPane.lower_bottom();
- Main.popModal(this._dash.actor);
+ Main.popModal(this._appWell.actor);
this.emit('hidden');
}
};
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
