Skip to content

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

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
parent 9ce315de
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 119 deletions
sass/_chatbox.scss
View file @ 66d1a654
...@@ -37,11 +37,13 @@ ...@@ -37,11 +37,13 @@
} }
.chat-head { .chat-head {
flex-wrap: nowrap; display: flex;
flex-direction: column;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
padding: 0.5em; padding: 0;
padding-bottom: 0.5em;
position: relative; position: relative;
&.chat-head-chatbox { &.chat-head-chatbox {
...@@ -49,20 +51,35 @@ ...@@ -49,20 +51,35 @@
} }
.avatar { .avatar {
height: 36px;
width: 36px;
margin-right: 0.5em; margin-right: 0.5em;
} }
.chat-head__desc {
font-size: 80%;
}
.chatbox-title { .chatbox-title {
.chatroom-description { display: flex;
font-size: 80%; flex-direction: row;
} justify-content: space-between;
width: 100%;
} }
.chatbox-buttons {
.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; flex-direction: row-reverse;
@include make-col-ready(); flex-wrap: nowrap;
@include make-col(3);
padding: 0; padding: 0;
} }
...@@ -128,7 +145,7 @@ ...@@ -128,7 +145,7 @@
background-color: var(--chat-head-color); background-color: var(--chat-head-color);
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
z-index: 2; z-index: 2;
overflow-y: hidden; overflow: hidden;
width: 100%; width: 100%;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
...@@ -296,6 +313,7 @@ ...@@ -296,6 +313,7 @@
.chat-toolbar { .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
width: 100%;
padding: 0.25em; padding: 0.25em;
display: block; display: block;
border-top: 4px solid var(--chat-head-color); border-top: 4px solid var(--chat-head-color);
...@@ -424,12 +442,6 @@ ...@@ -424,12 +442,6 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.chatbox-title {
@include make-col(8);
}
.chatbox-buttons {
@include make-col(4);
}
} }
.chatbox { .chatbox {
min-width: var(--overlayed-chat-width) !important; min-width: var(--overlayed-chat-width) !important;
...@@ -438,10 +450,10 @@ ...@@ -438,10 +450,10 @@
.box-flyout { .box-flyout {
min-width: var(--overlayed-chat-width) !important; min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width); width: var(--overlayed-chat-width);
}
.chat-body { .chat-head {
height: calc(100% - var(--overlayed-chat-head-height)); padding: 0.5em;
}
} }
} }
} }
...@@ -455,7 +467,7 @@ ...@@ -455,7 +467,7 @@
min-height: calc(var(--overlayed-chat-height) / 2); min-height: calc(var(--overlayed-chat-height) / 2);
} }
.chat-head { .chat-head {
height: var(--overlayed-chat-head-height); min-height: var(--overlayed-chat-head-height);
} }
.chat-textarea { .chat-textarea {
max-height: var(--overlayed-max-chat-textarea-height); max-height: var(--overlayed-max-chat-textarea-height);
...@@ -496,18 +508,11 @@ ...@@ -496,18 +508,11 @@
.chat-head { .chat-head {
height: var(--fullpage-chat-head-height); height: var(--fullpage-chat-head-height);
padding: 0;
.user-custom-message { .user-custom-message {
font-size: 70%; font-size: 70%;
height: auto; height: auto;
line-height: var(--line-height); line-height: var(--line-height);
} }
.chatbox-title {
@include make-col(10);
}
.chatbox-buttons {
@include make-col(2);
}
} }
.chatbox { .chatbox {
...@@ -533,7 +538,7 @@ ...@@ -533,7 +538,7 @@
border: none !important; border: none !important;
} }
.chat-head { .chat-head {
height: var(--fullpage-chat-head-height); min-height: var(--fullpage-chat-head-height);
padding: 0.5em; padding: 0.5em;
} }
.chatbox { .chatbox {
...@@ -572,7 +577,7 @@ ...@@ -572,7 +577,7 @@
width: 100%; width: 100%;
} }
.chat-title { .chat-title--text {
padding: 0.3em; padding: 0.3em;
font-size: 120%; font-size: 120%;
} }
...@@ -606,7 +611,6 @@ ...@@ -606,7 +611,6 @@
overflow: hidden; overflow: hidden;
} }
.chat-body { .chat-body {
height: calc(100% - var(--fullpage-chat-head-height));
background-color: var(--chat-head-color); background-color: var(--chat-head-color);
border-top-left-radius: var(--chatbox-border-radius); border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius); border-top-right-radius: var(--chatbox-border-radius);
...@@ -657,19 +661,13 @@ ...@@ -657,19 +661,13 @@
.box-flyout { .box-flyout {
.chatbox-navback { .chatbox-navback {
display: flex; display: flex;
@include make-col(2); padding-right: 1em;
.fa-arrow-left { .fa-arrow-left {
&:before { &:before {
color: white; color: white;
} }
} }
} }
.chatbox-title {
@include make-col(7);
}
.chatbox-buttons {
@include make-col(3);
}
} }
} }
} }
......
sass/_chatrooms.scss
View file @ 66d1a654
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-color);
border-bottom: var(--chatroom-head-border-bottom); border-bottom: var(--chatroom-head-border-bottom);
.chatroom-description { .chat-head__desc {
color: var(--chatroom-head-description-color); color: var(--chatroom-head-description-color);
display: var(--chatroom-head-description-display); display: var(--chatroom-head-description-display);
font-size: var(--font-size); font-size: var(--font-size);
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
color: var(--chatroom-head-button-color); color: var(--chatroom-head-button-color);
} }
} }
.chat-title { .chatbox-title__text {
display: var(--heading-display); display: var(--heading-display);
font-weight: var(--chatroom-head-title-font-weight); font-weight: var(--chatroom-head-title-font-weight);
padding-right: var(--chatroom-head-title-padding-right); padding-right: var(--chatroom-head-title-padding-right);
...@@ -398,15 +398,16 @@ ...@@ -398,15 +398,16 @@
min-width: var(--chatroom-width) !important; min-width: var(--chatroom-width) !important;
width: var(--chatroom-width); width: var(--chatroom-width);
} }
.chatbox-title { .chatbox-title__text {
@include make-col(7); @include make-col(7);
.chatroom-description {
font-size: 80%;
}
} }
.chatbox-buttons { .chatbox-title__buttons {
@include make-col(5); @include make-col(5);
} }
.chat-head__desc {
font-size: 80%;
}
.chatroom-body { .chatroom-body {
.occupants { .occupants {
.occupants-heading { .occupants-heading {
...@@ -450,40 +451,6 @@ ...@@ -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-embedded,
#conversejs.converse-fullscreen, #conversejs.converse-fullscreen,
#conversejs.converse-mobile { #conversejs.converse-mobile {
...@@ -495,10 +462,8 @@ ...@@ -495,10 +462,8 @@
border-top: 0.8em solid var(--chatroom-head-color); border-top: 0.8em solid var(--chatroom-head-color);
width: 100%; width: 100%;
.chatbox-title { .chat-head__desc {
.chatroom-description { font-size: 70%;
font-size: 70%;
}
} }
.chatroom-body { .chatroom-body {
......
src/converse-bookmark-views.js
View file @ 66d1a654
...@@ -114,7 +114,7 @@ converse.plugins.add('converse-bookmark-views', { ...@@ -114,7 +114,7 @@ converse.plugins.add('converse-bookmark-views', {
'bookmarked': this.model.get('bookmarked') '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'); const close_button = buttons_row.querySelector('.close-chatbox-button');
if (close_button) { if (close_button) {
close_button.insertAdjacentHTML('afterend', bookmark_button); close_button.insertAdjacentHTML('afterend', bookmark_button);
......
src/converse-minimize.js
View file @ 66d1a654
...@@ -155,7 +155,7 @@ converse.plugins.add('converse-minimize', { ...@@ -155,7 +155,7 @@ converse.plugins.add('converse-minimize', {
const html = this.__super__.generateHeadingHTML.apply(this, arguments); const html = this.__super__.generateHeadingHTML.apply(this, arguments);
const div = document.createElement('div'); const div = document.createElement('div');
div.innerHTML = html; 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 button = buttons_row.querySelector('.close-chatbox-button');
const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')}) const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')})
if (button) { if (button) {
......
src/templates/chatbox_head.html
View file @ 66d1a654
<div class="chat-head chat-head-chatbox row no-gutters"> <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="chatbox-title">
<div class="row no-gutters"> <div class="chatbox-title--row">
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
{[ if (o.type !== o._converse.HEADLINES_TYPE) { ]} {[ if (o.type !== o._converse.HEADLINES_TYPE) { ]}
<canvas class="avatar" height="36" width="36"></canvas> <div> <canvas class="avatar" height="36" width="36"></canvas> </div>
{[ } ]} {[ } ]}
<div class="col chat-title" title="{{{o.jid}}}"> <div class="chatbox-title__text" title="{{{o.jid}}}">
{[ if (o.url) { ]} {[ if (o.url) { ]} <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user"> {[ } ]}
<a href="{{{o.url}}}" target="_blank" rel="noopener" class="user"> {{{ o.display_name }}}
{[ } ]} {[ if (o.url) { ]} </a> {[ } ]}
{{{ o.display_name }}}
{[ if (o.url) { ]}
</a>
{[ } ]}
<p class="user-custom-message">{{{ o.status }}}</p>
</div> </div>
</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>
<div class="chatbox-buttons row no-gutters"> <p class="chat-head__desc">{{{ o.status }}}</p>
<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>
src/templates/chatroom_head.html
View file @ 66d1a654
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
<div class="chatbox-title"> <div class="chatbox-title">
<div class="chat-title" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >
{{{ o.title }}}
</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) { ]} {[ if (!o._converse.singleton) { ]}
<a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a> <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]} {[ } ]}
{[ if (o.isOwner) { ]} <div class="chatbox-title__text" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >{{{ o.title }}}</div>
<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a> <div class="chatbox-title__buttons row no-gutters">
{[ } ]} {[ if (!o._converse.singleton) { ]}
<a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a> <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. -->
</div> </div>
<p class="chat-head__desc">{{o.description}}</p>
webpack.html
View file @ 66d1a654
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
message_archiving: 'always', message_archiving: 'always',
muc_domain: 'conference.chat.example.org', muc_domain: 'conference.chat.example.org',
muc_respect_autojoin: true, muc_respect_autojoin: true,
view_mode: 'fullscreen', view_mode: 'overlayed',
websocket_url: 'ws://chat.example.org:5380/xmpp-websocket', websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
// bosh_service_url: 'http://chat.example.org:5280/http-bind', // bosh_service_url: 'http://chat.example.org:5280/http-bind',
muc_show_logs_before_join: true, muc_show_logs_before_join: true,
......
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