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

More work on the mockup. Add js to switch tabs

Browse Source
This commit is contained in:
JC Brand 2013-08-11 14:38:40 +02:00
parent 39665516a1
commit 3e16256a71
2 changed files with 391 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

299
images/sprites.css Normal file
View File

@ -0,0 +1,299 @@
.icon-offline,.icon-busy,.icon-home,.icon-home2,.icon-home3,.icon-pencil,.icon-image,.icon-image2,.icon-images,.icon-camera,.icon-music,.icon-headphones,.icon-play,.icon-film,.icon-camera2,.icon-phone,.icon-phone-hang-up,.icon-address-book,.icon-notebook,.icon-envelop,.icon-pushpin,.icon-online,.icon-bubbles,.icon-bubble2,.icon-bubbles2,.icon-bubbles3,.icon-user,.icon-users,.icon-quotes-left,.icon-spinner,.icon-spinner2,.icon-spinner3,.icon-search,.icon-zoom-in,.icon-zoom-out,.icon-key,.icon-key2,.icon-lock,.icon-lock2,.icon-unlocked,.icon-wrench,.icon-cog,.icon-cogs,.icon-cog2,.icon-remove,.icon-remove2,.icon-globe,.icon-attachment,.icon-eye,.icon-eye-blocked,.icon-eye2,.icon-heart,.icon-thumbs-up,.icon-happy,.icon-smiley,.icon-tongue,.icon-sad,.icon-wink,.icon-grin,.icon-cool,.icon-angry,.icon-evil,.icon-shocked,.icon-confused,.icon-wondering,.icon-warning,.icon-notification,.icon-info,.icon-info2,.icon-blocked,.icon-cancel-circle,.icon-close,.icon-spell-check,.icon-minus,.icon-plus,.icon-volume-high,.icon-volume-medium,.icon-volume-low,.icon-volume-mute,.icon-volume-mute2,.icon-volume-increase,.icon-volume-decrease,.icon-checkbox-checked,.icon-checkbox-unchecked,.icon-checkbox-partial,.icon-radio-checked,.icon-radio-unchecked,.icon-bold,.icon-underline,.icon-italic,.icon-strikethrough,.icon-new-tab,.icon-embed,.icon-code,.icon-youtube {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(sprites.png);
background-repeat: no-repeat;
}
.icon-offline {
background-position: 0 0;
}
.icon-busy {
background-position: -32px 0;
}
.icon-home {
background-position: -64px 0;
}
.icon-home2 {
background-position: -96px 0;
}
.icon-home3 {
background-position: -128px 0;
}
.icon-pencil {
background-position: -160px 0;
}
.icon-image {
background-position: -192px 0;
}
.icon-image2 {
background-position: -224px 0;
}
.icon-images {
background-position: -256px 0;
}
.icon-camera {
background-position: -288px 0;
}
.icon-music {
background-position: -320px 0;
}
.icon-headphones {
background-position: -352px 0;
}
.icon-play {
background-position: -384px 0;
}
.icon-film {
background-position: -416px 0;
}
.icon-camera2 {
background-position: -448px 0;
}
.icon-phone {
background-position: -480px 0;
}
.icon-phone-hang-up {
background-position: 0 -32px;
}
.icon-address-book {
background-position: -32px -32px;
}
.icon-notebook {
background-position: -64px -32px;
}
.icon-envelop {
background-position: -96px -32px;
}
.icon-pushpin {
background-position: -128px -32px;
}
.icon-online {
background-position: -160px -32px;
}
.icon-bubbles {
background-position: -192px -32px;
width: 18px;
}
.icon-bubble2 {
background-position: -224px -32px;
}
.icon-bubbles2 {
background-position: -256px -32px;
width: 18px;
}
.icon-bubbles3 {
background-position: -288px -32px;
width: 18px;
}
.icon-user {
background-position: -320px -32px;
}
.icon-users {
background-position: -352px -32px;
}
.icon-quotes-left {
background-position: -384px -32px;
}
.icon-spinner {
background-position: -416px -32px;
}
.icon-spinner2 {
background-position: -448px -32px;
}
.icon-spinner3 {
background-position: -480px -32px;
}
.icon-search {
background-position: 0 -64px;
}
.icon-zoom-in {
background-position: -32px -64px;
}
.icon-zoom-out {
background-position: -64px -64px;
}
.icon-key {
background-position: -96px -64px;
}
.icon-key2 {
background-position: -128px -64px;
}
.icon-lock {
background-position: -160px -64px;
}
.icon-lock2 {
background-position: -192px -64px;
}
.icon-unlocked {
background-position: -224px -64px;
}
.icon-wrench {
background-position: -256px -64px;
}
.icon-cog {
background-position: -288px -64px;
}
.icon-cogs {
background-position: -320px -64px;
}
.icon-cog2 {
background-position: -352px -64px;
}
.icon-remove {
background-position: -384px -64px;
}
.icon-remove2 {
background-position: -416px -64px;
}
.icon-globe {
background-position: -448px -64px;
}
.icon-attachment {
background-position: -480px -64px;
height: 15px;
}
.icon-eye {
background-position: 0 -96px;
}
.icon-eye-blocked {
background-position: -32px -96px;
}
.icon-eye2 {
background-position: -64px -96px;
}
.icon-heart {
background-position: -96px -96px;
}
.icon-thumbs-up {
background-position: -128px -96px;
}
.icon-happy {
background-position: -160px -96px;
}
.icon-smiley {
background-position: -192px -96px;
}
.icon-tongue {
background-position: -224px -96px;
}
.icon-sad {
background-position: -256px -96px;
}
.icon-wink {
background-position: -288px -96px;
}
.icon-grin {
background-position: -320px -96px;
}
.icon-cool {
background-position: -352px -96px;
}
.icon-angry {
background-position: -384px -96px;
}
.icon-evil {
background-position: -416px -96px;
height: 16px;
}
.icon-shocked {
background-position: -448px -96px;
}
.icon-confused {
background-position: -480px -96px;
}
.icon-wondering {
background-position: 0 -128px;
}
.icon-warning {
background-position: -32px -128px;
width: 17px;
}
.icon-notification {
background-position: -64px -128px;
}
.icon-info {
background-position: -96px -128px;
}
.icon-info2 {
background-position: -128px -128px;
}
.icon-blocked {
background-position: -160px -128px;
}
.icon-cancel-circle {
background-position: -192px -128px;
}
.icon-close {
background-position: -224px -128px;
}
.icon-spell-check {
background-position: -256px -128px;
}
.icon-minus {
background-position: -288px -128px;
}
.icon-plus {
background-position: -320px -128px;
}
.icon-volume-high {
background-position: -352px -128px;
width: 17px;
}
.icon-volume-medium {
background-position: -384px -128px;
}
.icon-volume-low {
background-position: -416px -128px;
}
.icon-volume-mute {
background-position: -448px -128px;
}
.icon-volume-mute2 {
background-position: -480px -128px;
}
.icon-volume-increase {
background-position: 0 -160px;
}
.icon-volume-decrease {
background-position: -32px -160px;
}
.icon-checkbox-checked {
background-position: -64px -160px;
}
.icon-checkbox-unchecked {
background-position: -96px -160px;
}
.icon-checkbox-partial {
background-position: -128px -160px;
}
.icon-radio-checked {
background-position: -160px -160px;
}
.icon-radio-unchecked {
background-position: -192px -160px;
}
.icon-bold {
background-position: -224px -160px;
}
.icon-underline {
background-position: -256px -160px;
}
.icon-italic {
background-position: -288px -160px;
}
.icon-strikethrough {
background-position: -320px -160px;
}
.icon-new-tab {
background-position: -352px -160px;
}
.icon-embed {
background-position: -384px -160px;
}
.icon-code {
background-position: -416px -160px;
}
.icon-youtube {
background-position: -448px -160px;
}

