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

[stylesheets] repaired combobox for border size

Browse source
This commit is contained in:
Maxim Kadushkin 2020-12-31 21:05:43 +03:00
parent 1c12f4ce06
commit 7388008716
3 changed files with 34 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -77,7 +77,10 @@ define([
Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="padding-top:2px; <%= style %>"></div>',
'<div class="form-control" style="<%= style %>">',
'<i class="image"></i>',
'<span class="text"></span>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@ -138,14 +141,15 @@ define([
updateFormControl: function(record) {
var formcontrol = $(this.el).find('.form-control');
var image = formcontrol.find('> .image');
var text = formcontrol.find('> .text');
if (record.get('value')>0) {
formcontrol[0].innerHTML = '';
formcontrol.removeClass('text').addClass('image');
formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
image.css('background-position', '10px -' + record.get('offsety') + 'px').show();
text.hide();
} else {
formcontrol[0].innerHTML = this.txtNoBorders;
formcontrol.removeClass('image').addClass('text');
image.hide();
text.text(this.txtNoBorders).show();
}
},
@ -162,9 +166,7 @@ define([
this.updateFormControl(this._selectedItem);
$('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected');
} else {
var formcontrol = $(this.el).find('.form-control');
formcontrol[0].innerHTML = '';
formcontrol.removeClass('image').addClass('text');
$(this.el).find('.form-control > .text').text("").show();
}
},
@ -224,7 +226,9 @@ define([
Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>"></div>',
'<div class="form-control" style="<%= style %>">',
'<i class="image"></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@ -262,10 +266,8 @@ define([
},
updateFormControl: function(record) {
var formcontrol = $(this.el).find('.form-control');
formcontrol[0].innerHTML = '';
formcontrol.removeClass('text').addClass('image');
formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
$(this.el).find('.form-control > .image')
.css('background-position', '10px -' + record.get('offsety') + 'px');
}
}, Common.UI.ComboBorderType || {}));

11
apps/common/main/resources/less/combo-border-size.less
View file

@ -22,8 +22,17 @@
}
}
.image {
position: relative;
width: 100%;
height: 100%;
display: inline-block;
background-color: transparent;
margin: -1px 0 0 -3px;
}
img, .image {
background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 @{background-normal}";
background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0";
@media only screen {
//@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),

11
apps/common/main/resources/less/combobox.less
View file

@ -1,3 +1,6 @@
@img-borders-filter: var(--image-border-types-filter);
@img-borders-filter-selected: var(--image-border-types-filter-selected);
.combobox {
display: block;
@ -28,6 +31,11 @@
position: static;
z-index: auto;
float: none;
.image {
-webkit-filter: @img-borders-filter;
filter: @img-borders-filter;
}
}
.btn {
@ -93,9 +101,6 @@
// Font combobox
// ------------------------
li {
@img-borders-filter: var(--image-border-types-filter);
@img-borders-filter-selected: var(--image-border-types-filter-selected);
img {
-webkit-filter: @img-borders-filter;
filter: @img-borders-filter;