From 65cd911a5a1fde4a9c8555c3a18aa31c706f7fe4 Mon Sep 17 00:00:00 2001
From: amdi-odoo <amdi@odoo.com>
Date: Wed, 27 Mar 2024 08:02:35 +0100
Subject: [PATCH] [FIX] web: fix properties mobile display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the property mobile display:

- Set the popup in fullscreen.
- The draggable feature is disabled.
- Replacing the move up/move down property arrows in the popup by a
back arrow so that the fullscreen popup can be closed.
- Removing the min-width on the property popover to prevent the popup
from going out of the screen.
- Edit button is now always visible as hovering on it is not possible on mobile.

Task-3635554

closes odoo/odoo#156886

Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 .../fields/properties/properties_field.scss   | 24 ++++++++++++-------
 .../fields/properties/properties_field.xml    |  6 ++---
 .../properties/property_definition.scss       |  4 +++-
 .../fields/properties/property_definition.xml |  3 ++-
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/addons/web/static/src/views/fields/properties/properties_field.scss b/addons/web/static/src/views/fields/properties/properties_field.scss
index 8aac4be76a5..af7f9562baa 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.scss
+++ b/addons/web/static/src/views/fields/properties/properties_field.scss
@@ -91,16 +91,14 @@
     z-index: $zindex-popover !important;
     font-size: inherit;
     box-sizing: border-box;
-}
 
-.o_xxs_form_view .o_field_properties {
-    // mobile view
-    .o_field_property_add,
-    .o_field_property_open_popover {
-        display: none;
-    }
-    .o_field_property_open_popover.disabled {
-        pointer-events: none;
+    // fullscreen on small screen sizes
+    @include media-breakpoint-down(md) {
+        top: 0px !important;
+        left: 0px !important;
+        right: 0px;
+        bottom: 0px;
+        margin-top: 0px !important;
     }
 }
 
@@ -115,6 +113,14 @@
     .oi-draggable {
         cursor: url(/web/static/img/openhand.cur), grab;
     }
+    @include media-breakpoint-down(sm) {
+        .o_field_property_open_popover {
+            opacity: 1;
+            &.disabled {
+                pointer-events: none;
+            }
+        }
+    }
 }
 
 .o_property_dragging {
diff --git a/addons/web/static/src/views/fields/properties/properties_field.xml b/addons/web/static/src/views/fields/properties/properties_field.xml
index 911b973edf8..fa116f58068 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.xml
+++ b/addons/web/static/src/views/fields/properties/properties_field.xml
@@ -21,7 +21,7 @@
                             class="o_field_property_open_popover fa fa-pencil ms-3"
                             t-on-click.prevent.stop="(event) => this.onPropertyEdit(event, propertiesListGroup.name)"/>
                         <i t-if="state.canChangeDefinition and !props.readonly"
-                            class="oi oi-draggable ms-1"/>
+                            class="oi oi-draggable ms-1 d-none d-sm-block"/>
                         <div t-if="foldable" class="ms-auto">
                             <i class="fa me-1" t-att-class="isFolded ? 'fa-caret-right' : 'fa-caret-down'"/>
                         </div>
@@ -54,7 +54,7 @@
                                 class="o_field_property_open_popover fa fa-pencil ms-2"
                                 t-on-click="(event) => this.onPropertyEdit(event, propertyConfiguration.name)"/>
                             <i t-if="state.canChangeDefinition and !props.readonly"
-                                class="oi oi-draggable ms-1"/>
+                                class="oi oi-draggable ms-1 d-none d-sm-block"/>
                         </label>
                         <div class="o_property_field_value w-100">
                             <PropertyValue
@@ -77,7 +77,7 @@
                     </div>
                     <div
                         t-if="propertiesListGroup_index === _groupedPropertiesList.length - 1 and state.showAddButton"
-                        class="o_field_property_add"
+                        class="o_field_property_add d-none d-sm-block"
                         t-att-class="{'g-col-2': props.columns !== 1}">
                         <button
                             t-if="!props.readonly and state.canChangeDefinition and definitionRecordId"
diff --git a/addons/web/static/src/views/fields/properties/property_definition.scss b/addons/web/static/src/views/fields/properties/property_definition.scss
index 0b0a18b0ea1..9c4142d8569 100644
--- a/addons/web/static/src/views/fields/properties/property_definition.scss
+++ b/addons/web/static/src/views/fields/properties/property_definition.scss
@@ -3,7 +3,9 @@
     overflow-y: auto;
 
     .o_modal_container {
-        min-width: calc(#{$o-form-view-sheet-max-width} / 3);
+        @include media-breakpoint-up(sm) {
+            min-width: calc(#{$o-form-view-sheet-max-width} / 3);
+        }
         max-width: calc(#{$o-form-view-sheet-max-width} / 2);
     }
 
diff --git a/addons/web/static/src/views/fields/properties/property_definition.xml b/addons/web/static/src/views/fields/properties/property_definition.xml
index bb8ce5a033a..0cf6b922777 100644
--- a/addons/web/static/src/views/fields/properties/property_definition.xml
+++ b/addons/web/static/src/views/fields/properties/property_definition.xml
@@ -3,7 +3,7 @@
     <t t-name="web.PropertyDefinition">
         <div class="o_field_property_definition o_field_widget o_form_view d-block" t-ref="propertyDefinition">
             <div class="d-flex justify-content-between px-3 border-bottom">
-                <div class="border-end py-1">
+                <div t-if="!env.isSmall" class="border-end py-1">
                     <button
                         t-attf-class="btn btn-link ps-0 {{this.isFirst ? 'disabled' : ''}}"
                         t-on-click="() => this.onPropertyMove('up')" title="Move this Property up">
@@ -15,6 +15,7 @@
                         <i class="oi oi-chevron-down ms-2"/>
                     </button>
                 </div>
+                <button t-else="" class="btn oi oi-arrow-left my-2" t-on-click="() => this.props.close()"/>
                 <button
                     t-if="!props.readonly and props.canChangeDefinition"
                     class="btn pe-0 text-danger float-end o_field_property_definition_delete"