diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js index 29e93b32c..89f6f28e3 100644 --- a/apps/common/main/lib/component/Tab.js +++ b/apps/common/main/lib/component/Tab.js @@ -82,6 +82,10 @@ define([ this.$el.addClass('active'); }, + isSelected: function() { + return this.$el.hasClass('selected'); + }, + deactivate: function(){ this.$el.removeClass('active'); }, @@ -110,6 +114,11 @@ define([ this.$el.removeClass(cls); }, + toggleClass: function(cls) { + if (cls.length) + this.$el.toggleClass(cls); + }, + hasClass: function(cls) { return this.$el.hasClass(cls); }, diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 0c6868add..b4d3f7803 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -69,12 +69,20 @@ define([ }; StateManager.prototype.attach = function (tab) { - tab.changeState = $.proxy(function () { - this.trigger('tab:change', tab); - this.bar.$el.find('ul > li.active').removeClass('active'); - tab.activate(); + tab.changeState = $.proxy(function (select) { + if (select) { + tab.toggleClass('selected'); + } else { + if (!tab.isSelected()) { + this.bar.$el.find('ul > li.selected').removeClass('selected'); + tab.addClass('selected'); + } + this.trigger('tab:change', tab); + this.bar.$el.find('ul > li.active').removeClass('active'); + tab.activate(); - this.bar.trigger('tab:changed', this.bar, this.bar.tabs.indexOf(tab), tab); + this.bar.trigger('tab:changed', this.bar, this.bar.tabs.indexOf(tab), tab); + } }, this); var dragHelper = new (function() { @@ -283,10 +291,22 @@ define([ }); tab.$el.on({ - click: $.proxy(function () { + click: $.proxy(function (event) { if (!tab.disabled && !tab.$el.hasClass('active')) { if (tab.control == 'manual') { this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab); + } else if (event.ctrlKey || event.metaKey) { + tab.changeState(true); + } else if (event.shiftKey) { + this.bar.$el.find('ul > li.selected').removeClass('selected'); + var $active = this.bar.$el.find('ul > li.active'), + indexAct = $active.index(), + indexCur = tab.sheetindex; + var startIndex = (indexCur > indexAct) ? indexAct : indexCur, + endIndex = (indexCur > indexAct) ? indexCur : indexAct; + for(var i = startIndex; i <= endIndex; i++) { + this.bar.tabs[i].changeState(true); + } } else { tab.changeState(); } diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index da2c0b79d..58dfef726 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -194,6 +194,14 @@ } } + &.selected { + > a { + border-bottom-color: @body-bg; + background-color: @body-bg; + box-shadow: 0px 2px 0 @gray-deep inset; + } + } + &.coauth-locked { > a { outline: none;