CSS fixes for fancy dropdowns after some browser testing
This commit is contained in:
JC Brand
parent
d1a743e6b5
commit
9aabe16155
108
converse.css
108
converse.css
@ -156,7 +156,6 @@ ul.participant-list li.moderator {
|
||||
|
||||
.chat-info {
|
||||
color:#666666;
|
||||
|
||||
}
|
||||
|
||||
.chat-message-me {
|
||||
@ -183,6 +182,10 @@ ul.participant-list li.moderator {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
li.chat-help {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.chat-date {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
@ -270,12 +273,6 @@ a.subscribe-to-user {
|
||||
|
||||
dl.add-converse-contact {
|
||||
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 {
|
||||
@ -285,9 +282,8 @@ dt#xmpp-contact-search {
|
||||
|
||||
.fancy-dropdown a.choose-xmpp-status,
|
||||
.fancy-dropdown a.toggle-xmpp-contact-form {
|
||||
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
|
||||
padding-left: 1.5em;
|
||||
width: 140px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
|
||||
padding-left: 2em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -295,17 +291,11 @@ dt#xmpp-contact-search {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#fancy-xmpp-status-select {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
#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 top;
|
||||
background: url('images/pencil_icon.png') no-repeat right 3px;
|
||||
float: right;
|
||||
clear: right;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
ul#found-users {
|
||||
@ -316,8 +306,7 @@ ul#found-users {
|
||||
form.search-xmpp-contact {
|
||||
margin: 0;
|
||||
padding-left: 5px;
|
||||
padding: 1em 0 0 5px;
|
||||
background: white;
|
||||
padding: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
form.search-xmpp-contact input {
|
||||
@ -649,15 +638,27 @@ form#converse-login .login-submit {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
form.set-xmpp-status,
|
||||
form.set-xmpp-status {
|
||||
padding: 0.5em 0 0.5em 0.5em;
|
||||
}
|
||||
|
||||
form.add-chatroom {
|
||||
padding: 0.5em 0 0.3em 0.5em;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
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 {
|
||||
list-style: none;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
select#select-xmpp-status {
|
||||
@ -754,16 +755,13 @@ form#set-custom-xmpp-status {
|
||||
}
|
||||
|
||||
/* status dropdown styles */
|
||||
dl.dropdown {
|
||||
.chatbox dl.dropdown {
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0;
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
|
||||
.dropdown dd { position:relative; }
|
||||
|
||||
div.xmpp-status {
|
||||
padding: 3px;
|
||||
}
|
||||
.chatbox .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
|
||||
.chatbox .dropdown dd { position:relative; }
|
||||
|
||||
input.custom-xmpp-status {
|
||||
width: 138px;
|
||||
@ -778,47 +776,57 @@ form.add-xmpp-contact input {
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
.dropdown dt a span {
|
||||
cursor:pointer; display:block; padding:5px;
|
||||
.chatbox .dropdown dt a span {
|
||||
cursor:pointer;
|
||||
display:block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.dropdown dd ul {
|
||||
padding-top: 5px;
|
||||
.chatbox .dropdown dd ul {
|
||||
padding: 5px 0 5px 0;
|
||||
list-style:none;
|
||||
position:absolute; left:0; top:0;
|
||||
border:1px solid #ddd;
|
||||
border-top: 0;
|
||||
width: 99%;
|
||||
background-color: #FFF;
|
||||
z-index: 21;
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
.dropdown dd ul li a:hover {
|
||||
background-color: #bed6e5;
|
||||
.set-xmpp-status .dropdown dd ul {
|
||||
z-index: 22;
|
||||
}
|
||||
|
||||
.dropdown span.value {
|
||||
.chatbox .dropdown span.value {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.dropdown dd ul li a {
|
||||
padding:0 5px 5px 30px;
|
||||
display:block;
|
||||
.chatbox .dropdown a {
|
||||
padding: 3px 0 0 25px;
|
||||
display: block;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.dropdown a.online {
|
||||
background: url(images/user_online_panel.png) no-repeat left 3px;
|
||||
.chatbox .dropdown a.toggle-xmpp-contact-form {
|
||||
background: url('images/add_icon.png') no-repeat 4px 2px;
|
||||
}
|
||||
|
||||
.dropdown a.offline {
|
||||
background: url(images/user_offline_panel.png) no-repeat left 3px;
|
||||
.chatbox .dropdown a.online {
|
||||
background: url(images/user_online_panel.png) no-repeat 3px 4px;
|
||||
}
|
||||
|
||||
.dropdown a.dnd {
|
||||
background: url(images/user_busy_panel.png) no-repeat left 3px;
|
||||
.chatbox .dropdown a.offline {
|
||||
background: url(images/user_offline_panel.png) no-repeat 3px 4px;
|
||||
}
|
||||
|
||||
.dropdown a.away {
|
||||
background: url(images/user_away_panel.png) no-repeat left 3px;
|
||||
.chatbox .dropdown a.dnd {
|
||||
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
29
converse.js
@ -585,17 +585,22 @@
|
||||
),
|
||||
|
||||
add_contact_template: _.template(
|
||||
'<li>'+
|
||||
'<form class="add-xmpp-contact">' +
|
||||
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
|
||||
'<button type="submit">Add</button>' +
|
||||
'</form>'),
|
||||
'</form>'+
|
||||
'<li>'
|
||||
),
|
||||
|
||||
search_contact_template: _.template(
|
||||
'<li>'+
|
||||
'<form class="search-xmpp-contact">' +
|
||||
'<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
|
||||
'<button type="submit">Search</button>' +
|
||||
'<ul id="found-users"></ul>' +
|
||||
'</form>'),
|
||||
'</form>'+
|
||||
'<li>'
|
||||
),
|
||||
|
||||
render: function () {
|
||||
var markup;
|
||||
@ -622,14 +627,16 @@
|
||||
searchContacts: function (ev) {
|
||||
ev.preventDefault();
|
||||
$.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) {
|
||||
var $results_el = $('#found-users');
|
||||
$(data).each(function (idx, obj) {
|
||||
if ($results_el.children().length) {
|
||||
$results_el.empty();
|
||||
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>');
|
||||
}
|
||||
$results_el.append(
|
||||
$('<li></li>')
|
||||
.attr('id', 'found-users-'+obj.id)
|
||||
|
||||
$(data).each(function (idx, obj) {
|
||||
$ul.append(
|
||||
$('<li class="found-user"></li>')
|
||||
.append(
|
||||
$('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
|
||||
.attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+converse.domain)
|
||||
@ -744,8 +751,10 @@
|
||||
|
||||
template: _.template(
|
||||
'<form class="add-chatroom" action="" method="post">'+
|
||||
'<legend>'+
|
||||
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"/>'+
|
||||
'<input type="text" name="server" class="new-chatroom-server" placeholder="Server"/>'+
|
||||
'</legend>'+
|
||||
'<input type="submit" name="join" value="Join"/>'+
|
||||
'<input type="button" name="show" id="show-rooms" value="Show rooms"/>'+
|
||||
'</form>'+
|
||||
|
||||
Loading…
Reference in New Issue
Block a user