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

Merge pull request #1 from alecghica/master

Browse Source 
Feature: added "Connecting to chat ..." info
This commit is contained in:
JC Brand 2013-02-21 04:26:40 -08:00
commit 1c7ef1917c
3 changed files with 219 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
converse.css
View File

@ -3,44 +3,53 @@
} }
#chatpanel { #chatpanel {
z-index: 4; /*--Keeps the panel on top of all other elements--*/ z-index: 4; /*--Keeps the panel on top of all other elements--*/
position: fixed; position: fixed;
bottom: 0; right: 0; bottom: 0; right: 0;
height: 332px; height: 332px;
width: auto; width: auto;
} }
#toggle-controlbox { #toggle-controlbox {
position: fixed; position: fixed;
font-size: 80%; font-size: 80%;
bottom: 0; bottom: 0;
right: 0; right: 0;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
background: #e3e2e2; background: #e3e2e2;
border: 1px solid #c3c3c3; border: 1px solid #c3c3c3;
border-bottom: none; border-bottom: none;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
margin-right: 1em; margin-right: 1em;
height: 1.1em; height: 1.1em;
} }
#toggle-online-users {
display: none;
}
#connecting-to-chat {
background: url('/spinner.gif') no-repeat;
padding-left: 1.4em;
}
.chat-head { .chat-head {
color: #ffffff; color: #ffffff;
margin: 0; margin: 0;
font-size: 100%; font-size: 100%;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
padding: 3px 0 3px 7px; padding: 3px 0 3px 7px;
} }
.chat-head-chatbox { .chat-head-chatbox {
background-color: rgb(89, 106, 114); background-color: rgb(89, 106, 114);
background-color: rgba(89, 106, 114, 1); background-color: rgba(89, 106, 114, 1);
} }
.chat-head-chatroom { .chat-head-chatroom {
background-color: #2D617A; background-color: #2D617A;
} }
.chatroom .chat-area { .chatroom .chat-area {
@ -60,15 +69,15 @@
height: 272px; height: 272px;
background-color: white; background-color: white;
overflow: auto; overflow: auto;
border-right: 1px solid #999; border-right: 1px solid #999;
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.participants ul.participant-list li { .participants ul.participant-list li {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
font-size: 12px; font-size: 12px;
padding: 0.5em 0 0 0.5em; padding: 0.5em 0 0 0.5em;
@ -89,58 +98,58 @@ input.new-chatroom-name {
} }
.chat-blink { .chat-blink {
background-color: #176689; background-color: #176689;
border-right:1px solid #176689; border-right:1px solid #176689;
border-left:1px solid #176689; border-left:1px solid #176689;
} }
.chat-content { .chat-content {
padding: 0.3em; padding: 0.3em;
font-size: 13px; font-size: 13px;
color: #333333; color: #333333;
height:193px; height:193px;
overflow-y:auto; overflow-y:auto;
border:1px solid #999; border:1px solid #999;
border-bottom: 0; border-bottom: 0;
border-top: 0; border-top: 0;
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; line-height: 1.3em;
} }
.chat-textarea { .chat-textarea {
border: 0; border: 0;
height: 50px; height: 50px;
width: 100%; width: 100%;
} }
.chat-textarea-chatbox-selected { .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin:0; margin:0;
} }
.chat-textarea-chatroom-selected { .chat-textarea-chatroom-selected {
border: 2px solid #2D617A; border: 2px solid #2D617A;
margin:0; margin:0;
} }
.chat-info { .chat-info {
color:#666666; color:#666666;
} }
.chat-message-me { .chat-message-me {
font-weight: bold; font-weight: bold;
color: #436976; color: #436976;
} }
.chat-message-room { .chat-message-room {
font-weight: bold; font-weight: bold;
color: #4B7003; color: #4B7003;
white-space: nowrap; white-space: nowrap;
} }
.chat-message-them { .chat-message-them {
font-weight: bold; font-weight: bold;
color: #F62817; color: #F62817;
white-space: nowrap; white-space: nowrap;
} }
@ -175,30 +184,30 @@ div.delayed .chat-message-me {
} }
.chat-head .avatar { .chat-head .avatar {
height: 35px; height: 35px;
float: left; float: left;
margin-right: 6px; margin-right: 6px;
} }
div.chat-title { div.chat-title {
height: 1.1em; height: 1.1em;
color: white; color: white;
font-weight: bold; font-weight: bold;
line-height: 15px; line-height: 15px;
display: block; display: block;
margin-top: 2px; margin-top: 2px;
margin-right: 20px; margin-right: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-shadow: rgba(0,0,0,0.51) 0 -1px 0; text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
} }
.chat-head-chatbox, .chat-head-chatbox,
.chat-head-chatroom { .chat-head-chatroom {
background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%);
height: 33px; height: 33px;
position: relative; position: relative;
} }
p.user-custom-message, p.user-custom-message,
@ -207,9 +216,9 @@ p.chatroom-topic {
font-style: italic; font-style: italic;
height: 1.3em; height: 1.3em;
clear: right; clear: right;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.activated{ .activated{
@ -233,12 +242,12 @@ div.add-xmpp-contact {
} }
div.add-xmpp-contact a.add-xmpp-contact { div.add-xmpp-contact a.add-xmpp-contact {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
padding-left: 1.5em; padding-left: 1.5em;
} }
#fancy-xmpp-status-select a.change-xmpp-status-message { #fancy-xmpp-status-select a.change-xmpp-status-message {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
background: url('/pencil_icon.png') no-repeat right top; background: url('/pencil_icon.png') no-repeat right top;
float: right; float: right;
clear: right; clear: right;
@ -247,13 +256,13 @@ div.add-xmpp-contact a.add-xmpp-contact {
} }
#fancy-xmpp-status-select a.choose-xmpp-status { #fancy-xmpp-status-select a.choose-xmpp-status {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
padding-left: 1.5em; padding-left: 1.5em;
width: 140px; width: 140px;
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
float: left; float: left;
} }
@ -272,13 +281,13 @@ form.search-xmpp-contact input {
.oc-chat-head { .oc-chat-head {
margin: 0; margin: 0;
color: #FFF; color: #FFF;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
height: 35px; height: 35px;
clear: right; clear: right;
background-color: #5390C8; background-color: #5390C8;
padding: 3px 0 0 0; padding: 3px 0 0 0;
} }
.close-chatbox-button { .close-chatbox-button {
@ -334,24 +343,24 @@ form.search-xmpp-contact input {
#xmppchat-roster dd.current-xmpp-contact, #xmppchat-roster dd.current-xmpp-contact,
#xmppchat-roster dd.current-xmpp-contact:hover { #xmppchat-roster dd.current-xmpp-contact:hover {
background: url(images/user_online_panel.png) no-repeat 5px 2px; background: url(images/user_online_panel.png) no-repeat 5px 2px;
} }
#xmppchat-roster dd.current-xmpp-contact.offline:hover, #xmppchat-roster dd.current-xmpp-contact.offline:hover,
#xmppchat-roster dd.current-xmpp-contact.unavailable:hover, #xmppchat-roster dd.current-xmpp-contact.unavailable:hover,
#xmppchat-roster dd.current-xmpp-contact.offline, #xmppchat-roster dd.current-xmpp-contact.offline,
#xmppchat-roster dd.current-xmpp-contact.unavailable { #xmppchat-roster dd.current-xmpp-contact.unavailable {
background: url(images/user_offline_panel.png) no-repeat 5px 2px; background: url(images/user_offline_panel.png) no-repeat 5px 2px;
} }
#xmppchat-roster dd.current-xmpp-contact.busy, #xmppchat-roster dd.current-xmpp-contact.busy,
#xmppchat-roster dd.current-xmpp-contact.busy:hover { #xmppchat-roster dd.current-xmpp-contact.busy:hover {
background: url(images/user_busy_panel.png) no-repeat 5px 2px; background: url(images/user_busy_panel.png) no-repeat 5px 2px;
} }
#xmppchat-roster dd.current-xmpp-contact.away, #xmppchat-roster dd.current-xmpp-contact.away,
#xmppchat-roster dd.current-xmpp-contact.away:hover { #xmppchat-roster dd.current-xmpp-contact.away:hover {
background: url(images/user_away_panel.png) no-repeat 5px 2px; background: url(images/user_away_panel.png) no-repeat 5px 2px;
} }
#xmppchat-roster dd.requesting-xmpp-contact button{ #xmppchat-roster dd.requesting-xmpp-contact button{
@ -360,7 +369,7 @@ form.search-xmpp-contact input {
#xmppchat-roster dd a { #xmppchat-roster dd a {
margin-left: 2em; margin-left: 2em;
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
} }
.remove-xmpp-contact-dialog .ui-dialog-buttonpane { .remove-xmpp-contact-dialog .ui-dialog-buttonpane {
@ -386,7 +395,7 @@ form.search-xmpp-contact input {
color: #666; color: #666;
border: none; border: none;
padding: 0.3em 0.5em 0.3em 0.5em; padding: 0.3em 0.5em 0.3em 0.5em;
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
} }
#available-chatrooms dt { #available-chatrooms dt {
@ -404,8 +413,8 @@ dd.available-chatroom,
border: none; border: none;
display: block; display: block;
padding: 0 0.5em 0 0.5em; padding: 0 0.5em 0 0.5em;
color: #3f3f3f; color: #3f3f3f;
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
} }
#xmppchat-roster dd a.remove-xmpp-contact { #xmppchat-roster dd a.remove-xmpp-contact {
@ -417,8 +426,8 @@ dd.available-chatroom,
.chatbox, .chatbox,
.chatroom { .chatroom {
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.4);
display:none; display:none;
float: right; float: right;
margin-right: 15px; margin-right: 15px;
z-index: 3; /* So that it's higher than the content actions */ z-index: 3; /* So that it's higher than the content actions */
@ -426,16 +435,16 @@ dd.available-chatroom,
} }
.chatbox { .chatbox {
width: 200px; width: 200px;
} }
.chatroom { .chatroom {
width: 300px; width: 300px;
height: 311px; height: 311px;
} }
.oc-chat-content { .oc-chat-content {
height:272px; height:272px;
width: 199px; width: 199px;
padding: 0; padding: 0;
} }
@ -456,12 +465,12 @@ dd.available-chatroom,
} }
div#controlbox-panes { div#controlbox-panes {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* W3C */ background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* W3C */
background-color: white; background-color: white;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
@ -482,18 +491,18 @@ select#select-xmpp-status {
/* @group Tabs */ /* @group Tabs */
.chat-head #controlbox-tabs { .chat-head #controlbox-tabs {
text-align: center; text-align: center;
display: inline; display: inline;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
list-style-type: none; list-style-type: none;
} }
/* single tab */ /* single tab */
.chat-head #controlbox-tabs li { .chat-head #controlbox-tabs li {
width: 40%; width: 40%;
float:left; float:left;
text-shadow: white 0 1px 0; text-shadow: white 0 1px 0;
} }
ul#controlbox-tabs li a { ul#controlbox-tabs li a {
@ -509,26 +518,26 @@ ul#controlbox-tabs li a {
border-top-left-radius: 4px; border-top-left-radius: 4px;
color:#666; color:#666;
background-color:#EEE; background-color:#EEE;
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* IE10+ */ background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* IE10+ */
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(245,245,245,1))); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(245,245,245,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* W3C */ background: linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* W3C */
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
} }
.chat-head #controlbox-tabs li a:hover { .chat-head #controlbox-tabs li a:hover {
color: black; color: black;
} }
.chat-head #controlbox-tabs li a { .chat-head #controlbox-tabs li a {
background-color: rgba(240,240,240,1); background-color: rgba(240,240,240,1);
box-shadow: inset 0 0 8px rgba(0,0,0,0.2); box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
} }
ul#controlbox-tabs a.current, ul#controlbox-tabs a.current:hover { ul#controlbox-tabs a.current, ul#controlbox-tabs a.current:hover {
box-shadow: none; box-shadow: none;
color: #000; color: #000;
border-bottom: 0; border-bottom: 0;
height: 35px; height: 35px;
@ -615,18 +624,18 @@ input.custom-xmpp-status {
} }
.dropdown a.online { .dropdown a.online {
background: url(images/user_online_panel.png) no-repeat left; background: url(images/user_online_panel.png) no-repeat left;
} }
.dropdown a.offline { .dropdown a.offline {
background: url(images/user_offline_panel.png) no-repeat left; background: url(images/user_offline_panel.png) no-repeat left;
} }
.dropdown a.busy { .dropdown a.busy {
background: url(images/user_busy_panel.png) no-repeat left; background: url(images/user_busy_panel.png) no-repeat left;
} }
.dropdown a.away { .dropdown a.away {
background: url(images/user_away_panel.png) no-repeat left; background: url(images/user_away_panel.png) no-repeat left;
} }

