diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index 05ad8c0c07..b146eb9e41 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -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; diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index eb59fede35..c13aeed6d6 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -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= 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', diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index cff250ed51..c6510e63cd 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -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, diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 71194d5cc5..7dabaa25a1 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -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= 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('
') + +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg, ' + me.gradientColorsStr + ' )' + +' <%} else {%> radial-gradient( ' + me.gradientColorsStr + ' 70%) <%}%>;">') }); }); this.btnDirection.render($('#shape-button-direction')); diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js index f52c916d61..f7a7e23da0 100644 --- a/apps/presentationeditor/main/app/view/SlideSettings.js +++ b/apps/presentationeditor/main/app/view/SlideSettings.js @@ -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= this.GradColor.colors.length) { me.GradColor.currentIdx = 0; } diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less index a580a64ed1..c4aa9546f9 100644 --- a/apps/presentationeditor/main/resources/less/rightmenu.less +++ b/apps/presentationeditor/main/resources/less/rightmenu.less @@ -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 { diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 3964e3a744..f9a587fcba 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -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('
') + itemTemplate: _.template('
') }); }); 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= 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); diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 5c61cf7839..c32067a359 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -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= 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({ diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index 03a38a5fea..2301d2d978 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -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;