mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[MIG] web_responsive: Migration to 15.0
This commit is contained in:
Sergey Shebanin
committed by
anjeel.haria
anjeel.haria
parent
cfea8e7762
commit
cd321a6ef1
@@ -0,0 +1,57 @@
|
||||
/** @odoo-module **/
|
||||
/* Copyright 2021 ITerra - Sergey Shebanin
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
||||
|
||||
import SearchPanel from "@web/legacy/js/views/search_panel";
|
||||
import {deviceContext} from "@web_responsive/components/ui_context.esm";
|
||||
import {patch} from "web.utils";
|
||||
|
||||
const {useContext} = owl.hooks;
|
||||
|
||||
// Patch search panel to add functionality for mobile view
|
||||
patch(SearchPanel.prototype, "web_responsive.SearchPanelMobile", {
|
||||
setup() {
|
||||
this._super();
|
||||
this.state.mobileSearch = false;
|
||||
this.ui = useContext(deviceContext);
|
||||
},
|
||||
getActiveSummary() {
|
||||
const selection = [];
|
||||
for (const filter of this.model.get("sections")) {
|
||||
let filterValues = [];
|
||||
if (filter.type === "category") {
|
||||
if (filter.activeValueId) {
|
||||
const parentIds = this._getAncestorValueIds(
|
||||
filter,
|
||||
filter.activeValueId
|
||||
);
|
||||
filterValues = [...parentIds, filter.activeValueId].map(
|
||||
(valueId) => filter.values.get(valueId).display_name
|
||||
);
|
||||
}
|
||||
} else {
|
||||
let values = [];
|
||||
if (filter.groups) {
|
||||
values = [
|
||||
...[...filter.groups.values()].map((g) => g.values),
|
||||
].flat();
|
||||
}
|
||||
if (filter.values) {
|
||||
values = [...filter.values.values()];
|
||||
}
|
||||
filterValues = values
|
||||
.filter((v) => v.checked)
|
||||
.map((v) => v.display_name);
|
||||
}
|
||||
if (filterValues.length) {
|
||||
selection.push({
|
||||
values: filterValues,
|
||||
icon: filter.icon,
|
||||
color: filter.color,
|
||||
type: filter.type,
|
||||
});
|
||||
}
|
||||
}
|
||||
return selection;
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
/* Copyright 2021 ITerra - Sergey Shebanin
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
||||
|
||||
.o_web_client {
|
||||
.o_mobile_search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
z-index: $zindex-modal;
|
||||
overflow: auto;
|
||||
.o_mobile_search_header {
|
||||
height: 46px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
span:active {
|
||||
background-color: darken($o-brand-primary, 10%);
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.o_searchview_input_container {
|
||||
display: flex;
|
||||
padding: 15px 20px 0 20px;
|
||||
position: relative;
|
||||
.o_searchview_input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid $o-brand-secondary;
|
||||
}
|
||||
.o_searchview_facet {
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
order: 1;
|
||||
.o_searchview_facet_label {
|
||||
border-radius: 2em 0em 0em 2em;
|
||||
}
|
||||
}
|
||||
.o_searchview_autocomplete {
|
||||
top: 100%;
|
||||
> li {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_mobile_search_filter {
|
||||
padding-bottom: 15%;
|
||||
.o_dropdown {
|
||||
width: 100%;
|
||||
margin: 15px 5px 0px 5px;
|
||||
border: solid 1px darken(gray("200"), 20%);
|
||||
}
|
||||
.o_dropdown_toggler_btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// We disable the backdrop in this case because it prevents any
|
||||
// interaction outside of a dropdown while it is open.
|
||||
.dropdown-backdrop {
|
||||
z-index: -1;
|
||||
}
|
||||
.dropdown-menu {
|
||||
// Here we use !important because of popper js adding custom style
|
||||
// to element so to override it use !important
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
color: gray("600");
|
||||
.divider {
|
||||
margin: 0px;
|
||||
}
|
||||
> li > a {
|
||||
padding: 10px 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_mobile_search_show_result {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Search panel
|
||||
@include media-breakpoint-down(sm) {
|
||||
.o_controller_with_searchpanel {
|
||||
display: block;
|
||||
.o_search_panel {
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
border-left: 1px solid $gray-300;
|
||||
section {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
}
|
||||
.o_search_panel_summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!-- Copyright 2021 Sergey Shebanin
|
||||
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
|
||||
<templates>
|
||||
<t t-inherit="web.Legacy.SearchPanel" t-inherit-mode="extension" owl="1">
|
||||
<xpath expr="//div[hasclass('o_search_panel')]" position="inside">
|
||||
<div
|
||||
t-if="ui.isSmall"
|
||||
class="o_search_panel_summary"
|
||||
t-on-click.stop="state.mobileSearch = true"
|
||||
>
|
||||
<div class="d-flex flex-wrap align-items-center">
|
||||
<i class="fa fa-fw fa-filter mr-1" />
|
||||
<t t-set="filters" t-value="getActiveSummary()" />
|
||||
<span t-foreach="filters" t-as="filter" class="mx-1">
|
||||
<i
|
||||
t-if="filter.icon"
|
||||
t-attf-class="fa {{ filter.icon }} mr-2"
|
||||
t-att-style="filter.color and ('color: ' + filter.color)"
|
||||
/>
|
||||
<t
|
||||
t-esc="filter.values.join(filter.type == 'category' ? ' / ' : ', ')"
|
||||
/>
|
||||
</span>
|
||||
<t t-if="!filters.length">All</t>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="o_search_panel_content"
|
||||
t-att-class="ui.isSmall ? (state.mobileSearch ? 'o_mobile_search' : 'd-none'): ''"
|
||||
/>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('o_search_panel_content')]" position="inside">
|
||||
<div t-if="ui.isSmall" class="o_mobile_search_header">
|
||||
<span
|
||||
class="o_mobile_search_close float-left mt16 mb16 mr8 ml16"
|
||||
t-on-click.stop="state.mobileSearch = false"
|
||||
>
|
||||
<i class="fa fa-arrow-left" />
|
||||
<strong class="float-right ml8">FILTER</strong>
|
||||
</span>
|
||||
</div>
|
||||
<xpath expr="//section" position="move" />
|
||||
<div
|
||||
t-if="ui.isSmall"
|
||||
class="btn btn-primary o_mobile_search_show_result fixed-bottom"
|
||||
t-on-click.stop="state.mobileSearch = false"
|
||||
>
|
||||
<t>SEE RESULT</t>
|
||||
</div>
|
||||
</xpath>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user