5
converse.js
View File

@ -1759,6 +1759,7 @@
// -------------- // --------------
$(document).ready($.proxy(function () { $(document).ready($.proxy(function () {
var chatdata = jQuery('div#collective-xmpp-chat-data'), var chatdata = jQuery('div#collective-xmpp-chat-data'),
$connecting = $('span#connecting-to-chat'),
$toggle = $('a#toggle-online-users'); $toggle = $('a#toggle-online-users');
$toggle.unbind('click'); $toggle.unbind('click');
@ -1771,6 +1772,8 @@
}).render(); }).render();
$(document).bind('jarnxmpp.disconnected', $.proxy(function (ev, conn) { $(document).bind('jarnxmpp.disconnected', $.proxy(function (ev, conn) {
$connecting.show();
$toggle.hide();
console.log("Connection Failed :("); console.log("Connection Failed :(");
}, this)); }, this));
@ -1818,6 +1821,8 @@
// Controlbox toggler // Controlbox toggler
if ($toggle.length) { if ($toggle.length) {
$connecting.hide();
$toggle.show();
$toggle.bind('click', $.proxy(function (e) { $toggle.bind('click', $.proxy(function (e) {
e.preventDefault(); e.preventDefault();
if ($("div#controlbox").is(':visible')) { if ($("div#controlbox").is(':visible')) {