diff --git a/template/app/Application.js b/template/app/Application.js index 2199dabe02d8f1abe1ca67478ae6aff3027715b4..cb9798f78f6c83ae7a88f8c540e8654360d3230c 100644 --- a/template/app/Application.js +++ b/template/app/Application.js @@ -52,9 +52,9 @@ Ext.define('Docs.Application', { Docs.initEventTracking(); } - setInterval(function(){ - Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000) - }, 1000) + // setInterval(function(){ + // Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000) + // }, 1000) } }); diff --git a/template/app/controller/Classes.js b/template/app/controller/Classes.js index b28897209ca7eadc884c6ed3d5d2dca2d12b7fc6..b8857d6bcede05b16affa66787e2999b7f678c02 100644 --- a/template/app/controller/Classes.js +++ b/template/app/controller/Classes.js @@ -196,14 +196,14 @@ Ext.define('Docs.controller.Classes', { var cls = matches[1]; var member = matches[2]; + if (this.getOverview()) { + this.getOverview().setLoading(true); + } + if (this.cache[cls]) { this.showClass(this.cache[cls], member); } else { - if (this.getOverview()) { - this.getOverview().setLoading(true); - } - Ext.data.JsonP.request({ url: this.getBaseUrl() + '/output/' + cls + '.js', callbackName: cls.replace(/\./g, '_'), @@ -228,6 +228,10 @@ Ext.define('Docs.controller.Classes', { this.getTree().selectUrl("/api/"+cls.name); this.fireEvent('showClass', cls.name); + + var iconCls = this.getTree().findRecordByUrl("/api/"+cls.name); + var clsName = cls.name.match(/([^\.]+)$/)[0]; + Ext.getCmp('doctabs').addTab({cls: '#/api/' + cls.name, clsName: clsName, icn: iconCls.raw.iconCls}) } if (anchor) { diff --git a/template/app/controller/Tabs.js b/template/app/controller/Tabs.js index 71d5835ef7857ac63bbf480cc9e5e3389e17f0be..6fb63c7c79d22f0bf66050107447e378eb6e8375 100644 --- a/template/app/controller/Tabs.js +++ b/template/app/controller/Tabs.js @@ -5,11 +5,62 @@ Ext.define('Docs.controller.Tabs', { this.control({ 'container [componentCls=doctabs]': { afterrender: function(cmp) { + cmp.el.addListener('mouseover', function(event, el) { + Ext.get(el).addCls('ovr'); + }, this, { + delegate: '.icn' + }); + cmp.el.addListener('mouseout', function(event, el) { + Ext.get(el).removeCls('ovr'); + }, this, { + delegate: '.icn' + }); + cmp.el.addListener('click', function(evt, el) { + cmp.justClosed = true; + var docTab = Ext.get(el).up('.doctab'); + docTab.animate({ + to: { top: 30 } + }).animate({ + to: { width: 10 }, + listeners: { + afteranimate: function() { + Ext.getCmp('doctabs').removeTab(docTab.down('.docClass').getAttribute('href')); + docTab.remove(); + }, + scope: this + } + }); + }, this, { + delegate: '.icn', + preventDefault: true + }); + cmp.el.addListener('click', function(event, el) { + if (cmp.justClosed) { + cmp.justClosed = false; + return; + } Ext.Array.each(Ext.get(el).up('.doctabs').query('.doctab'), function(t) { Ext.get(t).removeCls('active'); }); - Ext.get(el).addCls('active') + Ext.get(el).addCls('active'); + }, this, { + delegate: '.doctab' + }); + + cmp.el.addListener('mouseover', function(event, el) { + var icn = Ext.get(el).down('.icn'); + if (icn) { + icn.addCls('close'); + } + }, this, { + delegate: '.doctab' + }); + cmp.el.addListener('mouseout', function(event, el) { + var icn = Ext.get(el).down('.icn'); + if (icn) { + icn.removeCls('close'); + } }, this, { delegate: '.doctab' }); diff --git a/template/app/view/Tabs.js b/template/app/view/Tabs.js index e63507f14af12d88ac017de948182642038dde1a..29649af3e3df8cba2d812989e61ea77a3b534747 100644 --- a/template/app/view/Tabs.js +++ b/template/app/view/Tabs.js @@ -1,56 +1,114 @@ Ext.define('Docs.view.Tabs', { extend: 'Ext.container.Container', + alias: 'widget.doctabs', + id: 'doctabs', - componentCls: 'hover-menu', - itemSelector: 'div.item', - deferEmptyText: false, - - /** - * @cfg {Number} colHeight maximum number of items in one column. - * When more than that, items are placed into multiple columns. - * Defaults to 25 (current maximum length of history). - */ - columnHeight: 25, - /** - * @cfg {Boolean} showCloseButtons true to show "x" after each menu item. - * Defaults to false. - */ - showCloseButtons: false, + componentCls: 'doctabs', + + openTabs: [], initComponent: function() { - this.renderTo = Ext.getBody(); - - this.tpl = new Ext.XTemplate( - '', - '', - '', - '', - '
', - '', - '
', - '{[this.renderLink(values)]}', - '', - 'x', - '', - '
', - // Start new column when columnHeight reached - '', - '		', - '', - '', - '
', - { - columnHeight: this.columnHeight, - showCloseButtons: this.showCloseButtons, - renderLink: function(values) { - var url = values.url || values.cls; - var label = values.label || values.cls; - var stat = values['static'] ? 'static' : ""; - return Ext.String.format('{1} {2}', url, label, stat); - } - } - ); + + this.html = [ + '
 
