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

Styling for the minimized chats list.

Browse Source
This commit is contained in:
JC Brand 2014-12-31 16:58:15 +01:00
parent adc6fde404
commit 516def29cb
6 changed files with 110 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
converse.js
View File

@ -598,7 +598,7 @@
this.registerPresenceHandler();
this.chatboxes.registerMessageHandler();
converse.xmppstatus.sendPresence();
this.giveFeedback(__('Online Contacts'));
this.giveFeedback(__('Contacts'));
}, this));
};
@ -640,7 +640,7 @@
this.initStatus($.proxy(function () {
this.chatboxes.onConnected();
this.giveFeedback(__('Online Contacts'));
this.giveFeedback(__('Contacts'));
if (this.callback) {
if (this.connection.service === 'jasmine tests') {
// XXX: Call back with the internal converse object. This

104
css/converse.css
View File

@ -31,7 +31,7 @@
font-size: 14px;
bottom: 0;
direction: ltr;
height: 25px;
height: 35px;
left: 0;
position: fixed;
right: 0;
@ -356,26 +356,57 @@
text-align: center;
display: block;
margin: 0 auto; }
#conversejs #minimized-chats,
#conversejs .toggle-controlbox {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color: #0a0a0a;
float: right;
font-size: 90%;
font-weight: bold;
height: 100%;
margin-right: 5px;
padding: 4px 8px; }
#conversejs .toggle-controlbox,
#conversejs #minimized-chats {
width: 130px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
float: right;
margin: 0 7px;
font-weight: bold; }
#conversejs .toggle-controlbox {
background-color: #436F64;
color: #0a0a0a;
height: 100%;
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
#conversejs #minimized-chats {
color: white;
display: none;
height: 100%;
padding: 0;
display: none; }
width: 130px; }
#conversejs #minimized-chats #toggle-minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: ivory;
position: relative;
padding: 10px 0 0 0;
display: block;
width: 100%;
height: 100%;
text-align: center; }
#conversejs #minimized-chats .unread-message-count,
#conversejs #minimized-chats .chat-head-message-count {
font-weight: bold;
background-color: #f6f6f6;
background-image: -webkit-linear-gradient(#f6f6f6 5%, #808080 100%);
background-image: linear-gradient(#f6f6f6 5%, #808080 100%);
border: 1px solid;
text-shadow: 1px 1px 0 #FAFAFA;
color: #681F2C;
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
text-align: center;
position: absolute;
right: 116px;
bottom: 10px; }
#conversejs #minimized-chats .box-flyout {
position: absolute;
display: block;
height: auto;
bottom: 25px;
bottom: 35px;
margin-left: 0; }
#conversejs #minimized-chats .box-flyout .chat-head {
font-size: 100%;
@ -385,27 +416,6 @@
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px;
width: 130px; }
#conversejs #toggle-minimized-chats {
position: relative;
padding: 4px 0 0 4px;
display: block;
width: 100%;
height: 100%; }
#conversejs #toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px; }
#conversejs .toggle-controlbox,
#conversejs a.toggle-minimized-chats {
float: right;
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: #436F64;
padding: 4px 8px;
margin-right: 5px; }
#conversejs .toggle-controlbox span,
#conversejs a.toggle-minimized-chats span {
color: white; }
#conversejs .chat-body {
background-color: white;
border-bottom-right-radius: 4px;
@ -611,22 +621,6 @@
padding: 0 0 5px 5px; }
#conversejs form.search-xmpp-contact input {
width: 8em; }
#conversejs .unread-message-count,
#conversejs .chat-head-message-count {
font-weight: bold;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
border: 1px solid;
text-shadow: 1px 1px 0 #FAFAFA;
color: #681F2C;
border-radius: 5px;
padding: 2px 4px;
font-size: 15px;
text-align: center;
position: absolute;
right: 22px;
bottom: 1px; }
#conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button {
@ -815,7 +809,7 @@
background-color: #E3C9C1; }
#conversejs .chatbox,
#conversejs .chatroom {
height: 25px;
height: 35px;
float: right;
margin: 0 7px;
display: block; }
@ -1217,7 +1211,7 @@
height: 400px; } }
#conversejs .minimized-chats-flyout {
border-radius: 4px;
bottom: 25px;
bottom: 35px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
@ -1227,7 +1221,7 @@
#conversejs .minimized-chats-flyout .chat-head {
border-radius: 4px;
width: 130px;
height: 25px;
height: 35px;
margin-bottom: 1px; }
#conversejs .minimized-chats-flyout.minimized {
height: auto; }

