diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index 71a5bf3a6..3a2b00366 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -56,8 +56,8 @@ define([ colorValues: ['#000000', '#ffffff'], currentThumb: 0, thumbTemplate: '
' + - '
' + - '
' + + '
' + + '
' + '
' }, @@ -159,8 +159,18 @@ define([ me.changeSliderStyle(); }, - addNewThumb: function(index, color) { + addNewThumb: function(index, color, pos, curIndex) { var me = this; + var color = color; + var index = index; + if (!_.isUndefined(pos) && !_.isUndefined(curIndex)) { + this.addThumb(); + index = this.thumbs.length - 1; + color = this.thumbs[curIndex].colorValue; + this.setThumbPosition(index, pos); + var value = pos/me.delta + me.minValue; + me.thumbs[index].value = value; + } me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div'); (index>0) && this.setColorValue(color, index); me.sortThumbs(); diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less index 562f15b8f..9709e839b 100644 --- a/apps/common/main/resources/less/multislider-gradient.less +++ b/apps/common/main/resources/less/multislider-gradient.less @@ -22,6 +22,11 @@ border-left: solid 1px @gray-darker; border-radius: 0 3px; box-sizing: content-box; + .thumb-top-inner { + border-top: solid 1px #fff; + border-left: solid 1px #fff; + height: 100%; + } } .thumb-bottom { @@ -35,10 +40,28 @@ border-top: none; border-radius: 2px; box-sizing: content-box; + .thumb-bottom-inner { + border: solid 1px #fff; + border-top: none; + height: 100%; + } } - &.active .thumb-bottom { - border-bottom-width: 2px; + &.active { + .thumb-top { + border-top: solid 1px #000; + border-left: solid 1px #000; + } + .thumb-bottom { + border: solid 1px #000; + border-top: none; + } + } + + &:hover { + .thumb-bottom { + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32); + } } &.remove { @@ -58,6 +81,7 @@ background-position: 0 0; outline: 1px solid rgba(162, 162, 162, 1); + border: 1px solid #FFFFFF; } } diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template index 0168b2dec..78fb733e6 100644 --- a/apps/spreadsheeteditor/main/app/template/CellSettings.template +++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template @@ -41,7 +41,22 @@
-
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index d23b4cc0d..dc43018e6 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -249,7 +249,7 @@ define([ this.sldrGradient = new Common.UI.MultiSliderGradient({ el: $('#cell-slider-gradient'), - width: 125, + width: 192, minValue: 0, maxValue: 100, values: [0, 100] @@ -261,6 +261,7 @@ define([ var color = me.GradColor.colors[me.GradColor.currentIdx]; me.btnGradColor.setColor(color); me.colorsGrad.select(color,false); + me.spnGradPosition.setValue(me.GradColor.values[me.GradColor.currentIdx]); }); this.sldrGradient.on('thumbdblclick', function(cmp){ me.btnGradColor.cmpEl.find('button').dropdown('toggle'); @@ -430,6 +431,39 @@ define([ this.spnAngle.on('change', _.bind(this.onAngleChange, this)); this.spnAngle.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + this.spnGradPosition = new Common.UI.MetricSpinner({ + el: $('#cell-gradient-position'), + step: 1, + width: 60, + defaultUnit : "%", + value: '50 %', + allowDecimal: false, + maxValue: 100, + minValue: 0, + disabled: this._locked + }); + this.lockedControls.push(this.spnGradPosition); + this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); + this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);}); + + this.btnAddGradientStep = new Common.UI.Button({ + parentEl: $('#cell-gradient-add-step'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-add-breakpoint', + disabled: this._locked + }); + this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); + this.lockedControls.push(this.btnAddGradientStep); + + this.btnRemoveGradientStep = new Common.UI.Button({ + parentEl: $('#cell-gradient-remove-step'), + cls: 'btn-toolbar', + iconCls: 'toolbar__icon btn-remove-breakpoint', + disabled: this._locked + }); + this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); + this.lockedControls.push(this.btnRemoveGradientStep); + this.chWrap = new Common.UI.CheckBox({ el: $('#cell-checkbox-wrap'), labelText: this.strWrap, @@ -650,6 +684,9 @@ define([ } me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + // Step position + this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]); + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = { Value: 1, @@ -1171,6 +1208,51 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, + onPositionChange: function(btn) { + var me = this, + pos = btn.getNumberValue(); + if (this.api) { + this.GradColor.values[this.GradColor.currentIdx] = pos; + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); + } + var arrGradStop = []; + this.GradColor.values.forEach(function (item, index) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(me.GradColor.colors[index]))); + gradientStop.asc_setPosition(me.GradColor.values[index]/100); + arrGradStop.push(gradientStop); + }); + this.gradient.asc_putGradientStops(arrGradStop); + + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); + } + }, + + onAddGradientStep: function() { + var curIndex = this.GradColor.currentIdx; + var pos = (this.GradColor.values[curIndex] + this.GradColor.values[curIndex < this.GradColor.colors.length - 1 ? curIndex + 1 : curIndex - 1]) / 2; + + this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; + this.GradColor.currentIdx = this.GradColor.colors.length - 1; + this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); + + this.sldrGradient.trigger('change', this.sldrGradient); + this.sldrGradient.trigger('changecomplete', this.sldrGradient); + }, + + onRemoveGradientStep: function() { + if (this.GradColor.values.length < 3) return; + this.GradColor.values.splice(this.GradColor.currentIdx, 1); + this.sldrGradient.removeThumb(this.GradColor.currentIdx); + if (_.isUndefined(this.GradColor.currentIdx) || this.GradColor.currentIdx >= this.GradColor.colors.length) { + this.GradColor.currentIdx = 0; + } + this.sldrGradient.setActiveThumb(this.GradColor.currentIdx); + }, + textBorders: 'Border\'s Style', textBorderColor: 'Color', textBackColor: 'Background color', @@ -1203,7 +1285,9 @@ define([ textGradient: 'Gradient', textControl: 'Text Control', strWrap: 'Wrap text', - strShrink: 'Shrink to fit' + strShrink: 'Shrink to fit', + textGradientColor: 'Color', + textPosition: 'Position' }, SSE.Views.CellSettings || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index d63896dee..760d7ed94 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -1263,6 +1263,8 @@ "SSE.Views.CellSettings.textControl": "Text Control", "SSE.Views.CellSettings.strWrap": "Wrap text", "SSE.Views.CellSettings.strShrink": "Shrink to fit", + "SSE.Views.CellSettings.textGradientColor": "Color", + "SSE.Views.CellSettings.textPosition": "Position", "SSE.Views.ChartSettings.strLineWeight": "Line Weight", "SSE.Views.ChartSettings.strSparkColor": "Color", "SSE.Views.ChartSettings.strTemplate": "Template", diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png new file mode 100644 index 000000000..66b94d208 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png new file mode 100644 index 000000000..fab4af0e4 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png new file mode 100644 index 000000000..007cb20d9 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png new file mode 100644 index 000000000..66ab34e8a Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png new file mode 100644 index 000000000..d089c5e6e Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png new file mode 100644 index 000000000..110bdbc6a Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png new file mode 100644 index 000000000..6b6eda926 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png new file mode 100644 index 000000000..499033fc0 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png new file mode 100644 index 000000000..c025ed145 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png new file mode 100644 index 000000000..f066ecac2 Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png differ