', + '
 
', + '
 
', + '
 
', + '
 
', + '
 
' + ].join(''); this.callParent(); + }, + + addTab: function(item) { + + if (!Ext.Array.contains(this.openTabs, item.cls)) { + var tpl = Ext.create('Ext.XTemplate', + '' + ) + var docTab = Ext.get(tpl.append(this.el.dom, item)); + var width = docTab.getWidth(); + docTab.setStyle('width', '10px') + docTab.setStyle({visibility: 'visible'}) + docTab.animate({ + to: { width: width } + }); + + this.openTabs.push(item.cls); + } + this.activateTab(item.cls) + }, + + activateTab: function(url) { + this.activeTab = Ext.Array.indexOf(this.openTabs, url); + Ext.Array.each(Ext.query('.doctab a[class=docClass]'), function(d) { + Ext.get(d).up('.doctab').removeCls('active'); + }); + var activeTab = Ext.query('.doctab a[href="' + url + '"]')[0]; + if (activeTab) Ext.get(activeTab).up('.doctab').addCls('active'); + }, + + removeTab: function(url) { + var idx = Ext.Array.indexOf(this.openTabs, url); + if (idx !== false) { + Ext.Array.erase(this.openTabs, idx, 1); + if (this.activeTab > idx) this.activeTab -= 1; + } + // console.log("Total", this.openTabs.length, "Clicked: ", idx, "Active: ", this.activeTab, this.openTabs) + if (idx == this.activeTab) { + if (this.openTabs.length == 0) { + // Go to home screen + } else { + if (idx == 0) idx = 1; + Docs.App.getController('Classes').handleUrlClick(this.openTabs[idx - 1], {}); + } + } } }); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js index 60c2f3f169150ed1efe39404a171a674cb4cb9da..b6c68e4164621f903d7c821883c005508701007a 100644 --- a/template/app/view/Viewport.js +++ b/template/app/view/Viewport.js @@ -10,6 +10,7 @@ Ext.define('Docs.view.Viewport', { 'Docs.view.index.Container', 'Docs.view.tree.Tree', 'Docs.view.FavoritesPanel', + 'Docs.view.Tabs', 'Docs.Favorites', 'Docs.Settings', 'Docs.History' @@ -69,22 +70,8 @@ Ext.define('Docs.view.Viewport', { }, { - xtype: 'container', - componentCls: 'doctabs', - width: '100%', - html: [ - '
 
', - '
 
', - '
 
', - '
 
', - '
 
