From ece2fed1545faa388777227d3a7525cf99ab1217 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Mon, 3 Jun 2019 08:51:49 +0000
Subject: [PATCH] [REF] mail: chatter topbar styles

The Chatter's topbar (containing the buttons like 'Send Message', 'Log
Note') was difficult to deal with: specially the positioning of its
content (a float into another float...).

So, this commit refactors the topbar's layout using Flexbox. It allows
to simplify and reduce the amount of (S)CSS needed to achieve the same
visual result.

In the process, the Followers (dropdown) buttons now use correctly
nested .btn-group components (as described by the Bootstrap 4
documentation) and SubTypes dropdown items use semantic html element
(<button>) instead of attaching behavior on icon element(<i>).

Finally a few Chatter's tests requested a slight adaptation (cf.
trimming element's textual content).

Task ID: 1928573

closes odoo/odoo#33823

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../mail/static/src/scss/attachment_box.scss  |   3 -
 addons/mail/static/src/scss/chatter.scss      |  70 ++------
 addons/mail/static/src/scss/followers.scss    | 166 +++++++-----------
 addons/mail/static/src/xml/followers.xml      |  61 ++++---
 addons/mail/static/tests/chatter_tests.js     |   6 +-
 5 files changed, 113 insertions(+), 193 deletions(-)

