Skip to content

C
converse.js
Commit 0b4e2730 authored by JC Brand's avatar JC Brand
Browse files
Options

Style minimized chats toggle

parent f416a455
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 94 deletions
css/converse.css
View file @ 0b4e2730
...@@ -394,7 +394,7 @@ you can use the generic selector below, but it's slower: ...@@ -394,7 +394,7 @@ you can use the generic selector below, but it's slower:
user-select: none; user-select: none;
} }
#conversejs { #conversejs {
bottom: 1px; bottom: 0;
direction: ltr; direction: ltr;
height: 25px; height: 25px;
left: 0; left: 0;
...@@ -562,16 +562,15 @@ span.spinner.hor_centered { ...@@ -562,16 +562,15 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .box-flyout { #conversejs #trimmed-chatboxes .box-flyout {
position: absolute; position: absolute;
display: block; display: block;
bottom: 1px;
box-shadow: none;
border-radius: 4px;
height: auto; height: auto;
bottom: 25px;
margin-left: -8px;
} }
#conversejs #trimmed-chatboxes .box-flyout .chat-head { #conversejs #trimmed-chatboxes .box-flyout .chat-head {
font-size: 100%; font-size: 100%;
border-radius: 4px; border-radius: 4px;
padding: 3px 0 0 5px; 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); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px; height: 24px;
width: 130px; width: 130px;
...@@ -579,16 +578,23 @@ span.spinner.hor_centered { ...@@ -579,16 +578,23 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .chat-head-chatroom { #conversejs #trimmed-chatboxes .chat-head-chatroom {
width: 100px; width: 100px;
} }
#conversejs .toggle-controlbox, #conversejs #trimmed-chatboxes,
#conversejs .toggle-minimized-chats { #conversejs .toggle-controlbox {
float: right; float: right;
font-size: 85%; font-size: 90%;
border-top-right-radius: 4px; border-top-right-radius: 2px;
border-top-left-radius: 4px; border-top-left-radius: 2px;
background-color: #5390c8; background-color: #F4F4F4;
padding: 4px 8px; padding: 4px 8px;
margin-right: 5px; margin-right: 5px;
color: white; color: #080808;
height: 100%;
}
#conversejs .toggle-minimized-chats {
display: block;
width: 100%;
height: 100%;
color: #080808;
} }
#conversejs .chat-head { #conversejs .chat-head {
color: #ffffff; color: #ffffff;
...@@ -743,7 +749,8 @@ input.error { ...@@ -743,7 +749,8 @@ input.error {
#conversejs .chat-title a { #conversejs .chat-title a {
color: white; color: white;
width: 100%; width: 100%;
display: block; text-overflow: ellipsis;
white-space: nowrap;
} }
#conversejs .chat-head-chatbox, #conversejs .chat-head-chatbox,
#conversejs .chat-head-chatroom { #conversejs .chat-head-chatroom {
...@@ -830,9 +837,6 @@ dl.add-converse-contact { ...@@ -830,9 +837,6 @@ dl.add-converse-contact {
} }
#conversejs .chat-head-message-count { #conversejs .chat-head-message-count {
font-weight: bold; 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: -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%); background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6'); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
...@@ -844,6 +848,9 @@ dl.add-converse-contact { ...@@ -844,6 +848,9 @@ dl.add-converse-contact {
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
display: none; display: none;
position: absolute;
right: 22px;
bottom: 1px;
} }
#conversejs a.configure-chatroom-button, #conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button, #conversejs a.toggle-chatbox-button,
...@@ -1032,7 +1039,6 @@ dl.add-converse-contact { ...@@ -1032,7 +1039,6 @@ dl.add-converse-contact {
#conversejs #converse-roster dd.pending-xmpp-contact:hover span { #conversejs #converse-roster dd.pending-xmpp-contact:hover span {
width: 70%; width: 70%;
} }
#conversejs #trimmed-chatboxes,
#conversejs .chatbox, #conversejs .chatbox,
#conversejs .chatroom { #conversejs .chatroom {
height: 25px; height: 25px;
......
less/converse.less
View file @ 0b4e2730
...@@ -403,7 +403,7 @@ you can use the generic selector below, but it's slower: ...@@ -403,7 +403,7 @@ you can use the generic selector below, but it's slower:
} }
#conversejs { #conversejs {
bottom: 1px; bottom: 0;
direction: ltr; direction: ltr;
height: 25px; height: 25px;
left: 0; left: 0;
...@@ -591,17 +591,16 @@ span.spinner.hor_centered { ...@@ -591,17 +591,16 @@ span.spinner.hor_centered {
#conversejs #trimmed-chatboxes .box-flyout { #conversejs #trimmed-chatboxes .box-flyout {
position: absolute; position: absolute;
display: block; display: block;
bottom: 1px;
box-shadow: none;
border-radius: 4px;
height: auto; height: auto;
bottom: 25px;
margin-left: -8px;
} }
#conversejs #trimmed-chatboxes .box-flyout .chat-head { #conversejs #trimmed-chatboxes .box-flyout .chat-head {
font-size: 100%; font-size: 100%;
border-radius: 4px; border-radius: 4px;
padding: 3px 0 0 5px; 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); box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
height: 24px; height: 24px;
width: 130px; width: 130px;
...@@ -611,16 +610,24 @@ span.spinner.hor_centered { ...@@ -611,16 +610,24 @@ span.spinner.hor_centered {
width: 100px; width: 100px;
} }
#conversejs .toggle-controlbox, #conversejs #trimmed-chatboxes,
#conversejs .toggle-minimized-chats { #conversejs .toggle-controlbox {
float: right; float: right;
font-size: 85%; font-size: 90%;
border-top-right-radius: 4px; border-top-right-radius: 2px;
border-top-left-radius: 4px; border-top-left-radius: 2px;
background-color: rgba(83, 144, 200, 100); background-color: #F4F4F4;
padding: 4px 8px; padding: 4px 8px;
margin-right: 5px; margin-right: 5px;
color: white; color: #080808;
height: 100%;
}
#conversejs .toggle-minimized-chats {
display: block;
width: 100%;
height: 100%;
color: #080808;
} }
#conversejs .chat-head { #conversejs .chat-head {
...@@ -805,7 +812,8 @@ input.error { ...@@ -805,7 +812,8 @@ input.error {
#conversejs .chat-title a { #conversejs .chat-title a {
color: white; color: white;
width: 100%; width: 100%;
display: block; text-overflow: ellipsis;
white-space: nowrap;
} }
#conversejs .chat-head-chatbox, #conversejs .chat-head-chatbox,
...@@ -908,9 +916,6 @@ dl.add-converse-contact { ...@@ -908,9 +916,6 @@ dl.add-converse-contact {
#conversejs .chat-head-message-count { #conversejs .chat-head-message-count {
font-weight: bold; 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: -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%); background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6'); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
...@@ -922,6 +927,9 @@ dl.add-converse-contact { ...@@ -922,6 +927,9 @@ dl.add-converse-contact {
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
display: none; display: none;
position: absolute;
right: 22px;
bottom: 1px;
} }
#conversejs a.configure-chatroom-button, #conversejs a.configure-chatroom-button,
...@@ -1141,7 +1149,6 @@ dl.add-converse-contact { ...@@ -1141,7 +1149,6 @@ dl.add-converse-contact {
width: 70%; width: 70%;
} }
#conversejs #trimmed-chatboxes,
#conversejs .chatbox, #conversejs .chatbox,
#conversejs .chatroom { #conversejs .chatroom {
height: 25px; height: 25px;
......
mockup/minimal.html
View file @ 0b4e2730
...@@ -46,74 +46,72 @@ ...@@ -46,74 +46,72 @@
<div id="trimmed-chatboxes"> <div id="trimmed-chatboxes">
<div class="box-flyout"> <a class="toggle-minimized-chats" href="#">
<div class="minimized-chats"> <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
<div class="chat-head chat-head-chatroom"> </a>
<a class="close-chatbox-button icon-close"></a> <div class="box-flyout minimized-chats">
<div class="chat-title"> <div class="chat-head chat-head-chatroom">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a class="close-chatbox-button icon-close"></a>
<div class="chat-head-message-count" style="display:block">3</div> <a class="chat-head-message-count" href="#" style="display:block">3</a>
Restricted Chatroom <div class="chat-title">
</a> <a href="#" class="restore-chat" title="Click to maximize this chat">
</div> Restricted Chatroom
</div> </a>
<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>
<div class="chat-head chat-head-chatroom"> </div>
<a class="close-chatbox-button icon-close"></a> <div class="chat-head chat-head-chatbox">
<div class="chat-title"> <a class="close-chatbox-button icon-close"></a>
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a class="chat-head-message-count" href="#" style="display:block">42</a>
My Chatroom <div class="chat-title">
</a> <a href="#" class="restore-chat" title="Click to maximize this chat">
</div> JC Brand
</a>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> </div>
<div class="chat-title"> <div class="chat-head chat-head-chatroom">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a class="close-chatbox-button icon-close"></a>
Annegreet Gomez <div class="chat-title">
</a> <a href="#" class="restore-chat" title="Click to maximize this chat">
</div> My Chatroom
</a>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> </div>
<div class="chat-title"> <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<a href="#" class="restore-chat" title="Click to maximize this chat"> <div class="chat-title">
<div class="chat-head-message-count" style="display:block">842</div> <a href="#" class="restore-chat" title="Click to maximize this chat">
Asmaa Haakman Annegreet Gomez
</a> </a>
</div>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> </div>
<div class="chat-title"> <div class="chat-head chat-head-chatbox">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a class="close-chatbox-button icon-close"></a>
Candice van der Knijff <a class="chat-head-message-count" href="#" style="display:block">842</a>
</a> <div class="chat-title">
</div> <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>
<div class="chat-title"> <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<a href="#" class="restore-chat" title="Click to maximize this chat"> <div class="chat-title">
Laura Grunewald <a href="#" class="restore-chat" title="Click to maximize this chat">
</a> Candice van der Knijff
</div> </a>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> </div>
<div class="chat-title"> <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<a href="#" class="restore-chat"> <div class="chat-title">
Lena Grunewald <a href="#" class="restore-chat" title="Click to maximize this chat">
</a> Laura Grunewald
</div> </a>
</div> </div>
</div> </div>
<div href="#" class="toggle-minimized-chats"> <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span> <div class="chat-title">
<a class="icon-close"></a> <a href="#" class="restore-chat">
Lena Grunewald
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7