[IMP] big inputs on forms in edit mode

This commit is contained in:
Sergey Shebanin
2021-11-24 17:15:03 +03:00
parent a9daa2aea7
commit 7441e79dc9
6 changed files with 219 additions and 55 deletions

View File

@@ -18,7 +18,7 @@ patch(LegacyControlPanel.prototype, "web_responsive.LegacyControlPanelMobile", {
setup() {
this._super();
this.state = useState({
mobileSearchMode: "",
mobileSearchMode: this.props.withBreadcrumbs ? "" : "quick",
});
this.ui = useContext(deviceContext);
},

View File

@@ -70,6 +70,7 @@
.o_cp_bottom_left {
float: left;
margin: 5px 0;
max-width: 80%;
}
.o_cp_bottom_right {
@@ -86,6 +87,10 @@
.o_cp_pager {
margin-bottom: 0;
}
.o_list_selection_box {
padding-left: 5px !important;
padding-right: 5px;
}
.o_cp_action_menus {
padding-right: 0;
@@ -165,6 +170,7 @@
align-items: center;
.o_searchview_input_container {
flex: 1 1 auto;
margin-left: 5px;
}
}
.o_searchview {

View File

@@ -54,26 +54,29 @@
/>
<SearchBar fields="fields" />
</t>
<t t-if="ui.isSmall and state.mobileSearchMode == 'quick'">
<button
class="btn btn-link fa fa-arrow-left"
t-on-click.stop="state.mobileSearchMode = ''"
/>
<SearchBar fields="fields" />
<button
class="btn fa fa-filter"
t-on-click.stop="state.mobileSearchMode = 'full'"
/>
</t>
<t
t-if="ui.isSmall and state.mobileSearchMode == 'full'"
t-call="web_responsive.LegacyMobileSearchView"
/>
<t t-if="ui.isSmall and state.mobileSearchMode == ''">
<button
class="btn btn-link fa fa-search"
t-on-click.stop="state.mobileSearchMode = 'quick'"
<t t-if="ui.isSmall">
<t t-if="state.mobileSearchMode == 'quick'">
<button
t-if="props.withBreadcrumbs"
class="btn btn-link fa fa-arrow-left"
t-on-click.stop="state.mobileSearchMode = ''"
/>
<SearchBar fields="fields" />
<button
class="btn fa fa-filter"
t-on-click.stop="state.mobileSearchMode = 'full'"
/>
</t>
<t
t-if="state.mobileSearchMode == 'full'"
t-call="web_responsive.LegacyMobileSearchView"
/>
<t t-if="state.mobileSearchMode == ''">
<button
class="btn btn-link fa fa-search"
t-on-click.stop="state.mobileSearchMode = 'quick'"
/>
</t>
</t>
</div>
</xpath>
@@ -131,7 +134,7 @@
</div>
<div
class="btn btn-primary o_mobile_search_show_result fixed-bottom"
t-on-click.stop="state.mobileSearchMode = ''"
t-on-click.stop="state.mobileSearchMode = (props.withBreadcrumbs ? '' : 'quick')"
>
<t>SEE RESULT</t>
</div>
@@ -219,38 +222,41 @@
<t t-name="web_responsive.SearchBar" owl="1">
<div>
<t t-if="!env.isSmall" t-call="web.SearchBar" />
<t t-if="env.isSmall and props.mobileSearchMode == 'quick'">
<div class="o_searchview o_searchview_quick">
<button
class="btn btn-link fa fa-arrow-left"
t-on-click.stop="trigger('set-mobile-view', '')"
/>
<div class="o_searchview_input_container">
<t t-call="web.SearchBar.Facets" />
<t t-call="web.SearchBar.Input" />
<t t-if="items.length">
<t t-call="web.SearchBar.Items" />
</t>
<t t-if="env.isSmall">
<t t-if="props.mobileSearchMode == 'quick'">
<div class="o_searchview o_searchview_quick">
<button
t-if="props.withBreadcrumbs"
class="btn btn-link fa fa-arrow-left"
t-on-click.stop="trigger('set-mobile-view', '')"
/>
<div class="o_searchview_input_container">
<t t-call="web.SearchBar.Facets" />
<t t-call="web.SearchBar.Input" />
<t t-if="items.length">
<t t-call="web.SearchBar.Items" />
</t>
</div>
<button
class="btn fa fa-filter"
t-on-click.stop="trigger('set-mobile-view', 'full')"
/>
</div>
<button
class="btn fa fa-filter"
t-on-click.stop="trigger('set-mobile-view', 'full')"
/>
</div>
</t>
<t
t-if="env.isSmall and props.mobileSearchMode == 'full'"
t-call="web_responsive.MobileSearchView"
/>
<t t-if="env.isSmall and props.mobileSearchMode == ''">
<div
class="o_searchview o_searchview_mobile"
role="search"
aria-autocomplete="list"
t-on-click.stop="trigger('set-mobile-view', 'quick')"
>
<button class="btn btn-link fa fa-search" />
</div>
</t>
<t
t-if="props.mobileSearchMode == 'full'"
t-call="web_responsive.MobileSearchView"
/>
<t t-if="props.mobileSearchMode == ''">
<div
class="o_searchview o_searchview_mobile"
role="search"
aria-autocomplete="list"
t-on-click.stop="trigger('set-mobile-view', 'quick')"
>
<button class="btn btn-link fa fa-search" />
</div>
</t>
</t>
</div>
</t>