Add a toggle to show/hide the minimized chat boxes.
Still rough around the edges
This commit is contained in:
parent
24d58a5b0a
commit
f416a455d1
|
@ -3587,7 +3587,7 @@
|
|||
|
||||
this.ControlBoxToggle = Backbone.View.extend({
|
||||
tagName: 'a',
|
||||
className: 'toggle-online-users',
|
||||
className: 'toggle-controlbox',
|
||||
id: 'toggle-controlbox',
|
||||
events: {
|
||||
'click': 'onClick'
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
222
mockup/minimal.html
Normal 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>
|
Loading…
Reference in New Issue
Block a user