[IMP] mail: add show more button on partner suggestion.

When sending a message from chatter, a list of suggested partners appears
on the top of the text area. With the previous commit,
cc will be added to this list. This commit adds a show more/show less
button in case there is more than 3 suggested recipients to display.

Task: 1925001

addons/mail/static/src/js/composers/chatter_composer.js

@@ -21,6 +21,7 @@ var ChatterComposer = BasicComposer.extend({
     template: 'mail.chatter.Composer',
     events: _.extend({}, BasicComposer.prototype.events, {
         'click .o_composer_button_full_composer': '_onOpenFullComposer',
+        'click .o_suggested_show_more_less': '_onClickPartnerSuggestionsReadMoreLess',
     }),
     init: function (parent, model, suggestedPartners, options) {
         this._super(parent, options);
@@ -237,6 +238,14 @@ var ChatterComposer = BasicComposer.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickPartnerSuggestionsReadMoreLess: function (ev) {
+        ev.preventDefault();
+        this.$('.o_suggested_toggle').toggleClass('o_hidden');
+    },
     /**
      * @private
      */

addons/mail/static/src/xml/chatter.xml

@@ -60,7 +60,7 @@
                 <!-- List of followers -->
                 <div class="o_composer_suggested_partners">
                     <t t-foreach='widget.suggestedPartners' t-as='recipient'>
-                        <div t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
+                        <div t-attf-title="Add as recipient and follower (reason: #{recipient.reason})" t-att-class="recipient_index > 2 ? 'o_suggested_toggle o_hidden' : ''">
                             <div class="custom-control custom-checkbox">
                                 <input type="checkbox"
                                        class="custom-control-input"
@@ -74,6 +74,14 @@
                             </div>
                         </div>
                     </t>
+                    <t t-if='widget.suggestedPartners.length > 3'>
+                        <a href="#" class='o_suggested_show_more_less o_suggested_toggle'>
+                            Show <t t-esc="widget.suggestedPartners.length - 3"/> more
+                        </a>
+                        <a href="#" class='o_suggested_show_more_less o_suggested_toggle o_hidden'>
+                            Show <t t-esc="widget.suggestedPartners.length - 3"/> less
+                        </a>
+                    </t>
                 </div>
             </t>
         </t>