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

[all] fix bug 50356

Browse source
This commit is contained in:
Maxim Kadushkin 2021-09-30 23:49:12 +03:00
parent 29a065c3bd
commit bd7fb9a4f0
2 changed files with 50 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/common/main/lib/component/RadioBox.js
View file

@ -71,8 +71,13 @@ define([
disabled : false,
rendered : false,
template : _.template('<label class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
'<label for="<%= id %>" class="radiobox__shape"></label><span></span></label>'),
template : _.template('<div class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
'<input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<circle class="rb-circle" cx="8" cy="8" r="6.5" />' +
'<circle class="rb-check-mark" cx="8" cy="8" r="4" />' +
'</svg>' +
'<span></span></div>'),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
@ -111,9 +116,14 @@ define([
}));
this.$radio = el.find('input[type=radio]');
this.$label = el.find('label.radiobox');
this.$label = el.find('div.radiobox');
this.$span = this.$label.find('span');
this.$label.on('keydown', this.onKeyDown.bind(this));
this.$label.find('svg, span').on('click', function(e) {
this.setValue(true);
}.bind(this));
this.rendered = true;
return this;
@ -153,10 +163,12 @@ define([
setValue: function(value, suspendchange) {
if (this.rendered) {
if ( !this.disabled ) {
var lastValue = this.$radio.hasClass('checked');
this.setRawValue(value);
if (suspendchange !== true && lastValue !== value)
this.trigger('change', this, this.$radio.is(':checked'));
}
} else {
this.options.checked = value;
}

78
apps/common/main/resources/less/radiobox.less
View file

@ -1,72 +1,52 @@
.radiobox {
padding-left: 22px;
margin-bottom: 0;
.font-size-normal();
font-weight: normal;
position: relative;
min-height: 1em;
input[type=radio] {
display: flex;
align-items: center;
svg {
margin-right: 8px;
.rb-circle {
fill: @background-normal;
stroke: @border-regular-control;
}
.rb-check-mark {
fill: @text-normal;
}
}
input[type=radio] {
display: none;
+ label {
position: absolute;
left: 0;
margin-top: auto;
padding-bottom: 4px;
width: 14px;
height: 14px;
background: @background-normal-ie;
background: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
border-radius: 50%;
+ span {
outline: @scaled-one-px-value-ie dotted transparent;
outline: @scaled-one-px-value dotted transparent;
display: inline-block;
}
}
&:checked {
+ label {
&::before {
content: '';
position: absolute;
background: @text-normal-ie;
background: @text-normal;
border-radius: 50%;
width: 8px;
height: 8px;
left: 2px;
top: 2px;
&:not(:checked) + svg {
.rb-check-mark {
display: none;
}
}
}
&.disabled, &:disabled {
+ label {
&::before {
}
}
svg, span {
opacity: @component-disabled-opacity;
}
}
&:focus:not(.disabled) {
input[type=radio] {
+ label {
border-color: @border-control-focus-ie;
border-color: @border-control-focus;
svg {
.rb-circle {
stroke: @border-control-focus-ie;
stroke: @border-control-focus;
}
}
+ span {
outline-color: @border-control-focus-ie;
outline-color: @border-control-focus;
}
}
span {
outline: @scaled-one-px-value-ie dotted @border-control-focus-ie;
outline: @scaled-one-px-value dotted @border-control-focus;
}
}
}