Skip to content

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

We now have a functioning mockup of contact groups. updates #83

parent c839ce2d
Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 18 deletions
css/converse.css
View file @ b66560ce
......@@ -853,11 +853,11 @@ dl.add-converse-contact {
#conversejs .chatroom-form label select {
float: right;
}
#conversejs #converse-roster dd.odd {
#converse-roster dd.odd {
background-color: #DCEAC5;
/* Make this difference */
}
#conversejs #converse-roster dd.current-xmpp-contact span {
#converse-roster dd.current-xmpp-contact span {
font-size: 16px;
float: left;
color: #4f4f4f;
......@@ -866,18 +866,18 @@ dl.add-converse-contact {
margin-left: 0.5em;
float: right;
}
#conversejs #converse-roster dd a,
#conversejs #converse-roster dd span {
#converse-roster dd a,
#converse-roster dd span {
text-shadow: 0 1px 0 #fafafa;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#conversejs #converse-roster dd span {
#converse-roster dd span {
padding: 0 5px 0 0;
}
#conversejs #converse-roster {
#converse-roster {
overflow-y: auto;
overflow-x: hidden;
width: 100%;
......@@ -886,6 +886,9 @@ dl.add-converse-contact {
height: 254px;
height: calc(100% - 70px);
}
#converse-roster .roster-group {
color: #666;
}
#conversejs dd.available-chatroom {
overflow-x: hidden;
text-overflow: ellipsis;
......@@ -895,8 +898,8 @@ dl.add-converse-contact {
#conversejs dd.available-chatroom a.open-room {
width: 148px;
}
#conversejs #available-chatrooms dt,
#conversejs #converse-roster dt {
#available-chatrooms dt,
#converse-roster dt {
font-weight: normal;
font-size: 13px;
color: #666;
......@@ -904,7 +907,7 @@ dl.add-converse-contact {
padding: 0.3em 0 0 0.5em;
text-shadow: 0 1px 0 #fafafa;
}
#conversejs #converse-roster dt {
#converse-roster dt {
display: none;
}
#conversejs .room-info {
......
less/converse.less
View file @ b66560ce
......@@ -945,11 +945,11 @@ dl.add-converse-contact {
float: right;
}
#conversejs #converse-roster dd.odd {
#converse-roster dd.odd {
background-color: #DCEAC5; /* Make this difference */
}
#conversejs #converse-roster dd.current-xmpp-contact span {
#converse-roster dd.current-xmpp-contact span {
font-size: 16px;
float: left;
color: rgb(79, 79, 79);
......@@ -960,8 +960,8 @@ dl.add-converse-contact {
float: right;
}
#conversejs #converse-roster dd a,
#conversejs #converse-roster dd span {
#converse-roster dd a,
#converse-roster dd span {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
display: inline-block;
overflow: hidden;
......@@ -969,11 +969,11 @@ dl.add-converse-contact {
text-overflow: ellipsis;
}
#conversejs #converse-roster dd span {
#converse-roster dd span {
padding: 0 5px 0 0;
}
#conversejs #converse-roster {
#converse-roster {
overflow-y: auto;
overflow-x: hidden;
width: 100%;
......@@ -983,6 +983,10 @@ dl.add-converse-contact {
height: ~"calc(100% - 70px)";
}
#converse-roster .roster-group {
color: #666;
}
#conversejs dd.available-chatroom {
overflow-x: hidden;
text-overflow: ellipsis;
......@@ -994,8 +998,8 @@ dl.add-converse-contact {
width: 148px;
}
#conversejs #available-chatrooms dt,
#conversejs #converse-roster dt {
#available-chatrooms dt,
#converse-roster dt {
font-weight: normal;
font-size: 13px;
color: #666;
......@@ -1004,7 +1008,7 @@ dl.add-converse-contact {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
}
#conversejs #converse-roster dt {
#converse-roster dt {
display: none;
}
......
mockup/controlbox.html 0 → 100644
View file @ b66560ce
<!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">Toggle Chat</span>
<span style="display: none" id="online-count">(0)</span>
</a>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<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>
<span class="conn-feedback"></span>
</div>
</div>
</div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="box-flyout">
<div class="dragresize dragresize-tm"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li>
<li><a class="s" href="#chatrooms">Rooms</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
</div>
<div id="users" class="controlbox-pane" style="display: block;">
<form class="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder">
<dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
<div class="xmpp-status">
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
<span class="icon-online"></span>
I am online
</a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
</div>
</dt>
<dd>
<ul style="display: none;" class="xmpp-status-menu">
<li>
<a href="#" class="online" data-value="online">
<span class="icon-online"></span>
Online</a>
</li>
<li>
<a href="#" class="dnd" data-value="dnd">
<span class="icon-dnd"></span>
Busy</a>
</li>
<li>
<a href="#" class="away" data-value="away">
<span class="icon-away"></span>
Away</a>
</li>
<li>
<a href="#" class="offline" data-value="offline">
<span class="icon-offline"></span>
Offline</a>
</li>
</ul>
</dd>
</dl>
</span>
</form>
<dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
<span class="icon-plus"></span>
Add a contact
</a>
</dt>
<dd class="search-xmpp" style="display:none">
<ul>
<li>
<form class="add-xmpp-contact">
<input type="text" name="identifier" class="username" placeholder="Contact username">
<button type="submit">Add</button>
</form>
</li>
<li></li>
</ul>
</dd>
</dl>
<dl id="converse-roster" style="display: block;">
<dt id="xmpp-contacts" style="display: block;">
<a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Colleagues</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
Victor Matfield
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-away" title="this contact is away"></span>
William Winterbottom
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="dnd current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-dnd" title="This contact is busy"></span>
Gary Teichmann
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt id="xmpp-contacts" style="display: block;">
<a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Family</a>
</dt>
<dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-away" title="this contact is away"></span>
Allan Donald
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-offline" title="This contact is offline"></span>
Corné Krige
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt id="xmpp-contacts" style="display: block;">
<a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Friends</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
John Smit
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
Bakkies Botha
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt id="xmpp-contacts" style="display: block;">
<a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Ungrouped</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
James Small
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt id="xmpp-contact-requests" style="display: block;">
<a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Contact Requests</a>
</dt>
<dd class="offline requesting-xmpp-contact">
<span>Bob Skinstad</span>
<span class="request-actions">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
</span>
</dd>
<dd class="offline requesting-xmpp-contact">
<span>André Vos</span>
<span class="request-actions">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
</span>
</dd>
<dt id="pending-xmpp-contacts" style="display: block;">
<a href="#" class="roster-group icon-opened" title="Click to hide these contacts">Pending Contacts</a>
</dt>
<dd class="offline pending-xmpp-contact"><span>Rassie Erasmus</span>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline pending-xmpp-contact"><span>Victor Matfield</span>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
</dl>
</div>
<div id="chatrooms" style="display: none;">
<form class="add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
<input type="submit" name="join" value="Join">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
</form>
<dl id="available-chatrooms">
<dt>Rooms on conference.opkode.im</dt>
<dd class="available-chatroom">
<a class="open-room"
data-room-jid="converse.js@conference.opkode.im"
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
<a class="room-info icon-room-info"
data-room-jid="converse.js@conference.opkode.im"
title="Show more information on this room" href="#">&nbsp;</a>
<div class="room-info">
<p class="room-info"><strong>Description:</strong></p>
<p class="room-info"><strong>Occupants:</strong> 2</p>
<p class="room-info"><strong>Features:</strong> </p>
<ul>
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
<li class="room-info">Semi-anonymous</li>
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
<p></p>
</ul>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('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() {
$('.roster-group').click(function(ev) {
ev.preventDefault();
var $el = $(ev.target);
$el.parent().nextUntil('dt').slideToggle();
if ($el.hasClass("icon-opened")) {
$el.removeClass("icon-opened").addClass("icon-closed");
} else {
$el.removeClass("icon-closed").addClass("icon-opened");
}
});
$('.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';
});
});
$('.toggle-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent();
$grandparent.fadeOut('fast');
});
// 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>
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