Skip to content

C
converse.js
Commit f3ca08f1 authored by JC Brand's avatar JC Brand
Browse files
Options

Simplified the markup a bit. 

Also, added another chatbox and fixed reflow after closing a chatbox.
parent 69159fd7
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 55 deletions
converse.css
View file @ f3ca08f1
......@@ -869,12 +869,10 @@ dd.available-chatroom:hover a.room-info {
.chatbox,
.chatroom {
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.4);
display:none;
height: 25px;
float: right;
margin-right: 15px;
z-index: 20; /* So that it's higher than the content actions */
border-radius: 4px;
display: block;
}
.chatbox {
......@@ -1255,45 +1253,23 @@ form.add-xmpp-contact input {
color: rgb(79, 79, 79);
}
#conversejs {
bottom:0;
direction:ltr;
height:25px;
left: auto;
position:fixed;
right:0;
z-index:300
}
/* XXX ------ XXX */
#conversejs {
bottom: 0;
bottom: 1px;
direction: ltr;
height: 25px;
left: 0;
position: fixed;
right: 0;
z-index: 300;
}
.converse-dock {
margin: 0 15px 0 0;
}
.converse-dock .nub-container {
float: right;
}
.nub {
height: 25px;
width: 200px;
display: block;
}
.nub-flyout {
position: absolute;
display: block;
bottom: 0;
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.4);
border-radius: 4px;
}
mockup.html
View file @ f3ca08f1
......@@ -11,34 +11,104 @@
<body>
<div id="conversejs">
<div class="converse-dock">
<div class="nub-container">
<div class="nub">
<div class="nub-flyout">
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
</div>
<div class="controlbox-panes">
<div id="login-dialog">
<form id="converse-login">
<label>XMPP/Jabber Username:</label><input type="text" id="jid">
<label>Password:</label><input type="password" id="password">
<input class="login-submit" type="submit" value="Log In">
</form>
</div>
</div>
</div>
<div id="controlbox" class="chatbox">
<div class="nub-flyout">
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
</div>
<div class="controlbox-panes">
<div id="login-dialog">
<form id="converse-login">
<label>XMPP/Jabber Username:</label><input type="text" id="jid">
<label>Password:</label><input type="password" id="password">
<input class="login-submit" type="submit" value="Log In">
</form>
</div>
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="nub-flyout">
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
<a href="http://opkode.com" target="_blank" class="user">
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title"> JC Brand </div>
</a>
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
<p></p>
</div>
<div class="chat-content">
<div class="chat-info"><strong>/help</strong>:This is an info message</div>
<div class="chat-error">This is an error message</div>
<div class="chat-message">
<span class="chat-message-me">09:35 me:&nbsp;</span>
<span class="chat-message-content">
Hello world
<span class="icon-smiley"></span>
</span>
</div>
<div class="chat-message ">
<span class="chat-message-them">19:25 Benedict-John:&nbsp;</span>
<span class="chat-message-content">Dagsê</span>
</div>
<div class="chat-message">
<span class="chat-message-me">19:39 me:&nbsp;</span>
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
</div>
<div class="chat-message">
<span class="chat-message-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-event">JC Brand is busy</div>
<div class="chat-message ">
<span class="chat-message-me">19:43 me:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span>
</div>
</div>
<form class="sendXMPPMessage" action="" method="post">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley icon-happy" title="Insert a smilery">
<ul>
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
</ul>
</li>
<li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
<span class="chat-toolbar-text">unencrypted</span>
<span class="icon-unlocked"></span>
<ul>
<li><a href="#">Start private conversation</a></li>
<li><a href="#">End private conversation</a></li>
<li><a href="#">Authenticate buddy</a></li>
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
</ul>
</li>
</ul>
<textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
</form>
</div>
</div>
</div>
<script>
......@@ -94,12 +164,22 @@ $(document).ready(function () {
$(function() {
$('.close-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent();
$grandparent.hide(300, function () {
// Webkit fix
document.getElementById('conversejs').style.display = 'none';
document.getElementById('conversejs').offsetHeight; // no need to store this anywhere, the reference is enough
document.getElementById('conversejs').style.display = 'block';
});
});
$('.minimize-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent();
if ($grandparent.attr('id') == 'controlbox') {
$grandparent.find('div#login-dialog').toggle();
$grandparent.find('div#login-dialog').slideToggle(300);
} else {
$grandparent.find('div.chat-content').toggle();
$grandparent.find('div.chat-content').slideToggle(300);
}
$(ev.target).parent().parent().find('form.sendXMPPMessage').toggle();
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7