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

Merge pull request #1231 from ONLYOFFICE/feature/gradient-fill-direction

Browse source 
Gradient fill direction
This commit is contained in:
Julia Radzhabova 2021-10-06 14:11:12 +03:00 committed by GitHub
parent 2ff7b2bd99 85167c5714
commit 78badd1ef3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 252 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/common/main/lib/component/Slider.js
View file

@ -386,14 +386,11 @@ define([
need_sort = position < minValue || position > maxValue,
pos = Math.max(0, Math.min(100, position)),
value = pos/me.delta + me.minValue;
if (me.thumbs.length < 3)
me.isRemoveThumb = false;
if (me.isRemoveThumb) {
if (me.thumbs.length < 3) {
$(document).off('mouseup', me.binding.onMouseUp);
$(document).off('mousemove', me.binding.onMouseMove);
me._dragstart = undefined;
return;
}
if (me.isRemoveThumb) {
me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index}));
me.trigger('change', me, value, lastValue);
me.trigger('changecomplete', me, value, lastValue);
@ -407,7 +404,6 @@ define([
$(document).off('mouseup', me.binding.onMouseUp);
$(document).off('mousemove', me.binding.onMouseMove);
me._dragstart = undefined;
!me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue);
me.isRemoveThumb = undefined;

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

@ -126,7 +126,8 @@ define([
this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
this.fillControls = [];
this.gradientColorsStr="";
this.typeGradient = 90 ;
this.render();
},
@ -406,10 +407,10 @@ 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'));
if(record)
this.typeGradient = this.GradLinearDirectionType +90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -418,9 +419,10 @@ 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);
}
@ -459,7 +461,9 @@ define([
} else {
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
this.typeGradient = rawData.type + 90;
(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) {
@ -932,7 +936,6 @@ define([
}
this._state.GradFillType = this.GradFillType;
}
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR ) {
var value = Math.floor(fill.get_linear_angle()/60000);
if (Math.abs(this.GradLinearDirectionType-value)>0.001) {
@ -940,9 +943,10 @@ define([
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
this.typeGradient = value + 90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -975,10 +979,15 @@ 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;
}
@ -1191,6 +1200,26 @@ 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 + ')'});
});
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;
@ -1336,23 +1365,23 @@ define([
this.fillControls.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}
];
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5}
];
this.btnDirection = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-gradient gradient-left',
iconCls : 'item-gradient',
menu : new Common.UI.Menu({
style: 'min-width: 60px;',
menuAlign: 'tr-br',

41
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -39,8 +39,6 @@
}
.item-gradient {
//.background-ximage-all('right-panels/gradients.png', 150px);
width:50px;
height:50px;
}
@ -49,45 +47,6 @@
margin-right: 62px !important;
}
.item-gradient-separator {
margin-right: 62px !important;
}
.gradient-left-top {
background: linear-gradient(to bottom right, #000, #fff);
}
.gradient-top {
background: linear-gradient(to bottom, #000, #fff);
}
.gradient-right-top {
background: linear-gradient(to bottom left, #000, #fff);
}
.gradient-left {
background: linear-gradient(to right, #000, #fff);
}
.gradient-right {
background: linear-gradient(to left, #000, #fff);
}
.gradient-left-bottom {
background: linear-gradient(to top right, #000, #fff);
}
.gradient-bottom {
background: linear-gradient(to top, #000, #fff);
}
.gradient-right-bottom {
background: linear-gradient(to top left, #000, #fff);
}
.gradient-radial-center {
background: radial-gradient( #000 , #fff 70%);
}
#signature-requested-sign,
#signature-valid-sign,

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

@ -121,6 +121,8 @@ define([
this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
this.fillControls = [];
this.gradientColorsStr = "#000, #fff";
this.typeGradient = 90 ;
this.render();
@ -390,10 +392,10 @@ 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'));
if(record)
this.typeGradient = this.GradLinearDirectionType +90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -402,9 +404,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);
}
@ -443,7 +445,7 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
this.typeGradient = rawData.type + 90;
(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) {
@ -518,9 +520,37 @@ 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;
},
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 + ')'});
});
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 + ')')
});
},
_gradientApplyFunc: function() {
if (this._sliderChanged) {
var props = new Asc.asc_CShapeProperty();
@ -842,7 +872,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -854,9 +884,9 @@ define([
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
this.typeGradient = value + 90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -889,10 +919,16 @@ 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;
}
@ -1250,23 +1286,23 @@ define([
this.fillControls.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}
];
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5}
];
this.btnDirection = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-gradient gradient-left',
iconCls : 'item-gradient',
menu : new Common.UI.Menu({
style: 'min-width: 60px;',
menuAlign: 'tr-br',
@ -1285,8 +1321,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, ' + me.gradientColorsStr + ' )'
+' <%} else {%> radial-gradient( ' + me.gradientColorsStr + ' 70%) <%}%>;"></div>')
});
});
this.btnDirection.render($('#shape-button-direction'));

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

