[SSE] Bug 43708 (Cell settings: add buttons (position, add thumb, remove thumb), change gradient slider style)

apps/common/main/lib/component/MultiSliderGradient.js

@@ -56,8 +56,8 @@ define([
             colorValues: ['#000000', '#ffffff'],
             currentThumb: 0,
             thumbTemplate: '<div class="thumb img-commonctrl" style="">' +
-                            '<div class="thumb-top"></div>' +
-                            '<div class="thumb-bottom"></div>' +
+                            '<div class="thumb-top"><div class="thumb-top-inner"></div></div>' +
+                            '<div class="thumb-bottom"><div class="thumb-bottom-inner"></div></div>' +
                             '</div>'
         },
 
@@ -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();

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;
     }
 }
 

apps/spreadsheeteditor/main/app/template/CellSettings.template

@@ -41,7 +41,22 @@
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="cell-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
-                <div id="cell-gradient-color-btn" style="display: inline-block;float: right;"></div>
+                <div style="height: 40px;margin-top:6px;display:flex;justify-content:space-between;">
+                    <div style="display: flex;">
+                    <div style="">
+                        <label class="input-label" style=""><%= scope.textGradientColor %></label>
+                        <div id="cell-gradient-color-btn"></div>
+                    </div>
+                    <div style="margin-left: 10px;">
+                        <label class="input-label" style=""><%= scope.textPosition %></label>
+                        <div id="cell-gradient-position"></div>
+                    </div>
+                    </div>
+                    <div style="display:flex;padding-top:15px;">
+                        <div id="cell-gradient-add-step"></div>
+                        <div id="cell-gradient-remove-step"></div>
+                    </div>
+                </div>
             </div>
         </td>
     </tr>

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 || {}));
 });

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",