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

Merge pull request #1598 from ONLYOFFICE/fix/bugfix

Browse source 
Fix/bugfix
This commit is contained in:
Julia Radzhabova 2022-02-28 16:11:27 +03:00 committed by GitHub
parent f90820e887 336ff3681e
commit 485e2f4c42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 275 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -129,7 +129,7 @@ define([
this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
this.fillControls = [];
this.gradientColorsStr="";
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
this.render();
},
@ -468,9 +468,13 @@ define([
rawData = record;
}
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type, true);
@ -1223,13 +1227,13 @@ define([
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
if (this.mnuDirectionPicker.dataViewItems.length == 1)
this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
else
this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
var type = item.model.get('type') + 90;
item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
@ -1397,9 +1401,12 @@ define([
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ type:2, subtype:5}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1424,8 +1431,8 @@ define([
allowScrollbar: false,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#shape-button-direction'));

82
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -108,6 +108,8 @@ define([
this.BorderSize = 0;
this.BorderType = Asc.c_oDashType.solid;
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
DE.getCollection('Common.Collections.TextArt').bind({
reset: this.fillTextArt.bind(this)
});
@ -278,10 +280,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 174;
var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.typeGradient = (record) ? this.GradLinearDirectionType + 90 : -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -290,9 +291,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 58;
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
if (this.GradRadialDirectionIdx>=0)
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(0, true);
this.numGradientAngle.setDisabled(true);
}
@ -332,8 +333,14 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
//this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type, true);
@ -612,7 +619,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -623,10 +630,7 @@ define([
this.GradLinearDirectionType=value;
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.typeGradient = (record)? value + 90 : -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -659,10 +663,17 @@ define([
me.GradColor.values[index] = position;
}
});
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -830,6 +841,26 @@ define([
}
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
else if (this.typeGradient == 2)
this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
else
this.btnDirection.$icon.css({
'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
});
},
createDelayedControls: function() {
var me = this;
@ -904,18 +935,21 @@ define([
this.lockedControls.push(this.cmbGradType);
this._viewDataLinear = [
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
{ type:45, subtype:-1},
{ type:90, subtype:4},
{ type:135, subtype:5},
{ type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ type:180, subtype:1},
{ type:315, subtype:2},
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -938,7 +972,9 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#textart-button-direction'));

28
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -448,8 +448,13 @@ define([
rawData = record;
}
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type, true);
@ -536,13 +541,13 @@ define([
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
if (this.mnuDirectionPicker.dataViewItems.length == 1)
this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
else
this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
var type = item.model.get('type') + 90;
item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
@ -1302,9 +1307,12 @@ define([
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ type:2, subtype:5}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1328,8 +1336,8 @@ define([
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg, ' + me.gradientColorsStr + ' )'
+' <%} else {%> radial-gradient( ' + me.gradientColorsStr + ' 70%) <%}%>;"></div>')
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#shape-button-direction'));

30
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -110,7 +110,7 @@ define([
this.textureNames = [this.txtCanvas, this.txtCarton, this.txtDarkFabric, this.txtGrain, this.txtGranite, this.txtGreyPaper,
this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
this.gradientColorsStr="";
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90;
this.render();
@ -519,8 +519,13 @@ define([
rawData = record;
}
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type, true);
@ -607,13 +612,13 @@ define([
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
if (this.mnuDirectionPicker.dataViewItems.length == 1)
this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
else
this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
var type = item.model.get('type') + 90;
item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
@ -799,9 +804,12 @@ define([
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ type:2, subtype:5}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -825,8 +833,8 @@ define([
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#slide-button-direction'));

86
apps/presentationeditor/main/app/view/TextArtSettings.js
View file

@ -129,6 +129,8 @@ define([
this.TransformSettings = $('.textart-transform');
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
PE.getCollection('Common.Collections.TextArt').bind({
reset: this.fillTextArt.bind(this)
});
@ -397,10 +399,7 @@ define([
this.mnuDirectionPicker.restoreHeight = 174;
var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.typeGradient = (record) ? this.GradLinearDirectionType + 90 : -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -409,9 +408,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 58;
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
if (this.GradRadialDirectionIdx>=0)
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(0, true);
this.numGradientAngle.setDisabled(true);
}
@ -451,7 +450,13 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@ -528,6 +533,14 @@ define([
this.api.setEndPointHistory();
this._gradientApplyFunc();
}
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index < slider.thumbs.length; index++) {
arrGrCollors.push(slider.getColorValue(index)+ ' '+ slider.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(slider, arrGrCollors.join(', '));
this._sendUndoPoint = true;
},
@ -805,7 +818,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -816,10 +829,7 @@ define([
this.GradLinearDirectionType=value;
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.typeGradient = (record)? value + 90 : -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -852,10 +862,17 @@ define([
me.GradColor.values[index] = position;
}
});
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -1076,6 +1093,26 @@ define([
}
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
else if (this.typeGradient == 2)
this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
else
this.btnDirection.$icon.css({
'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
});
},
createDelayedControls: function() {
var me = this;
@ -1218,18 +1255,21 @@ define([
this.lockedControls.push(this.cmbGradType);
this._viewDataLinear = [
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
{ type:45, subtype:-1},
{ type:90, subtype:4},
{ type:135, subtype:5},
{ type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ type:180, subtype:1},
{ type:315, subtype:2},
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1252,7 +1292,9 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#textart-button-direction'));

20
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -92,7 +92,7 @@ define([
this.GradColor = { values: [0, 100], colors: ['000000', 'ffffff'], currentIdx: 0};
this.fillControls = [];
this.gradientColorsStr="";
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90;
this.render();
@ -242,6 +242,9 @@ define([
{ offsetx: 50, offsety: 100, type:270, subtype:3},
{ offsetx: 100, offsety: 100, type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this.btnDirection = new Common.UI.Button({
cls : 'btn-large-dataview',
@ -263,7 +266,8 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" ></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>);"></div>')
});
});
this.btnDirection.render($('#cell-button-direction'));
@ -1080,15 +1084,13 @@ define([
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
if (this.mnuDirectionPicker.dataViewItems.length == 1)
this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
else
this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
var type = item.model.get('type') + 90;
item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});

30
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -124,7 +124,7 @@ define([
this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
this.fillControls = [];
this.gradientColorsStr="";
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90;
this.render();
@ -461,8 +461,13 @@ define([
rawData = record;
}
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type, true);
@ -1144,13 +1149,13 @@ define([
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
if (this.mnuDirectionPicker.dataViewItems.length == 1)
this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
else
this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
var type = item.model.get('type') + 90;
item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
@ -1318,9 +1323,12 @@ define([
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ type:2, subtype:5}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1344,8 +1352,8 @@ define([
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#shape-button-direction'));

79
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View file

@ -130,6 +130,8 @@ define([
this.TransformSettings = $('.textart-transform');
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
SSE.getCollection('Common.Collections.TextArt').bind({
reset: this.fillTextArt.bind(this)
});
@ -398,10 +400,7 @@ define([
this.mnuDirectionPicker.restoreHeight = 174;
var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.typeGradient = (record) ? this.GradLinearDirectionType + 90 : -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -410,9 +409,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 58;
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
if (this.GradRadialDirectionIdx>=0)
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(0, true);
this.numGradientAngle.setDisabled(true);
}
@ -452,7 +451,14 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
//this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@ -809,7 +815,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -820,10 +826,7 @@ define([
this.GradLinearDirectionType=value;
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
else
this.btnDirection.setIconCls('');
this.typeGradient = (record)? value + 90 : -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -856,10 +859,17 @@ define([
me.GradColor.values[index] = position;
}
});
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -1080,6 +1090,26 @@ define([
}
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
else if (this.typeGradient == 2)
this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
else
this.btnDirection.$icon.css({
'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
});
},
createDelayedControls: function() {
var me = this;
@ -1222,18 +1252,21 @@ define([
this.lockedControls.push(this.cmbGradType);
this._viewDataLinear = [
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
{ type:45, subtype:-1},
{ type:90, subtype:4},
{ type:135, subtype:5},
{ type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ type:180, subtype:1},
{ type:315, subtype:2},
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1256,7 +1289,9 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#textart-button-direction'));