101
mockup.html
View File

@ -6,7 +6,7 @@
<meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<link rel="stylesheet" type="text/css" media="screen" href="converse.css">
<script data-main="main" src="components/requirejs/require.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Converse.js Mockup</title>
</head>
@ -19,18 +19,7 @@
</header>
</div>
<!--
<div id="chatpanel">
<div id="collective-xmpp-chat-data"></div>
<div id="toggle-controlbox">
<a href="#" class="chat toggle-online-users">
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
</div>
-->
<div id="chatpanel">
<div id="chatpanel" style="width: 100%;">
<div id="collective-xmpp-chat-data">
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="chat-head oc-chat-head">
@ -45,6 +34,7 @@
</div>
</div>
</div>
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs">
@ -129,12 +119,33 @@
<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">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
</form>
<dl id="available-chatrooms"></dl>
<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="#">converse.js (2)</a>
<a class="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>
<p></p>
</ul>
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f" style="opacity: 1; display: inline;">
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button">X</a>
@ -157,9 +168,69 @@
<strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
</a>
</div>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392" style="opacity: 1; display: inline;">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button">X</a>
<a class="configure-chatroom-button" style="">&nbsp;</a>
<div class="chat-title"> converse.js </div>
<p class="chatroom-topic"></p>
<p></p>
</div>
<div class="chat-body">
<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 fires:&nbsp;</span>
<span class="chat-message-content">explodingcoder: hi :)</span>
</div>
<div class="chat-message ">
<span class="chat-message-me">19:40 me:&nbsp;</span>
<span class="chat-message-content">
I'll be gone for a while, will be back in about an hour</span>
</div>
</div>
<form class="sendXMPPMessage" action="" method="post">
<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">jabberthehut</li>
<li class="participant" title="This user can send messages in this room">explodingcoder</li>
<li class="moderator" title="This user is a moderator">jcbrand</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$('a[href=#chatrooms]').click(function (ev) {
switchTab(ev);
});
$('a[href=#users]').click(function (ev) {
switchTab(ev);
});
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 () {
});
});
}
});
</script>
</html>