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

Update chat head markup and CSS 

- Use flexbox where possible
- Simplify header by using `justify-content` instead of setting column widths
- Show description below the row containing the title and buttons
This commit is contained in:
JC Brand 2020-01-14 13:32:20 +01:00
parent 9ce315dece
commit 66d1a65432
7 changed files with 78 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
sass/_chatbox.scss
View File

@ -37,11 +37,13 @@
}
.chat-head {
flex-wrap: nowrap;
display: flex;
flex-direction: column;
color: #ffffff;
font-size: 100%;
margin: 0;
padding: 0.5em;
padding: 0;
padding-bottom: 0.5em;
position: relative;
&.chat-head-chatbox {
@ -49,20 +51,35 @@
}
.avatar {
height: 36px;
width: 36px;
margin-right: 0.5em;
}
.chatbox-title {
.chatroom-description {
font-size: 80%;
}
.chat-head__desc {
font-size: 80%;
}
.chatbox-buttons {
.chatbox-title {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.chatbox-title--row {
display: flex;
flex-direction: row;
overflow: hidden;
}
.chatbox-title__text {
overflow: hidden;
text-overflow: ellipsis;
}
.chatbox-title__buttons {
display: flex;
flex-direction: row-reverse;
@include make-col-ready();
@include make-col(3);
flex-wrap: nowrap;
padding: 0;
}
@ -128,7 +145,7 @@
background-color: var(--chat-head-color);
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
z-index: 2;
overflow-y: hidden;
overflow: hidden;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {
@ -296,6 +313,7 @@
.chat-toolbar {
box-sizing: border-box;
margin: 0;
width: 100%;
padding: 0.25em;
display: block;
border-top: 4px solid var(--chat-head-color);
@ -424,12 +442,6 @@
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.chatbox-title {
@include make-col(8);
}
.chatbox-buttons {
@include make-col(4);
}
}
.chatbox {
min-width: var(--overlayed-chat-width) !important;
@ -438,10 +450,10 @@
.box-flyout {
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
}
.chat-body {
height: calc(100% - var(--overlayed-chat-head-height));
}
.chat-head {
padding: 0.5em;
}
}
}
@ -455,7 +467,7 @@
min-height: calc(var(--overlayed-chat-height) / 2);
}
.chat-head {
height: var(--overlayed-chat-head-height);
min-height: var(--overlayed-chat-head-height);
}
.chat-textarea {
max-height: var(--overlayed-max-chat-textarea-height);
@ -496,18 +508,11 @@
.chat-head {
height: var(--fullpage-chat-head-height);
padding: 0;
.user-custom-message {
font-size: 70%;
height: auto;
line-height: var(--line-height);
}
.chatbox-title {
@include make-col(10);
}
.chatbox-buttons {
@include make-col(2);
}
}
.chatbox {
@ -533,7 +538,7 @@
border: none !important;
}
.chat-head {
height: var(--fullpage-chat-head-height);
min-height: var(--fullpage-chat-head-height);
padding: 0.5em;
}
.chatbox {
@ -572,7 +577,7 @@
width: 100%;
}
.chat-title {
.chat-title--text {
padding: 0.3em;
font-size: 120%;
}
@ -606,7 +611,6 @@
overflow: hidden;
}
.chat-body {
height: calc(100% - var(--fullpage-chat-head-height));
background-color: var(--chat-head-color);
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
@ -657,19 +661,13 @@
.box-flyout {
.chatbox-navback {
display: flex;
@include make-col(2);
padding-right: 1em;
.fa-arrow-left {
&:before {
color: white;
}
}
}
.chatbox-title {
@include make-col(7);
}
.chatbox-buttons {
@include make-col(3);
}
}
}
}

55
sass/_chatrooms.scss
View File

@ -40,7 +40,7 @@
background-color: var(--chatroom-head-color);
border-bottom: var(--chatroom-head-border-bottom);
.chatroom-description {
.chat-head__desc {
color: var(--chatroom-head-description-color);
display: var(--chatroom-head-description-display);
font-size: var(--font-size);
@ -73,7 +73,7 @@
color: var(--chatroom-head-button-color);
}
}
.chat-title {
.chatbox-title__text {
display: var(--heading-display);
font-weight: var(--chatroom-head-title-font-weight);
padding-right: var(--chatroom-head-title-padding-right);
@ -398,15 +398,16 @@
min-width: var(--chatroom-width) !important;
width: var(--chatroom-width);
}
.chatbox-title {
.chatbox-title__text {
@include make-col(7);
.chatroom-description {
font-size: 80%;
}
}
.chatbox-buttons {
.chatbox-title__buttons {
@include make-col(5);
}
.chat-head__desc {
font-size: 80%;
}
.chatroom-body {
.occupants {
.occupants-heading {
@ -450,40 +451,6 @@
}
}
#conversejs.converse-fullscreen {
.chatroom {
.box-flyout {
.chatbox-title {
@include make-col(9);
}
.chatbox-buttons {
@include make-col(3);
}
}
}
}
@include media-breakpoint-down(sm) {
#conversejs:not(.converse-embedded) {
.chatroom {
width: 100vw !important;
.box-flyout {
.chatbox-navback {
@include make-col(2);
}
.chatbox-title {
@include make-col(7);
}
.chatbox-buttons {
@include make-col(3);
}
}
}
}
}
#conversejs.converse-embedded,
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
@ -495,10 +462,8 @@
border-top: 0.8em solid var(--chatroom-head-color);
width: 100%;
.chatbox-title {
.chatroom-description {
font-size: 70%;
}
.chat-head__desc {
font-size: 70%;
}
.chatroom-body {

2
src/converse-bookmark-views.js
View File

@ -114,7 +114,7 @@ converse.plugins.add('converse-bookmark-views', {
'bookmarked': this.model.get('bookmarked')
}));
const buttons_row = this.el.querySelector('.chatbox-buttons')
const buttons_row = this.el.querySelector('.chatbox-title__buttons')
const close_button = buttons_row.querySelector('.close-chatbox-button');
if (close_button) {
close_button.insertAdjacentHTML('afterend', bookmark_button);

2
src/converse-minimize.js
View File

@ -155,7 +155,7 @@ converse.plugins.add('converse-minimize', {
const html = this.__super__.generateHeadingHTML.apply(this, arguments);
const div = document.createElement('div');
div.innerHTML = html;
const buttons_row = div.querySelector('.chatbox-buttons')
const buttons_row = div.querySelector('.chatbox-title__buttons')
const button = buttons_row.querySelector('.close-chatbox-button');
const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')})
if (button) {

34
src/templates/chatbox_head.html
View File

@ -1,26 +1,22 @@
<div class="chat-head chat-head-chatbox row no-gutters">
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
<div class="chatbox-title">
<div class="row no-gutters">
{[ if (o.type !== o._converse.HEADLINES_TYPE) { ]}
<canvas class="avatar" height="36" width="36"></canvas>
<div class="chatbox-title--row">
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
<div class="col chat-title" title="{{{o.jid}}}">
{[ if (o.url) { ]}
<a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
{[ } ]}
{{{ o.display_name }}}
{[ if (o.url) { ]}
</a>
{[ } ]}
<p class="user-custom-message">{{{ o.status }}}</p>
{[ if (o.type !== o._converse.HEADLINES_TYPE) { ]}
<div> <canvas class="avatar" height="36" width="36"></canvas> </div>
{[ } ]}
<div class="chatbox-title__text" title="{{{o.jid}}}">
{[ if (o.url) { ]} <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user"> {[ } ]}
{{{ o.display_name }}}
{[ if (o.url) { ]} </a> {[ } ]}
</div>
</div>
<div class="chatbox-title__buttons row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
<a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
</div>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
<a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
</div>
<p class="chat-head__desc">{{{ o.status }}}</p>
</div>

28
src/templates/chatroom_head.html
View File

@ -1,19 +1,17 @@
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
<div class="chatbox-title">
<div class="chat-title" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >
{{{ o.title }}}
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
<div class="chatbox-title__text" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >{{{ o.title }}}</div>
<div class="chatbox-title__buttons row no-gutters">
{[ if (!o._converse.singleton) { ]}
<a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>
{[ } ]}
{[ if (o.isOwner) { ]}
<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
{[ } ]}
<a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
</div>
<!-- Sanitized in converse-muc-views. We want to render links. -->
<p class="chatroom-description">{{o.description}}</p>
</div>
<div class="chatbox-buttons row no-gutters">
{[ if (!o._converse.singleton) { ]}
<a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>
{[ } ]}
{[ if (o.isOwner) { ]}
<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
{[ } ]}
<a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
</div>
<p class="chat-head__desc">{{o.description}}</p>

2
webpack.html
View File

@ -27,7 +27,7 @@
message_archiving: 'always',
muc_domain: 'conference.chat.example.org',
muc_respect_autojoin: true,
view_mode: 'fullscreen',
view_mode: 'overlayed',
websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
// bosh_service_url: 'http://chat.example.org:5280/http-bind',
muc_show_logs_before_join: true,