Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Move sheet: drag and drop

Browse source
This commit is contained in:
Julia Svinareva 2020-02-13 12:09:05 +03:00
parent 8cefc20a94
commit b1a6e69991
6 changed files with 87 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/lib/component/Tab.js
View file

@ -53,7 +53,7 @@ define([
this.cls = ''; this.cls = '';
this.index = -1; this.index = -1;
this.template = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">', this.template = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
'<a title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></a>', '<span title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
'</li>'].join('')); '</li>'].join(''));
this.initialize.call(this, opts); this.initialize.call(this, opts);
@ -125,7 +125,7 @@ define([
}, },
setCaption: function(text) { setCaption: function(text) {
this.$el.find('> a').text(text); this.$el.find('> span').text(text);
} }
}); });

20
apps/common/main/lib/component/TabBar.js
View file

@ -233,15 +233,18 @@ define([
this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs); this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs);
}, this.bar), }, this.bar),
mousedown: $.proxy(function (e) { mousedown: $.proxy(function (e) {
if ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey) if ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
tab.changeState(); var lockDrag = tab.isLockTheDrag;
/*if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { this.bar.selectTabs.forEach(function (item) {
if (!tab.isLockTheDrag) { if (item.isLockTheDrag) {
if (!e.ctrlKey && !e.metaKey && !e.shiftKey) lockDrag = true;
tab.changeState(); }
dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs); });
this.bar.$el.find('ul > li > span').attr('draggable', !lockDrag);
tab.changeState();
} else {
this.bar.$el.find('ul > li > span').attr('draggable', 'false');
} }
}*/
this.bar.trigger('tab:drag', this.bar.selectTabs); this.bar.trigger('tab:drag', this.bar.selectTabs);
}, this) }, this)
}); });
@ -263,6 +266,7 @@ define([
event.preventDefault(); // Necessary. Allows us to drop. event.preventDefault(); // Necessary. Allows us to drop.
} }
event.dataTransfer.dropEffect = 'move'; event.dataTransfer.dropEffect = 'move';
this.bar.$el.find('.mousemove').removeClass('mousemove right');
$(e.currentTarget).parent().addClass('mousemove'); $(e.currentTarget).parent().addClass('mousemove');
return false; return false;
}, this), }, this),

8
apps/common/main/resources/less/tabbar.less
View file

@ -4,10 +4,10 @@
> li { > li {
float: none; float: none;
display: inline; display: inline-block;
&.active { &.active {
> a, > a:hover, > a:focus { > span, > span:hover, > span:focus {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
border-color: #fff; border-color: #fff;
@ -19,7 +19,7 @@
transition: left .2s; transition: left .2s;
} }
> a { > span {
display: inline; display: inline;
background-color: #7a7a7a; background-color: #7a7a7a;
color: #fff; color: #fff;
@ -50,7 +50,7 @@
> li { > li {
vertical-align: middle; vertical-align: middle;
> a { > span {
padding-bottom: 1px; padding-bottom: 1px;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }

8
apps/spreadsheeteditor/main/app/controller/Statusbar.js
View file

@ -159,6 +159,7 @@ define([
// else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex); // else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex);
} else { } else {
item.disable(locked); item.disable(locked);
item.$el.children(':first-child').attr('draggable', locked?'false':'true');
} }
} }
}, },
@ -170,6 +171,7 @@ define([
if (index == tab.sheetindex) { if (index == tab.sheetindex) {
tab[locked?'addClass':'removeClass']('coauth-locked'); tab[locked?'addClass':'removeClass']('coauth-locked');
tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable); tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable);
tab.$el.children(':first-child').attr('draggable', tab.isLockTheDrag?'false':'true');
break; break;
} }
} }
@ -550,7 +552,7 @@ define([
if ('transparent' === color) { if ('transparent' === color) {
this.api.asc_setWorksheetTabColor(null, arrIndex); this.api.asc_setWorksheetTabColor(null, arrIndex);
selectTabs.forEach(function (tab) { selectTabs.forEach(function (tab) {
tab.$el.find('a').css('box-shadow', ''); tab.$el.find('span').css('box-shadow', '');
}); });
} else { } else {
var asc_clr = Common.Utils.ThemeColor.getRgbColor(color); var asc_clr = Common.Utils.ThemeColor.getRgbColor(color);
@ -681,9 +683,9 @@ define([
color = '0px 4px 0 ' + color + ' inset'; color = '0px 4px 0 ' + color + ' inset';
} }
tab.$el.find('a').css('box-shadow', color); tab.$el.find('span').css('box-shadow', color);
} else { } else {
tab.$el.find('a').css('box-shadow', ''); tab.$el.find('span').css('box-shadow', '');
} }
} }
}, },

50
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -202,13 +202,27 @@ define([
}, this), }, this),
'tab:dragstart' : _.bind(function (dataTransfer, selectTabs) { 'tab:dragstart' : _.bind(function (dataTransfer, selectTabs) {
var tabs = selectTabs, var arrTabs = [],
arrTabs = [],
arrName = [], arrName = [],
me = this; me = this;
tabs.forEach(function (item) { var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1;
arrTabs.push(item.sheetindex); while (++i < wc) {
arrName.push(me.api.asc_getWorksheetName(item.sheetindex)); 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, var stringSheet,
stringSheetJson, stringSheetJson,
@ -231,7 +245,30 @@ define([
if (Common.Utils.InternalSettings.get("sse-doc-info-key") === key) { if (Common.Utils.InternalSettings.get("sse-doc-info-key") === key) {
this.api.asc_moveWorksheet(index, arrIndex); this.api.asc_moveWorksheet(index, arrIndex);
} else { } 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) }, this)
}); });
@ -391,6 +428,7 @@ define([
this.tabbar.setTabVisible(sindex); this.tabbar.setTabVisible(sindex);
this.btnAddWorksheet.setDisabled(me.mode.isDisconnected || me.api.asc_isWorkbookLocked() || me.api.isCellEdited); 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))); $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100)));
me.fireEvent('sheet:changed', [me, sindex]); me.fireEvent('sheet:changed', [me, sindex]);

