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

Update the minimized chats widget

Browse Source
This commit is contained in:
JC Brand 2018-03-09 17:43:25 +01:00
parent 9c0b7c71cd
commit 849d6b2612
8 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/converse.css
View File

@ -6233,19 +6233,28 @@ body.reset {
border-radius: 4px; }
#conversejs:not(.fullscreen) #minimized-chats {
order: 100;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
margin-bottom: -1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
margin-right: 0.5em;
padding: 0; }
@media (min-width: 576px) {
#conversejs:not(.fullscreen) #minimized-chats {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
@media (min-width: 992px) {
#conversejs:not(.fullscreen) #minimized-chats {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; } }
#conversejs:not(.fullscreen) #minimized-chats .badge {
bottom: 8px;
border: 1px solid #818479; }
@ -6261,7 +6270,8 @@ body.reset {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
display: block; }
display: block;
height: 50px; }
#conversejs:not(.fullscreen) #minimized-chats a.restore-chat {
padding: 1px 0 1px 5px;
color: white;
@ -6276,7 +6286,8 @@ body.reset {
color: white; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%; }
width: 100%;
bottom: 48px; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
padding: 0.3em;
border-radius: 4px;

8
mockup/converse.html
View File

@ -218,10 +218,10 @@
</div>
<div id="minimized-chats">
<div class="flyout minimized-chats-flyout row">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized
</a>
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized
</a>
<div class="flyout minimized-chats-flyout row no-gutters">
<div class="chat-head chat-head-chatroom row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">42</span>

13
sass/converse/_minimized_chats.scss
View File

@ -1,7 +1,16 @@
#conversejs:not(.fullscreen) {
#minimized-chats {
order: 100;
@include make-col-ready();
@include make-col(1);
@include media-breakpoint-up(xs) {
@include make-col(2);
}
@include media-breakpoint-up(sm) {
@include make-col(2);
}
@include media-breakpoint-up(lg) {
@include make-col(1);
}
margin-bottom: -2*$chat-gutter;
border-top-left-radius: $chatbox-border-radius;
@ -28,6 +37,7 @@
overflow-y: hidden;
text-overflow: ellipsis;
display: block;
height: 50px;
}
a.restore-chat {
@ -50,6 +60,7 @@
.minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%;
bottom: 48px;
.chat-head {
padding: 0.3em;

4
src/converse-minimize.js
View File

@ -318,7 +318,7 @@
_converse.MinimizedChatBoxView = Backbone.NativeView.extend({
tagName: 'div',
className: 'chat-head',
className: 'chat-head row no-gutters',
events: {
'click .close-chatbox-button': 'close',
'click .restore-chat': 'restore'
@ -389,7 +389,7 @@
render () {
if (!this.el.parentElement) {
this.el.innerHTML = tpl_chats_panel();
_converse.chatboxviews.el.appendChild(this.el);
_converse.chatboxviews.insertRowColumn(this.el);
}
if (this.keys().length === 0) {
this.el.classList.add('hidden');

4
src/templates/chats_panel.html
View File

@ -1,2 +1,2 @@
<a id="toggle-minimized-chats" href="#"></a>
<div class="flyout minimized-chats-flyout"></div>
<a id="toggle-minimized-chats" href="#" class="row no-gutters"></a>
<div class="flyout minimized-chats-flyout row no-gutters"></div>

2
src/templates/toggle_chats.html
View File

@ -1,4 +1,4 @@
{{{o.Minimized}}} <span id="minimized-count">({{{o.num_minimized}}})</span>
<span class="badge badge-light">{{{o.num_minimized}}}</span> {{{o.Minimized}}}
<span class="unread-message-count
{[ if (!o.num_unread) { ]} unread-message-count-hidden {[ } ]}"
href="#">{{{o.num_unread}}}</span>

8
src/templates/trimmed_chat.html
View File

@ -1,7 +1,7 @@
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chat-head-message-count
{[ if (!o.num_unread) { ]} chat-head-message-count-hidden {[ } ]}"
href="#">{{{o.num_unread}}}</a>
<a href="#" class="restore-chat" title="{{{o.tooltip}}}">
<a href="#" class="restore-chat w-100 align-self-center" title="{{{o.tooltip}}}">
{[ if (!o.num_unread) { ]}
<span class="badge badge-light">{{{o.num_unread}}}2</span>
{[ } ]}"
{{{o. title }}}
</a>

1
src/utils.js
View File

@ -321,7 +321,6 @@
steps = duration/17; // We assume 17ms per animation which is ~60FPS
let height = original_height;
debugger;
el.style.overflow = 'hidden';
function draw () {