Commit 5278e4fe authored by JC Brand's avatar JC Brand

Add outline for a user profile modal

parent 66e6ae2e
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
define(["converse-core", define(["converse-core",
"bootstrap", "bootstrap",
"tpl!chat_status_modal", "tpl!chat_status_modal",
"tpl!profile_modal",
"tpl!profile_view", "tpl!profile_view",
"tpl!status_option", "tpl!status_option",
"converse-vcard", "converse-vcard",
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
converse, converse,
bootstrap, bootstrap,
tpl_chat_status_modal, tpl_chat_status_modal,
tpl_profile_modal,
tpl_profile_view, tpl_profile_view,
tpl_status_option tpl_status_option
) { ) {
...@@ -40,6 +42,17 @@ ...@@ -40,6 +42,17 @@
{ __ } = _converse; { __ } = _converse;
_converse.ProfileModal = _converse.BootstrapModal.extend({
toHTML () {
return tpl_profile_modal(_.extend(this.model.toJSON(), {
'heading_profile': __('Your profile'),
'label_close': __('Close')
}));
},
});
_converse.ChatStatusModal = _converse.BootstrapModal.extend({ _converse.ChatStatusModal = _converse.BootstrapModal.extend({
events: { events: {
"submit form#set-xmpp-status": "onFormSubmitted", "submit form#set-xmpp-status": "onFormSubmitted",
...@@ -85,6 +98,7 @@ ...@@ -85,6 +98,7 @@
_converse.XMPPStatusView = Backbone.VDOMView.extend({ _converse.XMPPStatusView = Backbone.VDOMView.extend({
tagName: "div", tagName: "div",
events: { events: {
"click a.show-profile": "showProfileModal",
"click a.change-status": "showStatusChangeModal", "click a.change-status": "showStatusChangeModal",
"click .dropdown dd ul li a": "setStatus", "click .dropdown dd ul li a": "setStatus",
"click .logout": "logOut" "click .logout": "logOut"
...@@ -108,6 +122,13 @@ ...@@ -108,6 +122,13 @@
})); }));
}, },
showProfileModal (ev) {
if (_.isUndefined(this.profile_modal)) {
this.profile_modal = new _converse.ProfileModal({model: this.model});
}
this.profile_modal.show(ev);
},
showStatusChangeModal (ev) { showStatusChangeModal (ev) {
if (_.isUndefined(this.status_modal)) { if (_.isUndefined(this.status_modal)) {
this.status_modal = new _converse.ChatStatusModal({model: this.model}); this.status_modal = new _converse.ChatStatusModal({model: this.model});
......
<div class="modal fade" id="user-profile-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="user-profile-modal-label">{{{o.heading_profile}}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="userinfo"> <div class="userinfo">
<div class="d-flex"> <div class="d-flex">
{[ if (o.image) { ]} {[ if (o.image) { ]}
<a class="show-profile" href="#">
<img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/> <img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
</a>
{[ } ]} {[ } ]}
<span class="username w-100 align-self-center">{{{o.fullname}}}</span> <span class="username w-100 align-self-center">{{{o.fullname}}}</span>
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a> --> <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a> -->
......
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