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

Add unread messages counter on the min. chats toggle.

Browse Source
This commit is contained in:
JC Brand 2014-06-08 21:34:15 +02:00
parent 0b4e273004
commit e4f0e34462
4 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/converse.css
View File

@ -564,7 +564,7 @@ span.spinner.hor_centered {
display: block;
height: auto;
bottom: 25px;
margin-left: -8px;
margin-left: 0;
}
#conversejs #trimmed-chatboxes .box-flyout .chat-head {
font-size: 100%;
@ -587,14 +587,17 @@ span.spinner.hor_centered {
background-color: #F4F4F4;
padding: 4px 8px;
margin-right: 5px;
color: #080808;
color: #0a0a0a;
font-weight: bold;
height: 100%;
}
#conversejs .toggle-minimized-chats {
position: relative;
padding: 4px 0 0 4px;
display: block;
width: 100%;
height: 100%;
color: #080808;
color: #0f0f0f;
}
#conversejs .chat-head {
color: #ffffff;
@ -835,6 +838,11 @@ dl.add-converse-contact {
background-color: #2D617A;
padding: 3px 0 0 0;
}
#conversejs .toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px;
}
#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));
@ -843,7 +851,7 @@ dl.add-converse-contact {
border: 1px solid;
text-shadow: 1px 1px 0 #ccc;
color: darkred;
border-radius: 20%;
border-radius: 5px;
padding: 2px 4px;
font-size: 15px;
text-align: center;
@ -1048,6 +1056,7 @@ dl.add-converse-contact {
}
#conversejs #trimmed-chatboxes {
width: 130px;
padding: 0;
}
#conversejs .chatbox {
width: 200px;

18
less/converse.less
View File

@ -593,7 +593,7 @@ span.spinner.hor_centered {
display: block;
height: auto;
bottom: 25px;
margin-left: -8px;
margin-left: 0;
}
#conversejs #trimmed-chatboxes .box-flyout .chat-head {
@ -619,15 +619,18 @@ span.spinner.hor_centered {
background-color: #F4F4F4;
padding: 4px 8px;
margin-right: 5px;
color: #080808;
color: #0a0a0a;
font-weight: bold;
height: 100%;
}
#conversejs .toggle-minimized-chats {
position: relative;
padding: 4px 0 0 4px;
display: block;
width: 100%;
height: 100%;
color: #080808;
color: #0f0f0f;
}
#conversejs .chat-head {
@ -914,6 +917,12 @@ dl.add-converse-contact {
padding: 3px 0 0 0;
}
#conversejs .toggle-minimized-chats .unread-message-count {
right: 5px;
bottom: 5px;
}
#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, grey) );
@ -922,7 +931,7 @@ dl.add-converse-contact {
border: 1px solid;
text-shadow: 1px 1px 0 #ccc;
color: darkred;
border-radius: 20%;
border-radius: 5px;
padding: 2px 4px;
font-size: 15px;
text-align: center;
@ -1159,6 +1168,7 @@ dl.add-converse-contact {
#conversejs #trimmed-chatboxes {
width: 130px;
padding: 0;
}
#conversejs .chatbox {

14
mockup/index.html
View File

@ -374,21 +374,24 @@
</div>
<div id="trimmed-chatboxes">
<div class="box-flyout">
<a class="toggle-minimized-chats" href="#">
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
</a>
<div class="box-flyout minimized-chats">
<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>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">3</div>
Restricted Chatroom
</a>
</div>
</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>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">42</div>
JC Brand
</a>
</div>
@ -408,10 +411,11 @@
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<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>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">842</div>
Asmaa Haakman
</a>
</div>

1
mockup/minimal.html
View File

@ -48,6 +48,7 @@
<div id="trimmed-chatboxes">
<a class="toggle-minimized-chats" href="#">
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
<span class="unread-message-count" href="#" style="display:block">322</span>
</a>
<div class="box-flyout minimized-chats">
<div class="chat-head chat-head-chatroom">