Render OTR menu as a bootstrap dropdown

css/converse.css

@@ -4813,10 +4813,6 @@ body.reset {
   #conversejs .chat-textarea-chatroom-selected {
     border: 2px solid #578EA9;
     margin: 0; }
-  #conversejs .dropdown dt,
-  #conversejs .dropdown ul {
-    margin: 0;
-    padding: 0; }
 
 @media screen and (max-width: 575px) {
   body .brand-heading {
@@ -5208,19 +5204,14 @@ body.reset {
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
         color: #4b7003; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants {
         float: right; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
         cursor: pointer;
         display: inline-block;
         list-style: none;
-        margin-top: 1px;
-        padding: 0 3px 0 3px; }
+        padding: 0 0.5em; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
           cursor: pointer; }
@@ -5235,6 +5226,14 @@ body.reset {
           right: 0;
           top: auto;
           z-index: 1000; }
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu {
+            left: -6em;
+            min-width: 15rem; }
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show {
+              display: flex;
+              flex-direction: column; }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }

css/inverse.css

@@ -4813,10 +4813,6 @@ body.reset {
   #conversejs .chat-textarea-chatroom-selected {
     border: 2px solid #578EA9;
     margin: 0; }
-  #conversejs .dropdown dt,
-  #conversejs .dropdown ul {
-    margin: 0;
-    padding: 0; }
 
 @media screen and (max-width: 575px) {
   body .brand-heading {
@@ -5258,19 +5254,14 @@ body {
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
         color: #4b7003; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
-      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
-      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants {
         float: right; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
         cursor: pointer;
         display: inline-block;
         list-style: none;
-        margin-top: 1px;
-        padding: 0 3px 0 3px; }
+        padding: 0 0.5em; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
           cursor: pointer; }
@@ -5285,6 +5276,14 @@ body {
           right: 0;
           top: auto;
           z-index: 1000; }
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu {
+            left: -6em;
+            min-width: 15rem; }
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show {
+              display: flex;
+              flex-direction: column; }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }

sass/_chatbox.scss

@@ -358,18 +358,14 @@
                 .private {
                     color: #4b7003;
                 }
-                .toggle-occupants,
-                .toggle-clear,
-                .toggle-otr {
-
+                .toggle-occupants {
                     float: right;
                 }
                 li {
                     cursor: pointer;
                     display: inline-block;
                     list-style: none;
-                    margin-top: 1px;
-                    padding: 0 3px 0 3px;
+                    padding: 0 0.5em;
                     &:hover {
                         cursor: pointer;
                     }
@@ -384,6 +380,16 @@
                         top: auto;
                         z-index: $zindex-dropdown;
 
+                        &.otr-menu {
+                            left: -6em;
+                            min-width: 15rem;
+
+                            &.show {
+                                display: flex;
+                                flex-direction: column;
+                            }
+                        }
+
                         a {
                             color: $link-color;
                         }

sass/_core.scss

@@ -454,12 +454,6 @@ body.reset {
         border: 2px solid $link-color;
         margin: 0;
     }
-
-    .dropdown dt,
-    .dropdown ul {
-        margin: 0;
-        padding: 0;
-    }
 }
 
 @media screen and (max-width: 575px) {

src/converse-chatview.js

@@ -985,11 +985,12 @@
                 },
 
                 toggleEmojiMenu (ev) {
-                    if (_.isUndefined(this.dropdown)) {
+                    if (_.isUndefined(this.emoji_dropdown)) {
+                        ev.stopPropagation();
                         this.renderEmojiPicker();
                         const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
-                        this.dropdown = new bootstrap.Dropdown(dropdown_el, true);
-                        this.dropdown.toggle();
+                        this.emoji_dropdown = new bootstrap.Dropdown(dropdown_el, true);
+                        this.emoji_dropdown.toggle();
                     }
                 },
 

src/converse-otr.js

@@ -12,10 +12,11 @@
 (function (root, factory) {
 
     define([ "converse-chatview",
+            "bootstrap",
             "tpl!toolbar_otr",
             'otr'
     ], factory);
-}(this, function (converse, tpl_toolbar_otr, otr) {
+}(this, function (converse, bootstrap, tpl_toolbar_otr, otr) {
     "use strict";
 
     const { Strophe, utils, b64_sha1, _ } = converse.env;
@@ -402,16 +403,12 @@
                 },
 
                 toggleOTRMenu (ev) {
-                    ev.stopPropagation();
-                    const { _converse } = this.__super__;
-                    const menu = this.el.querySelector('.toggle-otr ul');
-                    const elements = _.difference(
-                        _converse.root.querySelectorAll('.toolbar-menu'),
-                        [menu]
-                    );
-                    utils.slideInAllElements(elements).then(
-                        _.partial(utils.slideToggleElement, menu)
-                    );
+                    if (_.isUndefined(this.otr_dropdown)) {
+                        ev.stopPropagation();
+                        const dropdown_el = this.el.querySelector('.toggle-otr');
+                        this.otr_dropdown = new bootstrap.Dropdown(dropdown_el, true);
+                        this.otr_dropdown.toggle();
+                    }
                 },
 
                 getOTRTooltip () {

src/templates/chatroom_toolbar.html

@@ -1,5 +1,6 @@
 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropup">
+<li class="toggle-toolbar-menu toggle-smiley dropup">
+    <a class="btn toggle-smiley fa fa-smile-o" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
     <div class="emoji-picker dropdown-menu toolbar-menu"></div>
 </li>
 {[ } ]}
@@ -10,6 +11,6 @@
 <li class="toggle-occupants fa fa-users" title="{{{o.label_hide_occupants}}}"></li>
 {[ } ]}
 {[ if (o.show_clear_button)  { ]}
-<li class="toggle-clear fa fa-eraser" title="{{{o.label_clear}}}"></li>
+<li class="toggle-clear right fa fa-eraser" title="{{{o.label_clear}}}"></li>
 {[ } ]}
 

src/templates/toolbar.html

@@ -7,5 +7,5 @@
 <li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
 {[ } ]}
 {[ if (o.show_clear_button)  { ]}
-<li class="toggle-clear fa fa-eraser" title="{{{o.label_clear}}}"></li>
+<li class="toggle-clear right fa fa-eraser" title="{{{o.label_clear}}}"></li>
 {[ } ]}

src/templates/toolbar_otr.html

@@ -1,5 +1,7 @@
 {[ if (o.allow_otr)  { ]}
-    <li class="toggle-toolbar-menu toggle-otr {{{o.otr_status_class}}}" title="{{{o.otr_tooltip}}}">
+    <li class="toggle-toolbar-menu dropup right" title="{{{o.otr_tooltip}}}">
+        <a class="toggle-otr {{{o.otr_status_class}}}" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
         <span class="chat-toolbar-text">{{{o.otr_translated_status}}}</span>
         {[ if (o.otr_status == o.UNENCRYPTED) { ]}
             <span class="fa fa-unlock"></span>
@@ -12,19 +14,21 @@
         {[ } ]} {[ if (o.otr_status == o.FINISHED) { ]}
             <span class="fa fa-unlock"></span>
         {[ } ]}
-        <ul class="toolbar-menu collapsed">
+        </a> 
+
+        <ul class="otr-menu toolbar-menu dropdown-menu">
             {[ if (o.otr_status == o.UNENCRYPTED) { ]}
-               <li><a class="start-otr" href="#">{{{o.label_start_encrypted_conversation}}}</a></li>
+               <li class="dropdown-item"><a class="start-otr" href="#">{{{o.label_start_encrypted_conversation}}}</a></li>
             {[ } ]}
             {[ if (o.otr_status != o.UNENCRYPTED) { ]}
-               <li><a class="start-otr" href="#">{{{o.label_refresh_encrypted_conversation}}}</a></li>
-               <li><a class="end-otr" href="#">{{{o.label_end_encrypted_conversation}}}</a></li>
-               <li><a class="auth-otr" data-scheme="smp" href="#">{{{o.label_verify_with_smp}}}</a></li>
+               <li class="dropdown-item"><a class="start-otr" href="#">{{{o.label_refresh_encrypted_conversation}}}</a></li>
+               <li class="dropdown-item"><a class="end-otr" href="#">{{{o.label_end_encrypted_conversation}}}</a></li>
+               <li class="dropdown-item"><a class="auth-otr" data-scheme="smp" href="#">{{{o.label_verify_with_smp}}}</a></li>
             {[ } ]}
             {[ if (o.otr_status == o.UNVERIFIED) { ]}
-               <li><a class="auth-otr" data-scheme="fingerprint" href="#">{{{o.label_verify_with_fingerprints}}}</a></li>
+               <li class="dropdown-item"><a class="auth-otr" data-scheme="fingerprint" href="#">{{{o.label_verify_with_fingerprints}}}</a></li>
             {[ } ]}
-            <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">{{{o.label_whats_this}}}</a></li>
+            <li class="dropdown-item"><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">{{{o.label_whats_this}}}</a></li>
         </ul>
     </li>
 {[ } ]}