40
apps/spreadsheeteditor/main/resources/less/statusbar.less
View file

@ -159,11 +159,7 @@
> li { > li {
background-color: @gray-light; background-color: @gray-light;
&:first-child > a { > span {
border-left: 0 none;
}
> a {
display: inline-block; display: inline-block;
.border-radius(0); .border-radius(0);
padding: 0 10px 0; padding: 0 10px 0;
@ -171,9 +167,9 @@
margin-right: -1px; margin-right: -1px;
background-color: @gray-light; background-color: @gray-light;
outline: none; outline: none;
border-left-color: @gray-dark; border-left: 1px solid @gray-dark;
border-right-color: @gray-dark; border-right: 1px solid @gray-dark;
border-top-color: @gray-dark; border-top: 1px solid @gray-dark;
&:hover { &:hover {
border-top-color: @gray-dark; border-top-color: @gray-dark;
@ -183,7 +179,7 @@
} }
&.active { &.active {
> a { > span {
border-bottom-color: @body-bg; border-bottom-color: @body-bg;
background-color: @body-bg; background-color: @body-bg;
outline: none; outline: none;
@ -195,7 +191,7 @@
} }
&.selected { &.selected {
> a { > span {
border-bottom-color: @body-bg; border-bottom-color: @body-bg;
background-color: @body-bg; background-color: @body-bg;
box-shadow: 0px 4px 0 #49795d inset; box-shadow: 0px 4px 0 #49795d inset;
@ -205,14 +201,14 @@
&.coauth-locked { &.coauth-locked {
vertical-align: top; vertical-align: top;
&.active { &.active {
> a { > span {
border-top-width: 1px; border-top-width: 1px;
} }
} }
> a { > span {
outline: none; outline: none;
} }
> a:after { > span:after {
position: absolute; position: absolute;
content: ''; content: '';
width: 7px; width: 7px;
@ -228,24 +224,28 @@
&.disabled { &.disabled {
opacity: 0.5; opacity: 0.5;
> a { > span {
cursor: default; cursor: default;
} }
} }
&:not(.active) { &:not(.active) {
> a { > span {
color: @gray-darker; color: @gray-darker;
} }
} }
&.mousemove { &.mousemove {
> a { > span {
background: linear-gradient(to right, #49795d, @gray-light 3px); border-left: 3px solid #49795d;
padding-left: 8px;
} }
&.right { &.right {
> a { > span {
background: linear-gradient(to left, #49795d, @gray-light 3px); border-left: 1px solid @gray-dark;
border-right: 3px solid #49795d;
padding-right: 8px;
padding-left: 10px;
} }
} }
} }
@ -303,7 +303,7 @@
li { li {
text-align: center; text-align: center;
> a { > span {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }