Skip to content

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

Show the consolidation in the mockup.

parent 6e5bf44a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 389 deletions
converse.js
View file @ afcb49b6
...@@ -2517,8 +2517,7 @@ ...@@ -2517,8 +2517,7 @@
if (item.get('chatroom')) { if (item.get('chatroom')) {
view = new converse.ChatRoomView({'model': item}); view = new converse.ChatRoomView({'model': item});
} else if (item.get('box_id') === 'controlbox') { } else if (item.get('box_id') === 'controlbox') {
view = new converse.ControlBoxView({model: item}); view = new converse.ControlBoxView({model: item}).render();
view.render();
} else { } else {
view = new converse.ChatBoxView({model: item}); view = new converse.ChatBoxView({model: item});
} }
...@@ -3580,7 +3579,7 @@ ...@@ -3580,7 +3579,7 @@
if (converse.show_controlbox_by_default) { if (converse.show_controlbox_by_default) {
toggle.hide(); // It's either or toggle.hide(); // It's either or
} }
$('#conversejs').append(toggle); $('#conversejs').prepend(toggle);
return this; return this;
}, },
......
css/converse.css
View file @ afcb49b6
...@@ -568,12 +568,6 @@ span.spinner.hor_centered { ...@@ -568,12 +568,6 @@ span.spinner.hor_centered {
margin-right: 5px; margin-right: 5px;
color: white; color: white;
} }
#conversejs #trimmed-chatboxes {
float: left;
height: 25px;
margin-left: 5px;
display: block;
}
#conversejs #trimmed-chatboxes .box-flyout { #conversejs #trimmed-chatboxes .box-flyout {
position: absolute; position: absolute;
display: block; display: block;
...@@ -746,7 +740,6 @@ input.error { ...@@ -746,7 +740,6 @@ input.error {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0; text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
height: 1em;
} }
#conversejs .chat-title a { #conversejs .chat-title a {
color: white; color: white;
...@@ -837,23 +830,20 @@ dl.add-converse-contact { ...@@ -837,23 +830,20 @@ dl.add-converse-contact {
#conversejs .chat-head-message-count { #conversejs .chat-head-message-count {
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
left: -6px; left: -5px;
top: -6px; 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');
border: 3px solid #4f6a72; border: 1px solid;
text-shadow: 1px 1px 0 #ccc; text-shadow: 1px 1px 0 #ccc;
color: darkred; color: darkred;
border-radius: 20%; border-radius: 20%;
padding: 2px 10px; padding: 1px 3px;
font-size: 18px; font-size: 13px;
text-align: center; text-align: center;
display: none; display: none;
} }
#conversejs .chat-head-chatroom .chat-head-message-count {
border: 3px solid #2D617A;
}
#conversejs a.configure-chatroom-button, #conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button, #conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button { #conversejs a.close-chatbox-button {
...@@ -1041,6 +1031,7 @@ dl.add-converse-contact { ...@@ -1041,6 +1031,7 @@ 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;
...@@ -1048,6 +1039,9 @@ dl.add-converse-contact { ...@@ -1048,6 +1039,9 @@ dl.add-converse-contact {
margin-right: 15px; margin-right: 15px;
display: block; display: block;
} }
#conversejs #trimmed-chatboxes {
width: 130px;
}
#conversejs .chatbox { #conversejs .chatbox {
width: 200px; width: 200px;
} }
......
less/converse.less
View file @ afcb49b6
...@@ -598,13 +598,6 @@ span.spinner.hor_centered { ...@@ -598,13 +598,6 @@ span.spinner.hor_centered {
color: white; color: white;
} }
#conversejs #trimmed-chatboxes {
float: left;
height: 25px;
margin-left: 5px;
display: block;
}
#conversejs #trimmed-chatboxes .box-flyout { #conversejs #trimmed-chatboxes .box-flyout {
position: absolute; position: absolute;
display: block; display: block;
...@@ -809,7 +802,6 @@ input.error { ...@@ -809,7 +802,6 @@ input.error {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-shadow: rgba(0,0,0,0.51) 0 -1px 0; text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
height: 1em;
} }
#conversejs .chat-title a { #conversejs .chat-title a {
...@@ -917,25 +909,21 @@ dl.add-converse-contact { ...@@ -917,25 +909,21 @@ dl.add-converse-contact {
#conversejs .chat-head-message-count { #conversejs .chat-head-message-count {
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
left: -6px; left: -5px;
top: -6px; 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');
border: 3px solid rgb(79, 106, 114); border: 1px solid;
text-shadow: 1px 1px 0 #ccc; text-shadow: 1px 1px 0 #ccc;
color: darkred; color: darkred;
border-radius: 20%; border-radius: 20%;
padding: 2px 10px; padding: 1px 3px;
font-size: 18px; font-size: 13px;
text-align: center; text-align: center;
display: none; display: none;
} }
#conversejs .chat-head-chatroom .chat-head-message-count {
border: 3px solid #2D617A;
}
#conversejs a.configure-chatroom-button, #conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button, #conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button { #conversejs a.close-chatbox-button {
...@@ -1153,6 +1141,7 @@ dl.add-converse-contact { ...@@ -1153,6 +1141,7 @@ dl.add-converse-contact {
width: 70%; width: 70%;
} }
#conversejs #trimmed-chatboxes,
#conversejs .chatbox, #conversejs .chatbox,
#conversejs .chatroom { #conversejs .chatroom {
height: 25px; height: 25px;
...@@ -1161,6 +1150,10 @@ dl.add-converse-contact { ...@@ -1161,6 +1150,10 @@ dl.add-converse-contact {
display: block; display: block;
} }
#conversejs #trimmed-chatboxes {
width: 130px;
}
#conversejs .chatbox { #conversejs .chatbox {
width: 200px; width: 200px;
} }
......
mockup/index.html
View file @ afcb49b6
...@@ -377,96 +377,68 @@ ...@@ -377,96 +377,68 @@
<div class="box-flyout"> <div class="box-flyout">
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<div class="chat-title"> Restricted Chatroom</div> <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>
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user"> <a href="#" class="restore-chat" title="Click to maximize this chat">
<div class="chat-head-message-count" style="display:block">42</div>
JC Brand JC Brand
</a> </a>
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<div class="chat-title"> My Chatroom</div> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
My Chatroom
</a>
</div>
</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>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Annegreet Gomez Annegreet Gomez
</a> </a>
</div> </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">
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">
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">
Felix Amsel
</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">
Irini Vlastuin
</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">
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 class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
<div class="chat-title">
<a href="#" class="restore-chat">
Mandy Seiler
</a>
</div> </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>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Marcel Eberhardt <div class="chat-head-message-count" style="display:block">842</div>
</a> Asmaa Haakman
</a>
</div>
</div> </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>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Max Frankfurter Candice van der Knijff
</a> </a>
</div>
</div> </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>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Nuriye Cuypers Laura Grunewald
</a> </a>
</div>
</div> </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>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat">
Rinse Sommer Lena Grunewald
</a> </a>
</div>
</div> </div>
</div> </div>
</div></div> </div>
</div> </div>
<script> <script>
...@@ -531,13 +503,7 @@ $(document).ready(function () { ...@@ -531,13 +503,7 @@ $(document).ready(function () {
$('.toggle-chatbox-button').click(function(ev) { $('.toggle-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent(); var $grandparent = $(ev.target).parent().parent().parent();
$grandparent.find('.chat-body').slideToggle('fast'); $grandparent.fadeOut('fast');
var flyout = $grandparent.find('.box-flyout');
if (flyout.hasClass('minimized')) {
flyout.removeClass('minimized');
} else {
flyout.addClass('minimized');
}
}); });
// Clickable Dropdown // Clickable Dropdown
......
mockup/minimized.html deleted 100644 → 0
View file @ 6e5bf44a
This diff is collapsed.
src/templates/chatbox.html
View file @ afcb49b6
<div class="box-flyout" style="height: {{height}}px"> <div class="box-flyout" style="height: {{height}}px">
<div class="dragresize dragresize-tm"></div> <div class="dragresize dragresize-tm"></div>
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<div class="chat-head-message-count">0</div>
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a> <a class="toggle-chatbox-button icon-minus"></a>
<div class="chat-title"> <div class="chat-title">
......
src/templates/trimmed_chat.html
View file @ afcb49b6
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat">
<div class="chat-head-message-count">0</div>
{{ fullname }} {{ fullname }}
</a> </a>
</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