Add a spoiler message to the mockups
This commit is contained in:
parent
1fe6015787
commit
57f7e31aa1
@ -7252,8 +7252,6 @@ body.reset {
|
|||||||
#conversejs .chatbox {
|
#conversejs .chatbox {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%; } }
|
width: 100%; } }
|
||||||
#conversejs .chatbox .spoiler {
|
|
||||||
background-color: #e7f7ee; }
|
|
||||||
#conversejs .chatbox .box-flyout {
|
#conversejs .chatbox .box-flyout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -7327,9 +7325,6 @@ body.reset {
|
|||||||
border: 0;
|
border: 0;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
line-height: 1.3em; }
|
line-height: 1.3em; }
|
||||||
#conversejs .chatbox .chat-content .toggle-spoiler:before {
|
|
||||||
padding-right: 0.25em;
|
|
||||||
whitespace: nowrap; }
|
|
||||||
#conversejs .chatbox .chat-content video {
|
#conversejs .chatbox .chat-content video {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
#conversejs .chatbox .chat-content progress {
|
#conversejs .chatbox .chat-content progress {
|
||||||
@ -8415,6 +8410,16 @@ body.reset {
|
|||||||
color: #6899b2; }
|
color: #6899b2; }
|
||||||
#conversejs .message.chat-msg:hover {
|
#conversejs .message.chat-msg:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.035); }
|
background-color: rgba(0, 0, 0, 0.035); }
|
||||||
|
#conversejs .message.chat-msg .spoiler-hint {
|
||||||
|
margin-bottom: 1em; }
|
||||||
|
#conversejs .message.chat-msg .toggle-spoiler {
|
||||||
|
color: white; }
|
||||||
|
#conversejs .message.chat-msg .toggle-spoiler i {
|
||||||
|
color: white;
|
||||||
|
padding-right: 0.5em; }
|
||||||
|
#conversejs .message.chat-msg .toggle-spoiler:before {
|
||||||
|
padding-right: 0.25em;
|
||||||
|
whitespace: nowrap; }
|
||||||
#conversejs .message.chat-msg .avatar {
|
#conversejs .message.chat-msg .avatar {
|
||||||
background: #818479;
|
background: #818479;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -8427,13 +8432,10 @@ body.reset {
|
|||||||
color: #666;
|
color: #666;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
word-wrap: break-word; }
|
word-wrap: break-word; }
|
||||||
#conversejs .message.chat-msg .chat-msg-text.spoiler {
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0.5em; }
|
|
||||||
#conversejs .message.chat-msg .chat-msg-text .emojione {
|
#conversejs .message.chat-msg .chat-msg-text .emojione {
|
||||||
margin-bottom: -6px; }
|
margin-bottom: -6px; }
|
||||||
#conversejs .message.chat-msg .chat-msg-heading {
|
#conversejs .message.chat-msg .chat-msg-heading {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.25rem;
|
||||||
display: block; }
|
display: block; }
|
||||||
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
|
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
|
@ -7305,8 +7305,6 @@ body {
|
|||||||
#conversejs .chatbox {
|
#conversejs .chatbox {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%; } }
|
width: 100%; } }
|
||||||
#conversejs .chatbox .spoiler {
|
|
||||||
background-color: #e7f7ee; }
|
|
||||||
#conversejs .chatbox .box-flyout {
|
#conversejs .chatbox .box-flyout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -7380,9 +7378,6 @@ body {
|
|||||||
border: 0;
|
border: 0;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
line-height: 1.3em; }
|
line-height: 1.3em; }
|
||||||
#conversejs .chatbox .chat-content .toggle-spoiler:before {
|
|
||||||
padding-right: 0.25em;
|
|
||||||
whitespace: nowrap; }
|
|
||||||
#conversejs .chatbox .chat-content video {
|
#conversejs .chatbox .chat-content video {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
#conversejs .chatbox .chat-content progress {
|
#conversejs .chatbox .chat-content progress {
|
||||||
@ -8603,6 +8598,16 @@ body {
|
|||||||
color: #6899b2; }
|
color: #6899b2; }
|
||||||
#conversejs .message.chat-msg:hover {
|
#conversejs .message.chat-msg:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.035); }
|
background-color: rgba(0, 0, 0, 0.035); }
|
||||||
|
#conversejs .message.chat-msg .spoiler-hint {
|
||||||
|
margin-bottom: 0.5em; }
|
||||||
|
#conversejs .message.chat-msg .toggle-spoiler {
|
||||||
|
color: white; }
|
||||||
|
#conversejs .message.chat-msg .toggle-spoiler i {
|
||||||
|
color: white;
|
||||||
|
padding-right: 0.5em; }
|
||||||
|
#conversejs .message.chat-msg .toggle-spoiler:before {
|
||||||
|
padding-right: 0.25em;
|
||||||
|
whitespace: nowrap; }
|
||||||
#conversejs .message.chat-msg .avatar {
|
#conversejs .message.chat-msg .avatar {
|
||||||
background: #818479;
|
background: #818479;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -8615,13 +8620,10 @@ body {
|
|||||||
color: #666;
|
color: #666;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
word-wrap: break-word; }
|
word-wrap: break-word; }
|
||||||
#conversejs .message.chat-msg .chat-msg-text.spoiler {
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0.5em; }
|
|
||||||
#conversejs .message.chat-msg .chat-msg-text .emojione {
|
#conversejs .message.chat-msg .chat-msg-text .emojione {
|
||||||
margin-bottom: -6px; }
|
margin-bottom: -6px; }
|
||||||
#conversejs .message.chat-msg .chat-msg-heading {
|
#conversejs .message.chat-msg .chat-msg-heading {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.25rem;
|
||||||
display: block; }
|
display: block; }
|
||||||
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
|
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
|
@ -1,24 +0,0 @@
|
|||||||
/*global _ */
|
|
||||||
window.renderAvatars = function (el) {
|
|
||||||
const canvasses = el.querySelectorAll('canvas.avatar');
|
|
||||||
_.each(canvasses, (canvas_el) => {
|
|
||||||
const avatar_url = canvas_el.getAttribute('data-avatar');
|
|
||||||
if (!avatar_url) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const ctx = canvas_el.getContext('2d');
|
|
||||||
const img = new Image();
|
|
||||||
|
|
||||||
img.onload = function () {
|
|
||||||
const canvas = ctx.canvas ;
|
|
||||||
const hRatio = canvas.width / img.width ;
|
|
||||||
const vRatio = canvas.height / img.height ;
|
|
||||||
const ratio = Math.min ( hRatio, vRatio );
|
|
||||||
const centerShift_x = ( canvas.width - img.width*ratio ) / 2;
|
|
||||||
const centerShift_y = ( canvas.height - img.height*ratio ) / 2;
|
|
||||||
ctx.clearRect(0,0,canvas.width, canvas.height);
|
|
||||||
ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
|
|
||||||
};
|
|
||||||
img.src = avatar_url;
|
|
||||||
});
|
|
||||||
}
|
|
@ -153,7 +153,9 @@
|
|||||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||||
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
||||||
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
||||||
<script type="text/javascript" src="avatars.js"></script>
|
<script type="text/javascript" src="../../node_modules/strophe.js/strophe.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/utils/core.js"></script>
|
||||||
|
<script type="text/javascript" src="utils.js"></script>
|
||||||
<script type="text/javascript" src="sidebar.js"></script>
|
<script type="text/javascript" src="sidebar.js"></script>
|
||||||
<script type="text/javascript" src="user-panel.js"></script>
|
<script type="text/javascript" src="user-panel.js"></script>
|
||||||
<script type="text/javascript" src="modals.js"></script>
|
<script type="text/javascript" src="modals.js"></script>
|
||||||
@ -164,7 +166,6 @@
|
|||||||
new Modals();
|
new Modals();
|
||||||
new Sidebar();
|
new Sidebar();
|
||||||
new UserPanel();
|
new UserPanel();
|
||||||
window.renderAvatars(document.querySelector('.chatbox:not(#controlbox)'));
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -114,6 +114,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
|
||||||
|
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||||
|
<div class="chat-msg-content">
|
||||||
|
<span class="chat-msg-heading">
|
||||||
|
<span class="chat-msg-author">Romeo Montague</span>
|
||||||
|
<span class="chat-msg-time text-muted">19:36</span>
|
||||||
|
</span>
|
||||||
|
<div class="spoiler-hint">By a name
|
||||||
|
<a class="badge badge-info toggle-spoiler" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg-text spoiler collapsed">
|
||||||
|
I know not how to tell thee who I am: My name, dear saint, is hateful to
|
||||||
|
myself, Because it is an enemy to thee. Had I it written, I would tear the word.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Mercutio has entered the room</div>
|
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Mercutio has entered the room</div>
|
||||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Topic set by Mercutio</div>
|
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Topic set by Mercutio</div>
|
||||||
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
|
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
|
||||||
@ -241,7 +258,9 @@
|
|||||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||||
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
||||||
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
||||||
<script type="text/javascript" src="avatars.js"></script>
|
<script type="text/javascript" src="../../node_modules/strophe.js/strophe.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/utils/core.js"></script>
|
||||||
|
<script type="text/javascript" src="utils.js"></script>
|
||||||
<script type="text/javascript" src="sidebar.js"></script>
|
<script type="text/javascript" src="sidebar.js"></script>
|
||||||
<script type="text/javascript" src="user-panel.js"></script>
|
<script type="text/javascript" src="user-panel.js"></script>
|
||||||
<script type="text/javascript" src="modals.js"></script>
|
<script type="text/javascript" src="modals.js"></script>
|
||||||
@ -252,7 +271,6 @@
|
|||||||
new Modals();
|
new Modals();
|
||||||
new Sidebar();
|
new Sidebar();
|
||||||
new UserPanel();
|
new UserPanel();
|
||||||
window.renderAvatars(document.querySelector('.chatroom'));
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -76,7 +76,9 @@
|
|||||||
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
|
||||||
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="avatars.js"></script>
|
<script type="text/javascript" src="../../node_modules/strophe.js/strophe.js"></script>
|
||||||
|
<script type="text/javascript" src="../../src/utils/core.js"></script>
|
||||||
|
<script type="text/javascript" src="utils.js"></script>
|
||||||
<script type="text/javascript" src="sidebar.js"></script>
|
<script type="text/javascript" src="sidebar.js"></script>
|
||||||
<script type="text/javascript" src="user-panel.js"></script>
|
<script type="text/javascript" src="user-panel.js"></script>
|
||||||
<script type="text/javascript" src="modals.js"></script>
|
<script type="text/javascript" src="modals.js"></script>
|
||||||
|
@ -16,7 +16,8 @@ const UserPanel = Backbone.NativeView.extend({
|
|||||||
backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
|
backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
|
||||||
keyboard: true // we want to dismiss Modal on pressing Esc key
|
keyboard: true // we want to dismiss Modal on pressing Esc key
|
||||||
}));
|
}));
|
||||||
window.renderAvatars(this.el);
|
window.renderAvatars();
|
||||||
|
window.initSpoilers();
|
||||||
}
|
}
|
||||||
xhr.send();
|
xhr.send();
|
||||||
}
|
}
|
||||||
|
59
mockup/utils.js
Normal file
59
mockup/utils.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/*global _, converse_utils */
|
||||||
|
const u = converse_utils;
|
||||||
|
|
||||||
|
window.renderAvatars = function (el) {
|
||||||
|
el = el || document;
|
||||||
|
const canvasses = el.querySelectorAll('canvas.avatar');
|
||||||
|
_.each(canvasses, (canvas_el) => {
|
||||||
|
const avatar_url = canvas_el.getAttribute('data-avatar');
|
||||||
|
if (!avatar_url) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const ctx = canvas_el.getContext('2d');
|
||||||
|
const img = new Image();
|
||||||
|
|
||||||
|
img.onload = function () {
|
||||||
|
const canvas = ctx.canvas ;
|
||||||
|
const hRatio = canvas.width / img.width ;
|
||||||
|
const vRatio = canvas.height / img.height ;
|
||||||
|
const ratio = Math.min ( hRatio, vRatio );
|
||||||
|
const centerShift_x = ( canvas.width - img.width*ratio ) / 2;
|
||||||
|
const centerShift_y = ( canvas.height - img.height*ratio ) / 2;
|
||||||
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||||
|
ctx.drawImage(img, 0,0, img.width, img.height, centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
|
||||||
|
};
|
||||||
|
img.src = avatar_url;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSpoilerMessage (ev) {
|
||||||
|
if (ev && ev.preventDefault) {
|
||||||
|
ev.preventDefault();
|
||||||
|
}
|
||||||
|
const toggle_el = ev.target,
|
||||||
|
icon_el = toggle_el.firstElementChild;
|
||||||
|
|
||||||
|
u.slideToggleElement(
|
||||||
|
toggle_el.parentElement.parentElement.querySelector('.spoiler')
|
||||||
|
);
|
||||||
|
if (toggle_el.getAttribute("data-toggle-state") == "closed") {
|
||||||
|
toggle_el.textContent = 'Show less';
|
||||||
|
icon_el.classList.remove("fa-eye");
|
||||||
|
icon_el.classList.add("fa-eye-slash");
|
||||||
|
toggle_el.insertAdjacentElement('afterBegin', icon_el);
|
||||||
|
toggle_el.setAttribute("data-toggle-state", "open");
|
||||||
|
} else {
|
||||||
|
toggle_el.textContent = 'Show more';
|
||||||
|
icon_el.classList.remove("fa-eye-slash");
|
||||||
|
icon_el.classList.add("fa-eye");
|
||||||
|
toggle_el.insertAdjacentElement('afterBegin', icon_el);
|
||||||
|
toggle_el.setAttribute("data-toggle-state", "closed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.initSpoilers = function () {
|
||||||
|
const spoilers = document.querySelectorAll('.toggle-spoiler');
|
||||||
|
_.each(spoilers, (spoiler_el) => {
|
||||||
|
spoiler_el.addEventListener('click', toggleSpoilerMessage);
|
||||||
|
});
|
||||||
|
}
|
@ -112,10 +112,6 @@
|
|||||||
width: $mobile-chat-width;
|
width: $mobile-chat-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spoiler {
|
|
||||||
background-color: lighten($chat-head-color, 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-flyout {
|
.box-flyout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -198,10 +194,6 @@
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
|
|
||||||
.toggle-spoiler:before {
|
|
||||||
padding-right: 0.25em;
|
|
||||||
whitespace: nowrap;
|
|
||||||
}
|
|
||||||
video {
|
video {
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
@ -86,6 +86,20 @@
|
|||||||
background-color: rgba(0, 0, 0, 0.035);
|
background-color: rgba(0, 0, 0, 0.035);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spoiler-hint {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
.toggle-spoiler {
|
||||||
|
color: white;
|
||||||
|
i {
|
||||||
|
color: white;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
padding-right: 0.25em;
|
||||||
|
whitespace: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
background: $gray-color;
|
background: $gray-color;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -103,17 +117,13 @@
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
&.spoiler {
|
|
||||||
border-radius: $chatbox-border-radius;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
.emojione {
|
.emojione {
|
||||||
margin-bottom: -6px;
|
margin-bottom: -6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-msg-heading {
|
.chat-msg-heading {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.25rem;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.chat-msg-author {
|
.chat-msg-author {
|
||||||
|
@ -543,7 +543,7 @@
|
|||||||
* up when using infinite scroll).
|
* up when using infinite scroll).
|
||||||
*/
|
*/
|
||||||
if (this.model.get('scrolled')) {
|
if (this.model.get('scrolled')) {
|
||||||
const next_msg_el = u.getNextElement(message_el, ".chat-message");
|
const next_msg_el = u.getNextElement(message_el, ".chat-msg");
|
||||||
if (next_msg_el) {
|
if (next_msg_el) {
|
||||||
// The currently received message is not new, there
|
// The currently received message is not new, there
|
||||||
// are newer messages after it. So let's see if we
|
// are newer messages after it. So let's see if we
|
||||||
@ -900,19 +900,21 @@
|
|||||||
if (ev && ev.preventDefault) {
|
if (ev && ev.preventDefault) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
}
|
}
|
||||||
const toggle_el = ev.target;
|
const toggle_el = ev.target,
|
||||||
|
icon_el = toggle_el.firstElementChild;
|
||||||
|
|
||||||
u.slideToggleElement(
|
u.slideToggleElement(
|
||||||
toggle_el.parentElement.querySelector('.spoiler')
|
toggle_el.parentElement.parentElement.querySelector('.spoiler')
|
||||||
);
|
);
|
||||||
if (toggle_el.getAttribute("data-toggle-state") == "closed") {
|
if (toggle_el.getAttribute("data-toggle-state") == "closed") {
|
||||||
toggle_el.textContent = __('Hide hidden message');
|
toggle_el.textContent = __('Show less');
|
||||||
toggle_el.classList.remove("icon-eye");
|
icon_el.classList.remove("fa-eye");
|
||||||
toggle_el.classList.add("icon-eye-blocked");
|
icon_el.classList.add("fa-eye-slash");
|
||||||
toggle_el.setAttribute("data-toggle-state", "open");
|
toggle_el.setAttribute("data-toggle-state", "open");
|
||||||
} else {
|
} else {
|
||||||
toggle_el.textContent = __('Show hidden message');
|
toggle_el.textContent = __('Show more');
|
||||||
toggle_el.classList.remove("icon-eye-blocked");
|
icon_el.classList.remove("fa-eye-slash");
|
||||||
toggle_el.classList.add("icon-eye");
|
icon_el.classList.add("fa-eye");
|
||||||
toggle_el.setAttribute("data-toggle-state", "closed");
|
toggle_el.setAttribute("data-toggle-state", "closed");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -82,7 +82,7 @@
|
|||||||
'time': moment_time.format(),
|
'time': moment_time.format(),
|
||||||
'username': username,
|
'username': username,
|
||||||
'extra_classes': this.getExtraMessageClasses(),
|
'extra_classes': this.getExtraMessageClasses(),
|
||||||
'label_show': __('Show hidden message')
|
'label_show': __('Show more')
|
||||||
})
|
})
|
||||||
));
|
));
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="message chat-message chat-action {{{o.extra_classes}}}" data-isodate="{{{o.time}}}">
|
<div class="message chat-msg chat-action {{{o.extra_classes}}}" data-isodate="{{{o.time}}}">
|
||||||
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} **{{{o.username}}}</span>
|
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} **{{{o.username}}}</span>
|
||||||
<span class="chat-msg-content"><!-- message gets added here via renderMessage --></span>
|
<span class="chat-msg-content"><!-- message gets added here via renderMessage --></span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="message chat-message {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
|
<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
|
||||||
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} {{{o.username}}}: </span>
|
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} {{{o.username}}}: </span>
|
||||||
<span class="chat-msg-content"></span>
|
<span class="chat-msg-content"></span>
|
||||||
<div class="chat-msg-media"></div>
|
<div class="chat-msg-media"></div>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<div class="message chat-message {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
|
<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
|
||||||
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} {{{o.username}}}: </span>
|
<span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.pretty_time}}} {{{o.username}}}: </span>
|
||||||
<div class="spoiler-hint">{{{o.spoiler_hint}}}</div>
|
<div class="spoiler-hint">{{{o.spoiler_hint}}}</div>
|
||||||
<a class="icon-eye toggle-spoiler" data-toggle-state="closed" href="#">{{{o.label_show}}}</a>
|
<a class="toggle-spoiler" data-toggle-state="closed" href="#"><i class="fa fa-eye"></li>{{{o.label_show}}}</a>
|
||||||
<div class="chat-msg-content spoiler collapsed"><!-- message gets added here via renderMessage --></div>
|
<div class="chat-msg-content spoiler collapsed"><!-- message gets added here via renderMessage --></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
//
|
//
|
||||||
/*global define, escape, window */
|
/*global define, escape, window */
|
||||||
(function (root, factory) {
|
(function (root, factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
define([
|
define([
|
||||||
"sizzle",
|
"sizzle",
|
||||||
"es6-promise",
|
"es6-promise",
|
||||||
@ -18,6 +19,28 @@
|
|||||||
"tpl!image",
|
"tpl!image",
|
||||||
"tpl!video"
|
"tpl!video"
|
||||||
], factory);
|
], factory);
|
||||||
|
} else {
|
||||||
|
// Used by the mockups
|
||||||
|
const Strophe = {
|
||||||
|
'Strophe': root.Strophe,
|
||||||
|
'$build': root.$build,
|
||||||
|
'$iq': root.$iq,
|
||||||
|
'$msg': root.$msg,
|
||||||
|
'$pres': root.$pres,
|
||||||
|
'SHA1': root.SHA1,
|
||||||
|
'MD5': root.MD5,
|
||||||
|
'b64_hmac_sha1': root.b64_hmac_sha1,
|
||||||
|
'b64_sha1': root.b64_sha1,
|
||||||
|
'str_hmac_sha1': root.str_hmac_sha1,
|
||||||
|
'str_sha1': root.str_sha1
|
||||||
|
};
|
||||||
|
root.converse_utils = factory(
|
||||||
|
root.sizzle,
|
||||||
|
root.Promise,
|
||||||
|
root._,
|
||||||
|
Strophe
|
||||||
|
);
|
||||||
|
}
|
||||||
}(this, function (
|
}(this, function (
|
||||||
sizzle,
|
sizzle,
|
||||||
Promise,
|
Promise,
|
||||||
|
Loading…
Reference in New Issue
Block a user