Commit 5e686075 authored by JC Brand's avatar JC Brand

Update chatbox head with new markup

parent d8f80bc0
...@@ -5128,8 +5128,7 @@ body.reset { ...@@ -5128,8 +5128,7 @@ body.reset {
background-color: #3AA569; } background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar, #converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
margin-right: 0.5em; margin-right: 0.5em; }
float: left; }
#converse-embedded-chat .chat-head .chatbox-buttons, #converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons { #conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse;
......
...@@ -5184,8 +5184,7 @@ body { ...@@ -5184,8 +5184,7 @@ body {
background-color: #3AA569; } background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar, #converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
margin-right: 0.5em; margin-right: 0.5em; }
float: left; }
#converse-embedded-chat .chat-head .chatbox-buttons, #converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons { #conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse;
...@@ -5622,7 +5621,6 @@ body { ...@@ -5622,7 +5621,6 @@ body {
#conversejs.fullscreen .flyout { #conversejs.fullscreen .flyout {
border: 1.2em solid #3AA569; border: 1.2em solid #3AA569;
border-top: 0.8em solid #3AA569; border-top: 0.8em solid #3AA569;
border-radius: 0;
bottom: 0; } bottom: 0; }
#conversejs.fullscreen .chat-head { #conversejs.fullscreen .chat-head {
font-size: 20px; font-size: 20px;
...@@ -6058,6 +6056,8 @@ body { ...@@ -6058,6 +6056,8 @@ body {
margin: 0; } margin: 0; }
#conversejs.fullscreen #controlbox .controlbox-pane { #conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout {
border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog { #conversejs.fullscreen #controlbox #login-dialog {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog .converse-form { #conversejs.fullscreen #controlbox #login-dialog .converse-form {
......
...@@ -25,7 +25,12 @@ ...@@ -25,7 +25,12 @@
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
<div class="col-9"> <div class="col-9">
<div class="row no-gutters"> <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 <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> <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
</div> </div>
......
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
.avatar { .avatar {
margin-right: 0.5em; margin-right: 0.5em;
float: left;
} }
.chatbox-buttons { .chatbox-buttons {
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
.flyout { .flyout {
border: $flyout-padding solid $chat-head-color; border: $flyout-padding solid $chat-head-color;
border-top: 0.8em solid $chat-head-color; border-top: 0.8em solid $chat-head-color;
border-radius: 0;
bottom: 0; bottom: 0;
} }
.chat-head { .chat-head {
......
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
border-radius: 0; border-radius: 0;
} }
.flyout {
border-radius: 0;
}
#login-dialog { #login-dialog {
border-radius: 0; border-radius: 0;
.converse-form { .converse-form {
......
...@@ -61,8 +61,8 @@ ...@@ -61,8 +61,8 @@
initialize () { initialize () {
this._converse.api.settings.update({ this._converse.api.settings.update({
chatview_avatar_height: 44, chatview_avatar_height: 50,
chatview_avatar_width: 44, chatview_avatar_width: 50,
hide_open_bookmarks: true, hide_open_bookmarks: true,
show_controlbox_by_default: true, show_controlbox_by_default: true,
sticky_controlbox: true sticky_controlbox: true
......
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a> <div class="col-9">
<div class="row no-gutters">
{[ if (o.show_avatar) { ]} {[ if (o.show_avatar) { ]}
<div class="col-auto">
<img alt="User Avatar" <img alt="User Avatar"
class="avatar" class="avatar"
height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px" height="{{{o.avatar_height}}}px" width="{{{o.avatar_width}}}px"
src="data:{{{o.image_type}}};base64,{{{o.image}}}"/> src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
</div>
{[ } ]} {[ } ]}
<div class="chat-title"> <div class="col chat-title" 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">
{[ } ]} {[ } ]}
...@@ -16,4 +19,10 @@ ...@@ -16,4 +19,10 @@
{[ } ]} {[ } ]}
<p class="user-custom-message">{{{ o.status }}}</p> <p class="user-custom-message">{{{ o.status }}}</p>
</div> </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> </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