[IMP] web: better ModelFieldSelector layout

This commit improves the usability of ModelFieldSelector widget
with following points:
- add a placeholder on the input for searching fields
- add more height to the same input for consistency
- properly show 'X' sign within header

Task 1916583
This commit is contained in:
Suraj Shukla
2019-04-09 12:42:40 +00:00
committed by Martin Geubelle
parent b993a2d9c8
commit 13222fcd68
2 changed files with 7 additions and 5 deletions
@@ -63,14 +63,16 @@
}
.o_field_selector_search {
padding-right: 0.4rem;
> .o_input {
padding: 5px 0.4rem;
}
}
.o_field_selector_popover_option {
@include o-position-absolute($top: 0);
padding: 7px 8px 8px 6px;
padding: 8px;
&.o_prev_page {
&.o_field_selector_prev_page {
left: 0;
border-right: 1px solid darken(theme-color('primary'), 10%);
}
&.o_field_selector_close {
right: 0;
+2 -2
View File
@@ -749,8 +749,8 @@
<i class="fa fa-arrow-left o_field_selector_popover_option o_field_selector_prev_page" title="Previous" role="img" aria-label="Previous"/>
<div class="o_field_selector_title"/>
<i class="fa fa-times o_field_selector_popover_option o_field_selector_close" title="Close" role="img" aria-label="Close"/>
<div t-if="widget.options.showSearchInput" class="o_field_selector_search">
<input type="text" class="o_input"/>
<div t-if="widget.options.showSearchInput" class="o_field_selector_search mt-2">
<input type="text" placeholder='Search...' class="o_input"/>
</div>
</div>
<div class="o_field_selector_popover_body">