Removed the mockups from the project. Recommended to use tests instead.
This commit is contained in:
Guus der Kinderen
JC Brand
parent
061142e0c3
commit
0c5f0e247b
|
|
@ -26,6 +26,7 @@ Soon we'll deprecate the latter, so prepare now.
|
|||
- #2006: fix rendering of emojis in case `use_system_emojis == false`
|
||||
- #2028: Implement XEP-0333 `displayed` chat marker
|
||||
- #2101: Improve contrast of text in control box
|
||||
- Removed the mockups from the project. Recommended to use tests instead.
|
||||
- The API method `api.settings.update` has been deprecated in favor of `api.settings.extend`.
|
||||
- Filter roster contacts via all available information (JID, nickname and VCard full name).
|
||||
- Allow ignoring of bootstrap modules at build using environment variable. For xample: `export BOOTSTRAP_IGNORE_MODULES="Modal,Dropdown" && make dist`
|
||||
|
|
|
|||
|
|
@ -34,17 +34,6 @@ However, when developing or changing the theme, you'll want to load all the
|
|||
unminified JS and CSS resources as separate files. To do this, open http://localhost:8000/dev.html
|
||||
instead.
|
||||
|
||||
Mockups
|
||||
=======
|
||||
|
||||
Converse contains some mockups in the ``./mockup`` directory against which you
|
||||
can preview and tweak your changes.
|
||||
|
||||
The ``./mockup/index.html`` file contains the most comprehensive mockup, while
|
||||
the other files focus on particular UI aspects.
|
||||
|
||||
To see it in your browser, simply open: http://localhost:8000/mockup
|
||||
|
||||
|
||||
Modifying the HTML templates of Converse
|
||||
========================================
|
||||
|
|
@ -63,6 +52,15 @@ To generate the CSS you can run::
|
|||
|
||||
make css
|
||||
|
||||
Testing your changes
|
||||
=======
|
||||
|
||||
The recommended way to test your changes is to run the tests that are part of the Converse source code.
|
||||
By executing ``make test`` you'll run all tests (which live in the ``spec`` folder) which will open a browser window in which tests are processed.
|
||||
|
||||
You can run a single test by changing ``it(`` to ``fit(`` so that only that one test runs. Then you click the "debug" button in the browser when the tests run. After the test has run, the opened chats will still be visible.
|
||||
|
||||
|
||||
Creating dist files
|
||||
===================
|
||||
|
||||
|
|
|
|||
|
|
@ -1,213 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Converse.js Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body class="reset">
|
||||
<div id="conversejs" class="fullscreen converse-fullscreen">
|
||||
<div class="sidebar"></div>
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<div class="col">
|
||||
<div class="row no-gutters">
|
||||
<div class="col chat-title" title="j@chat.example.org">Juliet Capulet
|
||||
<p class="user-custom-message" title="On the balcony">On the balcony</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatbox-buttons row no-gutters">
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="message chat-info">This is an info message</div>
|
||||
<div class="message chat-info chat-error">This is an error message</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">He jests at scars that never felt a wound.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message date-separator">
|
||||
<hr class="separator">
|
||||
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">But soft, what light through yonder window breaks?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">It is the east and Juliet is the sun!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__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">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Arise, fair sun, and kill the envious moon,</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fa fa-check chat-msg__receipt"></span>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event">Romeo Montague is busy</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
<span class="fa fa-lock"></span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name;</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
<span class="fa fa-lock"></span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="converse-modals" class="modals"></div>
|
||||
</div>
|
||||
|
||||
<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.nativeview/backbone.nativeview.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="controlbox.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
/*global Backbone, _, window */
|
||||
const ChatBox = Backbone.NativeView.extend({
|
||||
el: '.chatbox:not(.chatroom):not(#controlbox)',
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'chatbox.html', true);
|
||||
xhr.onload = () => {
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(xhr.responseText, "text/html");
|
||||
this.el.innerHTML = doc.querySelector('.chatbox:not(.chatroom):not(#controlbox)').innerHTML;
|
||||
window.renderAvatars(this.el);
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,536 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chatroom Fullscreen</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body class="reset">
|
||||
<div id="conversejs" class="fullscreen converse-fullscreen">
|
||||
<div class="sidebar"></div>
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox chatroom" id="chatroom">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom row no-gutters">
|
||||
<div class="chatbox-title">
|
||||
<div class="chat-title">Capulet's orchard</div>
|
||||
<p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
|
||||
</div>
|
||||
<div class="chatbox-buttons row no-gutters">
|
||||
<a class="chatbox-btn fa fa-sign-out-alt" title="Leave this groupchat"></a>
|
||||
<a class="chatbox-btn fa fa-wrench" title="Configure this groupchat"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="chat-area col-md-9 col-8">
|
||||
<div class="chat-content">
|
||||
<div class="message date-separator">
|
||||
<hr class="separator">
|
||||
<time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Romeo Montague"">Romeo Montague has entered the room</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00">
|
||||
<div class="chat-msg__content chat-msg__content--action">
|
||||
<span class="chat-msg__heading">
|
||||
<time timestamp="2018-12-29" class="chat-msg__time">15:29</time>
|
||||
<span class="chat-msg__author">**Romeo Montague</span>
|
||||
</span>
|
||||
<span class="chat-msg__text">looks around</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">He jests at scars that never felt a wound.</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message date-separator">
|
||||
<hr class="separator">
|
||||
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Juliet"">Juliet has entered the room</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">But, soft! what light through yonder window breaks?</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">It is the east, and Juliet is the sun.</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">19:43</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name; Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet.</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
|
||||
<progress value="50" max="100"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">19:45</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__media">
|
||||
<a href="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"
|
||||
target="_blank" rel="noopener">
|
||||
<img class="chat-image img-thumbnail" src="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__spoiler-hint">
|
||||
<span class="spoiler-hint">By a name</span>
|
||||
<a class="badge badge-info spoiler-toggle" 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 class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</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"">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 patient if your questions aren't answered immediately. We're all in different timezones.
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Mercutio</span>
|
||||
<span class="chat-msg__time">19:49</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
|
||||
</div>
|
||||
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Mercutio</span>
|
||||
<span class="chat-msg__time">19:49</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Take our good meaning, for our judgment sits. Five times in that ere once in our five wits.</span>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Mercutio</span>
|
||||
<span class="chat-msg__time">19:49</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy, Which is as thin of substance as the air And more inconstant than the wind, who wooes Even now the frozen bosom of the north, And, being anger'd, puffs away from thence, Turning his face to the dew-dropping south.</span> </div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-state-notification"
|
||||
data-isodate="2018-04-36T18:21:36+02:00"
|
||||
data-csn="romeo@capulet.lit">Romeo Montague is typing</div>
|
||||
|
||||
</div>
|
||||
<div class="new-msgs-indicator">▼ You have unread messages ▼</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-angle-double-right" title="Hide the list of occupants"></a></li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="occupants col-md-3 col-4">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="room-invite">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="Click to mention Juliet Capulet in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Juliet Capulet</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-groupchat">Owner</span>
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="moderator occupant" title="Click to mention Romeo Montague in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Romeo Montague</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Lady Montague in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-away circle" title="Away"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lady Montague</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Mercutio in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Mercutio</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-secondary">Visitor</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Lord Montague in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-dnd circle" title="Busy"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lord Montague</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Friar Laurence in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Friar Laurence</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Tybalt in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Tybalt</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Paris in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Paris</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Lord Capulet in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lord Capulet</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Benviolo in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Benviolo</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Lady Capulet in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Lady Capulet</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Balthasar in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Balthasar</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="moderator occupant" title="Click to mention Escalus, Prince of Verona in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Escalus, Prince of Verona and then some</span>
|
||||
<span class="occupant-badges">
|
||||
<span class="badge badge-info">Admin</span>
|
||||
<span class="badge badge-info">Moderator</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Peter in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Peter</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Abram in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Abram</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Sampson in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Sampson</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="occupant" title="Click to mention Gregory in your message.">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-auto">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>
|
||||
</div>
|
||||
<div class="col occupant-nick-badge">
|
||||
<span class="occupant-nick">Gregory</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Secured: This room requires a password before entry"><span class="fa fa-unlock"></span> Password required</li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> Public</li>
|
||||
<li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span> Open</li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> Persistent</li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> Non-anonymous</li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> Unmoderated</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="converse-modals" class="modals"></div>
|
||||
</div>
|
||||
|
||||
<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.nativeview/backbone.nativeview.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="controlbox.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
/*global Backbone, _, window */
|
||||
const ChatRoom = Backbone.NativeView.extend({
|
||||
el: '.chatroom',
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'chatroom.html', true);
|
||||
xhr.onload = () => {
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(xhr.responseText, "text/html");
|
||||
this.el.innerHTML = doc.querySelector('.chatroom').innerHTML;
|
||||
window.renderAvatars(this.el);
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
<!-- <div id="users" class="controlbox-pane"> -->
|
||||
<div class="controlbox-padded userinfo">
|
||||
<div class="profile d-flex">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
|
||||
<span class="username w-100 align-self-center">Romeo Montague</span>
|
||||
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
|
||||
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
|
||||
<a class="chatbox-btn logout fa fa-sign-out-alt align-self-center" title="Log out"></a>
|
||||
</div>
|
||||
<div class="d-flex xmpp-status">
|
||||
<span class="online w-100 align-self-center" data-value="online">
|
||||
<span class="fa fa-circle"></span> Online</span>
|
||||
<a class="chatbox-btn fa fa-pencil-alt" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="headlines" class="controlbox-section">
|
||||
<div class="d-flex controlbox-padded">
|
||||
<span class="w-100 controlbox-heading">Announcements</span>
|
||||
</div>
|
||||
<div class="list-container">
|
||||
<div class="items-list">
|
||||
<div class="controlbox-padded list-item open-headline d-flex flex-row">
|
||||
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Montague.lit</a>
|
||||
</div>
|
||||
<div class="controlbox-padded list-item open-headline d-flex flex-row">
|
||||
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Capulet.lit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chatrooms" class="controlbox-section">
|
||||
<div class="d-flex controlbox-padded">
|
||||
<span class="w-100 controlbox-heading controlbox-heading--groupchats">Groupchats</span>
|
||||
|
||||
<a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="Query for groupchats" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
|
||||
<a class="controlbox-heading__btn fa fa-plus" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
|
||||
</div>
|
||||
<div class="list-container items-list-container">
|
||||
<div class="items-list rooms-list">
|
||||
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row open">
|
||||
<a class="list-item-link open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">
|
||||
Capulet's Orchard</a>
|
||||
<a href="#"
|
||||
class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
|
||||
data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
|
||||
</a>
|
||||
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room"> </a>
|
||||
<a class="list-item-action fa fa-sign-out-alt close-room" data-room-jid="public@conference.test.com" data-room-name="Capulet's Orchard"
|
||||
title="Leave this groupchat" href="#"></a>
|
||||
</div>
|
||||
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
|
||||
<span class="list-item-badge badge badge-room-color msgs-indicator">18</span>
|
||||
<a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">
|
||||
Juliet's Balcony</a>
|
||||
<a href="#"
|
||||
class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
|
||||
data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
|
||||
</a>
|
||||
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room"> </a>
|
||||
<a class="list-item-action fa fa-sign-out-alt close-room" data-room-jid="team@conference.test.com" data-room-name="Juliet's Balcony"
|
||||
title="Leave this groupchat" href="#"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bookmarks" class="controlbox-section">
|
||||
<div class="d-flex controlbox-padded">
|
||||
<span class="w-100 controlbox-heading">Bookmarks</span>
|
||||
</div>
|
||||
<div class="list-container items-list-container">
|
||||
<div class="items-list rooms-list">
|
||||
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
|
||||
<a class="list-item-link open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
|
||||
<a href="#"
|
||||
class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
|
||||
data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
|
||||
</a>
|
||||
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room"> </a>
|
||||
</div>
|
||||
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
|
||||
<a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
|
||||
<a href="#"
|
||||
class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
|
||||
data-html="true" data-content="<b>Room Address (JID): </b><br/>public@conference.test.com<br/><b>Discussions: </b><br/>Public discussions<br/><b>Participants: </b>1<br/><b>Features: </b><br/>Non-anonymous">
|
||||
</a>
|
||||
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room"> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="converse-roster" class="controlbox-section">
|
||||
<div class="d-flex controlbox-padded">
|
||||
<span class="w-100 controlbox-heading controlbox-heading--contacts">Contacts</span>
|
||||
<a class="fa-spin controlbox-heading__btn fa fa-sync" title="Re-sync your contacts"></a>
|
||||
<a class="controlbox-heading__btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
|
||||
</div>
|
||||
<form class="controlbox-padded roster-filter-form input-button-group">
|
||||
<div class="form-inline flex-nowrap">
|
||||
<div class="btn-group">
|
||||
<input value="" class="roster-filter form-control" placeholder="Filter">
|
||||
<span class="clear-roster-filter fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
|
||||
</div>
|
||||
<div class="filter-by d-flex flex-nowrap">
|
||||
<span class="fa fa-user" title="Filter by contacts"></span>
|
||||
<span class="fa fa-users" title="Filter by groups"></span>
|
||||
<span class="fa fa-circle" title="Filter by status"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="list-container roster-contacts">
|
||||
<div class="roster-group" id="xmpp-contact-requests">
|
||||
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
||||
<span class="fa fa-caret-down"></span> Contact Requests</a>
|
||||
<ul class="items-list roster-group-contacts">
|
||||
<li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
|
||||
<span class="req-contact-name w-100">The Nurse</span>
|
||||
<a class="list-item-action list-item-action--visible accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="list-item-action list-item-action--visible decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
|
||||
<span class="req-contact-name w-100">Friar Laurence</span>
|
||||
<a class="list-item-action list-item-action--visible accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="list-item-action list-item-action--visible decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="roster-group" data-group="Colleagues">
|
||||
<a href="#" data-group="Colleagues" class="list-toggle group-toggle controlbox-padded " title="Click to hide these contacts">
|
||||
<span class="fa fa-caret-down"></span> Colleagues</a>
|
||||
<ul class="items-list roster-group-contacts">
|
||||
<li class="list-item controlbox-padded away current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle chat-status--online" title="this contact is away"></span> Balthasar</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded dnd current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-minus-circle chat-status--busy" title="This contact is busy"></span> Escalus, Prince of Verona</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="roster-group" data-group="Family">
|
||||
<a href="#" data-group="Family" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
|
||||
<span class="fa fa-caret-down"></span> Family</a>
|
||||
<ul class="items-list roster-group-contacts">
|
||||
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle chat-status--online" title="This contact is online"></span> Benvolio Montague</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle chat-status chat-status--away" title="This contact is offline"></span> Montague</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle chat-status chat-status--offline" title="This contact is offline"></span> Lady Montague</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="roster-group" data-group="Friends">
|
||||
<a href="#" data-group="Friends" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
|
||||
<span class="fa fa-caret-down"></span> Friends</a>
|
||||
<ul class="items-list roster-group-contacts">
|
||||
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle chat-status--away" title="This contact is online"></span> Mercutio</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="roster-group" data-group="Ungrouped">
|
||||
<a href="#" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
|
||||
<span class="fa fa-caret-down"></span> Ungrouped</a>
|
||||
<ul class="items-list roster-group-contacts">
|
||||
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle chat-status--online" title="This contact is online"></span> Gregory</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
|
||||
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
||||
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="roster-group" id="pending-xmpp-contacts">
|
||||
<a href="#" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
|
||||
<span class="fa fa-caret-down"></span> Pending Contacts</a>
|
||||
<ul class="items-list roster-group-contacts">
|
||||
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">
|
||||
<span class="pending-contact-name w-100">An Apothecary</span>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">
|
||||
<span class="pending-contact-name w-100">Abram</span>
|
||||
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/*global Backbone, _, window */
|
||||
const UserPanel = Backbone.NativeView.extend({
|
||||
el: '.controlbox-pane',
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'controlbox.html', true);
|
||||
xhr.onload = () => {
|
||||
this.el.innerHTML = xhr.responseText;
|
||||
this.modals = _.map(this.el.querySelectorAll('[data-toggle="modal"]'), (modal_el) =>
|
||||
new window.Modal(modal_el, {
|
||||
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
|
||||
}));
|
||||
window.renderAvatars();
|
||||
window.initSpoilers();
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Login Fullscreen</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading">inVerse</h1>
|
||||
</div>
|
||||
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox logged-out">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="brand-heading-container">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
|
||||
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="converse-login-panel" class="controlbox-pane fade-in row">
|
||||
<form id="converse-login" class="converse-form" method="post">
|
||||
<div class="form-group">
|
||||
<label for="jid">XMPP Username:</label>
|
||||
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<fieldset class="buttons">
|
||||
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
|
||||
<div class="switch-form">
|
||||
<p>Don't have an XMPP account?</p>
|
||||
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Converse.js Live Mockup</title>
|
||||
<meta name="description" content="Converse.js: A chat client for your website" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../dist/website.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<h1 id="project_title"><a href="https://conversejs.org">Converse.js</a></h1>
|
||||
<h2 id="project_tagline">Mockups</h2>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
|
||||
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
|
||||
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
|
||||
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
|
||||
<li><a href="/mockup/overlayed.html" class="btn btn-primary">4. Overlayed chats</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
// Extra test dependencies
|
||||
config.paths.mock = "tests/mock";
|
||||
config.paths.test_utils = "tests/utils";
|
||||
config.paths.jasmine = "components/jasmine/lib/jasmine-core/jasmine";
|
||||
config.paths["jasmine-html"] = "components/jasmine/lib/jasmine-core/jasmine-html";
|
||||
config.paths["console-runner"] = "node_modules/phantom-jasmine/lib/console-runner";
|
||||
config.shim['jasmine-html'] = {
|
||||
deps: ['jasmine'],
|
||||
exports: 'jasmine'
|
||||
};
|
||||
require.config(config);
|
||||
|
||||
// Polyfill 'bind' which is not available in phantomjs < 2.0
|
||||
if (!Function.prototype.bind) {
|
||||
Function.prototype.bind = function (oThis) {
|
||||
if (typeof this !== "function") {
|
||||
// closest thing possible to the ECMAScript 5 internal IsCallable function
|
||||
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
||||
}
|
||||
var aArgs = Array.prototype.slice.call(arguments, 1),
|
||||
fToBind = this,
|
||||
fNOP = function () {},
|
||||
fBound = function () {
|
||||
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
|
||||
aArgs.concat(Array.prototype.slice.call(arguments)));
|
||||
};
|
||||
fNOP.prototype = this.prototype;
|
||||
fBound.prototype = new fNOP();
|
||||
return fBound;
|
||||
};
|
||||
}
|
||||
|
||||
require([
|
||||
"jquery",
|
||||
"converse",
|
||||
"mock",
|
||||
"jasmine-html"
|
||||
], function($, converse, mock, jasmine) {
|
||||
// Set up converse.js
|
||||
window.converse_api = converse;
|
||||
window.localStorage.clear();
|
||||
window.sessionStorage.clear();
|
||||
|
||||
converse.initialize({
|
||||
i18n: window.locales.en,
|
||||
auto_subscribe: false,
|
||||
animate: false,
|
||||
connection: mock.mock_connection,
|
||||
no_trimming: true,
|
||||
debug: false
|
||||
}, function (converse) {
|
||||
window.converse = converse;
|
||||
window.crypto = {
|
||||
getRandomValues: function (buf) {
|
||||
var i;
|
||||
for (i=0, len=buf.length; i<len; i++) {
|
||||
buf[i] = Math.floor(Math.random()*256);
|
||||
}
|
||||
}
|
||||
};
|
||||
require([
|
||||
"console-runner",
|
||||
"mockup/mockup"
|
||||
], function () {
|
||||
// Make sure this callback is only called once.
|
||||
delete converse.callback;
|
||||
// Stub the trimChat method. It causes havoc when running with
|
||||
// phantomJS.
|
||||
converse.ChatBoxViews.prototype.trimChat = function () {};
|
||||
|
||||
// Jasmine stuff
|
||||
var jasmineEnv = jasmine.getEnv();
|
||||
var reporter;
|
||||
if (/PhantomJS/.test(navigator.userAgent)) {
|
||||
reporter = new jasmine.ConsoleReporter();
|
||||
window.console_reporter = reporter;
|
||||
jasmineEnv.addReporter(reporter);
|
||||
jasmineEnv.updateInterval = 0;
|
||||
} else {
|
||||
reporter = new jasmine.HtmlReporter();
|
||||
jasmineEnv.addReporter(reporter);
|
||||
jasmineEnv.specFilter = function(spec) {
|
||||
return reporter.specFilter(spec);
|
||||
};
|
||||
jasmineEnv.updateInterval = 0;
|
||||
}
|
||||
jasmineEnv.execute();
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/*global converse */
|
||||
(function (root, factory) {
|
||||
define(["jquery", "mock", "test_utils"], factory);
|
||||
} (this, function ($, mock, test_utils) {
|
||||
var $msg = converse_api.env.$msg;
|
||||
test_utils.clearBrowserStorage();
|
||||
|
||||
return describe("Live Mockup", $.proxy(function(mock, test_utils) {
|
||||
describe("Click the links below to view the different elements", function () {
|
||||
beforeEach(function () {
|
||||
test_utils.initConverse();
|
||||
test_utils.createContacts('all');
|
||||
});
|
||||
|
||||
it("Show a chat room", function () {
|
||||
test_utils.openChatRoom('lounge', 'mongague.lit', 'romeo');
|
||||
var view = converse.chatboxviews.get('lounge@mongague.lit');
|
||||
if (!view.$el.find('.chat-area').length) { view.renderChatArea(); }
|
||||
var text = 'This is a sent message';
|
||||
view.$el.find('.chat-textarea').text(text);
|
||||
view.$el.find('textarea.chat-textarea').trigger($.Event('keypress', {keyCode: 13}));
|
||||
var message = $msg({
|
||||
from: 'lounge@mongague.lit/romeo',
|
||||
to: 'romeo@mongague.lit.com',
|
||||
type: 'groupchat',
|
||||
id: view.model.messages.at(0).get('msgid')
|
||||
}).c('body').t(text);
|
||||
view.onChatRoomMessage(message.nodeTree);
|
||||
|
||||
var nick = mock.chatroom_names[0];
|
||||
text = 'This is a received message';
|
||||
message = $msg({
|
||||
from: 'lounge@mongague.lit/'+nick,
|
||||
id: '1',
|
||||
to: 'romeo@mongague.lit',
|
||||
type: 'groupchat'
|
||||
}).c('body').t(text);
|
||||
view.onChatRoomMessage(message.nodeTree);
|
||||
});
|
||||
|
||||
it("Show the control box", function () {
|
||||
test_utils.openControlBox();
|
||||
test_utils.openContactsPanel();
|
||||
});
|
||||
|
||||
it("Show a headlines box", function () {
|
||||
converse.connection._dataRecv(
|
||||
test_utils.createRequest(
|
||||
$msg({
|
||||
'type': 'headline',
|
||||
'from': 'notify.example.com',
|
||||
'to': 'romeo@mongague.lit',
|
||||
'xml:lang': 'en'
|
||||
})
|
||||
.c('subject').t('MAIL').up()
|
||||
.c('body').t('You got mail.').up()
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
xit("Show a private chat box", function () {
|
||||
var contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@mongague.lit';
|
||||
var chatbox = test_utils.openChatBoxFor(contact_jid);
|
||||
var view = converse.chatboxviews.get(contact_jid);
|
||||
var message = 'This message is sent from this chatbox';
|
||||
test_utils.sendMessage(view, message);
|
||||
message = 'This is a received message';
|
||||
var msg = $msg({
|
||||
from: contact_jid,
|
||||
to: converse.connection.jid,
|
||||
type: 'chat',
|
||||
id: (new Date()).getTime()
|
||||
}).c('body').t(message).up()
|
||||
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
|
||||
converse.chatboxes.onMessage(msg);
|
||||
});
|
||||
});
|
||||
}, window, mock, test_utils));
|
||||
}));
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
<!-- Register Modal -->
|
||||
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="registerModalLabel">Register</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="converse-register">
|
||||
<div class="form-group">
|
||||
<label for="domain">Your XMPP provider's domain name:</label>
|
||||
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
|
||||
</div>
|
||||
<p>Tip: A list of public XMPP providers is available
|
||||
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
|
||||
<input class="btn btn-primary" type="submit" value="Fetch registration form">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Profile Modal -->
|
||||
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Profile Modal -->
|
||||
<div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="userProfileModalLabel">Your profile</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change status Modal -->
|
||||
<div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="changeStatusModalLabel">Change chat status</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form class="set-xmpp-status" id="set-xmpp-status">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
|
||||
<label class="custom-control-label" for="radio-online">
|
||||
<span class="fa fa-circle"></span> Online</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="radio-busy" value="busy" name="chat_status" class="custom-control-input">
|
||||
<label class="custom-control-label" for="radio-busy">
|
||||
<span class="fa fa-minus-circle"></span> Busy</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
|
||||
<label class="custom-control-label" for="radio-away">
|
||||
<span class="fa fa-dot-circle-o"></span> Away</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
|
||||
<label class="custom-control-label" for="radio-xa">
|
||||
<span class="fa fa-circle-o"></span> Away for long</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group w-100">
|
||||
<input type="text" class="form-control" value="" placeholder="Personal status message">
|
||||
<span class="clear-input fa fa-times"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add contact Modal -->
|
||||
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="addContactModalLabel">Add a contact</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="converse-form add-xmpp-contact">
|
||||
<div class="form-group">
|
||||
<input type="text" name="identifier" class="form-control" placeholder="Contact username">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">Add</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chatrooms Modal -->
|
||||
<div class="modal fade" id="chatroomsModal" tabindex="-1" role="dialog" aria-labelledby="chatroomsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="chatroomsModalLabel">Enter a new Chatroom</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="converse-form add-chatroom">
|
||||
<div class="form-group">
|
||||
<label for="chatroom">Room address:</label>
|
||||
<input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="chatroom">Nickname:</label>
|
||||
<input type="text" name="nickname" class="form-control">
|
||||
</div>
|
||||
<input type="submit" class="btn btn-primary" name="join" value="Join">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/*global Backbone, _, window */
|
||||
const Modals = Backbone.NativeView.extend({
|
||||
el: 'div.modals',
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'modals.html', true);
|
||||
xhr.onload = () => {
|
||||
this.el.innerHTML = xhr.responseText;
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Login Overlayed</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body class="reset">
|
||||
<div class="converse-bg container">
|
||||
<h1 class="brand-heading">Converse</h1>
|
||||
</div>
|
||||
<div id="conversejs" class="converse-overlayed">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox logged-out">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head controlbox-head">
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
|
||||
<span class="brand-heading-container">
|
||||
<div class="brand-heading">
|
||||
<a href="https://conversejs.org" target="_blank" rel="noopener">
|
||||
<i class="icon-conversejs"></i><span class="brand-name">converse</span>
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="controlbox-panes">
|
||||
<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
|
||||
<form id="converse-login" class="converse-form">
|
||||
<div class="form-group">
|
||||
<label for="jid">XMPP Username:</label>
|
||||
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group form-check">
|
||||
<input id="converse-login-trusted" class="form-check-input" type="checkbox" name="trusted" checked="">
|
||||
<label class="form-check-label" for="converse-login-trusted">This is a trusted device</label>
|
||||
</div>
|
||||
<fieldset class="buttons">
|
||||
<input class="btn btn-primary" type="submit" value="Log in">
|
||||
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modals"></div>
|
||||
</div>
|
||||
|
||||
<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.nativeview/backbone.nativeview.js"></script>
|
||||
|
||||
<script type="text/javascript" src="sidebar.js"></script>
|
||||
<script type="text/javascript" src="controlbox.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Overlayed chats</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
|
||||
</head>
|
||||
|
||||
<body style="background-color: #578EA9">
|
||||
<div class="converse-bg container">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
|
||||
</div>
|
||||
|
||||
<div id="conversejs" class="converse-overlayed">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="sidebar"></div>
|
||||
<div class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"></div>
|
||||
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392"></div>
|
||||
|
||||
<div id="minimized-chats">
|
||||
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
|
||||
<span class="badge badge-light">322</span> Minimized
|
||||
</a>
|
||||
<div class="flyout minimized-chats-flyout row no-gutters">
|
||||
<div class="chat-head chat-head-chatroom row no-gutters">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
|
||||
<span class="badge badge-light">42</span>
|
||||
Restricted Chatroom
|
||||
</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
|
||||
<span class="badge badge-light">4</span>
|
||||
JC Brand
|
||||
</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatroom row no-gutters">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
|
||||
<span class="badge badge-light">842</span>
|
||||
Asmaa Haakman
|
||||
</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox row no-gutters">
|
||||
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="converse-modals" class="modals"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<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.nativeview/backbone.nativeview.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="controlbox.js"></script>
|
||||
<script type="text/javascript" src="modals.js"></script>
|
||||
<script type="text/javascript" src="chatroom.js"></script>
|
||||
<script type="text/javascript" src="chatbox.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Modals();
|
||||
new Sidebar();
|
||||
new UserPanel();
|
||||
new ChatRoom();
|
||||
new ChatBox();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!-- <div class="sidebar"> -->
|
||||
<a class="hamburger chatbox-btn fa fa-bars"></a>
|
||||
<!--
|
||||
<a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
<div class="bottom">
|
||||
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
|
||||
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
|
||||
<a class="chatbox-btn fa fa-cog" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
|
||||
</div>
|
||||
-->
|
||||
<!-- </div> -->
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/*global Backbone, _, window */
|
||||
const Sidebar = Backbone.NativeView.extend({
|
||||
el: 'div.sidebar',
|
||||
|
||||
events: {
|
||||
'click .hamburger': 'onHamburgerClicked'
|
||||
},
|
||||
|
||||
initialize () {
|
||||
this.render();
|
||||
},
|
||||
|
||||
onHamburgerClicked () {
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const converse_el = document.querySelector('#conversejs');
|
||||
if (_.includes(converse_el.classList, 'sidebar-open')) {
|
||||
converse_el.classList.remove('sidebar-open');
|
||||
hamburger.classList.remove('fa-times');
|
||||
hamburger.classList.add('fa-bars');
|
||||
} else {
|
||||
converse_el.classList.add('sidebar-open');
|
||||
hamburger.classList.remove('fa-bars');
|
||||
hamburger.classList.add('fa-times');
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'sidebar.html', true);
|
||||
xhr.onload = () => {
|
||||
this.el.innerHTML = xhr.responseText;
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/*global _, converse_utils */
|
||||
const u = converse_utils;
|
||||
|
||||
window.renderAvatars = function (el) {
|
||||
el = el || document;
|
||||
const canvasses = el.querySelectorAll('canvas.chat-msg__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('.spoiler-toggle');
|
||||
_.each(spoilers, (spoiler_el) => {
|
||||
spoiler_el.addEventListener('click', toggleSpoilerMessage);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue