From 0b9ff0405d45a2d0ea32e87e8de537d1f2ed6184 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Fri, 3 Jul 2020 15:42:26 +0300 Subject: [PATCH] [SSE] Bug 43708 (Cell settings: add buttons (position, add thumb, remove thumb), change gradient slider style) --- .../main/lib/component/MultiSliderGradient.js | 16 +++- .../resources/less/multislider-gradient.less | 28 +++++- .../main/app/template/CellSettings.template | 17 +++- .../main/app/view/CellSettings.js | 88 +++++++++++++++++- apps/spreadsheeteditor/main/locale/en.json | 2 + .../img/toolbar/1.25x/btn-add-breakpoint.png | Bin 0 -> 494 bytes .../toolbar/1.25x/btn-remove-breakpoint.png | Bin 0 -> 529 bytes .../img/toolbar/1.5x/btn-add-breakpoint.png | Bin 0 -> 506 bytes .../toolbar/1.5x/btn-remove-breakpoint.png | Bin 0 -> 552 bytes .../img/toolbar/1.75x/btn-add-breakpoint.png | Bin 0 -> 650 bytes .../toolbar/1.75x/btn-remove-breakpoint.png | Bin 0 -> 700 bytes .../img/toolbar/1x/btn-add-breakpoint.png | Bin 0 -> 438 bytes .../img/toolbar/1x/btn-remove-breakpoint.png | Bin 0 -> 493 bytes .../img/toolbar/2x/btn-add-breakpoint.png | Bin 0 -> 782 bytes .../img/toolbar/2x/btn-remove-breakpoint.png | Bin 0 -> 955 bytes 15 files changed, 143 insertions(+), 8 deletions(-) create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png create mode 100644 apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png 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 0000000000000000000000000000000000000000..66b94d208777f0cdb498fff68705b3a2c269dfcc GIT binary patch literal 494 zcmVX1^@s6b5wmq00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPgNy(h1PLKtJ3=N%N5}@v25BdV^2P&F*dQGtoglpP*K@(D(#XMX4N__S zNmm9N`}pYk8paF;!(fDAxIsLz5owxcgZQ?_O!Y$;SVCaePMXbDX_{tiV6grY&5pmW zpp&W2RWcIC@uI4#BOV{Q;L&j$KS`1^8wjkqK=Y}=pM97)tIU@gxiYb>>-rt-9HOpm z+v}nz{4C3Irpc9wEuz&xxQI3D%t$pH*#~7=QmS8&fdd3j)Mr^%faf{-_IM4LKCK4g zfH?6!T9*tdX;^)ORNQECZ1|OD<$=eZ`e-bQqGzT76*sMep!L3J@V*@1NHuzo7K}8= zh>J~=fOj+ehOq!+7ZkqorEv>3*|6>y2{l-kjSG%fuSRc12wnr8V8|PyJ_ud|LJgJr zAf!g7f-&;j_#Z}eZX;D>w~;Ec|473|hF`zhNdN4_6fz^6EXo9#xtF1z7!_rL%-qY6 kmeDC4tv_>X84M%w0XlM~$Hy$BaR2}S07*qoM6N<$g74_gCjbBd literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..fab4af0e4bb4ab6477f5625f3a0ecff0097bf192 GIT binary patch literal 529 zcmV+s0`C2ZP)X1^@s6b5wmq00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPSHs}Ie`XAy{Jb-b*k=lw+ zI>Pp`{d0Vg57ETLgf`ae^&a*{Po%1*uAc8j7YG8Angn3<-z3d8V5n!ub3e7-eAd4*tZD&vj54vioVQ50R-%Chvi z&9bZ)(m*4K1AhFqWDh3;hmUE{4Q*q23EY%(MJYWyLY@wpWe&@JHfBJEt17S7#$+@#A%wIIEc1{P6LmhKhZsPe}=}y#8|!nu_WB) T_@75s00000NkvXXu0mjf&`Ioq literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..007cb20d9cd52a46d7624dab0b69540389f5b9c3 GIT binary patch literal 506 zcmVBkV|auLv;`^8~<=uSGdA# z7KR*{wJM^_7C#ol?Cv7|PTj#~dHVjVOJ${nb%iU8wOe3~YMkr7xwdnrj=(?`sGP>R z?we~n=X?FNK9+`xGW_Z&!>^98;VySx8ANto8H5ct9Y@ck={Rb`=%%#PU78vC)NbrV w}TLb1M)I}TW z)Ceumc{^ZcL$n?Ct)I-Z&pcXREC5p>+K&4-mG^btyeL9rPyY(na9i9^cPW@ qgjt%L%g^$*s{4?qw8P=JZ@vI!P8W{nmsN5A0000zd z!cYu_&CdXgkP*rTNPxs+GXd=cZ6|0tLAyb^L3l(0L^gmC7=)jm1CA6SF5(7~BIHl9 z62}(T_h5Vh5yLQyJEzy{MX-0d19rPz1iQMHnp{c0-+$U}w@Iy5Yrzet(`hRI1O$1) zC4ud0K~1R?}!#OFchc_aaK}*x)h|- z>9i;c3i_Q)CQEh-I_Hbe7?TRoH-)17LWrey$`_w$tU54L64+Jd3Z97@`IT(=#tm>>KGliuM~wMVUhSa zhtC*e4&09u#oh{T^i@R(a37z@i5b(A$*UGGVYmppf%ke$pPKkBjR|wL=rZ7jM|$t9 zMPs75fm}%8_YP)U!Ku`?EtJP|+lgVT&hQa=I9L}-GMHmY73URiQfvRMr z*=)X06a+M$PN!>T3Npv#IoiY^>PMj{V+gTUnd0)CvY7)l#lsp#od2Xv41zE3VGSeB zf6^wVP{no?V_(uo44{hbD#p&N8A(b~UrOvg*r>nX?;V{FZS-liT74-I)qS{!6XQl( zpYcdpu-HPF9coDZo-chM%!XY{N`S={Yp05C65oyLT8T)NF{;?U`M$rs=c{}^ zCJXjHrT}7v;rKxJti$sr#|vt-(9qZ#MUNL^g~2n1%durx9QB&xOjpdoy?%)k7-tq5 zORO-Q%vGyZCn(NU6fB2!F$5=bav34q#0iMvD0^YttuaAyy4`MH9w5q8?)NkTPcETNiX41Rg6O;lGZb8H!fYRQ|Zu9S9c inVbK7A7imt3gHI_OnrI+!2!|$0000?ds6^O)0t6>-4 zFq&gc^u!;aD2hd%=e?A2P7^?Dy+HLSuilITFbqS>oTh0{)1Wo%)$x zAB!lxpx4Yj@qZ1*EIle~D?mK>YBHYX2k$+5|6a|*?y gT=Bzi@e{Y=3q3QFi1dwSegFUf07*qoM6N<$f<~OU1ONa4 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..499033fc0f51d7ee76ca05ecf8e65f9703a51033 GIT binary patch literal 493 zcmV8^?pGp$QvdqUapUq|gy$26ISSMenKxA&u zWKk5Y*taaprx8Hb_ROa!%1ZeDV1W>~1;GXx^w`Jhro%^pA=YG8Me%rafG8o{Hm!|2h8WjFFN%T*h59Xn? zw`x%M{rQl+a?E}mc-eBuzSLLzNlXGihQ2-61?e8-8TT3?V$=+pd6frmUn4|}nqGVj zf%xpxq9_8~7(7q|_GuhadXB6IpYWxjv;~nl7lcQc8^`gPV{IkH^{0>omei1Kpg4zL}}0k1S)qr?!VF-ejnCl-g_Uo;My j5Ot#G-8+_VLNELR>WjiJqXQaT00000NkvXXu0mjfx6{w7 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..c025ed14541458f08c3ad7379ffa4695a33786bf GIT binary patch literal 782 zcmV+p1M&QcP)zd z>Oc^M2L$gf!6k$aj6jG-T*B?Zw}LnoKnKySfcuC9D0GmN;1VbRaORj<8M9VreclWlkH_I|w|nPqAVXUg*k3M}AM^mQc_ClE=;PLBjZXU7~A)kE!_du1*4F> z5L!5KJsCggqhk^q>2pqCr_*_bdE7EKDmLTjV~o2`SVQ*%pB-|`xW%RMSjL`YO(UEP z#EHw735?>OFjAJ`CyP`faTpU5C!^75N;d{4EUHeA$5{t}k==8ye|rY@nF; zT)auU9m72IIeD*~xZQ%^%r1mAzL*$`xZ?Voq8yH9|9qlev>V*;^ayL*%SnN%_!t!FV~5 zCI0gKOy)6%HCHWf&dQaPKkG%t(<*&DKa=^BKC&optP@x+S4!qZ72?2D=1A85lf84g z9w&Vz^P=zc$sEaAYkk%UWJ7XX*^pwdsR4her?z}g>@60HtZKh+SV!^xY)DI9hjcVG z{ALRh*E9FX^Zl1_E@Lj32Leg$z4*yI5XhQFI2%}}l6S549SJ?Hsl>~p+;2t=bVLnw zL=ALA4Rk~ebfiO;T&n=~Mco3}7n(pvtPRAYn0Xv~L~?;{geK4t>wDlizx|%533TM* zw^R3iXOd{U-j%xdyVAe6tkz#b6L@R%6#j}P&=EDz5j9Xz6h&#wC!0WRn2EA^9smFU M07*qoM6N<$f{IsSjsO4v literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..f066ecac26cecd90a62ddd69cdbf4334e311428a GIT binary patch literal 955 zcmV;s14R6ZP)_!2}XG+e;Ya=6=c&vwgTt?Z3W>oQUbVxr39D2H{!A9;5%s6GVvRu zWR5iQ_|6P-I3D}hcSIZ<92^`f!_Cdj3(7A!QEa!{7nI8QwWLDa-rin;++RKIetdic zazX&ND;)OxTCG+fCDE3OaDRXA;qYpOUNv?SfOww7_-U*ZDiP54{U7V~dZvWNC;`eY z#x`jf;6)BI6i+OEjA>h8R3c!f(-~1blyJ3LJ)-njXYB0kY#_~JB$0R_$|Fio>x`A+ zS6V=t1`ZDt3@ff11i^xZb;K8V&h)iUBcN%JpG1Q3xkpY5*2xd0uYC%kl!?GJIQdA4 z_9m0b*lve#zC^bU+xuw$BS!@1lxX!4JqS0Bwfmy{fIixD^DDdpX%HY_mj6p!Jc2H~ z*=(L!2e~0#T8;#L9`E_Z#ZyiJ4$pczRF}?$LIP4e8iYg-;vt0keW>qrIvui)_C1O- zt9W~U5b7X5URax7US}>OAWXtcG>3T48T#`N%sB@2k<<^qu6Udi0;Tc;cKmcqE`GTM zyuQBX)w)v0?PVE5Q!&nrQ~&Pnt~O`J96NpznMNjlYAVK=ee2PbK2~x9#<1lPf?PtF zFwa=~O9d;p(yt%`{Qg#}mk=h*G4#JL6^zZquds>a6_0p-f1k^dkXJk%lbc^IPS6~ zWl=OsUMs&;0ac&@(^s~LR!VEoq=+gIKmKR7h*nB#P^XBg&p;#%#@N?*Le*0dnF<%P ziKMCgu`~zHz2hg5h+U1FO{7r!)PmF%$fN=HH_Rpxg^P*TEs|KM3Ys*aXgqon31^Gf zEs|KsJb%`X*q-DL+YDqpo*xp=q`T5kwVPYFtf!$+62!C8U7sSWn`eHFxwyFCZ7XK} zcDpU-=jZa>kx6A^80NO!4a7?1)y1mpzP-JL(ja21FVwK9H+u`m#nb&>F}HKmA|{BJ zWFobRm}(-+Ho@gTRIAd&+hJlOt^vR2KP d92~wX{sC-*8zwF63n2gi002ovPDHLkV1j6Ft8xGU literal 0 HcmV?d00001