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

[FIX] web: settings control panel's layout on small screen

Browse Source 
The custom control panel for Settings form view has radically changed
and the old CSS rules (`.o_settings_title`, `.o_setting_search`) didn't
apply anymore, so we remove it.

Note that the form view uses a custom control panel `FormControlPanel`
but the settings form view uses the normal one: `ControlPanel`.

In this commit, we adapt the CSS to reflect the normal control panel
(e.g. the one used by the Kanban view)

Also note the differance between the old version and now:
* before (< Odoo 15.2) the input search was focused when the app was
opened and there wasn't any title
* after (>= Odoo 16) we have harmonized the search to match the other
control panel, so we have to click on the magnifying glass to show
the search input.

Steps to reproduce:
* Open Odoo on a small screen (e.g. on Mobile)
* Open the Settings app => BUG the magnifying glass isn't at the right
position.

closes odoo/odoo#110043

X-original-commit: 91ab277ef66a2ca6b34c13fcba7197f18c50aab0
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
This commit is contained in:
Romeo Fragomeli
2023-01-17 09:14:47 +01:00
parent 42b5a8d86e
commit dcf06d45cb
5 changed files with 4 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/search/control_panel/control_panel.scss
-3
View File
@@ -16,9 +16,6 @@
}
@include media-breakpoint-down(md) {
padding-right: 0;
width: 100%;
> div.o_cp_bottom {
min-height: auto;
}
addons/web/static/src/views/form/control_panel/form_control_panel.xml
+2 -2
View File
@@ -3,8 +3,8 @@
<t t-name="web.FormControlPanel" owl="1">
<div class="o_control_panel" t-ref="root">
<div t-if="display['top']" class="o_cp_top">
<div class="o_cp_top_left d-flex flex-grow-1 align-items-center">
<div t-if="display['top']" class="o_cp_top" t-att-class="{ 'flex-wrap': env.isSmall }">
<div class="o_cp_top_left d-flex flex-grow-1 align-items-center" t-att-class="{ 'w-100': env.isSmall }">
<t t-if="display['top-left']">
<t t-slot="control-panel-breadcrumb">
<t t-if="env.isSmall">
addons/web/static/src/views/form/form_controller.scss
-8
View File
@@ -932,14 +932,6 @@
}
}
@include media-breakpoint-down(md) {
.o_control_panel {
padding-right: 16px;
> div.o_cp_top {
flex-flow: column;
}
}
.o_cp_buttons {
width: 100%;
div, .o-kanban-button-new {
addons/web/static/src/webclient/settings_form_view/settings_form_view.scss
-27
View File
@@ -91,33 +91,6 @@
display: flex;
flex-flow: row wrap;
width: 100%;
.o_settings_title, .o_setting_search {
flex: 1 0 auto;
width: map-get($o-extra-grid-breakpoints, vsm) / 2;
}
.o_setting_search {
position: relative;
.searchInput {
border: 0px;
max-width: 400px;
border-bottom: 1px solid $border-color;
box-shadow: none;
}
.searchIcon {
@include o-position-absolute($right: 0);
color: map-get($grays, '700');
}
&:focus-within {
.searchInput {
border-bottom-color: $primary;
}
}
}
}
.o_form_statusbar {
addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
+2 -2
View File
@@ -6,8 +6,8 @@
</xpath>
<xpath expr="//Layout" position="inside">
<t t-set-slot="control-panel-top-right">
<div class="o_cp_searchview" role="search">
<div class="o_searchview" role="search" aria-autocomplete="list">
<div class="o_cp_searchview d-flex flex-grow-1" role="search">
<div class="o_searchview pb-1 align-self-center border-bottom flex-grow-1" role="search" aria-autocomplete="list">
<i class="o_searchview_icon oi oi-search" role="img" aria-label="Search..." title="Search..." />
<div class="o_searchview_input_container">
<input type="text" class="o_searchview_input" accesskey="Q" placeholder="Search..." role="searchbox" t-model="searchState.value" t-ref="autofocus"/>