diff --git a/addons/mail/static/src/scss/attachment_box.scss b/addons/mail/static/src/scss/attachment_box.scss
index a9aa6aec260..2fbff3c2386 100644
--- a/addons/mail/static/src/scss/attachment_box.scss
+++ b/addons/mail/static/src/scss/attachment_box.scss
@@ -1,8 +1,5 @@
 .oe_chatter {
 
-    .btn.o_active_attach {
-        height: 300px;
-    }
     .o_mail_chatter_attachments {
         min-height: 50px;
 
diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss
index 5b503966706..f34db2e00d8 100644
--- a/addons/mail/static/src/scss/chatter.scss
+++ b/addons/mail/static/src/scss/chatter.scss
@@ -1,75 +1,35 @@
-// Default chatter layout.
-// Extended in enterprise by form_view.less to achieve the side-chatter
 .o_chatter {
-    width: 100%;
-    padding-top: 0!important;
-
     .o_spinner {
         text-align: center;
         font-size: large;
     }
 
     .o_chatter_topbar {
-        height: $o-statusbar-height;
-        position: relative;
-        margin: $grid-gutter-width*0.5 0 0;
-        padding: 0;
         display: flex;
+        border-bottom: $nav-tabs-border-width solid transparent;
 
-        > .o_topbar_right_area {
-            border-bottom: 1px solid transparent;
-            position: relative;
-            float: right;
-            flex: 1 1 auto;
-            height: $o-statusbar-height;
-
-            .o_chatter_button_attachment {
-                height: $o-statusbar-height;
-                float: right;
-                margin-right: 25px;
-
-                .fa-paperclip, .o_chatter_attachment_button_count {
-                    font-weight: bold;
-                }
-            }
-            .o_followers {
-                height: $o-statusbar-height;
-                border-bottom: 1px solid transparent;
-                flex: 0 1 auto;
-            }
-        }
-        > .btn {
-            height: $o-statusbar-height;
-            border: 1px solid transparent;
-        }
         .btn {
             @extend .text-nowrap;
-            padding-right: $btn-padding-x;
-            padding-left: $btn-padding-x;
+            margin-bottom: -$nav-tabs-border-width;
+            padding: $grid-gutter-width*0.25 - $nav-tabs-border-width $grid-gutter-width*0.5 $grid-gutter-width*0.25;
+            border-radius: $border-radius-sm $border-radius-sm 0 0;
         }
 
+        > .o_topbar_right_area {
+            display: flex;
+            margin-left: auto;
+            justify-content: flex-end;
+        }
     }
 
     &.o_chatter_composer_active .o_chatter_topbar {
-        > .btn, > .o_followers, > .o_topbar_right_area{
-            border-radius: $border-radius-sm $border-radius-sm 0 0;
-            border-width: 0 0 1px;
-            border-bottom-color: gray('300');
+        border-bottom-color: gray('300');
 
-            &.o_active {
-                color: $o-brand-odoo;
-                background-color: theme-color('light');
-                border-color: gray('300');
-                border-width: 1px 1px 0;
-            }
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .o_chatter .o_chatter_topbar > .o_topbar_right_area {
-        .o_chatter_button_attachment {
-            margin-right: initial;
+        .btn.o_active {
+            color: $o-brand-odoo;
+            background-color: theme-color('light');
+            border: $nav-tabs-border-width solid gray('300');
+            border-bottom-color: transparent;
         }
     }
 }
diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss
index 86cbc38c82c..edb38cc133a 100644
--- a/addons/mail/static/src/scss/followers.scss
+++ b/addons/mail/static/src/scss/followers.scss
@@ -1,134 +1,90 @@
 .o_followers {
-    float: right;
-    @include media-breakpoint-down(sm) {
-        display: none !important; // Hide the followers in mobile
+    display: flex;
+    justify-content: flex-end;
+    order: 1;
+
+    &.o_field_widget {
+        margin-bottom: initial;
     }
 
-    .o_followers_actions {
-        position: relative;
-        float: right;
+    > .o_followers_title_box {
+        order: 1;
+    }
 
-        .dropdown-toggle {
-            opacity: 0.3;
-            border: none;
+    .o_followers_follow_button {
+        color: $body-color;
+        font-weight: bold;
+        text-align: right;
+
+        .o_follow, .o_followers_unfollow, .o_followers_following {
             display: none;
-
-            &:hover, &:focus, &[aria-expanded="true"] {
-                opacity: 1;
-            }
-
-            > .fa {
-                font-size: inherit;
-            }
-
-            &.o_followers_following {
-                display: block;
-            }
         }
 
-        &:hover .dropdown-toggle {
-            opacity: 1;
+        // when following, show 'following'
+        &.o_followers_following .o_followers_following {
+            display: initial;
         }
 
-        .o_followers_follow_button {
-            padding-right: 0;
-            color: $body-color;
-            font-weight: bold;
-
-            .o_follow, .o_followers_unfollow, .o_followers_following {
+        // when following and hovering, show 'unfollow'
+        &.o_followers_following:hover {
+            .o_followers_following {
                 display: none;
             }
-            // when following, show 'following'
-            &.o_followers_following .o_followers_following {
-                display: inline;
-            }
-            // when following and hovering, show 'unfollow'
-            &.o_followers_following:hover .o_followers_following {
-                display: none;
-            }
-            &.o_followers_following:hover .o_followers_unfollow {
-                display: inline;
-            }
-            // when not following  show 'follow'
-            &.o_followers_notfollow .o_follow {
-                display: inline;
-            }
 
-            .fa {
-                &.fa-times {
-                    color: theme-color('warning');
-                }
-                &.fa-check {
-                    color: theme-color('success');
-                }
+            .o_followers_unfollow {
+                display: initial;
             }
         }
 
-        .o_subtype {
-            padding-left: 10px;
+        // when not following  show 'follow'
+        &.o_followers_notfollow .o_follow {
+            display: initial;
+        }
+
+        .fa {
+            &.fa-times {
+                color: theme-color('warning');
+            }
+
+            &.fa-check {
+                color: theme-color('success');
+            }
         }
     }
 
-    .o_followers_title_box {
-        position: relative;
-        float: right;
-        margin-left: 25px;
+    .o_followers_list {
+        width: 20vh;
+        max-height: 50vh;
+        overflow: auto;
+    }
 
-        .dropdown-toggle {
-            .o_followers_count {
-                padding-right: 5px;
-                font-weight: bold;
+    .o_followers_title_box .dropdown-item.o_partner {
+        padding: 0;
+        display: flex;
+        align-items: center;
+
+        .o_mail_redirect {
+            margin-right: auto;
+            color: $dropdown-link-color;
+
+            img {
+                width: $o-mail-partner-avatar-size;
             }
         }
 
-        .o_followers_list {
-            font-size: small;
-            max-height: 50vh; // ancestor has size 33px
-            overflow: auto;
+        .btn {
+            padding: 0 $grid-gutter-width*0.25;
+        }
 
-            .o_partner {
-                position: relative; // required for old design compatibility
+        &.o_inactive {
+            .o_mail_redirect {
+                color: $gray-500;
+                font-style: italic;
 
-                > a {
-                    max-width: 160px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    height: $o-mail-partner-avatar-size;
-                    padding: 3px $o-mail-partner-avatar-size + 8px;
-                }
-                > img {
-                    @include o-position-absolute($top: 0, $left: 0);
-                    width: $o-mail-partner-avatar-size;
-                }
-                .o_remove_follower {
-                    @include o-position-absolute(6px, 5px);
-                    cursor: pointer;
-                }
-                .o_edit_subtype {
-                    @include o-position-absolute(6px, 18px);
-                    cursor: pointer;
-                }
-
-                &.o_inactive {
-                    > a {
-                        color: $gray-500;
-                        font-style: italic;
-                    }
-                    > img {
-                        opacity: 0.25;
-                    }
+                img {
+                    opacity: 0.25;
                 }
             }
-
         }
     }
 }
-
-// Edit subtypes in dialog
-.modal .modal-body > ul {
-    padding-left: 0;
-    > li.o_subtype {
-        list-style: none;
-    }
-}
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 4cca8897638..75e9b9dee70 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -5,8 +5,8 @@
         Followers, actions and subtypes in a record.
     -->
     <t t-name="mail.Followers">
-        <div class="o_followers">
-            <div class="o_followers_title_box">
+        <div class="o_followers btn-group">
+            <div class="o_followers_title_box btn-group">
                 <button class="btn btn-link dropdown-toggle" title="Dropdown menu - Followers"
                         data-toggle="dropdown" aria-expanded="false">
                     <i class="fa fa-user" role="img" aria-label="Dropdown menu - Followers"></i>
@@ -14,15 +14,16 @@
                 </button>
                 <div class="dropdown-menu dropdown-menu-right o_followers_list" role="menu"/>
             </div>
-            <div class="o_followers_actions">
-                <div class="btn-group o_subtypes_list">
-                    <button class="btn btn-link o_followers_follow_button o_followers_notfollow">
-                        <span class="o_follow">Follow</span>
-                        <span class="fa fa-times o_followers_unfollow"/>
-                        <span class="o_followers_unfollow"> Unfollow</span>
-                        <span class="fa fa-check o_followers_following"/>
-                        <span class="o_followers_following"> Following</span>
-                    </button><button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            <div class="o_followers_actions btn-group">
+                <button class="btn btn-link o_followers_follow_button o_followers_notfollow">
+                    <span class="o_follow">Follow</span>
+                    <i class="fa fa-times o_followers_unfollow"/>
+                    <span class="o_followers_unfollow"> Unfollow</span>
+                    <i class="fa fa-check o_followers_following"/>
+                    <span class="o_followers_following"> Following</span>
+                </button>
+                <div class="o_subtypes_list btn-group">
+                    <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                         <span class="fa fa-bell" role="img" aria-label="Alarm menu" title="Alarm menu"/>
                     </button>
                     <div class="dropdown-menu dropdown-menu-right" role="menu"/>
@@ -35,22 +36,28 @@
         Partner or channel following the record
     -->
     <t t-name="mail.Followers.partner">
-        <div role="menuitem" t-attf-class="o_partner {{ !record.active ? 'o_inactive': '' }}">
-            <a class="dropdown-item o_mail_redirect"
-               href="#"
-               t-att-title="record.title"
-               t-att-data-oe-model="record.res_model"
-               t-att-data-oe-id="record.res_id"><t t-esc="record.name"/></a>
-            <img t-att-src="record.avatar_url" alt="Avatar"/>
-            <i t-if="record.is_editable" class="fa fa-pencil o_edit_subtype d-none"
-               title="Edit subscription"
-               aria-label="Edit subscription" role="img"
-               t-att-data-follower-id="record.id"
-               t-att-data-oe-id="record.res_id"
-               t-att-data-oe-model="record.res_model"/>
-            <i t-if="widget.isEditable" class="fa fa-remove o_remove_follower"
-               aria-label="Remove this follower" role="img"
-               title="Remove this follower"/>
+        <div role="menuitem" t-attf-class="dropdown-item o_partner {{ !record.active ? 'o_inactive': '' }}">
+            <a class="o_mail_redirect text-truncate"
+                href="#"
+                t-att-title="record.title"
+                t-att-data-oe-model="record.res_model"
+                t-att-data-oe-id="record.res_id">
+                <img t-att-src="record.avatar_url" alt="Avatar"/>
+                <t t-esc="record.name"/>
+            </a>
+            <button t-if="record.is_editable"
+                class="btn btn-icon fa fa-pencil o_edit_subtype d-none"
+                title="Edit subscription"
+                aria-label="Edit subscription"
+                role="img"
+                t-att-data-follower-id="record.id"
+                t-att-data-oe-id="record.res_id"
+                t-att-data-oe-model="record.res_model"/>
+            <button t-if="widget.isEditable"
+                class="btn btn-icon fa fa-remove o_remove_follower"
+                aria-label="Remove this follower"
+                role="img"
+                title="Remove this follower"/>
         </div>
     </t>
 
diff --git a/addons/mail/static/tests/chatter_tests.js b/addons/mail/static/tests/chatter_tests.js
index f9fda076dae..82772d5f3a1 100644
--- a/addons/mail/static/tests/chatter_tests.js
+++ b/addons/mail/static/tests/chatter_tests.js
@@ -2638,7 +2638,7 @@ QUnit.test('chatter: suggested partner auto-follow on message post', async funct
         "should have a single follower (widget counter)");
     assert.containsOnce(form, '.o_followers_list > div.o_partner',
         "should have a single follower (listed partners)");
-    assert.strictEqual(form.$('.o_followers_list > div.o_partner > a').text(), "Admin",
+    assert.strictEqual(form.$('.o_followers_list > div.o_partner > a').text().trim(), "Admin",
         "should have 'Admin' as follower");
 
     // open composer
@@ -2665,10 +2665,10 @@ QUnit.test('chatter: suggested partner auto-follow on message post', async funct
         "should have a two followers (widget counter)");
     assert.containsN(form, '.o_followers_list > div.o_partner', 2,
         "should have two followers (listed partners)");
-    assert.strictEqual(form.$('.o_followers_list > div.o_partner > a[data-oe-id="5"]').text(),
+    assert.strictEqual(form.$('.o_followers_list > div.o_partner > a[data-oe-id="5"]').text().trim(),
         "Admin",
         "should have 'Admin' as follower");
-    assert.strictEqual(form.$('.o_followers_list > div.o_partner > a[data-oe-id="8"]').text(),
+    assert.strictEqual(form.$('.o_followers_list > div.o_partner > a[data-oe-id="8"]').text().trim(),
         "Demo User",
         "should have 'Demo User' as follower");