Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Makeover on the UI

  • Loading branch information...
commit 2167f406c6a369e752f673d5be52abaae764fb1d 1 parent fa9a643
Johan Berggren authored
View
48 src/css/pubsubbox.css
@@ -2,37 +2,39 @@ body {
background: #EFEFEF;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color: #333;
- margin:30px 0px;
+ margin:0px 0px;
padding:0px;
}
#roster, #roster2 {
background: #333;
- border: solid 1px #464646;
- position: absolute;
+ background: #EFEFEF;
top: 0px;
- left: 0px;
- width: 250px;
+ width: 100%;
+ height: 170px;
font-size: 11px;
border-image: initial;
- height:100%;
+ padding:10px;
}
#activities {
padding-top:30px;
}
-#roster div {
+.contact {
height: 30px;
+ width:150px;
display: block;
color: #CCC;
text-decoration: none;
padding: 10px 10px;
- border-bottom: groove 2px #555;
- text-shadow: 1px 1px #222;
- -moz-text-shadow: 1px 1px #222;
- -webkit-text-shadow: 1px 1px #222;
- background: #333;
+ #border: groove 2px #555;
+ #text-shadow: 1px 1px #222;
+ #-moz-text-shadow: 1px 1px #222;
+ #-webkit-text-shadow: 1px 1px #222;
+ box-shadow: 1px 1px 3px #888;
+ background: #f5f5f5;
+ margin:5px;
}
#roster2 div {
@@ -60,11 +62,21 @@ body {
-webkit-text-shadow: 1px 1px #222;
}
-#nodes, #discovery, #activities, #notification, #menu {
- width: 476px;
+#nodes, #discovery, #activities, #notification {
+ #width: 476px;
margin:0px auto;
- position: fixed;
- left:300px;
+ top:230px;
+ left:10px;
+ padding:15px;
+}
+
+#foo {
+ top:230px;
+ text-align: center;
+ color:#777;
+ background: #efefef;
+ padding:15px;
+ border-bottom: 1px dashed silver;
}
#login-spinner, #login-screen {
@@ -72,8 +84,8 @@ body {
text-align: center;
}
-.menu {
- margin-right:10px;
+#menu {
+padding:15px;
}
.node {
View
BIN  src/img/placeholder.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
36 src/index.html
@@ -34,31 +34,21 @@ <h1 style="margin-left:70px;">pubsubbox</h1>
</div>
<div id="main-screen" class="hide">
-
-<div id="menu">
- <a href="#" class="menu" id="manage_link">Boxes</a>
- <a href="#" class="menu" id="discovery_link">Discovery</a>
- <a href="#" class="menu" id="activities_link">Stream</a>
- <a href="#" class="menu hide" id="notification_link"><span id="notification_count" class="label label-important right" style="margin-left:10px;margin-right:7px;">0</span></a>
- <a href="#" id="add-node"><span class="right" style="margin-right:9px;"><i class="icon-plus-sign"></i> Add box</span></a>
-</div>
-<br>
-
-<div id="nodes">
- <br>
- <br>
-</div>
-
-
-<div id="roster">
- <div style="height:20px;">
- <span class="left"><b>My contacts</b></span>
- <a href="#" id="add-contact"><span class="right" style="margin-right:9px;"><i class="icon-plus icon-white"></i><i class="icon-user icon-white"></i></span></a>
+ <div id="menu">
+ <strong style="margin-right:30px;">pubsubbox</strong>
+ <a href="#" class="menu" id="manage_link" style="margin-right:15px;">Boxes</a>
+ <a href="#" class="menu" id="discovery_link" style="margin-right:15px;">Discovery</a>
+ <a href="#" class="menu" id="activities_link" style="margin-right:15px;">Stream</a>
+ <a href="#" class="menu hide" id="notification_link"><span id="notification_count" class="label label-important right" style="margin-left:10px;margin-right:7px;">0</span></a>
+ <a href="#" id="add-node"><span class="right" style="margin-right:9px;"><i class="icon-plus-sign"></i> Add box</span></a>
+ <a href="#" id="add-contact"><span class="right" style="margin-right:9px;"><i class="icon-user"></i> Add person</span></a>
</div>
-</div>
-<div class="hide" id="roster2">
-</div>
+ <div id="roster"></div>
+ <div id="foo"><i class="icon-arrow-down"></i> Drag people to boxes</div>
+
+ <div id="nodes"></div>
+ <div id="roster2" class="hide"></div>
<div id="discovery" class="hide">
<br>
View
20 src/js/pubsubbox.js
@@ -140,7 +140,7 @@ var XMPP = {
var splitName = name.split(" ");
var name1 = splitName[0] || '';
var name2 = splitName[1] || '';
- var elem = $('<div class="drag contact" jid="' + jid + '" id="' + id + '">' + '<span style="margin-left:10px;padding-top:5px;"">' + name + '</span><br><span class="quiet" style="margin-left:10px;">' + jid + '</span></div>');
+ var elem = $('<div class="drag contact left" jid="' + jid + '" id="' + id + '">' + '<span style="margin-left:10px;padding-top:5px;"">' + name + '</span><br><span class="quiet" style="margin-left:10px;">' + jid + '</span></div>');
$('#roster').append(elem);
var vCardIQ = $iq({to: jid, type: 'get'})
.c('vCard', {xmlns: 'vcard-temp'});
@@ -270,7 +270,11 @@ var XMPP = {
var type = vCard.find('TYPE').text();
var img_src = 'data:'+type+';base64,'+img;
sessionStorage.setItem(id, img_src);
- var elem = $('<span class="left"><img width="30" height="30" src="' + img_src + '"></span><span class="right hide" id="remove_from_whitelist"><i class="icon-trash icon-white"></i></span>');
+ if (! img) {
+ var elem = $('<span class="left"><img width="30" height="30" src="img/placeholder.png"></span><span class="right hide" id="remove_from_whitelist"><i class="icon-trash icon-white"></i></span>');
+ } else {
+ var elem = $('<span class="left"><img width="30" height="30" src="' + img_src + '"></span><span class="right hide" id="remove_from_whitelist"><i class="icon-trash icon-white"></i></span>');
+ }
$('#' + id).prepend(elem);
$('.drag').draggable({
helper: "clone",
@@ -606,17 +610,17 @@ $(document).ready(function() {
$(document).trigger('notification_tab');
});
- $('#login-button').click(function() {
+ //$('#login-button').click(function() {
$('#login-screen').hide();
$('#login-spinner').fadeIn();
$.getScript(XMPP.CONFIG_FILE, function(){
$(document).trigger('connect', {
- jid: $('#jid').val(),
- password: $('#password').val(),
- //jid: XMPPConfig.jid,
- //password: XMPPConfig.password,
+ //jid: $('#jid').val(),
+ //password: $('#password').val(),
+ jid: XMPPConfig.jid,
+ password: XMPPConfig.password,
pubsubservice: XMPPConfig.pubsubservice
});
})
- })
+ //})
});
Please sign in to comment.
Something went wrong with that request. Please try again.