[gnome-shell] adjust AllAppDisplay to match latest mockup
- From: William Jon McCann <mccann src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] adjust AllAppDisplay to match latest mockup
- Date: Sat, 30 Oct 2010 17:48:02 +0000 (UTC)
commit a12bff3167d2d5cc595a3f24d0e96b661548e2ac
Author: Maxim Ermilov <zaspire rambler ru>
Date: Wed Oct 6 21:25:22 2010 +0400
adjust AllAppDisplay to match latest mockup
https://bugzilla.gnome.org/show_bug.cgi?id=631537
data/Makefile.am | 1 +
data/gs-applications.menu | 70 ++++++++++++++++++----
data/theme/filter-selected.svg | 81 ++++++++++++++++++++++++++
data/theme/gnome-shell.css | 29 +++++-----
js/ui/appDisplay.js | 123 ++++++++++++++++++++++++----------------
5 files changed, 227 insertions(+), 77 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 68dcc1d..96d30e6 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -26,6 +26,7 @@ dist_theme_DATA = \
theme/close.svg \
theme/corner-ripple.png \
theme/dialog-error.svg \
+ theme/filter-selected.svg \
theme/gnome-shell.css \
theme/mosaic-view-active.svg \
theme/mosaic-view.svg \
diff --git a/data/gs-applications.menu b/data/gs-applications.menu
index 1d0bfdc..cb4db03 100644
--- a/data/gs-applications.menu
+++ b/data/gs-applications.menu
@@ -1,12 +1,30 @@
<Menu>
- <DefaultLayout>
- <Menuname>Apps</Menuname>
- <Menuname>Games</Menuname>
- <Menuname>Tools</Menuname>
- </DefaultLayout>
+ <DefaultLayout>
+ <Menuname>Accessories</Menuname>
+ <Menuname>Games</Menuname>
+ <Menuname>Graphics</Menuname>
+ <Menuname>Internet</Menuname>
+ <Menuname>Multimedia</Menuname>
+ <Menuname>Office</Menuname>
+ <Menuname>Other</Menuname>
+ </DefaultLayout>
+
<Name>Applications</Name>
<AppDir>/usr/local/share/applications</AppDir>
<DefaultAppDirs/>
+
+ <Menu>
+ <Name>Accessories</Name>
+ <Include>
+ <And>
+ <Category>Utility</Category>
+ <Not>
+ <Category>System</Category>
+ </Not>
+ </And>
+ </Include>
+ </Menu>
+
<Menu>
<Name>Games</Name>
<Include>
@@ -15,21 +33,47 @@
</And>
</Include>
</Menu>
+
<Menu>
- <Name>Tools</Name>
+ <Name>Graphics</Name>
<Include>
- <Category>Development</Category>
<And>
- <Category>System</Category>
- <Not>
- <Category>Settings</Category>
- </Not>
+ <Category>Graphics</Category>
+ </And>
+ </Include>
+ </Menu>
+
+ <Menu>
+ <Name>Internet</Name>
+ <Include>
+ <And>
+ <Category>Network</Category>
+ <Not><Category>Settings</Category></Not>
+ </And>
+ </Include>
+ </Menu>
+
+ <Menu>
+ <Name>Multimedia</Name>
+ <Include>
+ <And>
+ <Category>AudioVideo</Category>
+ <Not><Category>Settings</Category></Not>
+ </And>
+ </Include>
+ </Menu>
+
+ <Menu>
+ <Name>Office</Name>
+ <Include>
+ <And>
+ <Category>Office</Category>
</And>
- <Category>Utility</Category>
</Include>
</Menu>
+
<Menu>
- <Name>Apps</Name>
+ <Name>Other</Name>
<OnlyUnallocated/>
<Include>
<And>
diff --git a/data/theme/filter-selected.svg b/data/theme/filter-selected.svg
new file mode 100644
index 0000000..c31cfb4
--- /dev/null
+++ b/data/theme/filter-selected.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="11"
+ height="22"
+ id="svg10003"
+ version="1.1"
+ inkscape:version="0.47 r22583"
+ sodipodi:docname="New document 2">
+ <defs
+ id="defs10005">
+ <inkscape:perspective
+ sodipodi:type="inkscape:persp3d"
+ inkscape:vp_x="0 : 32 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_z="64 : 32 : 1"
+ inkscape:persp3d-origin="32 : 21.333333 : 1"
+ id="perspective10011" />
+ <inkscape:perspective
+ id="perspective9998"
+ inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+ inkscape:vp_z="1 : 0.5 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_x="0 : 0.5 : 1"
+ sodipodi:type="inkscape:persp3d" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="5.5"
+ inkscape:cx="32"
+ inkscape:cy="10.181818"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ inkscape:document-units="px"
+ inkscape:grid-bbox="true"
+ inkscape:window-width="593"
+ inkscape:window-height="495"
+ inkscape:window-x="5"
+ inkscape:window-y="48"
+ inkscape:window-maximized="0" />
+ <metadata
+ id="metadata10008">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1"
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ transform="translate(0,-42)">
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/app-picker.png"
+ sodipodi:nodetypes="cccc"
+ inkscape:connector-curvature="0"
+ id="rect34320"
+ d="m 0.17637064,52.909077 10.55634036,10.55636 10e-6,-21.11269 z"
+ style="opacity:0.21000001;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+ </g>
+</svg>
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 30e74fe..eec2798 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -540,7 +540,7 @@ StTooltip {
/* Apps */
.overview-pane {
- width: 440px;
+ width: 640px;
}
.icon-grid {
@@ -549,30 +549,29 @@ StTooltip {
}
.all-app {
+ padding-top: 30px;
+ padding-bottom: 10px;
border-radius: 10px;
background-color: #111111;
border: 2px solid #868686;
color: #ffffff;
}
-.app-section-divider-container {
- padding-top: 10px;
- padding-bottom: 10px;
+.app-filters-container {
+ width: 201px;
}
-.app-section-divider {
- height: 2px;
- background-image: url("separator-white.png");
-}
-
-.all-app-controls-panel {
- height: 30px;
+.app-filter {
+ font-size: 14px;
+ font-weight: bold;
+ height: 40px;
+ color: #aaa;
}
-.all-app-scroll-view {
- padding-right: 10px;
- padding-left: 10px;
- padding-bottom: 10px;
+.app-filter:selected {
+ color: #ffffff;
+ background-image: url("filter-selected.svg");
+ background-position: 190px 0px;
}
.app-well-app {
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8c3330e..6f44f9c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -31,10 +31,18 @@ function AlphabeticalView() {
AlphabeticalView.prototype = {
_init: function() {
- this.actor = new St.BoxLayout({ vertical: true });
this._grid = new IconGrid.IconGrid();
this._appSystem = Shell.AppSystem.get_default();
- this.actor.add(this._grid.actor, { y_align: St.Align.START, expand: true });
+
+ let box = new St.BoxLayout({ vertical: true });
+ box.add(this._grid.actor, { y_align: St.Align.START, expand: true });
+
+ this.actor = new St.ScrollView({ x_fill: true,
+ y_fill: false,
+ y_align: St.Align.START,
+ vshadows: true });
+ this.actor.add_actor(box);
+ this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
},
_removeAll: function() {
@@ -81,54 +89,84 @@ function ViewByCategories() {
ViewByCategories.prototype = {
_init: function() {
this._appSystem = Shell.AppSystem.get_default();
- this.actor = new St.BoxLayout({ vertical: true });
+ let container = new St.BoxLayout();
+ this.actor = new St.Bin({ child: container, x_fill: true, y_fill: true });
this.actor._delegate = this;
+
+
+ this._view = new AlphabeticalView();
+ this._view.connect('launching', Lang.bind(this, function() {
+ this.emit('launching');
+ }));
+ this._view.connect('drag-begin', Lang.bind(this, function() {
+ this.emit('drag-begin');
+ }));
+
+ this._filters = new St.BoxLayout({ style_class: 'app-filters-container', vertical: true });
+ container.add(this._view.actor, { expand: true, x_fill: true, y_fill: true });
+ container.add(this._filters, { expand: false, y_fill: false, y_align: St.Align.START });
+
this._sections = [];
},
- _updateSections: function(apps) {
+ _selectCategory: function(num) {
+ let apps;
+ if (num != -1) {
+ this._allFilter.remove_style_pseudo_class('selected');
+ apps = this._sections[num].apps;
+ } else {
+ this._allFilter.add_style_pseudo_class('selected');
+ apps = this._apps;
+ }
+ this._view.refresh(apps);
+
+ for (let i = 0; i < this._sections.length; i++) {
+ if (i == num)
+ this._sections[i].menuActor.add_style_pseudo_class('selected');
+ else
+ this._sections[i].menuActor.remove_style_pseudo_class('selected');
+ }
+ },
+
+ _addFilter: function(name, num) {
+ let button = new St.Button({ label: name,
+ style_class: 'app-filter',
+ x_align: St.Align.START });
+ this._filters.add(button, { expand: true, x_fill: true, y_fill: false });
+ button.connect('clicked', Lang.bind(this, function() {
+ this._selectCategory(num);
+ }));
+
+ return button;
+ },
+
+ _removeAll: function() {
+ this._sections = [];
+ this._filters.destroy_children();
+ },
+
+ refresh: function(apps) {
this._removeAll();
let sections = this._appSystem.get_sections();
if (!sections)
return;
- for (let i = 0; i < sections.length; i++) {
- if (i) {
- let actor = new St.Bin({ style_class: 'app-section-divider' });
- let divider = new St.Bin({ style_class: 'app-section-divider-container',
- child: actor,
- x_fill: true });
+ this._apps = apps;
- this.actor.add(divider, { y_fill: false, expand: true });
- }
+ this._allFilter = this._addFilter(_("All"), -1);
+
+ for (let i = 0; i < sections.length; i++) {
let _apps = apps.filter(function(app) {
return app.get_section() == sections[i];
});
- this._sections[i] = { view: new AlphabeticalView(),
- apps: _apps,
+ let name = this._addFilter(sections[i], i);
+
+ this._sections[i] = { apps: _apps,
+ menuActor: name,
name: sections[i] };
- this._sections[i].view.connect('launching', Lang.bind(this, function() {
- this.emit('launching');
- }));
- this._sections[i].view.connect('drag-begin', Lang.bind(this, function() {
- this.emit('drag-begin');
- }));
- this.actor.add(this._sections[i].view.actor, { y_align: St.Align.START, expand: true });
}
- },
-
- _removeAll: function() {
- this.actor.destroy_children();
- this._sections.forEach(function (section) { section.view.disconnectAll(); });
-
- this._sections = [];
- },
- refresh: function(apps) {
- this._updateSections(apps);
- for (let i = 0; i < this._sections.length; i++) {
- this._sections[i].view.refresh(this._sections[i].apps);
- }
+ this._selectCategory(-1);
}
};
@@ -148,25 +186,12 @@ AllAppDisplay.prototype = {
Main.queueDeferredWork(this._workId);
}));
- let bin = new St.BoxLayout({ style_class: 'all-app-controls-panel',
- reactive: true });
- this.actor = new St.BoxLayout({ style_class: 'all-app', vertical: true });
- this.actor.hide();
-
- let view = new St.ScrollView({ x_fill: true,
- y_fill: false,
- style_class: 'all-app-scroll-view',
- vshadows: true });
- this._scrollView = view;
- this.actor.add(bin);
- this.actor.add(view, { expand: true, y_fill: false, y_align: St.Align.START });
-
this._appView = new ViewByCategories();
this._appView.connect('launching', Lang.bind(this, this.close));
this._appView.connect('drag-begin', Lang.bind(this, this.close));
- this._scrollView.add_actor(this._appView.actor);
- this._scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+ this.actor = this._appView.actor;
+ this.actor.style_class = 'all-app';
this._workId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._redisplay));
},
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
