From 7441e79dc995231209e82d83baabfd1deadbfba7 Mon Sep 17 00:00:00 2001
From: Sergey Shebanin <sergey@shebanin.ru>
Date: Wed, 24 Nov 2021 17:15:03 +0300
Subject: [PATCH] [IMP] big inputs on forms in edit mode

---
 web_responsive/readme/DESCRIPTION.rst         |   2 +
 .../control_panel/control_panel.esm.js        |   2 +-
 .../control_panel/control_panel.scss          |   6 +
 .../control_panel/control_panel.xml           | 108 +++++++++---------
 .../static/src/legacy/css/web_responsive.scss |  73 +++++++++++-
 .../static/src/legacy/js/web_responsive.js    |  83 ++++++++++++++
 6 files changed, 219 insertions(+), 55 deletions(-)

diff --git a/web_responsive/readme/DESCRIPTION.rst b/web_responsive/readme/DESCRIPTION.rst
index f2e295af1..8914bdef3 100644
--- a/web_responsive/readme/DESCRIPTION.rst
+++ b/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,
diff --git a/web_responsive/static/src/components/control_panel/control_panel.esm.js b/web_responsive/static/src/components/control_panel/control_panel.esm.js
index 19d9ab612..08f8aeb9e 100644
--- a/web_responsive/static/src/components/control_panel/control_panel.esm.js
+++ b/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);
     },
diff --git a/web_responsive/static/src/components/control_panel/control_panel.scss b/web_responsive/static/src/components/control_panel/control_panel.scss
index 813fbc02d..27f2cc926 100644
--- a/web_responsive/static/src/components/control_panel/control_panel.scss
+++ b/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 {
diff --git a/web_responsive/static/src/components/control_panel/control_panel.xml b/web_responsive/static/src/components/control_panel/control_panel.xml
index cbbf1cbeb..fac6c39ba 100644
--- a/web_responsive/static/src/components/control_panel/control_panel.xml
+++ b/web_responsive/static/src/components/control_panel/control_panel.xml
@@ -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>
diff --git a/web_responsive/static/src/legacy/css/web_responsive.scss b/web_responsive/static/src/legacy/css/web_responsive.scss
index 9b0232163..30aaf86da 100644
--- a/web_responsive/static/src/legacy/css/web_responsive.scss
+++ b/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;
+    }
+}
diff --git a/web_responsive/static/src/legacy/js/web_responsive.js b/web_responsive/static/src/legacy/js/web_responsive.js
index 37a8cf5d2..6f9be2935 100644
--- a/web_responsive/static/src/legacy/js/web_responsive.js
+++ b/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