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

[REF] portal: review 'search/filters' toolbar

Browse Source
This commit is contained in:
sri-odoo
2018-09-12 09:37:56 +02:00
committed by qsm-odoo
parent 60d837044a
commit 7a419ec2c2
2 changed files with 85 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/portal/static/src/scss/portal.scss
+17 -67
View File
@@ -3,8 +3,14 @@
/// rules.
///
// ====== Variables =========
$-navbar-height: $nav-link-height !default;
// Portal toolbar (filters, search bar)
$o-portal-mobile-toolbar: true; // Enable/Disable custom design
$o-portal-mobile-toolbar-border: $border-color;
$o-portal-mobile-toolbar-bg: $gray-200;
// Resize and vertically align navbar’s items relative to navbar
@mixin o-w-fill-navbar($ratio: 1) {
height: round($-navbar-height * $ratio * 100) / 100;
@@ -299,12 +305,11 @@ img.o_we_custom_image {
// Portal specific
.o_portal {
.breadcrumb {
background-color: rgba(0, 0, 0, 0);
margin-bottom: 0px;
}
background-color: transparent;
.record_pager {
padding: 8px 0px;
.breadcrumb-item {
display: inline-flex;
}
}
> tbody.o_portal_report_tbody {
@@ -357,68 +362,13 @@ img.o_we_custom_image {
margin-top: 0.5em;
}
.o_portal_navbar {
.navbar-brand {
margin: 0;
@include media-breakpoint-up(md) {
padding: $navbar-padding-y $navbar-padding-x 0 0;
}
}
// ===== Default portal navbar design =====
&.o_portal_navbar_default {
margin-bottom: 8px;
.navbar-brand {
padding: $navbar-padding-y $navbar-padding-x 0 0;
}
.navbar-header .dropdown-menu {
right: 0;
left: auto;
}
.navbar-toggle {
margin-right: 0;
margin-bottom: 0;
background-color: $table-active-bg;
padding: 6px 10px $navbar-padding-y;
border-width: 1px 1px 0 1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: 1;
&.collapsed {
padding:6px 10px;
border-width: 1px;
border-radius: $btn-border-radius;
background-color: transparent;
}
}
@include media-breakpoint-down(sm) {
.navbar-collapse {
z-index: 0;
background-color: $table-active-bg;
border-radius: $btn-border-radius;
border-top-right-radius: 0;
transform: translateY(-2px);
&.in {
overflow: visible;
}
}
}
@include media-breakpoint-up(md) {
> .container-fluid {
padding: 0;
.navbar-form {
padding-right: 0;
}
}
@if ($o-portal-mobile-toolbar) {
#o_portal_navbar_content {
@include media-breakpoint-down(md) {
margin: $navbar-padding-y (-$navbar-padding-x) 0;
padding: $navbar-padding-y $navbar-padding-x ;
border-top: $border-width solid $o-portal-mobile-toolbar-border;
background-color: $o-portal-mobile-toolbar-bg;
}
}
}
addons/portal/views/portal_templates.xml
+68 -68
View File
@@ -68,16 +68,16 @@
<template id="portal_layout" name="Portal Layout">
<t t-call="portal.frontend_layout">
<div class="container mt16 mb16 o_portal">
<div class="oe_structure">
<div t-if="not no_breadcrumbs" class="row">
<div t-attf-class="col-md-12">
<t t-call='portal.record_pager'/>
<ol t-if="page_name != 'home'" class="breadcrumb o_portal_submenu">
<li class="breadcrumb-item"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
<li t-if="page_name == 'my_details'" class="breadcrumb-item">Your Details</li>
</ol>
</div>
<div t-if="not no_breadcrumbs and not my_details" class="o_portal container mt-3">
<div class="row align-items-center bg-white no-gutters border rounded-top">
<div class="col">
<ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 py-2 flex-grow-1">
<li class="breadcrumb-item"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
<li t-if="page_name == 'my_details'" class="breadcrumb-item">Your Details</li>
</ol>
</div>
<div t-if="prev_record or next_record" class="col flex-grow-0">
<t t-call='portal.record_pager'/>
</div>
</div>
</div>
@@ -151,27 +151,28 @@
:param string filterby : name of the filter criteria
:param default_url : the base url of the pages (like '/my/orders')
:param boolean o_portal_search_panel : set to True to active the input search
:param html $0 : content of the t-call, <li class="float-left">Link</li>
:param html $0 : content of the t-call
:param title : bavbar title
:param classes : navbar classes
-->
<template id="portal_searchbar" name="Portal Search Bar">
<nav t-attf-class="navbar o_portal_navbar {{classes if classes else 'o_portal_navbar_default'}}">
<div class="container-fluid">
<!-- Navbar title only -->
<div class="navbar-header float-left">
<t t-set="no_title">No title</t>
<h3 class="navbar-brand"><t t-esc="title or no_title"/></h3>
</div>
<nav t-attf-class="navbar navbar-light navbar-expand-lg border border-top-0 mb-2 py-0 o_portal_navbar {{classes if classes else ''}}">
<!-- Navbar title -->
<span class="navbar-brand navbar-brand mb-0 h1 mr-auto" t-esc="title or 'No title'"/>
<!-- Non-collapsing menu item(s) -->
<div class="navbar-header navbar-right float-right">
<ul class="nav float-left">
<t t-raw="0"/>
<li t-if="searchbar_sortings" class="dropdown float-left ml16">
<button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle navbar-btn">
<span class="fa fa-sort"/>
<span class="d-none d-lg-inline"><t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/></span>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_portal_navbar_content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle filters">
<span class="navbar-toggler-icon small"/>
</button>
<!-- Collapsable content -->
<div class="collapse navbar-collapse" id="o_portal_navbar_content">
<div class="nav flex-column flex-lg-row ml-auto p-0 mb-3 mb-lg-0 mt-1 mt-lg-0">
<div t-if="searchbar_sortings" class="form-inline">
<span class="small mr-1 navbar-text">Sort By:</span>
<div class="btn-group">
<button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
<t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
</button>
<div class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
<t t-foreach="searchbar_sortings" t-as="option">
@@ -181,11 +182,13 @@
</a>
</t>
</div>
</li>
<li t-if="searchbar_filters" class="dropdown float-left ml4">
<button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle navbar-btn">
<span class="fa fa-filter"/>
<span class="d-none d-lg-inline"><t t-esc="searchbar_filters[filterby].get('label', 'All')"/></span>
</div>
</div>
<div t-if="searchbar_filters" class="form-inline ml-lg-2">
<span class="small mr-1 navbar-text">Filter By:</span>
<div class="btn-group">
<button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
<t t-esc="searchbar_filters[filterby].get('label', 'All')"/>
</button>
<div class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
<t t-foreach="searchbar_filters" t-as="option">
@@ -195,11 +198,13 @@
</a>
</t>
</div>
</li>
<li t-if="searchbar_groupby" class="dropdown float-left ml4">
<button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle navbar-btn">
<span class="fa fa-object-group"/>
<span class="d-none d-lg-inline"><t t-esc="searchbar_groupby[groupby].get('label', 'None')"/></span>
</div>
</div>
<div t-if="searchbar_groupby" class="form-inline ml-lg-2">
<span class="small mr-1 navbar-text">Group By:</span>
<div class="btn-group">
<button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-secondary btn-sm dropdown-toggle">
<t t-esc="searchbar_groupby[groupby].get('label', 'None')"/>
</button>
<div class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
<t t-foreach="searchbar_groupby" t-as="option">
@@ -209,37 +214,32 @@
</a>
</t>
</div>
</li>
</ul>
<button t-if='searchbar_inputs' type="button" class="navbar-toggle collapsed btn ml16" data-toggle="collapse" data-target="#o_portal_searchbar_collapse"><span class="fa fa-search"/></button>
</div>
<div t-if='searchbar_inputs' class="d-block d-md-none clearfix"/>
<!-- Collapsing content (searchbar_inputs) -->
<div t-if='searchbar_inputs' class="collapse navbar-collapse text-right" id="o_portal_searchbar_collapse">
<div class="navbar-form o_portal_search_panel">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span id="search_label" class="d-none d-md-inline mr4">Search</span>
</button>
<div class="dropdown-menu" role="menu">
<t t-foreach='searchbar_inputs' t-as='input'>
<a t-att-href="'#' + searchbar_inputs[input]['input']"
t-attf-class="dropdown-item#{search_in == searchbar_inputs[input]['input'] and ' active' or ''}">
<span t-raw="searchbar_inputs[input]['label']"/>
</a>
</t>
</div>
</div>
<input type="text" class="form-control" t-att-value='search' name="search"/>
<span class="input-group-append">
<button class="btn btn-secondary search-submit" type="button"><span class="fa fa-search d-none d-md-inline-block"/><span class="fa fa-arrow-right d-inline-block d-md-none"/></button>
</span>
</div>
</div>
<t t-raw="0"/>
</div>
</div> <!-- /.container-fluid -->
<form t-if="searchbar_inputs" class="form-inline o_portal_search_panel ml-lg-4">
<div class="input-group input-group-sm w-100">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"/>
<div class="dropdown-menu" role="menu">
<t t-foreach='searchbar_inputs' t-as='input'>
<a t-att-href="'#' + searchbar_inputs[input]['input']"
t-attf-class="dropdown-item#{search_in == searchbar_inputs[input]['input'] and ' active' or ''}">
<span t-raw="searchbar_inputs[input]['label']"/>
</a>
</t>
</div>
</div>
<input type="text" class="form-control form-control-sm" placeholder="Search" t-att-value='search' name="search"/>
<span class="input-group-append">
<button class="btn btn-secondary search-submit" type="button">
<span class="fa fa-search"/>
</button>
</span>
</div>
</form>
</div>
</nav>
</template>
@@ -358,10 +358,10 @@
<template id="record_pager" name="Portal Record Pager">
<t t-if='prev_record or next_record'>
<div class="ml8 record_pager btn-group btn-group-xs float-md-right" role="group">
<a role="button" t-att-class="'btn btn-secondary %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="fa fa-arrow-left" role="img" aria-label="Previous" title="Previous"></i></a>
<a role="button" t-att-class="'btn btn-secondary %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="fa fa-arrow-right" role="img" aria-label="Next" title="Previous"></i></a>
</div>
<div class="record_pager btn-group" role="group">
<a role="button" t-att-class="'btn btn-link %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="fa fa-chevron-left" role="img" aria-label="Previous" title="Previous"></i></a>
<a role="button" t-att-class="'btn btn-link %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="fa fa-chevron-right" role="img" aria-label="Next" title="Previous"></i></a>
</div>
</t>
</template>