From 9c0b7c71cd8de265c62128f9e45985785fa577eb Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 9 Mar 2018 17:30:42 +0100 Subject: [PATCH] Render OTR menu as a bootstrap dropdown --- css/converse.css | 21 ++++++++++----------- css/inverse.css | 21 ++++++++++----------- sass/_chatbox.scss | 18 ++++++++++++------ sass/_core.scss | 6 ------ src/converse-chatview.js | 7 ++++--- src/converse-otr.js | 19 ++++++++----------- src/templates/chatroom_toolbar.html | 5 +++-- src/templates/toolbar.html | 2 +- src/templates/toolbar_otr.html | 20 ++++++++++++-------- 9 files changed, 60 insertions(+), 59 deletions(-) diff --git a/css/converse.css b/css/converse.css index 46731f60b..ccdc3832a 100644 --- a/css/converse.css +++ b/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; } diff --git a/css/inverse.css b/css/inverse.css index b0e809b3c..80f128b91 100644 --- a/css/inverse.css +++ b/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; } diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 7a91e1cdc..f3c33b353 100644 --- a/sass/_chatbox.scss +++ b/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; } diff --git a/sass/_core.scss b/sass/_core.scss index f0cd34fbe..fc261c360 100644 --- a/sass/_core.scss +++ b/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) { diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 550ea247f..1309c7b4c 100644 --- a/src/converse-chatview.js +++ b/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(); } }, diff --git a/src/converse-otr.js b/src/converse-otr.js index fed7fccc2..c60da608a 100644 --- a/src/converse-otr.js +++ b/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 () { diff --git a/src/templates/chatroom_toolbar.html b/src/templates/chatroom_toolbar.html index d45d316dd..7b886eddc 100644 --- a/src/templates/chatroom_toolbar.html +++ b/src/templates/chatroom_toolbar.html @@ -1,5 +1,6 @@ {[ if (o.use_emoji) { ]} -
  • +
  • +
    • {[ } ]} @@ -10,6 +11,6 @@
  • {[ } ]} {[ if (o.show_clear_button) { ]} -
  • +
  • {[ } ]} diff --git a/src/templates/toolbar.html b/src/templates/toolbar.html index 54cf33151..5915dbd3d 100644 --- a/src/templates/toolbar.html +++ b/src/templates/toolbar.html @@ -7,5 +7,5 @@
  • {[ } ]} {[ if (o.show_clear_button) { ]} -
  • +
  • {[ } ]} diff --git a/src/templates/toolbar_otr.html b/src/templates/toolbar_otr.html index 8251175e6..ba6f358ff 100644 --- a/src/templates/toolbar_otr.html +++ b/src/templates/toolbar_otr.html @@ -1,5 +1,7 @@ {[ if (o.allow_otr) { ]} -
  • +
  • +