From b1a6e69991259d6682489a5eaf7b8372533af909 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 13 Feb 2020 12:09:05 +0300 Subject: [PATCH] [SSE] Move sheet: drag and drop --- apps/common/main/lib/component/Tab.js | 4 +- apps/common/main/lib/component/TabBar.js | 20 +++++--- apps/common/main/resources/less/tabbar.less | 8 +-- .../main/app/controller/Statusbar.js | 8 +-- .../main/app/view/Statusbar.js | 50 ++++++++++++++++--- .../main/resources/less/statusbar.less | 40 +++++++-------- 6 files changed, 87 insertions(+), 43 deletions(-) diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js index 199911557..5fa0194b6 100644 --- a/apps/common/main/lib/component/Tab.js +++ b/apps/common/main/lib/component/Tab.js @@ -53,7 +53,7 @@ define([ this.cls = ''; this.index = -1; this.template = _.template(['
  • ', - '<%- label %>', + '<%- label %>', '
    • '].join('')); this.initialize.call(this, opts); @@ -125,7 +125,7 @@ define([ }, setCaption: function(text) { - this.$el.find('> a').text(text); + this.$el.find('> span').text(text); } }); diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index b9563e70f..40f5e29c2 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -233,15 +233,18 @@ define([ this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs); }, this.bar), mousedown: $.proxy(function (e) { - if ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey) + if ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey) { + var lockDrag = tab.isLockTheDrag; + this.bar.selectTabs.forEach(function (item) { + if (item.isLockTheDrag) { + lockDrag = true; + } + }); + this.bar.$el.find('ul > li > span').attr('draggable', !lockDrag); tab.changeState(); - /*if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { - if (!tab.isLockTheDrag) { - if (!e.ctrlKey && !e.metaKey && !e.shiftKey) - tab.changeState(); - dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs); - } - }*/ + } else { + this.bar.$el.find('ul > li > span').attr('draggable', 'false'); + } this.bar.trigger('tab:drag', this.bar.selectTabs); }, this) }); @@ -263,6 +266,7 @@ define([ event.preventDefault(); // Necessary. Allows us to drop. } event.dataTransfer.dropEffect = 'move'; + this.bar.$el.find('.mousemove').removeClass('mousemove right'); $(e.currentTarget).parent().addClass('mousemove'); return false; }, this), diff --git a/apps/common/main/resources/less/tabbar.less b/apps/common/main/resources/less/tabbar.less index f7059ca7b..b3a5ac2c2 100644 --- a/apps/common/main/resources/less/tabbar.less +++ b/apps/common/main/resources/less/tabbar.less @@ -4,10 +4,10 @@ > li { float: none; - display: inline; + display: inline-block; &.active { - > a, > a:hover, > a:focus { + > span, > span:hover, > span:focus { background-color: #fff; color: #000; border-color: #fff; @@ -19,7 +19,7 @@ transition: left .2s; } - > a { + > span { display: inline; background-color: #7a7a7a; color: #fff; @@ -50,7 +50,7 @@ > li { vertical-align: middle; - > a { + > span { padding-bottom: 1px; border-radius: 0 0 4px 4px; } diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index cb2809a3c..0b62d0794 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -159,6 +159,7 @@ define([ // else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex); } else { item.disable(locked); + item.$el.children(':first-child').attr('draggable', locked?'false':'true'); } } }, @@ -170,6 +171,7 @@ define([ if (index == tab.sheetindex) { tab[locked?'addClass':'removeClass']('coauth-locked'); tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable); + tab.$el.children(':first-child').attr('draggable', tab.isLockTheDrag?'false':'true'); break; } } @@ -550,7 +552,7 @@ define([ if ('transparent' === color) { this.api.asc_setWorksheetTabColor(null, arrIndex); selectTabs.forEach(function (tab) { - tab.$el.find('a').css('box-shadow', ''); + tab.$el.find('span').css('box-shadow', ''); }); } else { var asc_clr = Common.Utils.ThemeColor.getRgbColor(color); @@ -681,9 +683,9 @@ define([ color = '0px 4px 0 ' + color + ' inset'; } - tab.$el.find('a').css('box-shadow', color); + tab.$el.find('span').css('box-shadow', color); } else { - tab.$el.find('a').css('box-shadow', ''); + tab.$el.find('span').css('box-shadow', ''); } } }, diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 5eeef398d..0505f69ef 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -202,13 +202,27 @@ define([ }, this), 'tab:dragstart' : _.bind(function (dataTransfer, selectTabs) { - var tabs = selectTabs, - arrTabs = [], + var arrTabs = [], arrName = [], me = this; - tabs.forEach(function (item) { - arrTabs.push(item.sheetindex); - arrName.push(me.api.asc_getWorksheetName(item.sheetindex)); + var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1; + while (++i < wc) { + if (!this.api.asc_isWorksheetHidden(i)) { + items.push({ + value: me.api.asc_getWorksheetName(i), + inindex: i + }); + } + } + var arrSelectIndex = []; + selectTabs.forEach(function (item) { + arrSelectIndex.push(item.sheetindex); + }); + items.forEach(function (item) { + if (arrSelectIndex.indexOf(item.inindex) !== -1) { + arrTabs.push(item.inindex); + arrName.push(item.value); + } }); var stringSheet, stringSheetJson, @@ -231,7 +245,30 @@ define([ if (Common.Utils.InternalSettings.get("sse-doc-info-key") === key) { this.api.asc_moveWorksheet(index, arrIndex); } else { - this.api.asc_EndMoveSheet(index, arrNames, arrSheets); + var names = [], wc = this.api.asc_getWorksheetsCount(); + while (wc--) { + names.push(this.api.asc_getWorksheetName(wc).toLowerCase()); + } + var newNames = []; + arrNames.forEach(function (name) { + var ind = 0, + name = name; + var first = name; + if (names.indexOf(name.toLowerCase()) !== -1) { + while (true) { + if (names.indexOf(name.toLowerCase()) === -1) { + newNames.push(name); + break; + } else { + ind++; + name = first + '(' + ind + ')'; + } + } + } else { + newNames.push(name); + } + }); + this.api.asc_EndMoveSheet(index, newNames, arrSheets); } }, this) }); @@ -391,6 +428,7 @@ define([ this.tabbar.setTabVisible(sindex); this.btnAddWorksheet.setDisabled(me.mode.isDisconnected || me.api.asc_isWorkbookLocked() || me.api.isCellEdited); + $('#status-addtabs-box').css('border-right', 'none'); $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100))); me.fireEvent('sheet:changed', [me, sindex]); diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index 138443085..83fe622b0 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -159,11 +159,7 @@ > li { background-color: @gray-light; - &:first-child > a { - border-left: 0 none; - } - - > a { + > span { display: inline-block; .border-radius(0); padding: 0 10px 0; @@ -171,9 +167,9 @@ margin-right: -1px; background-color: @gray-light; outline: none; - border-left-color: @gray-dark; - border-right-color: @gray-dark; - border-top-color: @gray-dark; + border-left: 1px solid @gray-dark; + border-right: 1px solid @gray-dark; + border-top: 1px solid @gray-dark; &:hover { border-top-color: @gray-dark; @@ -183,7 +179,7 @@ } &.active { - > a { + > span { border-bottom-color: @body-bg; background-color: @body-bg; outline: none; @@ -195,7 +191,7 @@ } &.selected { - > a { + > span { border-bottom-color: @body-bg; background-color: @body-bg; box-shadow: 0px 4px 0 #49795d inset; @@ -205,14 +201,14 @@ &.coauth-locked { vertical-align: top; &.active { - > a { + > span { border-top-width: 1px; } } - > a { + > span { outline: none; } - > a:after { + > span:after { position: absolute; content: ''; width: 7px; @@ -228,24 +224,28 @@ &.disabled { opacity: 0.5; - > a { + > span { cursor: default; } } &:not(.active) { - > a { + > span { color: @gray-darker; } } &.mousemove { - > a { - background: linear-gradient(to right, #49795d, @gray-light 3px); + > span { + border-left: 3px solid #49795d; + padding-left: 8px; } &.right { - > a { - background: linear-gradient(to left, #49795d, @gray-light 3px); + > span { + border-left: 1px solid @gray-dark; + border-right: 3px solid #49795d; + padding-right: 8px; + padding-left: 10px; } } } @@ -303,7 +303,7 @@ li { text-align: center; - > a { + > span { padding-left: 15px; padding-right: 15px; }