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