[IMP] big inputs on forms in edit mode

web_responsive/readme/DESCRIPTION.rst

@@ -76,6 +76,8 @@ This module adds responsiveness to web backend.
 
   .. image:: ../static/img/device_rotation.gif
 
+* Big inputs on form in edit mode
+
 **Features for desktop computers**:
 
 * Keyboard shortcuts for easier navigation,

web_responsive/static/src/components/control_panel/control_panel.esm.js

@@ -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);
     },

web_responsive/static/src/components/control_panel/control_panel.scss

@@ -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 {

web_responsive/static/src/components/control_panel/control_panel.xml

@@ -54,8 +54,10 @@
                     />
                     <SearchBar fields="fields" />
                 </t>
-                <t t-if="ui.isSmall and 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 = ''"
                         />
@@ -66,15 +68,16 @@
                         />
                     </t>
                     <t
-                    t-if="ui.isSmall and state.mobileSearchMode == 'full'"
+                        t-if="state.mobileSearchMode == 'full'"
                         t-call="web_responsive.LegacyMobileSearchView"
                     />
-                <t t-if="ui.isSmall and state.mobileSearchMode == ''">
+                    <t t-if="state.mobileSearchMode == ''">
                         <button
                             class="btn btn-link fa fa-search"
                             t-on-click.stop="state.mobileSearchMode = 'quick'"
                         />
                     </t>
+                </t>
             </div>
         </xpath>
         <xpath expr="//div[hasclass('o_cp_top_left')]" position="attributes">
@@ -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,9 +222,11 @@
     <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'">
+            <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', '')"
                         />
@@ -239,10 +244,10 @@
                     </div>
                 </t>
                 <t
-                t-if="env.isSmall and props.mobileSearchMode == 'full'"
+                    t-if="props.mobileSearchMode == 'full'"
                     t-call="web_responsive.MobileSearchView"
                 />
-            <t t-if="env.isSmall and props.mobileSearchMode == ''">
+                <t t-if="props.mobileSearchMode == ''">
                     <div
                         class="o_searchview o_searchview_mobile"
                         role="search"
@@ -252,6 +257,7 @@
                             <button class="btn btn-link fa fa-search" />
                     </div>
                 </t>
+            </t>
         </div>
     </t>
     <t t-name="web_responsive.MobileSearchView" owl="1">

web_responsive/static/src/legacy/css/web_responsive.scss

@@ -27,6 +27,10 @@ html .o_web_client .o_action_manager .o_action {
 }
 
 @include media-breakpoint-down(sm) {
+    .ui-menu .ui-menu-item {
+        height: 35px;
+        font-size: 15px;
+    }
     .o_calendar_view .o_calendar_widget {
         .fc-timeGridDay-view .fc-axis,
         .fc-timeGridWeek-view .fc-axis {
@@ -89,6 +93,52 @@ html .o_web_client .o_action_manager .o_action {
             overflow-x: auto;
         }
 
+        .o_td_label .o_form_label:not(.o_status):not(.o_calendar_invitation) {
+            min-height: 23px;
+            @include media-breakpoint-up(md) {
+                margin-bottom: 10px;
+            }
+        }
+        .o_horizontal_separator {
+            font-size: 14px;
+        }
+        // Some UX improvements for form in edit mode
+        @include media-breakpoint-down(sm) {
+            .o_field_widget {
+                vertical-align: middle;
+            }
+            &.o_form_editable .o_field_widget {
+                &:not(.o_stat_info):not(.o_readonly_modifier):not(.oe_form_field_html):not(.o_field_image) {
+                    min-height: 35px;
+                }
+                .o_x2m_control_panel {
+                    margin-bottom: 10px;
+                }
+                &.o_field_float_percentage,
+                &.o_field_monetary,
+                &.o_field_many2manytags,
+                .o_field_many2one_selection {
+                    align-items: center;
+                }
+                .o_field_many2one_selection .o_input_dropdown,
+                &.o_datepicker,
+                &.o_field_partner_autocomplete {
+                    input {
+                        min-height: 35px;
+                    }
+                }
+                .o_external_button {
+                    margin-left: 10px;
+                }
+                .o_dropdown_button,
+                .o_datepicker_button {
+                    top: 8px;
+                    right: 6px;
+                    bottom: auto;
+                }
+            }
+        }
+
         .o_FormRenderer_chatterContainer {
             padding-top: 0;
             .o_Activity_info {
@@ -335,13 +385,15 @@ html .o_web_client .o_action_manager .o_action {
 }
 
 // Big checkboxes
-.o_list_view {
+.o_list_view,
+.o_settings_container .o_setting_box {
+    .o_setting_right_pane {
+        margin-left: 34px;
+    }
     .custom-checkbox:not(.o_boolean_toggle) {
         margin-right: 10px;
 
         .custom-control-label {
-            top: -6px;
-
             &::after {
                 width: 24px;
                 height: 24px;
@@ -355,3 +407,18 @@ html .o_web_client .o_action_manager .o_action {
         }
     }
 }
+.o_list_view {
+    .custom-checkbox:not(.o_boolean_toggle) {
+        top: -6px;
+    }
+}
+@include media-breakpoint-down(sm) {
+    .o_base_settings
+        .o_setting_container
+        .settings
+        > .app_settings_block
+        .o_settings_container {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

web_responsive/static/src/legacy/js/web_responsive.js

@@ -8,9 +8,12 @@ odoo.define("web_responsive", function (require) {
     const core = require("web.core");
     const FormRenderer = require("web.FormRenderer");
     const RelationalFields = require("web.relational_fields");
+    const ViewDialogs = require("web.view_dialogs");
     const ListRenderer = require("web.ListRenderer");
     const CalendarRenderer = require("web.CalendarRenderer");
 
+    const _t = core._t;
+
     // Fix for iOS Safari to set correct viewport height
     // https://github.com/Faisal-Manzer/postcss-viewport-height-correction
     function setViewportProperty(doc) {
@@ -110,6 +113,86 @@ odoo.define("web_responsive", function (require) {
         },
     });
 
+    /**
+     * Directly open popup dialog in mobile for search.
+     */
+    RelationalFields.FieldMany2One.include({
+        start: function () {
+            var superRes = this._super.apply(this, arguments);
+            if (config.device.isMobile) {
+                this.$input.prop("readonly", true);
+            }
+            return superRes;
+        },
+        // --------------------------------------------------------------------------
+        // Private
+        // --------------------------------------------------------------------------
+
+        /**
+         * @private
+         * @override
+         */
+        _bindAutoComplete: function () {
+            if (!config.device.isMobile) {
+                return this._super.apply(this, arguments);
+            }
+        },
+
+        /**
+         * @private
+         * @override
+         */
+        _getSearchCreatePopupOptions: function () {
+            const options = this._super.apply(this, arguments);
+            _.extend(options, {
+                on_clear: () => this.reinitialize(false),
+            });
+            return options;
+        },
+
+        /**
+         * @private
+         * @override
+         */
+        _toggleAutoComplete: function () {
+            if (config.device.isMobile) {
+                this._searchCreatePopup("search");
+            } else {
+                return this._super.apply(this, arguments);
+            }
+        },
+    });
+
+    /**
+     * Support for Clear button in search popup.
+     */
+    ViewDialogs.SelectCreateDialog.include({
+        init: function () {
+            this._super.apply(this, arguments);
+            this.on_clear =
+                this.options.on_clear ||
+                function () {
+                    return undefined;
+                };
+        },
+        /**
+         * @override
+         */
+        _prepareButtons: function () {
+            this._super.apply(this, arguments);
+            if (config.device.isMobile && this.options.disable_multiple_selection) {
+                this.__buttons.push({
+                    text: _t("Clear"),
+                    classes: "btn-secondary o_clear_button",
+                    close: true,
+                    click: function () {
+                        this.on_clear();
+                    },
+                });
+            }
+        },
+    });
+
     CalendarRenderer.include({
         /**
          * @override