4
css/converse.css.map
View File

File diff suppressed because one or more lines are too long

8
mockup/minimal.html
View File

@ -21,7 +21,7 @@
<div id="conversejs">
<a id="toggle-controlbox" href="#" class="toggle-controlbox">
<span class="conn-feedback">Friends Online</span>
<span class="conn-feedback">Toggle Chat</span>
<span id="online-count">(0)</span>
</a>
@ -53,7 +53,7 @@
<div class="minimized-chats-flyout">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#" style="display:block">3</a>
<a class="chat-head-message-count" href="#">3</a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Restricted Chatroom
@ -62,7 +62,7 @@
</div>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#" style="display:block">42</a>
<a class="chat-head-message-count" href="#">42</a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
JC Brand
@ -86,7 +86,7 @@
</div>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#" style="display:block">842</a>
<a class="chat-head-message-count" href="#">842</a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Asmaa Haakman

110
sass/converse.scss
View File

@ -38,7 +38,7 @@
font-size: $font-size;
bottom: 0;
direction: ltr;
height: 25px;
height: $bottom-gutter-height;
left: 0;
position: fixed;
right: 0;
@ -270,29 +270,65 @@
margin: 0 auto;
}
#minimized-chats,
.toggle-controlbox {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color: #0a0a0a;
.toggle-controlbox,
#minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
float: right;
font-size: 90%;
margin: 0 $chat-gutter;
font-weight: bold;
}
.toggle-controlbox {
background-color: $link-color;
color: #0a0a0a;
height: 100%;
margin-right: 5px;
padding: 4px 8px;
padding: 10px 8px 0 8px;
span {
color: $inverse-link-color;
}
}
#minimized-chats {
width: 130px;
padding: 0;
color: $inverse-link-color;
display: none;
height: 100%;
padding: 0;
width: 130px;
#toggle-minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: ivory;
position: relative;
padding: 10px 0 0 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
}
.unread-message-count,
.chat-head-message-count {
font-weight: bold;
@include linear-gradient(#f6f6f6 5%, #808080 100%);
border: 1px solid;
text-shadow: 1px 1px 0 $text-shadow-color;
color: $warning-color;
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
text-align: center;
position: absolute;
right: 116px;
bottom: 10px;
}
.box-flyout {
position: absolute;
display: block;
height: auto;
bottom: 25px;
bottom: $bottom-gutter-height;
margin-left: 0;
.chat-head {
@ -307,32 +343,6 @@
}
}
#toggle-minimized-chats {
position: relative;
padding: 4px 0 0 4px;
display: block;
width: 100%;
height: 100%;
.unread-message-count {
right: 5px;
bottom: 5px;
}
}
.toggle-controlbox,
a.toggle-minimized-chats {
float: right;
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: $link-color;
padding: 4px 8px;
margin-right: 5px;
span {
color: $inverse-link-color;
}
}
.chat-body {
background-color: white;
border-bottom-right-radius: 4px;
@ -633,24 +643,6 @@
}
}
.unread-message-count,
.chat-head-message-count {
font-weight: bold;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
border: 1px solid;
text-shadow: 1px 1px 0 $text-shadow-color;
color: $warning-color;
border-radius: 5px;
padding: 2px 4px;
font-size: 15px;
text-align: center;
position: absolute;
right: 22px;
bottom: 1px;
}
a.configure-chatroom-button,
a.toggle-chatbox-button,
a.close-chatbox-button {
@ -909,7 +901,7 @@
.chatbox,
.chatroom {
height: 25px;
height: $bottom-gutter-height;
float: right;
margin: 0 $chat-gutter;
@media screen and (max-width: $mobile_landscape_length) {
@ -1466,7 +1458,7 @@
.minimized-chats-flyout {
border-radius: 4px;
bottom: 25px;
bottom: $bottom-gutter-height;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
@ -1476,7 +1468,7 @@
.chat-head {
border-radius: 4px;
width: 130px;
height: 25px;
height: 35px;
margin-bottom: 1px;
}
}

2
sass/variables.scss
View File

@ -22,6 +22,8 @@
$roster-height: 194px;
$controlbox-dropdown-height: 25px;
$bottom-gutter-height: 35px;
$mobile_landscape_length: 480px;
$font-size: 14px;