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

[FIX] web: adapt scroll on setting app selector

Browse Source 
Prior to this commit, the setting page had 2 vertical scrollbars, which
wasn't clear to use on mobile.

This commit changes the scrolling orientation of the app selector on
mobile to make it easier to use in small screen.

task-3349528

closes odoo/odoo#135214

X-original-commit: 4b8d93799c32a62f16200a88ad32000203918d63
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Brieuc-brd
2023-09-13 04:37:04 +00:00
parent d064d3728d
commit 761320ae45
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
+11 -6
View File
@@ -2,12 +2,17 @@
<templates xml:space="preserve">
<t t-name="web.SettingsPage">
<div class="o_setting_container">
<div class="settings_tab" t-if="!env.isSmall or state.search.value.length === 0">
<t t-foreach="props.modules" t-as="module" t-key="module.key">
<div class="tab" t-if="!module.isVisible" t-att-class="(state.selectedTab === module.key and state.search.value.length === 0) ? 'selected': ''" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
<div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>
</div>
</t>
<div class="position-sticky top-0 flex-grow-0 z-index-1">
<div class="settings_tab h-100" t-if="!env.isSmall or state.search.value.length === 0">
<t t-foreach="props.modules" t-as="module" t-key="module.key">
<div class="tab" t-if="!module.isVisible"
t-att-class="{
'selected': state.selectedTab === module.key and state.search.value.length === 0, 'position-sticky start-0 end-0 bg-primary z-index-1': state.selectedTab === module.key and state.search.value.length === 0 and env.isSmall
}" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
<div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>
</div>
</t>
</div>
</div>
<ActionSwiper
onRightSwipe = " hasRightSwipe() ? {
addons/web/static/src/webclient/settings_form_view/settings_form_view_mobile.scss
+2 -2
View File
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
.o_base_settings_view {
.o_base_settings_view .o_form_renderer {
flex-flow: column nowrap;
> .o_control_panel {
@@ -63,4 +63,4 @@
}
}
}
}