@ -110,6 +110,9 @@ 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.typeGradient = 90;
this.render();
var me = this;
@ -463,10 +466,10 @@ 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'));
if(record)
this.typeGradient = this.GradLinearDirectionType +90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked.background);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -475,9 +478,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);
}
@ -516,7 +519,7 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
this.typeGradient = rawData.type + 90;
(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) {
@ -591,9 +594,37 @@ 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;
},
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 + ')'});
});
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 + ')')
});
},
_gradientApplyFunc: function() {
if (this._sliderChanged) {
var props = new Asc.CAscSlideProps();
@ -757,18 +788,18 @@ define([
this.FillItems.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}
];
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5}
];
this.btnDirection = new Common.UI.Button({
@ -1193,7 +1224,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -1205,9 +1236,9 @@ define([
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
this.typeGradient = value + 90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -1240,10 +1271,16 @@ 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;
}

40
apps/presentationeditor/main/resources/less/rightmenu.less
View file

@ -41,46 +41,6 @@
margin-right: 62px !important;
}
.item-gradient-separator {
margin-right: 62px !important;
}
.gradient-left-top {
background: linear-gradient(to bottom right, #000, #fff);
}
.gradient-top {
background: linear-gradient(to bottom, #000, #fff);
}
.gradient-right-top {
background: linear-gradient(to bottom left, #000, #fff);
}
.gradient-left {
background: linear-gradient(to right, #000, #fff);
}
.gradient-right {
background: linear-gradient(to left, #000, #fff);
}
.gradient-left-bottom {
background: linear-gradient(to top right, #000, #fff);
}
.gradient-bottom {
background: linear-gradient(to top, #000, #fff);
}
.gradient-right-bottom {
background: linear-gradient(to top left, #000, #fff);
}
.gradient-radial-center {
background: radial-gradient( #000 , #fff 70%);
}
#signature-requested-sign,
#signature-valid-sign,
#signature-invalid-sign {

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

@ -68,7 +68,8 @@ define([
initialize: function () {
this._initSettings = true;
this._noApply = true;
this._sendUndoPoint = true;
this._state = {
DisabledControls: true,
DisabledFillPanels: true,
@ -91,6 +92,8 @@ define([
this.GradColor = { values: [0, 100], colors: ['000000', 'ffffff'], currentIdx: 0};
this.fillControls = [];
this.gradientColorsStr="";
this.typeGradient = 90;
this.render();
this.createDelayedControls();
@ -230,14 +233,14 @@ define([
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));*/
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'}
{ offsetx: 0, offsety: 0, type:45, subtype:-1},
{ offsetx: 50, offsety: 0, type:90, subtype:4},
{ offsetx: 100, offsety: 0, type:135, subtype:5},
{ offsetx: 0, offsety: 50, type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ offsetx: 100, offsety: 50, type:180, subtype:1},
{ offsetx: 0, offsety: 100, type:315, subtype:2},
{ offsetx: 50, offsety: 100, type:270, subtype:3},
{ offsetx: 100, offsety: 100, type:225, subtype:7}
];
this.btnDirection = new Common.UI.Button({
@ -260,7 +263,7 @@ 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" ></div>')
});
});
this.btnDirection.render($('#cell-button-direction'));
@ -910,9 +913,9 @@ define([
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
this.typeGradient = value + 90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(value, true);
}
}
@ -934,10 +937,15 @@ define([
Common.Utils.ThemeColor.getHexColor(clr.asc_getR(), clr.asc_getG(), clr.asc_getB()));
me.GradColor.values.push(position*100);
});
var arrGrCollors=[];
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) +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -1069,6 +1077,27 @@ 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 + ')'});
});
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 + ')')
});
},
UpdateThemeColors: function() {
if (!this.borderColor) {
// create color buttons
@ -1306,7 +1335,7 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
this.typeGradient = rawData.type + 90;
this.GradLinearDirectionType = rawData.type;
this.numGradientAngle.setValue(rawData.type, true);

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

@ -122,6 +122,8 @@ define([
this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
this.fillControls = [];
this.gradientColorsStr="";
this.typeGradient = 90;
this.render();
@ -402,10 +404,10 @@ 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'));
if(record)
this.typeGradient = this.GradLinearDirectionType +90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -414,9 +416,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);
}
@ -456,7 +458,7 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
this.typeGradient = rawData.type + 90;
(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) {
@ -866,7 +868,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -878,9 +880,9 @@ define([
var record = this.mnuDirectionPicker.store.findWhere({type: value});
this.mnuDirectionPicker.selectRecord(record, true);
if (record)
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
this.typeGradient = value + 90;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -913,10 +915,15 @@ 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;
}
@ -1131,6 +1138,26 @@ 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 + ')'});
});
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;
@ -1276,18 +1303,18 @@ define([
this.fillControls.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}
];
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5}
];
this.btnDirection = new Common.UI.Button({

41
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -27,7 +27,6 @@
}
.item-gradient {
//.background-ximage-all('right-panels/gradients.png', 150px);
width:50px;
height:50px;
}
@ -36,46 +35,6 @@
margin-right: 62px !important;
}
.item-gradient-separator {
margin-right: 62px !important;
}
.gradient-left-top {
background: linear-gradient(to bottom right, #000, #fff);
}
.gradient-top {
background: linear-gradient(to bottom, #000, #fff);
}
.gradient-right-top {
background: linear-gradient(to bottom left, #000, #fff);
}
.gradient-left {
background: linear-gradient(to right, #000, #fff);
}
.gradient-right {
background: linear-gradient(to left, #000, #fff);
}
.gradient-left-bottom {
background: linear-gradient(to top right, #000, #fff);
}
.gradient-bottom {
background: linear-gradient(to top, #000, #fff);
}
.gradient-right-bottom {
background: linear-gradient(to top left, #000, #fff);
}
.gradient-radial-center {
background: radial-gradient( #000 , #fff 70%);
}
.item-wrap {
width:50px;
height:50px;