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

Style minimized chats toggle

Browse Source
This commit is contained in:
JC Brand 2014-06-07 00:10:34 +02:00
parent f416a455d1
commit 0b4e273004
3 changed files with 111 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/converse.css
View File

@ -394,7 +394,7 @@ you can use the generic selector below, but it's slower:
user-select: none;
}
#conversejs {
bottom: 1px;
bottom: 0;
direction: ltr;
height: 25px;
left: 0;
@ -562,16 +562,15 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .box-flyout {
position: absolute;
display: block;
bottom: 1px;
box-shadow: none;
border-radius: 4px;
height: auto;
bottom: 25px;
margin-left: -8px;
}
#conversejs #trimmed-chatboxes .box-flyout .chat-head {
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
margin: 0 0 2px 2px;
margin: 0 0 1px 0;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px;
width: 130px;
@ -579,16 +578,23 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .chat-head-chatroom {
width: 100px;
}
#conversejs .toggle-controlbox,
#conversejs .toggle-minimized-chats {
#conversejs #trimmed-chatboxes,
#conversejs .toggle-controlbox {
float: right;
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: #5390c8;
font-size: 90%;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
background-color: #F4F4F4;
padding: 4px 8px;
margin-right: 5px;
color: white;
color: #080808;
height: 100%;
}
#conversejs .toggle-minimized-chats {
display: block;
width: 100%;
height: 100%;
color: #080808;
}
#conversejs .chat-head {
color: #ffffff;
@ -743,7 +749,8 @@ input.error {
#conversejs .chat-title a {
color: white;
width: 100%;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
#conversejs .chat-head-chatbox,
#conversejs .chat-head-chatroom {
@ -830,9 +837,6 @@ dl.add-converse-contact {
}
#conversejs .chat-head-message-count {
font-weight: bold;
position: absolute;
left: -5px;
top: 2px;
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');
@ -844,6 +848,9 @@ dl.add-converse-contact {
font-size: 15px;
text-align: center;
display: none;
position: absolute;
right: 22px;
bottom: 1px;
}
#conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button,
@ -1032,7 +1039,6 @@ dl.add-converse-contact {
#conversejs #converse-roster dd.pending-xmpp-contact:hover span {
width: 70%;
}
#conversejs #trimmed-chatboxes,
#conversejs .chatbox,
#conversejs .chatroom {
height: 25px;

41
less/converse.less
View File

@ -403,7 +403,7 @@ you can use the generic selector below, but it's slower:
}
#conversejs {
bottom: 1px;
bottom: 0;
direction: ltr;
height: 25px;
left: 0;
@ -591,17 +591,16 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .box-flyout {
position: absolute;
display: block;
bottom: 1px;
box-shadow: none;
border-radius: 4px;
height: auto;
bottom: 25px;
margin-left: -8px;
}
#conversejs #trimmed-chatboxes .box-flyout .chat-head {
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
margin: 0 0 2px 2px;
margin: 0 0 1px 0;
box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
height: 24px;
width: 130px;
@ -611,16 +610,24 @@ span.spinner.hor_centered {
width: 100px;
}
#conversejs .toggle-controlbox,
#conversejs .toggle-minimized-chats {
#conversejs #trimmed-chatboxes,
#conversejs .toggle-controlbox {
float: right;
font-size: 85%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: rgba(83, 144, 200, 100);
font-size: 90%;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
background-color: #F4F4F4;
padding: 4px 8px;
margin-right: 5px;
color: white;
color: #080808;
height: 100%;
}
#conversejs .toggle-minimized-chats {
display: block;
width: 100%;
height: 100%;
color: #080808;
}
#conversejs .chat-head {
@ -805,7 +812,8 @@ input.error {
#conversejs .chat-title a {
color: white;
width: 100%;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
#conversejs .chat-head-chatbox,
@ -908,9 +916,6 @@ dl.add-converse-contact {
#conversejs .chat-head-message-count {
font-weight: bold;
position: absolute;
left: -5px;
top: 2px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, grey) );
background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
@ -922,6 +927,9 @@ dl.add-converse-contact {
font-size: 15px;
text-align: center;
display: none;
position: absolute;
right: 22px;
bottom: 1px;
}
#conversejs a.configure-chatroom-button,
@ -1141,7 +1149,6 @@ dl.add-converse-contact {
width: 70%;
}
#conversejs #trimmed-chatboxes,
#conversejs .chatbox,
#conversejs .chatroom {
height: 25px;

130
mockup/minimal.html
View File

@ -46,74 +46,72 @@
<div id="trimmed-chatboxes">
<div class="box-flyout">
<div class="minimized-chats">
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></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>
<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>
</div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
My Chatroom
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Annegreet Gomez
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></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>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Candice van der Knijff
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Laura Grunewald
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat">
Lena Grunewald
</a>
</div>
<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">
Restricted Chatroom
</a>
</div>
</div>
<div href="#" class="toggle-minimized-chats">
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
<a class="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">42</a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
JC Brand
</a>
</div>
</div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
My Chatroom
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Annegreet Gomez
</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">842</a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Asmaa Haakman
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Candice van der Knijff
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Laura Grunewald
</a>
</div>
</div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat">
Lena Grunewald
</a>
</div>
</div>
</div>
</div>