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

CSS fixes for fancy dropdowns after some browser testing

Browse Source
This commit is contained in:
JC Brand 2013-05-20 19:54:22 +02:00
parent d1a743e6b5
commit 9aabe16155
2 changed files with 77 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
converse.css
View File

@ -156,7 +156,6 @@ ul.participant-list li.moderator {
.chat-info { .chat-info {
color:#666666; color:#666666;
} }
.chat-message-me { .chat-message-me {
@ -183,6 +182,10 @@ ul.participant-list li.moderator {
color: #808080; color: #808080;
} }
li.chat-help {
padding-left: 10px;
}
.chat-date { .chat-date {
display: inline-block; display: inline-block;
padding-top: 10px; padding-top: 10px;
@ -270,12 +273,6 @@ a.subscribe-to-user {
dl.add-converse-contact { dl.add-converse-contact {
margin: 0 0 0 0.5em; margin: 0 0 0 0.5em;
z-index: 21;
background: url('images/add_icon.png') no-repeat 3px;
}
dt#xmpp-contact-search {
padding-top: 3px;
} }
.fancy-dropdown { .fancy-dropdown {
@ -285,9 +282,8 @@ dt#xmpp-contact-search {
.fancy-dropdown a.choose-xmpp-status, .fancy-dropdown a.choose-xmpp-status,
.fancy-dropdown a.toggle-xmpp-contact-form { .fancy-dropdown a.toggle-xmpp-contact-form {
text-shadow: 0 1px 0 rgba(250, 250, 250, 1); text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
padding-left: 1.5em; padding-left: 2em;
width: 140px;
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -295,17 +291,11 @@ dt#xmpp-contact-search {
float: left; float: left;
} }
#fancy-xmpp-status-select {
padding-bottom: 3px;
}
#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); background: url('images/pencil_icon.png') no-repeat right 3px;
background: url('images/pencil_icon.png') no-repeat right top;
float: right; float: right;
clear: right; clear: right;
width: 1em; height: 22px;
height: 1em;
} }
ul#found-users { ul#found-users {
@ -316,8 +306,7 @@ ul#found-users {
form.search-xmpp-contact { form.search-xmpp-contact {
margin: 0; margin: 0;
padding-left: 5px; padding-left: 5px;
padding: 1em 0 0 5px; padding: 0 0 5px 5px;
background: white;
} }
form.search-xmpp-contact input { form.search-xmpp-contact input {
@ -649,15 +638,27 @@ form#converse-login .login-submit {
width: auto; width: auto;
} }
form.set-xmpp-status, form.set-xmpp-status {
padding: 0.5em 0 0.5em 0.5em;
}
form.add-chatroom { form.add-chatroom {
padding: 0.5em 0 0.3em 0.5em; padding: 0.5em;
background: white; }
form.add-chatroom input[type=text] {
width: 172px;
margin: 3px;
padding: 1px;
}
form.add-chatroom input[type=button],
form.add-chatroom input[type=submit] {
width: 50%;
} }
.set-xmpp-status li { .set-xmpp-status li {
list-style: none; list-style: none;
padding-left: 5px;
} }
select#select-xmpp-status { select#select-xmpp-status {
@ -754,16 +755,13 @@ form#set-custom-xmpp-status {
} }
/* status dropdown styles */ /* status dropdown styles */
dl.dropdown { .chatbox dl.dropdown {
margin-right: 0.5em; margin-right: 0.5em;
margin-bottom: 0; margin-bottom: 0;
background-color: rgb(240, 240, 240);
} }
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; } .chatbox .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; } .chatbox .dropdown dd { position:relative; }
div.xmpp-status {
padding: 3px;
}
input.custom-xmpp-status { input.custom-xmpp-status {
width: 138px; width: 138px;
@ -778,47 +776,57 @@ form.add-xmpp-contact input {
width: 125px; width: 125px;
} }
.dropdown dt a span { .chatbox .dropdown dt a span {
cursor:pointer; display:block; padding:5px; cursor:pointer;
display:block;
padding: 5px;
} }
.dropdown dd ul { .chatbox .dropdown dd ul {
padding-top: 5px; padding: 5px 0 5px 0;
list-style:none; list-style:none;
position:absolute; left:0; top:0; position:absolute; left:0; top:0;
border:1px solid #ddd; border:1px solid #ddd;
border-top: 0; border-top: 0;
width: 99%; width: 99%;
background-color: #FFF;
z-index: 21; z-index: 21;
background-color: rgb(240, 240, 240);
} }
.dropdown dd ul li a:hover { .set-xmpp-status .dropdown dd ul {
background-color: #bed6e5; z-index: 22;
} }
.dropdown span.value { .chatbox .dropdown span.value {
display:none; display:none;
} }
.dropdown dd ul li a { .chatbox .dropdown a {
padding:0 5px 5px 30px; padding: 3px 0 0 25px;
display:block; display: block;
height: 22px;
} }
.dropdown a.online { .chatbox .dropdown a.toggle-xmpp-contact-form {
background: url(images/user_online_panel.png) no-repeat left 3px; background: url('images/add_icon.png') no-repeat 4px 2px;
} }
.dropdown a.offline { .chatbox .dropdown a.online {
background: url(images/user_offline_panel.png) no-repeat left 3px; background: url(images/user_online_panel.png) no-repeat 3px 4px;
} }
.dropdown a.dnd { .chatbox .dropdown a.offline {
background: url(images/user_busy_panel.png) no-repeat left 3px; background: url(images/user_offline_panel.png) no-repeat 3px 4px;
} }
.dropdown a.away { .chatbox .dropdown a.dnd {
background: url(images/user_away_panel.png) no-repeat left 3px; background: url(images/user_busy_panel.png) no-repeat 3px 4px;
} }
.chatbox .dropdown a.away {
background: url(images/user_away_panel.png) no-repeat 3px 4px;
}
.chatbox .dropdown dd ul a:hover {
background-color: #bed6e5;
}

29
converse.js
View File

@ -585,17 +585,22 @@
), ),
add_contact_template: _.template( add_contact_template: _.template(
'<li>'+
'<form class="add-xmpp-contact">' + '<form class="add-xmpp-contact">' +
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>' + '<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
'<button type="submit">Add</button>' + '<button type="submit">Add</button>' +
'</form>'), '</form>'+
'<li>'
),
search_contact_template: _.template( search_contact_template: _.template(
'<li>'+
'<form class="search-xmpp-contact">' + '<form class="search-xmpp-contact">' +
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>' + '<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
'<button type="submit">Search</button>' + '<button type="submit">Search</button>' +
'<ul id="found-users"></ul>' + '</form>'+
'</form>'), '<li>'
),
render: function () { render: function () {
var markup; var markup;
@ -622,14 +627,16 @@
searchContacts: function (ev) { searchContacts: function (ev) {
ev.preventDefault(); ev.preventDefault();
$.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) { $.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) {
var $results_el = $('#found-users'); var $ul= $('.search-xmpp ul');
$ul.find('li.found-user').remove();
$ul.find('li.chat-help').remove();
if (!data.length) {
$ul.append('<li class="chat-help">No users found</li>');
}
$(data).each(function (idx, obj) { $(data).each(function (idx, obj) {
if ($results_el.children().length) { $ul.append(
$results_el.empty(); $('<li class="found-user"></li>')
}
$results_el.append(
$('<li></li>')
.attr('id', 'found-users-'+obj.id)
.append( .append(
$('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>') $('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
.attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+converse.domain) .attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+converse.domain)
@ -744,8 +751,10 @@
template: _.template( template: _.template(
'<form class="add-chatroom" action="" method="post">'+ '<form class="add-chatroom" action="" method="post">'+
'<legend>'+
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"/>'+ '<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"/>'+
'<input type="text" name="server" class="new-chatroom-server" placeholder="Server"/>'+ '<input type="text" name="server" class="new-chatroom-server" placeholder="Server"/>'+
'</legend>'+
'<input type="submit" name="join" value="Join"/>'+ '<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"/>'+
'</form>'+ '</form>'+