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

Add a toggle to show/hide the minimized chat boxes.

Browse Source 
Still rough around the edges
This commit is contained in:
JC Brand 2014-06-05 00:12:53 +02:00
parent 24d58a5b0a
commit f416a455d1
5 changed files with 242 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
converse.js
View File

@ -3587,7 +3587,7 @@
this.ControlBoxToggle = Backbone.View.extend({
tagName: 'a',
className: 'toggle-online-users',
className: 'toggle-controlbox',
id: 'toggle-controlbox',
events: {
'click': 'onClick'

19
css/converse.css
View File

@ -559,15 +559,6 @@ span.spinner.centered {
span.spinner.hor_centered {
text-align: center;
}
#conversejs #toggle-controlbox {
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: #5390c8;
padding: 4px 8px;
margin-right: 5px;
color: white;
}
#conversejs #trimmed-chatboxes .box-flyout {
position: absolute;
display: block;
@ -588,8 +579,16 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .chat-head-chatroom {
width: 100px;
}
#conversejs #toggle-controlbox {
#conversejs .toggle-controlbox,
#conversejs .toggle-minimized-chats {
float: right;
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: #5390c8;
padding: 4px 8px;
margin-right: 5px;
color: white;
}
#conversejs .chat-head {
color: #ffffff;

20
less/converse.less
View File

@ -588,16 +588,6 @@ span.spinner.hor_centered {
text-align: center;
}
#conversejs #toggle-controlbox {
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: rgba(83, 144, 200, 100);
padding: 4px 8px;
margin-right: 5px;
color: white;
}
#conversejs #trimmed-chatboxes .box-flyout {
position: absolute;
display: block;
@ -621,8 +611,16 @@ span.spinner.hor_centered {
width: 100px;
}
#conversejs #toggle-controlbox {
#conversejs .toggle-controlbox,
#conversejs .toggle-minimized-chats {
float: right;
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: rgba(83, 144, 200, 100);
padding: 4px 8px;
margin-right: 5px;
color: white;
}
#conversejs .chat-head {

2
mockup/index.html
View File

@ -20,7 +20,7 @@
</div>
<div id="conversejs">
<a id="toggle-controlbox" href="#" class="toggle-online-users">
<a id="toggle-controlbox" href="#" class="toggle-controlbox">
<span class="conn-feedback">Toggle Chat</span>
<span style="display: none" id="online-count">(0)</span>
</a>

222
mockup/minimal.html Normal file
View File

@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title id="pageTitle">Converse.js: Mockup</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Converse.js: Mockup" />
<link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/dist/jquery.min.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
<h2 id="project_tagline">Static Mockup</h2>
</header>
</div>
<div id="conversejs">
<a id="toggle-controlbox" href="#" class="toggle-controlbox">
<span class="conn-feedback">Friends Online</span>
<span id="online-count">(0)</span>
</a>
<div id="controlbox" class="chatbox" style="display: none;">
<div class="box-flyout">
<div class="dragresize dragresize-tm"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
</div>
<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="trimmed-chatboxes">
<div class="box-flyout">
<div class="minimized-chats">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">3</div>
Restricted Chatroom
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">42</div>
JC Brand
</a>
</div>
</div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
My Chatroom
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Annegreet Gomez
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">842</div>
Asmaa Haakman
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Candice van der Knijff
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Laura Grunewald
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat">
Lena Grunewald
</a>
</div>
</div>
</div>
<div href="#" class="toggle-minimized-chats">
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
<a class="icon-close"></a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var refreshWebkit = function () {
/* This works around a webkit bug. Refresh the browser's viewport,
* otherwise chatboxes are not moved along when one is closed.
*/
var conversejs = document.getElementById('conversejs');
conversejs.style.display = 'none';
conversejs.offsetHeight = conversejs.offsetHeight; // no need to store this anywhere, the reference is enough
conversejs.style.display = 'block';
}
$('a[href=#chatrooms]').click(function (ev) {
switchTab(ev);
});
$('a[href=#users]').click(function (ev) {
switchTab(ev);
});
$("a.choose-xmpp-status").click(function (ev) {
ev.preventDefault();
$(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
});
$("a.change-xmpp-status-message").click(function (ev) {
ev.preventDefault();
var form = ''+
'<form id="set-custom-xmpp-status">' +
'<input type="text" class="custom-xmpp-status"I am online"'+
'placeholder="I am online"/>' +
'<button type="submit">Save</button>' +
'</form>';
$(ev.target).closest('.xmpp-status').replaceWith(form);
$(ev.target).closest('.custom-xmpp-status').focus().focus();
});
$('.toggle-xmpp-contact-form').click(function (ev) {
ev.preventDefault();
$(ev.target).parent().parent().find('.search-xmpp').toggle('fast', function () {
if ($(this).is(':visible')) {
$(this).find('input.username').focus();
}
});
});
var switchTab = function (ev) {
ev.preventDefault();
var $tab = $(ev.target),
$sibling = $tab.parent().siblings('li').children('a'),
$tab_panel = $($tab.attr('href')),
$sibling_panel = $($sibling.attr('href'));
$sibling_panel.hide();
$sibling.removeClass('current');
$tab.addClass('current');
$tab_panel.show();
}
$(function() {
$('.close-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent();
$('#toggle-controlbox').toggle();
$grandparent.hide(300, function () {
refreshWebkit();
});
});
$('#toggle-controlbox').click(function(ev) {
$('#toggle-controlbox').toggle('fast', function () {
refreshWebkit();
});
$('#controlbox').toggle();
});
$('.toggle-minimized-chats').click(function(ev) {
$('.minimized-chats').toggle();
});
// Clickable Dropdown
$('.toggle-otr').click(function(e) {
$('.toggle-otr ul').slideToggle(200);
e.stopPropagation();
});
$('.toggle-smiley').click(function(e) {
$(e.target).find('ul').slideToggle(200);
e.stopPropagation();
});
$(document).click(function() {
if ($('.toggle-otr ul').is(':visible')) {
$('.toggle-otr ul', this).slideUp(200);
}
if ($('.toggle-smiley ul').is(':visible')) {
$('.toggle-smiley ul', this).slideUp(200);
}
});
});
});
</script>
</html>