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

Update chatbox head with new markup

Browse Source
This commit is contained in:
JC Brand 2018-02-19 22:36:37 +01:00
parent d8f80bc0e6
commit 5e6860754f
8 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/converse.css
View File

@ -5128,8 +5128,7 @@ body.reset {
background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar {
margin-right: 0.5em;
float: left; }
margin-right: 0.5em; }
#converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse;

6
css/inverse.css
View File

@ -5184,8 +5184,7 @@ body {
background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar {
margin-right: 0.5em;
float: left; }
margin-right: 0.5em; }
#converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse;
@ -5622,7 +5621,6 @@ body {
#conversejs.fullscreen .flyout {
border: 1.2em solid #3AA569;
border-top: 0.8em solid #3AA569;
border-radius: 0;
bottom: 0; }
#conversejs.fullscreen .chat-head {
font-size: 20px;
@ -6058,6 +6056,8 @@ body {
margin: 0; }
#conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout {
border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog {
border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog .converse-form {

7
mockup/chatbox.html
View File

@ -25,7 +25,12 @@
<div class="chat-head chat-head-chatbox row no-gutters">
<div class="col-9">
<div class="row no-gutters">
<div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
<div class="col-auto">
<img alt="User Avatar"
class="avatar"
height="50px" width="50px"
src="data:image/png;base64,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"/>
</div>
<div class="col chat-title" title="j@chat.example.org">JC Brand
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
</div>

1
sass/_chatbox.scss
View File

@ -33,7 +33,6 @@
.avatar {
margin-right: 0.5em;
float: left;
}
.chatbox-buttons {

1
sass/inverse/_chatbox.scss
View File

@ -6,7 +6,6 @@
.flyout {
border: $flyout-padding solid $chat-head-color;
border-top: 0.8em solid $chat-head-color;
border-radius: 0;
bottom: 0;
}
.chat-head {

4
sass/inverse/_controlbox.scss
View File

@ -6,6 +6,10 @@
border-radius: 0;
}
.flyout {
border-radius: 0;
}
#login-dialog {
border-radius: 0;
.converse-form {

4
src/converse-fullscreen.js
View File

@ -61,8 +61,8 @@
initialize () {
this._converse.api.settings.update({
chatview_avatar_height: 44,
chatview_avatar_width: 44,
chatview_avatar_height: 50,
chatview_avatar_width: 50,
hide_open_bookmarks: true,
show_controlbox_by_default: true,
sticky_controlbox: true

43
src/templates/chatbox_head.html
View File

@ -1,19 +1,28 @@
<div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
{[ if (o.show_avatar) { ]}
<img alt="User Avatar"
class="avatar"
height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px"
src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
{[ } ]}
<div class="chat-title">
{[ if (o.url) { ]}
<a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
{[ } ]}
{{{ o.fullname }}}
{[ if (o.url) { ]}
</a>
{[ } ]}
<p class="user-custom-message">{{{ o.status }}}</p>
<div class="chat-head chat-head-chatbox row no-gutters">
<div class="col-9">
<div class="row no-gutters">
{[ if (o.show_avatar) { ]}
<div class="col-auto">
<img alt="User Avatar"
class="avatar"
height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px"
src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
</div>
{[ } ]}
<div class="col chat-title" title="{{{o.jid}}}">
{[ if (o.url) { ]}
<a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
{[ } ]}
{{{ o.fullname }}}
{[ if (o.url) { ]}
</a>
{[ } ]}
<p class="user-custom-message">{{{ o.status }}}</p>
</div>
</div>
</div>
<div class="col-3">
<a class="chatbox-btn close-chatbox-button fa fa-close" title={{{o.info_close}}}></a>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
</div>
</div>