From 7d0d49b4e331c4cb719ef26d91b2635cbf66ae41 Mon Sep 17 00:00:00 2001
From: sri-odoo <sri@odoo.com>
Date: Fri, 8 Mar 2019 10:30:02 +0000
Subject: [PATCH] [FIX] website_profile: improve top banner and navigation and
 apply various tweaks

Improve the email validation banner and allow adding custom classes when
calling its templates. Also improve top banner design as well as navigation
and tabs.

Finally perform some minor tweaks on design.

Commit linked to task ID 1941250 and PR #31977
---
 .../static/src/scss/website_profile.scss      |  60 ++------
 .../website_profile/views/website_profile.xml | 141 +++++++++++-------
 2 files changed, 104 insertions(+), 97 deletions(-)

diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index a20b1ea2eef..ad1771c5d62 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -1,5 +1,5 @@
 $owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
-$owprofile-tabs-height: 37px;
+$owprofile-tabs-height: 36px;
 
 .o_wprofile_wrap {
     background-color: $owprofile-color-bg;
@@ -119,52 +119,24 @@ $owprofile-tabs-height: 37px;
 
 // All Users Page
 .o_wprofile_all_users_nav {
-    margin: auto;
-    background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important;
-    a {
-        color: #FFFFFF;
-    }
-    nav {
-        .breadcrumb-item::before {
-            font-weight: bold;
-            color: #FFFFFF;
-            opacity: 0.8;
-        }
-        .breadcrumb-item {
-            a {
-                font-weight: bold;
-                color: #FFFFFF;
-                opacity: 0.8;
-                transition: opacity linear .3s;
-            }
-            &.active {
-                a {
-                    opacity: 1.0;
-                }
-            }
-        }
-        ol {
-            background-color: transparent;
-        }
-    }
-}
+    border-width: 1px 0;
 
-.o_wprofile_all_users_header {
-    @include media-breakpoint-up(sm)  {
-        min-height: 200px;
-        margin-bottom: -60px;
+    &, .o_wprofile_course_nav_search {
+        background-color: rgba(white, 0.05);
+        border-color: rgba(white, 0.1);
+        border-style: solid;
     }
-    margin: auto;
-    background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important;
-    > div:first-child {
-        margin: auto;
-        width: 100%;
-        max-width: 1140px;
-        padding: 32px 32px 0px 32px;
+
+    .o_wprofile_course_nav_search {
+        border-width: 0 1px;
+    }
+
+    .breadcrumb-item.active a, .breadcrumb-item a:hover {
         color: white;
-        top: 48px;
-        padding-top: 0px;
-        height: 250px;
+    }
+
+    .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wprofile_course_nav_search input::placeholder {
+        color: rgba(white, 0.8);
     }
 }
 
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 540c7c608b5..d35e3bde919 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -9,6 +9,74 @@
         </xpath>
     </template>
 
+    <!-- Sub nav -->
+    <template id="user_profile_sub_nav" name="User profile subnav">
+        <div class="o_wprofile_all_users_nav">
+            <div class="container">
+                <div class="row align-items-center justify-content-between">
+                    <!-- Desktop Mode -->
+                    <nav aria-label="breadcrumb" class="col d-none d-md-flex">
+                        <ol class="breadcrumb bg-transparent mb-0 pl-0 py-0">
+                            <li class="breadcrumb-item">
+                                <a t-att-href="home_url or '/'">Home</a>
+                            </li>
+                            <li t-attf-class="breadcrumb-item #{'active' if not view_user else ''}">
+                                <a href="/profile/users">Users</a>
+                            </li>
+                            <li t-if="view_user" class="breadcrumb-item active">
+                                <a><t t-esc="view_user"/></a>
+                            </li>
+                        </ol>
+                    </nav>
+
+                    <div class="col d-none d-md-flex flex-row align-items-center justify-content-end">
+                        <!-- search -->
+                        <form t-attf-action="/profile/users" role="search" method="get">
+                            <div class="input-group o_wprofile_course_nav_search ml-1 position-relative">
+                                <span class="input-group-prepend">
+                                    <button class="btn btn-link text-white rounded-0 pr-1" type="submit" aria-label="Search" title="Search">
+                                        <i class="fa fa-search"></i>
+                                    </button>
+                                </span>
+                                <input type="text" class="form-control border-0 rounded-0 bg-transparent text-white" name="search" placeholder="Search users"/>
+                            </div>
+                        </form>
+                    </div>
+
+                    <!-- Mobile Mode -->
+                    <div class="col d-md-none py-1">
+                        <div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
+                            <div class="btn-group w-100 ml-2">
+                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nav</a>
+
+                                <ul class="dropdown-menu">
+                                    <a class="dropdown-item" t-att-href="home_url or '/'">Home</a>
+                                    <a class="dropdown-item" href="/profile/users">&#9492; Users</a>
+                                    <a t-if="view_user" class="dropdown-item">&#9492; <t t-esc="view_user"/></a>
+                                </ul>
+                            </div>
+
+                            <div class="btn-group ml-1 position-static mr-2">
+                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
+                                <div class="dropdown-menu dropdown-menu-right w-100" style="right: 10px;">
+                                    <form class="px-3" t-attf-action="/profile/users" role="search" method="get">
+                                        <div class="input-group">
+                                            <input type="text" class="form-control" name="search" placeholder="Search courses"/>
+                                            <span class="input-group-append">
+                                                <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
+                                                    <i class="fa fa-search"/>
+                                                </button>
+                                            </span>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
 
     <!--
     Single User Profile Page
@@ -126,8 +194,12 @@
     </template>
 
     <template id="user_profile_header" name="Profile Page Header">
-        <div class="o_wprofile_header o_wprofile_gradient position-relative text-white pb-3 pb-md-0 pt-2 pt-md-5">
-            <div class="container">
+        <div class="o_wprofile_header o_wprofile_gradient position-relative text-white">
+            <t t-call="website_profile.user_profile_sub_nav">
+                <t t-set="view_user"><t t-esc="user.name"/></t>
+            </t>
+
+            <div class="container pb-3 pb-md-0 pt-2 pt-md-5">
                 <div class="row">
                     <!-- ==== Header Left ==== -->
                     <div class="col-12 col-md-4 col-lg-3">
@@ -383,43 +455,10 @@
     </template>
 
     <template id="users_page_header" name="Users Page Header">
-        <div class="o_wprofile_all_users_nav">
+        <div class="o_wprofile_all_users_header o_wprofile_gradient mb-n5 pb-5">
+            <t t-call="website_profile.user_profile_sub_nav"/>
             <div class="container">
-                <div class="row align-items-center justify-content-between">
-                    <!-- nav -->
-                    <nav aria-label="breadcrumb" class="col-md-8 col-xs-12">
-                        <ol class="breadcrumb">
-                            <li class="breadcrumb-item">
-                                <a t-att-href="home_url or '/'">Home</a>
-                            </li>
-                            <li t-att-class="'breadcrumb-item active'">
-                                <a href="#">Users</a>
-                            </li>
-                        </ol>
-                    </nav>
-                    <div class="col-md-4 col-xs-12 d-flex flex-row align-items-center">
-                        <!-- karma / profile -->
-                        <a t-if="not is_public_user" t-att-href="'/profile/user/%s' % user_id.id" class="font-weight-bold mr-3">
-                            <i class="fa fa-diamond" /> <t t-esc="user_id.karma"/>
-                        </a>
-                        <!-- search -->
-                        <form t-attf-action="/profile/users" role="search" method="get">
-                            <div class="input-group">
-                                <input type="text" class="form-control" name="search" placeholder="Search in Users" t-att-value="search"/>
-                                <span class="input-group-append">
-                                    <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
-                                        <i class="fa fa-search"></i>
-                                    </button>
-                                </span>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="o_wprofile_all_users_header o_wprofile_gradient text-white">
-            <div class="container">
-                <h1 class="py-5">All Users</h1>
+                <h1 class="py-4 text-white">All Users</h1>
             </div>
         </div>
     </template>
@@ -500,24 +539,20 @@
     </template>
 
     <template id="email_validation_banner">
-        <div t-if="not validation_email_sent and not is_public_user and user.karma == 0" class="alert alert-danger alert-dismissable" role="alert">
+        <t t-set="send_alert_classes" t-value="send_alert_classes if send_alert_classes else 'alert alert-danger alert-dismissable'"/>
+        <t t-set="done_alert_classes" t-value="done_alert_classes if done_alert_classes else 'alert alert-success alert-dismissable'"/>
+
+        <div t-if="not validation_email_sent and not is_public_user and user.karma == 0" t-att-class="send_alert_classes" role="alert">
             <button type="button" class="close validation_email_close" data-dismiss="alert" aria-label="Close">&amp;times;</button>
-            <div>
-                <p>
-                    It appears your email has not been verified.
-                    <a class="send_validation_email" href="#" t-att-data-redirect_url="redirect_url">
-                    <span t-esc="send_validation_email_message"/></a>
-                </p>
-            </div>
+            It appears your email has not been verified.<br/>
+            <a class="send_validation_email alert-link" href="#" t-att-data-redirect_url="redirect_url">
+                <span t-esc="send_validation_email_message"/>
+            </a>
         </div>
-        <div t-if="validation_email_done" class="alert alert-success alert-dismissable" role="status">
+        <div t-if="validation_email_done" t-att-class="done_alert_classes" role="status">
             <button type="button" class="close validated_email_close" data-dismiss="alert" aria-label="Close">&amp;times;</button>
-            <div>
-                <p>
-                    <span id="email_validated_message">Congratulations! Your email has just been validated.</span>
-                    <span t-esc="additional_validated_email_message"/>
-                </p>
-            </div>
+            <span id="email_validated_message">Congratulations! Your email has just been validated.</span>
+            <span t-esc="additional_validated_email_message"/>
         </div>
     </template>