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

[rtl] Make ComboBoxColor and ComboBoxIcons components

Browse source
This commit is contained in:
JuliaSvinareva 2022-09-16 21:07:55 +03:00
parent aa35384d5e
commit 7aef8e20c3
3 changed files with 72 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -300,9 +300,9 @@ define([
Common.UI.ComboBoxColor = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
'<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
'<div class="input-group combobox combo-color combobox-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>">',
'<div></div>',
'</div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
@ -313,7 +313,7 @@ define([
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% } else { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding: 5px;"><div style="height: 15px;<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
'<a tabindex="-1" type="menuitem"><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
'</li>',
'<% } %>',
'<% }); %>',
@ -380,7 +380,7 @@ define([
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% } else { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding: 5px;"><div style="height: 15px;<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
'<a tabindex="-1" type="menuitem""><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
'</li>',
'<% } %>',
'<% }); %>'
@ -407,9 +407,9 @@ define([
Common.UI.ComboBoxIcons= Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="padding:2px 0 2px 3px; <%= style %> display: block;">',
'<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
'<div class="input-group combobox combobox-icons combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>">',
'<div></div>',
'</div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
@ -420,9 +420,9 @@ define([
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% } else { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding: 5px;">',
'<a tabindex="-1" type="menuitem">',
'<% _.each(item.data.iconSet, function(icon) { %>',
'<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>" style="width:16px;height:16px;margin-right: 5px;">',
'<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
'<% }) %>',
'</a>',
'</li>',
@ -454,7 +454,7 @@ define([
if (record.get('value')!=-1) {
var str = '';
_.each(record.get('data').iconSet, function(icon) {
str += '<img src="' + record.get('data').icons.at(icon-1).get("icon") + '" style="width:16px;height:16px;margin-right: 5px;">';
str += '<img src="' + record.get('data').icons.at(icon-1).get("icon") + '">';
});
formcontrol[0].innerHTML = str;
formcontrol.css({'margin-top': '0'});
@ -495,7 +495,7 @@ define([
'<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding: 5px;">',
'<% _.each(item.data.iconSet, function(icon) { %>',
'<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>" style="width:16px;height:16px;margin-right: 5px;">',
'<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
'<% }) %>',
'</a>',
'</li>',

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

@ -214,6 +214,10 @@
.dropdown-menu.menu-absolute {
position: fixed;
.rtl & {
right: unset;
}
}
.dropdown-menu.show-top {
@ -228,6 +232,57 @@
}
}
}
&.combobox-icons {
.form-control {
padding:2px 0 2px 3px;
display: block;
div {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
}
}
li a {
padding: 5px;
img {
width:16px;
height:16px;
margin-right: 5px;
.rtl & {
margin-right: 0;
margin-left: 5px;
}
}
}
}
&.combobox-color {
.form-control {
display: block;
padding: 2px 14px 2px 3px;
div {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
}
.rtl & {
padding: 2px 3px 2px 14px;
}
}
li a {
padding: 5px;
div {
height: 15px;
}
}
}
}
.open > .combobox.combo-dataview-menu {

5
apps/common/main/resources/less/common.less
View file

@ -247,6 +247,11 @@ label {
color: @text-normal-ie;
color: @text-normal;
}
.rtl & {
left: unset;
right: 0;
}
}
textarea {