Render OTR menu as a bootstrap dropdown
This commit is contained in:
parent
9825d6e777
commit
9c0b7c71cd
|
@ -4813,10 +4813,6 @@ body.reset {
|
||||||
#conversejs .chat-textarea-chatroom-selected {
|
#conversejs .chat-textarea-chatroom-selected {
|
||||||
border: 2px solid #578EA9;
|
border: 2px solid #578EA9;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
#conversejs .dropdown dt,
|
|
||||||
#conversejs .dropdown ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
body .brand-heading {
|
body .brand-heading {
|
||||||
|
@ -5208,19 +5204,14 @@ body.reset {
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
|
||||||
color: #4b7003; }
|
color: #4b7003; }
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants {
|
||||||
#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 {
|
|
||||||
float: right; }
|
float: right; }
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: 1px;
|
padding: 0 0.5em; }
|
||||||
padding: 0 3px 0 3px; }
|
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
@ -5235,6 +5226,14 @@ body.reset {
|
||||||
right: 0;
|
right: 0;
|
||||||
top: auto;
|
top: auto;
|
||||||
z-index: 1000; }
|
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,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||||
color: #578EA9; }
|
color: #578EA9; }
|
||||||
|
|
|
@ -4813,10 +4813,6 @@ body.reset {
|
||||||
#conversejs .chat-textarea-chatroom-selected {
|
#conversejs .chat-textarea-chatroom-selected {
|
||||||
border: 2px solid #578EA9;
|
border: 2px solid #578EA9;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
#conversejs .dropdown dt,
|
|
||||||
#conversejs .dropdown ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
body .brand-heading {
|
body .brand-heading {
|
||||||
|
@ -5258,19 +5254,14 @@ body {
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
|
||||||
color: #4b7003; }
|
color: #4b7003; }
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants {
|
||||||
#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 {
|
|
||||||
float: right; }
|
float: right; }
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: 1px;
|
padding: 0 0.5em; }
|
||||||
padding: 0 3px 0 3px; }
|
|
||||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
@ -5285,6 +5276,14 @@ body {
|
||||||
right: 0;
|
right: 0;
|
||||||
top: auto;
|
top: auto;
|
||||||
z-index: 1000; }
|
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,
|
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||||
color: #578EA9; }
|
color: #578EA9; }
|
||||||
|
|
|
@ -358,18 +358,14 @@
|
||||||
.private {
|
.private {
|
||||||
color: #4b7003;
|
color: #4b7003;
|
||||||
}
|
}
|
||||||
.toggle-occupants,
|
.toggle-occupants {
|
||||||
.toggle-clear,
|
|
||||||
.toggle-otr {
|
|
||||||
|
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: 1px;
|
padding: 0 0.5em;
|
||||||
padding: 0 3px 0 3px;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -384,6 +380,16 @@
|
||||||
top: auto;
|
top: auto;
|
||||||
z-index: $zindex-dropdown;
|
z-index: $zindex-dropdown;
|
||||||
|
|
||||||
|
&.otr-menu {
|
||||||
|
left: -6em;
|
||||||
|
min-width: 15rem;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -454,12 +454,6 @@ body.reset {
|
||||||
border: 2px solid $link-color;
|
border: 2px solid $link-color;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown dt,
|
|
||||||
.dropdown ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
|
|
|
@ -985,11 +985,12 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleEmojiMenu (ev) {
|
toggleEmojiMenu (ev) {
|
||||||
if (_.isUndefined(this.dropdown)) {
|
if (_.isUndefined(this.emoji_dropdown)) {
|
||||||
|
ev.stopPropagation();
|
||||||
this.renderEmojiPicker();
|
this.renderEmojiPicker();
|
||||||
const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
|
const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
|
||||||
this.dropdown = new bootstrap.Dropdown(dropdown_el, true);
|
this.emoji_dropdown = new bootstrap.Dropdown(dropdown_el, true);
|
||||||
this.dropdown.toggle();
|
this.emoji_dropdown.toggle();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -12,10 +12,11 @@
|
||||||
(function (root, factory) {
|
(function (root, factory) {
|
||||||
|
|
||||||
define([ "converse-chatview",
|
define([ "converse-chatview",
|
||||||
|
"bootstrap",
|
||||||
"tpl!toolbar_otr",
|
"tpl!toolbar_otr",
|
||||||
'otr'
|
'otr'
|
||||||
], factory);
|
], factory);
|
||||||
}(this, function (converse, tpl_toolbar_otr, otr) {
|
}(this, function (converse, bootstrap, tpl_toolbar_otr, otr) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const { Strophe, utils, b64_sha1, _ } = converse.env;
|
const { Strophe, utils, b64_sha1, _ } = converse.env;
|
||||||
|
@ -402,16 +403,12 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleOTRMenu (ev) {
|
toggleOTRMenu (ev) {
|
||||||
|
if (_.isUndefined(this.otr_dropdown)) {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
const { _converse } = this.__super__;
|
const dropdown_el = this.el.querySelector('.toggle-otr');
|
||||||
const menu = this.el.querySelector('.toggle-otr ul');
|
this.otr_dropdown = new bootstrap.Dropdown(dropdown_el, true);
|
||||||
const elements = _.difference(
|
this.otr_dropdown.toggle();
|
||||||
_converse.root.querySelectorAll('.toolbar-menu'),
|
}
|
||||||
[menu]
|
|
||||||
);
|
|
||||||
utils.slideInAllElements(elements).then(
|
|
||||||
_.partial(utils.slideToggleElement, menu)
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getOTRTooltip () {
|
getOTRTooltip () {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
{[ if (o.use_emoji) { ]}
|
{[ 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>
|
<div class="emoji-picker dropdown-menu toolbar-menu"></div>
|
||||||
</li>
|
</li>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
|
@ -10,6 +11,6 @@
|
||||||
<li class="toggle-occupants fa fa-users" title="{{{o.label_hide_occupants}}}"></li>
|
<li class="toggle-occupants fa fa-users" title="{{{o.label_hide_occupants}}}"></li>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
{[ if (o.show_clear_button) { ]}
|
{[ 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>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
|
|
||||||
|
|
|
@ -7,5 +7,5 @@
|
||||||
<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
|
<li class="toggle-call fa fa-phone" title="{{{o.label_start_call}}}"></li>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
{[ if (o.show_clear_button) { ]}
|
{[ 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>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
{[ if (o.allow_otr) { ]}
|
{[ 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>
|
<span class="chat-toolbar-text">{{{o.otr_translated_status}}}</span>
|
||||||
{[ if (o.otr_status == o.UNENCRYPTED) { ]}
|
{[ if (o.otr_status == o.UNENCRYPTED) { ]}
|
||||||
<span class="fa fa-unlock"></span>
|
<span class="fa fa-unlock"></span>
|
||||||
|
@ -12,19 +14,21 @@
|
||||||
{[ } ]} {[ if (o.otr_status == o.FINISHED) { ]}
|
{[ } ]} {[ if (o.otr_status == o.FINISHED) { ]}
|
||||||
<span class="fa fa-unlock"></span>
|
<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) { ]}
|
{[ 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) { ]}
|
{[ if (o.otr_status != o.UNENCRYPTED) { ]}
|
||||||
<li><a class="start-otr" href="#">{{{o.label_refresh_encrypted_conversation}}}</a></li>
|
<li class="dropdown-item"><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 class="dropdown-item"><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="auth-otr" data-scheme="smp" href="#">{{{o.label_verify_with_smp}}}</a></li>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
{[ if (o.otr_status == o.UNVERIFIED) { ]}
|
{[ 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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user