Add new mockup specifically for minimized chats
This commit is contained in:
JC Brand
parent
6a421af9a1
commit
891f291c32
39
converse.css
39
converse.css
@ -657,6 +657,27 @@ form.search-xmpp-contact input {
|
||||
padding: 3px 0 0 0;
|
||||
}
|
||||
|
||||
.chat-head-message-count {
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, grey) );
|
||||
background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
|
||||
border: 3px solid rgb(79, 106, 114);
|
||||
text-shadow: 1px 1px 0 #ccc;
|
||||
color: darkred;
|
||||
border-radius: 20%;
|
||||
padding: 2px 10px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-head-chatroom .chat-head-message-count {
|
||||
border: 3px solid #2D617A;
|
||||
}
|
||||
|
||||
a.configure-chatroom-button,
|
||||
a.toggle-chatbox-button,
|
||||
a.close-chatbox-button {
|
||||
@ -668,8 +689,8 @@ a.close-chatbox-button {
|
||||
-moz-box-shadow:inset 0 1px 0 0 #ffffff;
|
||||
-webkit-box-shadow:inset 0 1px 0 0 #ffffff;
|
||||
box-shadow:inset 0 1px 0 0 #ffffff;
|
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
|
||||
background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
|
||||
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
|
||||
background:-moz-linear-gradient(center top, #ffffff 5%, #f6f6f6 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
|
||||
-moz-border-radius:6px;
|
||||
-webkit-border-radius:6px;
|
||||
@ -957,7 +978,7 @@ select#select-xmpp-status {
|
||||
|
||||
/* single tab */
|
||||
.chat-head #controlbox-tabs li {
|
||||
float:left;
|
||||
float: left;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
text-shadow: white 0 1px 0;
|
||||
@ -965,16 +986,16 @@ select#select-xmpp-status {
|
||||
}
|
||||
|
||||
ul#controlbox-tabs li a {
|
||||
display:block;
|
||||
font-size:12px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
height: 34px;
|
||||
line-height:34px;
|
||||
line-height: 34px;
|
||||
margin: 0;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
color:#666;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title id="pageTitle">Converse: Mockup</title>
|
||||
<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: Open Source Browser-Based Instant Messaging" />
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
|
||||
<link type="text/css" rel="stylesheet" href="converse.css">
|
||||
<script src="components/jquery/jquery.min.js"></script>
|
||||
<meta name="description" content="Converse.js: Chat Client for Websites" />
|
||||
<link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
|
||||
<link type="text/css" rel="stylesheet" href="../converse.css">
|
||||
<script src="../components/jquery/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- HEADER -->
|
||||
274
mockup/minimized.html
Normal file
274
mockup/minimized.html
Normal file
@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title id="pageTitle">Converse.js: Mockup of minimized chats</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="description" content="Converse.js: Chat Client for Websites" />
|
||||
<link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
|
||||
<link type="text/css" rel="stylesheet" href="../converse.css">
|
||||
<script src="../components/jquery/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 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">
|
||||
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="box-flyout minimized">
|
||||
<div class="dragresize dragresize-tm"></div>
|
||||
<div class="chat-head chat-head-chatbox">
|
||||
<div class="chat-head-message-count">3</div>
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
||||
<div class="chat-title">
|
||||
<a href="http://opkode.com" target="_blank" class="user">
|
||||
JC Brand
|
||||
</a>
|
||||
</div>
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
|
||||
</div>
|
||||
<div class="chat-body" style="display: none">
|
||||
<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: </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: </span>
|
||||
<span class="chat-message-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:39 me: </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: </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: </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>
|
||||
|
||||
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="box-flyout minimized">
|
||||
<div class="dragresize dragresize-tm"></div>
|
||||
<div class="chat-head chat-head-chatroom">
|
||||
<div class="chat-head-message-count">42</div>
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
<a class="configure-chatroom-button icon-wrench" style=""></a>
|
||||
<div class="chat-title"> Chatroom </div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<div class="chat-body" style="display: none">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">18:50 luke: </span>
|
||||
<span class="chat-message-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:40 leia: </span>
|
||||
<span class="chat-message-content">
|
||||
I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master: </span>
|
||||
<span class="chat-message-content">
|
||||
I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:42 me: </span>
|
||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master: </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>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="participants">
|
||||
<ul class="participant-list">
|
||||
<li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant" title="This user can send messages in this room">jabber the hut</li>
|
||||
<li class="participant" title="This user can send messages in this room">leia</li>
|
||||
<li class="moderator" title="This user is a moderator">luke</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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.fadeOut('fast', function () {
|
||||
$sibling.removeClass('current');
|
||||
$tab.addClass('current');
|
||||
$tab_panel.fadeIn('fast', 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';
|
||||
});
|
||||
});
|
||||
|
||||
$('.toggle-chatbox-button').click(function(ev) {
|
||||
var $grandparent = $(ev.target).parent().parent().parent();
|
||||
$grandparent.find('.chat-body').slideToggle(300);
|
||||
var flyout = $grandparent.find('.box-flyout');
|
||||
if (flyout.hasClass('minimized')) {
|
||||
flyout.removeClass('minimized');
|
||||
} else {
|
||||
flyout.addClass('minimized');
|
||||
}
|
||||
});
|
||||
|
||||
// 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