pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 04:04:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

[bug-49591] fix thumb size

Browse Source
This commit is contained in:
OVSharova
2023-12-11 05:06:15 +03:00
parent 21e6c3b36d
commit 525411b537
2 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/common/main/lib/component/MultiSliderGradient.js
View File

@ -75,7 +75,7 @@ define([
initialize : function(options) {
this.styleStr = {};
this.tmbOptions={
width: 13,
width: 12,
height: 16,
border:0.5,
borderColor:'#c0c0c0',
@ -228,16 +228,22 @@ define([
borderWidth = (this.tmbOptions.border*this.scale + 0.5)>>0,
x1 = borderWidth / 2,
x2 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale + 0.5)>>0) - borderWidth / 2,
x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0),
x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0) + 0.5*borderWidth,
x4 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale - 0.5)>>0) + 0.5*borderWidth - x3,
y1 = ((this.tmbOptions.width/2*this.scale + 0.5)>>0) + borderWidth / 2,
y2 = ((this.tmbOptions.height*this.scale + 0.5)>>0) - borderWidth / 2,
y3 = ((this.scale + 0.5)>>0) + borderWidth / 2;
x2 = (this.tmbOptions.width*this.scale >>0) - x2<=0 ? x2 - borderWidth : x2;
y2 = (this.tmbOptions.height*this.scale >>0) - y2<=0 ? y2 - borderWidth : y2;
this.tmbOptions.x2 = x2;
this.tmbOptions.y2 = y2;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.lineTo(x2, y2);
ctx.lineTo(x2, y1);
ctx.lineTo(x3, y3);
(x3 !== x4) && ctx.lineTo(x4, y3);
ctx.lineTo(x1, y1);
ctx.closePath();
ctx.lineWidth = borderWidth;
@ -246,20 +252,21 @@ define([
},
thumbFill: function (ctx, color) {
var borderWidth = (this.tmbOptions.border*this.scale + 0.5)>>0,
x1 = 2*borderWidth,
x2 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale + 0.5)>>0) - 2*borderWidth,
x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0),
x2 = this.tmbOptions.x2 - 1.5*borderWidth,
x3 = (((this.tmbOptions.width - this.tmbOptions.border)/2*this.scale + 0.5)>>0) + 0.5*borderWidth,
x4 = (((this.tmbOptions.width - this.tmbOptions.border/2)*this.scale - 0.5)>>0) + 0.5*borderWidth - x3,
y1 = (((this.tmbOptions.width/2)*this.scale + 2 * borderWidth + 0.5)>>0) ,
y2 = ((this.tmbOptions.height*this.scale + 0.5)>>0) - 2*borderWidth,
y3 = ((2*this.tmbOptions.border*this.scale + 0.5)>>0) + 3*borderWidth;
y2 = (this.tmbOptions.y2 - 1.5*borderWidth)>>0,
y3 = ((this.scale + 0.5 + 3*borderWidth)>>0) ;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.lineTo(x2, y2);
ctx.lineTo(x2, y1);
ctx.lineTo(x3, y3);
ctx.lineTo(x3, y3>>0);
(x3 !== x4) && ctx.lineTo(x4, y3>>0);
ctx.lineTo(x1, y1);
ctx.closePath();
ctx.fillStyle = color;

10
apps/common/main/resources/less/multislider-gradient.less
View File

@ -5,8 +5,9 @@
.thumb {
width: 13px;
height: 15px;
top: 16px;
top: calc(17px - @scaled-one-px-value);
z-index: 1;
top: 18px;
top: calc(17px + @scaled-one-px-value);
background: none;
canvas{
.margin-left(1px);
@ -19,10 +20,11 @@
&:hover::after{
display: block;
content: ' ';
z-index: -1;
position: absolute;
width: 12px;
width: 11px;
height: 10px;
bottom: 0;
bottom: @scaled-one-px-value;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32);
.margin-left(1px);
.margin-left(@scaled-one-px-value);