From 781ba420c95576ead4e8275b05fb72ea72b0d9c6 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 29 Jul 2015 17:36:07 +0200 Subject: Use own tabs impl in files sidebar Also change style. --- apps/files/css/detailsView.css | 1 + apps/files/js/detailsview.js | 64 +++++++++++++++++++++++++++------- apps/files/js/detailtabview.js | 4 +-- apps/files/tests/js/detailsviewSpec.js | 32 +++++++++++------ 4 files changed, 75 insertions(+), 26 deletions(-) (limited to 'apps') diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css index e89a6a36f4c..78d3357fbd0 100644 --- a/apps/files/css/detailsView.css +++ b/apps/files/css/detailsView.css @@ -41,3 +41,4 @@ right: 0; margin: 15px; } + diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js index 03fe736856e..7b7bd013f9e 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -14,15 +14,17 @@ '
' + '
' + '
' + - '
' + - '
    ' + + '
    ' + + '
      ' + '
    ' + + '
    ' + + '
    ' + '
    ' + ' ' + '
'; var TEMPLATE_TAB_HEADER = - '
  • {{label}}
    • '; + '
  • {{label}}
    • '; /** * @class OCA.Files.DetailsView @@ -69,11 +71,17 @@ */ _detailFileInfoViews: [], + /** + * Id of the currently selected tab + * + * @type string + */ + _currentTabId: null, + /** * Initialize the details view */ initialize: function() { - var self = this; this.$el = $('
    '); this.fileInfo = null; this._tabViews = []; @@ -84,8 +92,10 @@ event.preventDefault(); }); + this.$el.on('click', '.tabHeaders .tabHeader', _.bind(this._onClickTab, this)); + // uncomment to add some dummy tabs for testing - // this._addTestTabs(); + //this._addTestTabs(); }, /** @@ -97,6 +107,27 @@ } }, + _onClickTab: function(e) { + var $target = $(e.target); + if (!$target.hasClass('tabHeader')) { + $target = $target.closest('.tabHeader'); + } + var tabIndex = $target.attr('data-tabindex'); + var targetTab; + if (_.isUndefined(tabIndex)) { + return; + } + + this.$el.find('.tabsContainer .tab').addClass('hidden'); + targetTab = this._tabViews[tabIndex]; + targetTab.$el.removeClass('hidden'); + + this.$el.find('.tabHeaders li').removeClass('selected'); + $target.addClass('selected'); + + e.preventDefault(); + }, + _addTestTabs: function() { for (var j = 0; j < 2; j++) { var testView = new OCA.Files.DetailTabView('testtab' + j); @@ -131,7 +162,7 @@ closeLabel: t('files', 'Close') })); var $tabsContainer = $el.find('.tabsContainer'); - var $tabHeadsContainer = $el.find('.tabHeadsContainer'); + var $tabHeadsContainer = $el.find('.tabHeaders'); var $detailsContainer = $el.find('.detailFileInfoContainer'); // render details @@ -140,14 +171,25 @@ }); if (this._tabViews.length > 0) { + if (!this._currentTab) { + this._currentTab = this._tabViews[0].getId(); + } + // render tabs - _.each(this._tabViews, function(tabView) { + _.each(this._tabViews, function(tabView, i) { // hidden by default - $tabsContainer.append(tabView.get$()); + var $el = tabView.get$(); + var isCurrent = (tabView.getId() === self._currentTab); + if (!isCurrent) { + $el.addClass('hidden'); + } + $tabsContainer.append($el); $tabHeadsContainer.append(self._templateTabHeader({ tabId: tabView.getId(), - label: tabView.getLabel() + tabIndex: i, + label: tabView.getLabel(), + selected: isCurrent })); }); } @@ -155,10 +197,6 @@ // TODO: select current tab this.$el.append($el); - - if (this._tabViews.length > 0) { - $tabsContainer.tabs({}); - } }, /** diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js index 7e0f9eff16f..b9b1dda2ccc 100644 --- a/apps/files/js/detailtabview.js +++ b/apps/files/js/detailtabview.js @@ -59,8 +59,8 @@ throw 'Argument "id" is required'; } this._id = id; - this.$el = $('
    '); - this.$el.attr('id', id); + this.$el = $('
    '); + this.$el.attr('data-tabid', id); }, /** diff --git a/apps/files/tests/js/detailsviewSpec.js b/apps/files/tests/js/detailsviewSpec.js index b00c15032b0..db1e24fd68e 100644 --- a/apps/files/tests/js/detailsviewSpec.js +++ b/apps/files/tests/js/detailsviewSpec.js @@ -64,23 +64,20 @@ describe('OCA.Files.DetailsView tests', function() { }); }); describe('tabs', function() { - it('renders registered tabs', function() { - var testView = new OCA.Files.DetailTabView('test1'); - var testView2 = new OCA.Files.DetailTabView('test2'); + var testView, testView2; + + beforeEach(function() { + testView = new OCA.Files.DetailTabView('test1'); + testView2 = new OCA.Files.DetailTabView('test2'); detailsView.addTabView(testView); detailsView.addTabView(testView2); detailsView.render(); - - expect(detailsView.$el.find('.tabsContainer .detailTabView').length).toEqual(2); + }); + it('renders registered tabs', function() { + expect(detailsView.$el.find('.tab').length).toEqual(2); }); it('updates registered tabs when fileinfo is updated', function() { var tabRenderStub = sinon.stub(OCA.Files.DetailTabView.prototype, 'render'); - var testView = new OCA.Files.DetailTabView('test1'); - var testView2 = new OCA.Files.DetailTabView('test2'); - detailsView.addTabView(testView); - detailsView.addTabView(testView2); - detailsView.render(); - var fileInfo = {id: 5, name: 'test.txt'}; tabRenderStub.reset(); detailsView.setFileInfo(fileInfo); @@ -91,5 +88,18 @@ describe('OCA.Files.DetailsView tests', function() { expect(tabRenderStub.callCount).toEqual(2); tabRenderStub.restore(); }); + it('selects the first tab by default', function() { + expect(detailsView.$el.find('.tabHeader').eq(0).hasClass('selected')).toEqual(true); + expect(detailsView.$el.find('.tabHeader').eq(1).hasClass('selected')).toEqual(false); + expect(detailsView.$el.find('.tab').eq(0).hasClass('hidden')).toEqual(false); + expect(detailsView.$el.find('.tab').eq(1).hasClass('hidden')).toEqual(true); + }); + it('switches the current tab when clicking on tab header', function() { + detailsView.$el.find('.tabHeader').eq(1).click(); + expect(detailsView.$el.find('.tabHeader').eq(0).hasClass('selected')).toEqual(false); + expect(detailsView.$el.find('.tabHeader').eq(1).hasClass('selected')).toEqual(true); + expect(detailsView.$el.find('.tab').eq(0).hasClass('hidden')).toEqual(true); + expect(detailsView.$el.find('.tab').eq(1).hasClass('hidden')).toEqual(false); + }); }); }); -- cgit v1.2.3