Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[Common] Change ColorButton component

Browse source
This commit is contained in:
Julia Radzhabova 2020-04-28 18:10:49 +03:00
parent c0e8ff2438
commit 103c2693fe
2 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/common/main/lib/component/ColorButton.js
View file

@ -49,25 +49,17 @@ define([
'<div class="btn-group" id="<%= id %>">',
'<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
'<span>&nbsp;</span>',
'<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
'</button>',
'</div>'
].join('')),
setColor: function(color) {
var border_color, clr,
span = $(this.cmpEl).find('button span');
var span = $(this.cmpEl).find('button span:nth-child(1)');
this.color = color;
if ( color== 'transparent' ) {
border_color = '#BEBEBE';
clr = color;
span.addClass('color-transparent');
} else {
border_color = 'transparent';
clr = (typeof(color) == 'object') ? '#'+color.color : '#'+color;
span.removeClass('color-transparent');
}
span.css({'background-color': clr, 'border-color': border_color});
span.toggleClass('color-transparent', color=='transparent');
span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
}
});
});

29
apps/common/main/resources/less/buttons.less
View file

@ -544,16 +544,25 @@
}
.btn-color {
padding: 2px;
height: 22px;
padding: 1px 11px 1px 1px;
border:1px solid @input-border;
.border-radius(@border-radius-small);
span {
display:block;
border:1px solid @input-border;
span:nth-child(1) {
float: left;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: transparent;
}
.inner-box-caret {
position: absolute;
right: 0;
top: 2px;
}
&,
&:hover,
.over,
@ -570,11 +579,19 @@
.color-transparent {
&:before {
height: 40px;
transform: translate(20px, -12px) rotate(69deg);
border-right: 1px solid red;
height: 34px;
transform: translate(16px, -9px) rotate(62deg);
left: 0;
}
}
&:active:not(.disabled),
&.active:not(.disabled) {
.caret {
background-position: @arrow-small-offset-x @arrow-small-offset-y;
}
}
}
.btn-options {