[gnome-shell] viewSelector: Replace tab system with pages
- From: Florian MÃllner <fmuellner src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] viewSelector: Replace tab system with pages
- Date: Mon, 20 Aug 2012 12:24:32 +0000 (UTC)
commit 8c40ded498ab360f3494d25d526d889f50fb0a59
Author: Joost Verdoorn <jpverdoorn gmail com>
Date: Fri Jun 22 00:52:56 2012 +0200
viewSelector: Replace tab system with pages
The old tab system is no longer a good fit for the current design, so
replace most of the abstractions with a simpler page system.
https://bugzilla.gnome.org/show_bug.cgi?id=682109
data/theme/gnome-shell.css | 28 ------
js/ui/viewSelector.js | 202 +++++++++++++++-----------------------------
2 files changed, 68 insertions(+), 162 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 978e9a1..65428d5 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -648,16 +648,8 @@ StButton.popup-menu-item:insensitive {
spacing: 1em;
}
-#viewSelectorTabBar {
- padding: 1em;
-}
-
/* Search Box */
-#searchArea {
- padding: 0px 24px;
-}
-
#searchEntry {
border-radius: 17px;
width: 250px;
@@ -668,26 +660,6 @@ StButton.popup-menu-item:insensitive {
color: #8d8f8a;
}
-/* View Tabs */
-
-.view-tab-title {
- color: #888a85;
- font-size: 12pt;
- font-weight: bold;
- padding: 0px 0.75em;
- height: 1.5em;
-}
-
-.view-tab-title:hover {
- color: #bbb;
-}
-
-.view-tab-title:selected {
- color: #000000;
- background-color: #c2c7cd;
- border-radius: 0.25em;
-}
-
/* Search Results */
#searchResults {
diff --git a/js/ui/viewSelector.js b/js/ui/viewSelector.js
index 0d382a2..ae9127d 100644
--- a/js/ui/viewSelector.js
+++ b/js/ui/viewSelector.js
@@ -20,83 +20,6 @@ const Tweener = imports.ui.tweener;
const Wanda = imports.ui.wanda;
const WorkspacesView = imports.ui.workspacesView;
-const BaseTab = new Lang.Class({
- Name: 'BaseTab',
-
- _init: function(titleActor, pageActor, name, a11yIcon) {
- this.title = titleActor;
- this.page = new St.Bin({ child: pageActor,
- x_align: St.Align.START,
- y_align: St.Align.START,
- x_fill: true,
- y_fill: true,
- style_class: 'view-tab-page' });
-
- if (this.title.can_focus) {
- Main.ctrlAltTabManager.addGroup(this.title, name, a11yIcon);
- } else {
- Main.ctrlAltTabManager.addGroup(this.page, name, a11yIcon,
- { proxy: this.title,
- focusCallback: Lang.bind(this, this._a11yFocus) });
- }
-
- this.visible = false;
- },
-
- show: function(animate) {
- this.visible = true;
- this.page.show();
-
- if (!animate)
- return;
-
- this.page.opacity = 0;
- Tweener.addTween(this.page,
- { opacity: 255,
- time: 0.1,
- transition: 'easeOutQuad' });
- },
-
- hide: function() {
- this.visible = false;
- Tweener.addTween(this.page,
- { opacity: 0,
- time: 0.1,
- transition: 'easeOutQuad',
- onComplete: Lang.bind(this,
- function() {
- this.page.hide();
- })
- });
- },
-
- _a11yFocus: function() {
- this._activate();
- this.page.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
- },
-
- _activate: function() {
- this.emit('activated');
- }
-});
-Signals.addSignalMethods(BaseTab.prototype);
-
-
-const ViewTab = new Lang.Class({
- Name: 'ViewTab',
- Extends: BaseTab,
-
- _init: function(id, label, pageActor, a11yIcon) {
- this.id = id;
-
- let titleActor = new St.Button({ label: label,
- style_class: 'view-tab-title' });
- titleActor.connect('clicked', Lang.bind(this, this._activate));
-
- this.parent(titleActor, pageActor, label, a11yIcon);
- }
-});
-
const ViewSelector = new Lang.Class({
Name: 'ViewSelector',
@@ -106,24 +29,14 @@ const ViewSelector = new Lang.Class({
vertical: true });
this._showAppsButton = showAppsButton;
- this._showAppsButton.connect('notify::checked', Lang.bind(this,
- function() {
- if (this._showAppsButton.checked)
- this._switchTab(this._appsTab);
- else
- this._switchTab(this._windowsTab);
- }));
+ this._showAppsButton.connect('notify::checked', Lang.bind(this, this._onShowAppsButtonToggled));
- // The page area holds the tab pages. Every page is given the
- // area's full allocation, so that the pages would appear on top
- // of each other if the inactive ones weren't hidden.
this._pageArea = new Shell.Stack();
this.actor.add(this._pageArea, { x_fill: true,
y_fill: true,
expand: true });
- this._tabs = [];
- this._activeTab = null;
+ this._activePage = null;
this.active = false;
this._searchPending = false;
@@ -158,16 +71,16 @@ const ViewSelector = new Lang.Class({
this._capturedEventId = 0;
this._workspacesDisplay = new WorkspacesView.WorkspacesDisplay();
- this._windowsTab = new ViewTab('windows', _("Windows"), this._workspacesDisplay.actor, 'text-x-generic');
- this._addViewTab(this._windowsTab);
+ this._workspacesPage = this._addPage(this._workspacesDisplay.actor, null,
+ _("Windows"), 'text-x-generic');
- let appView = new AppDisplay.AllAppDisplay();
- this._appsTab = new ViewTab('applications', _("Applications"), appView.actor, 'system-run');
- this._addViewTab(this._appsTab);
+ this._appDisplay = new AppDisplay.AllAppDisplay();
+ this._appsPage = this._addPage(this._appDisplay.actor, null,
+ _("Applications"), 'system-run');
this._searchResults = new SearchDisplay.SearchResults(this._searchSystem);
- this._searchTab = new BaseTab(new St.Bin(), this._searchResults.actor, _("Search"), 'edit-find');
- this._addTab(this._searchTab);
+ this._searchPage = this._addPage(this._searchResults.actor, this._entry,
+ _("Search"), 'edit-find');
// Default search providers
// Wanda comes obviously first
@@ -228,10 +141,16 @@ const ViewSelector = new Lang.Class({
},
show: function() {
+ this._activePage = this._workspacesPage;
+
+ this._appsPage.hide();
+ this._searchPage.hide();
this._workspacesDisplay.show();
if (!this._workspacesDisplay.activeWorkspaceHasMaximizedWindows())
Main.overview.fadeOutDesktop();
+
+ this._showPage(this._workspacesPage);
},
zoomFromOverview: function() {
@@ -245,47 +164,62 @@ const ViewSelector = new Lang.Class({
this._workspacesDisplay.hide();
},
- _addTab: function(tab) {
- tab.page.hide();
- this._pageArea.add_actor(tab.page);
- tab.connect('activated', Lang.bind(this, function(tab) {
- this._switchTab(tab);
- }));
- },
-
- _addViewTab: function(viewTab) {
- this._tabs.push(viewTab);
- this._addTab(viewTab);
+ _addPage: function(actor, a11yFocus, name, a11yIcon) {
+ let page = new St.Bin({ child: actor,
+ x_align: St.Align.START,
+ y_align: St.Align.START,
+ x_fill: true,
+ y_fill: true });
+ if (a11yFocus)
+ Main.ctrlAltTabManager.addGroup(a11yFocus, name, a11yIcon);
+ else
+ Main.ctrlAltTabManager.addGroup(actor, name, a11yIcon,
+ { proxy: this.actor,
+ focusCallback: Lang.bind(this,
+ function() {
+ this._a11yFocusPage(page);
+ })
+ });;
+ this._pageArea.add_actor(page);
+ return page
},
- _switchTab: function(tab) {
- let firstSwitch = this._activeTab == null;
+ _showPage: function(page) {
+ if(page == this._activePage)
+ return;
- if (this._activeTab && this._activeTab.visible) {
- if (this._activeTab == tab)
- return;
- this._activeTab.hide();
+ if(this._activePage) {
+ Tweener.addTween(this._activePage,
+ { opacity: 0,
+ time: 0.1,
+ transition: 'easeOutQuad',
+ onComplete: Lang.bind(this,
+ function() {
+ this._activePage.hide();
+ this._activePage = page;
+ })
+ });
}
- if (tab != this._searchTab) {
- this._activeTab = tab;
- if (this._searchTab.visible) {
- this._searchTab.hide();
- }
- }
+ page.show();
+ Tweener.addTween(page,
+ { opacity: 255,
+ time: 0.1,
+ transition: 'easeOutQuad'
+ });
+ },
- // Only fade when switching between tabs,
- // not when setting the initially selected one.
- if (!tab.visible)
- tab.show(!firstSwitch);
+ _a11yFocusPage: function(page) {
+ this._showAppsButton.checked = page == this._appsPage;
+ page.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
},
- switchTab: function(id) {
- for (let i = 0; i < this._tabs.length; i++)
- if (this._tabs[i].id == id) {
- this._switchTab(this._tabs[i]);
- break;
- }
+ _onShowAppsButtonToggled: function() {
+ if (this.active)
+ this.reset();
+ else
+ this._showPage(this._showAppsButton.checked ? this._appsPage
+ : this._workspacesPage);
},
_resetShowAppsButton: function() {
@@ -307,10 +241,10 @@ const ViewSelector = new Lang.Class({
this.startSearch(event);
} else if (!this.active) {
if (symbol == Clutter.Tab) {
- this._activeTab.page.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
+ this._activePage.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
return true;
} else if (symbol == Clutter.ISO_Left_Tab) {
- this._activeTab.page.navigate_focus(null, Gtk.DirectionType.TAB_BACKWARD, false);
+ this._activePage.navigate_focus(null, Gtk.DirectionType.TAB_BACKWARD, false);
return true;
}
}
@@ -318,7 +252,8 @@ const ViewSelector = new Lang.Class({
},
_searchCancelled: function() {
- this._switchTab(this._activeTab);
+ this._showPage(this._showAppsButton.checked ? this._appsPage
+ : this._workspacesPage);
// Leave the entry focused when it doesn't have any text;
// when replacing a selected search term, Clutter emits
@@ -393,7 +328,6 @@ const ViewSelector = new Lang.Class({
this.reset();
}));
}
- this._switchTab(this._searchTab);
} else {
if (this._iconClickedId > 0)
this._entry.disconnect(this._iconClickedId);
@@ -479,7 +413,7 @@ const ViewSelector = new Lang.Class({
let text = this._text.get_text().replace(/^\s+/g, '').replace(/\s+$/g, '');
this._searchResults.doSearch(text);
- return false;
+ this._showPage(this._searchPage);
},
addSearchProvider: function(provider) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
