Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Render OTR menu as a bootstrap dropdown

Browse Source
This commit is contained in:
JC Brand 2018-03-09 17:30:42 +01:00
parent 9825d6e777
commit 9c0b7c71cd
9 changed files with 60 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/converse.css
View File

@ -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; }

21
css/inverse.css
View File

@ -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; }

18
sass/_chatbox.scss
View File

@ -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;
}

6
sass/_core.scss
View File

@ -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) {

7
src/converse-chatview.js
View File

@ -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();
}
},

19
src/converse-otr.js
View File

@ -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 () {

5
src/templates/chatroom_toolbar.html
View File

@ -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>
{[ } ]}

2
src/templates/toolbar.html
View File

@ -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>
{[ } ]}

20
src/templates/toolbar_otr.html
View File

@ -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>
{[ } ]}