pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] mail: restore the scroll behaviour of control panel on Mobile

Browse Source 
Given that we have a viewport of 320px and, to simplify the explanation,
we discard the height of the <header> (aka. the top navbar).

Since the refactoring of Discuss [1], a global rule was added to the
'.o_action_manager' to allow the flex to shrink the discussion's list
in Discuss on Mobile.

But this rule change the box sizing of '.o_action_manager' as now it
takes the minimum size (e.g. before 3000px became now 320px +/- the
height of the viewport).
Therefore a limit for the sticky-scroll behaviour of control panel is
set at the end of the height of the element.
Then when the viewport goes outside this limit the sticky doesn't work
anymore until the viewport returns before this limit.
(e.g. <= 320px ok, > 320px ko).

The fix is to change the flex basis of the '.o_Discuss_notificationList'
to be 0 which avoids to alter the global '.o_action_manager' and scopes
rules to Discuss' specific classes.

DOM before this commit:
┌───────────────────────────────────────────────────────┐
│ '.o_action_manager'                                ▲  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                     ELEMENT HEIGHT │  │
│                                       = 'VIEWPORT' │  │
│                                              320px │  │
│ ┌────────────────────────────────────────────────┐ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │        Control Panel                           │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ └────────────────────────────────────────────────┘ ▼  │
│ - - - - - - - - LIMIT OF STICKY ELEMENT - - - - - - - │ <- 320px
│                                                    ▲  │
│                                                    │  │
│                                        OVERFLOW    │  │
│                                        VISIBLE     │  │
│                                                    │  │
│                                                    ▼  │
└───────────────────────────────────────────────────────┘

DOM after this commit:
┌───────────────────────────────────────────────────────┐
│ '.o_action_manager'                                ▲  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                                    │  │
│                                     ELEMENT HEIGHT │  │ <- 320px
│                                     >=  'VIEWPORT' │  │
│                                             3000px │  │
│ ┌────────────────────────────────────────────────┐ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │        Control Panel                           │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ │                                                │ │  │
│ └────────────────────────────────────────────────┘ ▼  │
└───────────────────────────────────────────────────────┘

Steps to reproduce:
* Open Odoo on Mobile
* Go to a Kanban view with list height at least twice the screen height
* Scroll to the end of the page (the control panel is hidden)
* Scroll a bit upper => BUG the control panel is not visible until we
scroll in the 'box' of the '.o_action_manager'

Note this behaviour is maybe related to an issue from CSS3 [2]
from MDN [3]

Ref:
[1] odoo/odoo@3fea5b2136
[2] Issue 865 on https://github.com/w3c/csswg-drafts
[3] https://developer.mozilla.org/en-US/docs/Web/CSS/position

closes odoo/odoo#77660

X-original-commit: fdcfaa7b72a4af0d0c3e308e299638fc8fa19bdb
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Pierre Paridans <pparidans@users.noreply.github.com>
Signed-off-by: rfr-odoo <rfr-odoo@users.noreply.github.com>
This commit is contained in:
Romeo Fragomeli
2021-10-02 10:20:18 +00:00
parent a54f11edb1
commit 1b0f165a2f
1 changed files with 2 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/discuss/discuss.scss
+2 -7
View File
@@ -2,11 +2,6 @@
// Layout
// ------------------------------------------------------------------
.o_action_manager {
// bug with scrollable inside discuss mobile without this...
min-height: 0;
}
.o-autogrow {
flex: 1 1 auto;
}
@@ -87,7 +82,7 @@
}
.o_Discuss_thread {
flex: 1 1 auto;
flex: 1 1 0;
min-width: 0;
&.o-mobile {
@@ -97,7 +92,7 @@
.o_Discuss_notificationList {
width: map-get($sizes, 100);
flex: 1 1 auto;
flex: 1 1 0;
}
// ------------------------------------------------------------------