', - '
', - '
Base
', - '
Grid
', - '
AJAX
', - '
Panel
', - '
ComboBox
' - ].join('') + xtype: 'doctabs', + width: '100%' } ] }, diff --git a/template/resources/images/data-package.png b/template/resources/images/data-package.png deleted file mode 100644 index 472cb3630e11e52fd4a8477d5ed5106df154b7e3..0000000000000000000000000000000000000000 Binary files a/template/resources/images/data-package.png and /dev/null differ diff --git a/template/resources/images/headBG.png b/template/resources/images/headBG.png deleted file mode 100644 index 7835bdecbe3eeb720c7051aa4f7aacd975d9fe0b..0000000000000000000000000000000000000000 Binary files a/template/resources/images/headBG.png and /dev/null differ diff --git a/template/resources/images/header.gif b/template/resources/images/header.gif deleted file mode 100644 index 192f19864cd86e9b16746b4b875e3f299a184883..0000000000000000000000000000000000000000 Binary files a/template/resources/images/header.gif and /dev/null differ diff --git a/template/resources/images/icon.png b/template/resources/images/icon.png deleted file mode 100644 index 600de0d25277d115e129b74eab320879ce7d4939..0000000000000000000000000000000000000000 Binary files a/template/resources/images/icon.png and /dev/null differ diff --git a/template/resources/images/model.png b/template/resources/images/model.png deleted file mode 100644 index 83546390ed74bb5902ccb608d9d352ca5a98d292..0000000000000000000000000000000000000000 Binary files a/template/resources/images/model.png and /dev/null differ diff --git a/template/resources/images/root-lines.png b/template/resources/images/root-lines.png deleted file mode 100644 index 3461aad2baf600d7fee295ac1827956fba8228f9..0000000000000000000000000000000000000000 Binary files a/template/resources/images/root-lines.png and /dev/null differ diff --git a/template/resources/images/tabsDELETE.png b/template/resources/images/tabsDELETE.png deleted file mode 100644 index d4f451c5ccf73418c7eb401b6278a503d6673ed8..0000000000000000000000000000000000000000 Binary files a/template/resources/images/tabsDELETE.png and /dev/null differ diff --git a/template/resources/images/x122.png b/template/resources/images/x122.png new file mode 100644 index 0000000000000000000000000000000000000000..3a1416d7c6ff59992ed52d3d57bb3c955cf8bf84 Binary files /dev/null and b/template/resources/images/x122.png differ diff --git a/template/resources/sass/viewport.scss b/template/resources/sass/viewport.scss index 571f6c92419e164a4b4089fb41bfb8ea59995dd2..6916158e81186ea3e9ed6368372a9b592c9598a8 100644 --- a/template/resources/sass/viewport.scss +++ b/template/resources/sass/viewport.scss @@ -776,12 +776,18 @@ a { .doctabs { @include icons; padding-left: 10px; + height: 19px; + position: relative; .doctab { position: relative; - display: inline-block; + display: block; + float: left; + overflow: hidden; + top: 0; margin-left: -8px; cursor: pointer; + height: 28px; .l { position: absolute; top: 0; @@ -803,20 +809,36 @@ a { .m { z-index: 5; padding: 6px 12px 0 6px; - text-align: center; margin: 0 7px; background: url(../images/tab-m.png) repeat-x; height: 29px; + overflow: hidden; + white-space: nowrap; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); font-family: $docs-font; font-weight: bold; font-size: 11px; a { - color: #2e3841; - padding-left: 22px; padding-bottom: 5px; line-height: 16px; display: block; + color: #2e3841; + white-space: nowrap; + overflow: hidden; + } + a.docClass { + padding-left: 7px; + } + a.icn { + padding-left: 15px; + padding-bottom: 0; + float: left; + } + a.icn.close { + background: url(../images/x122.png) no-repeat 2px -14px !important; + } + a.icn.close.ovr { + background: url(../images/x122.png) no-repeat 2px 2px !important; } } } @@ -839,7 +861,7 @@ a { } .doctab.home .m a { background: url(../images/tab-icons.png) no-repeat 7px 0; - padding-left: 16px; padding-right: 4px; + padding-left: 16px; padding-right: 4px; padding-bottom: 20px; } .doctab.api .m a { background: url(../images/tab-icons.png) no-repeat 8px -20px;