Close all tabs button. A few tab bar fixes and optimisations (fdfd762c) · Commits · extjs / jsduck

template/app/History.js

+6 −2

Original line number	Diff line number	Diff line
		@@ -85,12 +85,16 @@ Ext.define("Docs.History", {
		*
		* @param {String} token the part of URL after #
		*/
		push: function(token) {
		push: function(token, opts) {
		token = this.cleanUrl(token);
		if (!/^#!?/.test(token)) {
		token = "#!"+token;
		}
		if (opts && opts.navigate) {
		this.noNavigate = false;
		} else {
		this.noNavigate = true;
		}
		Ext.util.History.add(token);
		},

template/app/controller/Tabs.js

+4 −15

Original line number	Diff line number	Diff line
		@@ -90,7 +90,7 @@ Ext.define('Docs.controller.Tabs', {

		cmp.el.on('mouseleave', function() {
		if (cmp.shouldResize) {
		cmp.resizeTabs();
		cmp.resizeTabs({animate: true});
		}
		});
		},
		@@ -101,7 +101,7 @@ Ext.define('Docs.controller.Tabs', {
		},
		'#tabOverflowMenu menuitem': {
		click: function(cmp) {
		Docs.History.push(cmp.href);
		Docs.History.push(cmp.href, { navigate: true });
		},
		scope: this
		}
		@@ -121,7 +121,7 @@ Ext.define('Docs.controller.Tabs', {
		var tabs = Docs.Settings.get('tabs');
		if (tabs) {
		Ext.Array.forEach(tabs, function(url) {
		this.addTabFromTree(url, {});
		this.addTabFromTree(url, {animate: false});
		}, this);
		}
		Docs.History.notifyTabsLoaded();
		@@ -142,7 +142,6 @@ Ext.define('Docs.controller.Tabs', {
		if (!this.scrollState[url]) {
		this.scrollState[url] = 0;
		}
		this.saveTabs();
		this.getDoctabs().addTab({
		href: treeRecord.raw.url,
		text: treeRecord.raw.text,
		@@ -193,7 +192,6 @@ Ext.define('Docs.controller.Tabs', {
		var url = Ext.get(el).up('.doctab').down('.tabUrl').getAttribute('href');
		url = Docs.History.cleanUrl(url);
		delete this.scrollState[url];
		this.saveTabs();
		Ext.getCmp('doctabs').removeTab(url);
		}, this, {
		delegate: '.close',
		@@ -212,7 +210,7 @@ Ext.define('Docs.controller.Tabs', {
		return;
		}
		var url = Ext.get(el).down('.tabUrl').getAttribute('href');
		Docs.History.push(url);
		Docs.History.push(url, { navigate: true });
		}, this, {
		delegate: '.doctab'
		});
		@@ -241,15 +239,6 @@ Ext.define('Docs.controller.Tabs', {
		*/
		getScrollState: function(url) {
		return this.scrollState[url] \|\| 0;
		},

		// Use the scrollState cache as a source for open tabs.
		// Filter out the always-open tabs and save the others.
		saveTabs: function() {
		var urls = Ext.Object.getKeys(this.scrollState);
		Docs.Settings.set('tabs', Ext.Array.filter(urls, function(url) {
		return /#!\/[a-z]+\/./.test(url);
		}));
		}

		});

template/app/view/Tabs.js

+37 −8

Original line number	Diff line number	Diff line
		@@ -99,6 +99,8 @@ Ext.define('Docs.view.Tabs', {
		if (this.tabs.length > this.maxTabsInBar()) {
		Ext.get('tabOverflow').show();
		}

		this.saveTabs();
		},

		/**
		@@ -142,6 +144,8 @@ Ext.define('Docs.view.Tabs', {
		} else {
		this.removeTabFromBar(url);
		}

		this.saveTabs();
		},

		/**
		@@ -202,6 +206,12 @@ Ext.define('Docs.view.Tabs', {
		this.addToolTips();
		},

		closeAllTabs: function() {
		this.tabs = this.tabsInBar = [ this.activeTab ];
		this.refresh();
		this.saveTabs();
		},

		// Private methods

		tabData: function() {
		@@ -248,7 +258,7 @@ Ext.define('Docs.view.Tabs', {
		docTab.setStyle({ visibility: 'visible' });
		}

		this.resizeTabs();
		this.resizeTabs(opts);
		},

		/**
		@@ -307,12 +317,15 @@ Ext.define('Docs.view.Tabs', {
		});
		}

		Ext.getCmp('tabOverflowMenu').add({
		// Insert before 'close all tabs' button
		var insertIdx = Ext.getCmp('tabOverflowMenu').items.length - 1;

		Ext.getCmp('tabOverflowMenu').insert(insertIdx, {
		text: tab.text,
		iconCls: tab.iconCls,
		origIcon: tab.iconCls,
		href: tab.href,
		cls: 'x-menu-item-checked' + (inTabBar ? '' : ' overflow')
		cls: (inTabBar ? '' : ' overflow')
		});
		},

		@@ -378,14 +391,18 @@ Ext.define('Docs.view.Tabs', {
		* @private
		* Resize tabs in the tab bar
		*/
		resizeTabs: function() {
		resizeTabs: function(opts) {
		this.shouldResize = false;
		Ext.Array.each(Ext.query('.doctab'), function(t){
		var docTab = Ext.get(t);
		if (!docTab.dom.removed && !docTab.hasCls('overview')) {
		if (opts && opts.animate) {
		docTab.animate({
		to: { width: this.tabWidth() }
		});
		} else {
		docTab.setWidth(this.tabWidth());
		}
		}
		}, this);
		},
		@@ -412,7 +429,15 @@ Ext.define('Docs.view.Tabs', {
		menu: {
		id: 'tabOverflowMenu',
		plain: true,
		items: []
		items: [{
		text: 'Close all tabs',
		iconCls: 'close',
		cls: 'overflow close-all',
		handler: function() {
		this.closeAllTabs();
		},
		scope: this
		}]
		}
		});

		@@ -437,6 +462,10 @@ Ext.define('Docs.view.Tabs', {
		});
		},

		saveTabs: function() {
		Docs.Settings.set('tabs', this.tabs);
		},

		/**
		* @private
		* Determines controller name from a URL

template/resources/sass/viewport.scss

+34 −50

Original line number	Diff line number	Diff line
		@@ -782,8 +782,7 @@ a {
		width: 9px;
		height: 29px;
		background: url(../images/tabs.png) no-repeat -8px -141px;
		z-index: 3;
		}
		z-index: 3; }
		.r {
		position: absolute;
		right: 0px;
		@@ -791,8 +790,7 @@ a {
		width: 26px;
		height: 29px;
		background: url(../images/tabs.png) no-repeat 0 -239px;
		z-index: 5;
		}
		z-index: 5; }
		.m {
		z-index: 5;
		position: relative;
		@@ -814,21 +812,17 @@ a {
		color: #2e3841;
		white-space: nowrap;
		overflow: hidden;
		float: left;
		}
		float: left; }
		a.tabUrl {
		padding: 0 14px 0 17px;
		width: 140px;
		overflow: hidden;
		}
		overflow: hidden; }
		span.icn {
		display: block;
		position: absolute;
		left: 3px;
		padding-left: 15px;
		padding-bottom: 0;
		}
		}
		padding-bottom: 0; } }
		a.close {
		position: absolute;
		width: 11px;
		@@ -836,86 +830,76 @@ a {
		top: 8px;
		right: 9px;
		z-index: 6;
		background: url(../images/tabs.png) no-repeat -8px -111px !important;
		}
		background: url(../images/tabs.png) no-repeat -8px -111px !important; }
		a.close.ovr {
		background: url(../images/tabs.png) no-repeat -8px -123px !important;
		}
		}
		background: url(../images/tabs.png) no-repeat -8px -123px !important; } }
		.doctab.highlight {
		border-width: 0;
		.l {
		background: url(../images/tabs.png) no-repeat -9px -271px;
		}
		background: url(../images/tabs.png) no-repeat -9px -271px; }
		.r {
		background: url(../images/tabs.png) no-repeat -9px -335px;
		width: 10px;
		}
		width: 10px; }
		.m {
		background: url(../images/tabs.png) repeat-x 0 -303px;
		}
		}
		background: url(../images/tabs.png) repeat-x 0 -303px; } }
		.doctab.active {
		border-width: 0;
		.l {
		background: url(../images/tabs.png) no-repeat -9px -369px;
		z-index: 6;
		width: 13px;
		}
		width: 13px; }
		.r {
		background: url(../images/tabs.png) no-repeat 3px -479px;
		z-index: 5;
		width: 28px;
		}
		width: 28px; }
		.m {
		background: url(../images/tabs.png) repeat-x 0 -405px;
		z-index: 5;
		}
		}
		z-index: 5; } }
		.doctab.overview .m {
		z-index: 6;
		}
		z-index: 6; }
		.doctab.overview .m a.tabUrl{
		width: auto !important;
		}
		width: auto !important; }
		.doctab.index .m a {
		background: url(../images/tabs.png) no-repeat 1px 1px;
		padding-left: 16px; padding-right: 12px; padding-bottom: 20px;
		}
		padding-left: 16px; padding-right: 12px; padding-bottom: 20px; }
		.doctab.classes .m a {
		background: url(../images/tabs.png) no-repeat 2px -20px;
		padding-left: 16px; padding-right: 12px;
		}
		padding-left: 16px; padding-right: 12px; }
		.doctab.guides .m a {
		background: url(../images/tabs.png) no-repeat 3px -55px;
		padding-left: 16px; padding-right: 12px;
		}
		padding-left: 16px; padding-right: 12px; }
		.doctab.videos .m a {
		background: url(../images/tabs.png) no-repeat 2px -38px;
		padding-left: 16px; padding-right: 12px;
		}
		padding-left: 16px; padding-right: 12px; }
		.doctab.examples .m a {
		background: url(../images/tabs.png) no-repeat 1px -93px;
		padding-left: 16px; padding-right: 12px;
		}
		padding-left: 16px; padding-right: 12px; }

		#tabOverflow {
		position: absolute;
		right: 5px;
		top: 8px;
		button {
		cursor: pointer;
		display: block;
		width: 14px;
		height: 20px;
		background: url(../images/tabs.png) no-repeat -7px -513px;
		border: 0;
		}
		}
		}
		border: 0; } } }

		#tabOverflowMenu {
		.x-menu-item-link {
		padding-top: 5px; }
		.close-all {
		border-top: 1px dotted #aaa;
		font-weight: bold;
		a .x-menu-item-text {
		color: #666; } }
		.x-menu-item-icon.close {
		background: url(../images/x12.png) no-repeat 4px 4px; } }

		.overflow {
		background: #e3e3e3;
		}
		background: #e3e3e3; }

		.all-demos {
		padding: 5px 10px;