Add status modal
This commit is contained in:
JC Brand
parent
18dd3f0ca2
commit
ad01ab3041
@ -77,7 +77,7 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="pure-form set-xmpp-status" id="set-xmpp-status">
|
||||
<ul class="xmpp-status-menu">
|
||||
<ul class="xmpp-status-menu form-group">
|
||||
<li>
|
||||
<a href="#" class="online" data-value="online">
|
||||
<span class="fa fa-circle"></span> Online
|
||||
|
||||
@ -25,6 +25,7 @@ require.config({
|
||||
"backbone.orderedlistview": "node_modules/backbone.overview/dist/backbone.orderedlistview",
|
||||
"backbone.overview": "node_modules/backbone.overview/dist/backbone.overview",
|
||||
"backbone.vdomview": "node_modules/backbone.vdomview/dist/backbone.vdomview",
|
||||
"bootstrap.native": "node_modules/bootstrap.native/dist/bootstrap-native-v4",
|
||||
"emojione": "node_modules/emojione/lib/js/emojione",
|
||||
"es6-promise": "node_modules/es6-promise/dist/es6-promise.auto",
|
||||
"eventemitter": "node_modules/otr/build/dep/eventemitter",
|
||||
@ -133,10 +134,10 @@ require.config({
|
||||
|
||||
// define module dependencies for modules not using define
|
||||
shim: {
|
||||
'awesomplete': { exports: 'Awesomplete'},
|
||||
'emojione': { exports: 'emojione'},
|
||||
'xss': {
|
||||
init: function (xss_noconflict) {
|
||||
'awesomplete': { exports: 'Awesomplete'},
|
||||
'emojione': { exports: 'emojione'},
|
||||
'xss': {
|
||||
'init': function (xss_noconflict) {
|
||||
return {
|
||||
filterXSS: window.filterXSS,
|
||||
filterCSS: window.filterCSS
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
|
||||
(function (root, factory) {
|
||||
define(["converse-core",
|
||||
"tpl!change_status_message",
|
||||
"bootstrap.native",
|
||||
"tpl!chat_status_modal",
|
||||
"tpl!profile_view",
|
||||
"tpl!choose_status",
|
||||
"tpl!status_option",
|
||||
@ -16,7 +17,8 @@
|
||||
], factory);
|
||||
}(this, function (
|
||||
converse,
|
||||
tpl_change_status_message,
|
||||
bootstrap,
|
||||
tpl_chat_status_modal,
|
||||
tpl_profile_view,
|
||||
tpl_choose_status,
|
||||
tpl_status_option
|
||||
@ -36,11 +38,47 @@
|
||||
{ __ } = _converse;
|
||||
|
||||
|
||||
_converse.ChatStatusModal = Backbone.VDOMView.extend({
|
||||
id: "modal-status-change",
|
||||
|
||||
initialize () {
|
||||
this.render().insertIntoDOM();
|
||||
this.modal = new bootstrap.Modal(this.el, {
|
||||
backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
|
||||
keyboard: true // we want to dismiss Modal on pressing Esc key
|
||||
});
|
||||
},
|
||||
|
||||
show () {
|
||||
this.modal.show();
|
||||
},
|
||||
|
||||
insertIntoDOM () {
|
||||
const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
|
||||
container_el.insertAdjacentElement('beforeEnd', this.el);
|
||||
},
|
||||
|
||||
toHTML () {
|
||||
return tpl_chat_status_modal(_.extend(this.model.toJSON(), {
|
||||
'label_away': __('Away'),
|
||||
'label_close': __('Close'),
|
||||
'label_busy': __('Busy'),
|
||||
'label_cancel': __('Cancel'),
|
||||
'label_custom_status': __('Custom status'),
|
||||
'label_offline': __('Offline'),
|
||||
'label_online': __('Online'),
|
||||
'label_save': __('Save'),
|
||||
'label_xa': __('Away for long'),
|
||||
'modal_title': __('Change chat status'),
|
||||
'placeholder_status_message': __('Personal status message')
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
_converse.XMPPStatusView = Backbone.VDOMView.extend({
|
||||
tagName: "div",
|
||||
events: {
|
||||
"click a.choose-xmpp-status": "toggleOptions",
|
||||
"click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm",
|
||||
"click a.change-status": "renderStatusChangeForm",
|
||||
"submit": "setStatusMessage",
|
||||
"click .dropdown dd ul li a": "setStatus",
|
||||
"click .logout": "logOut"
|
||||
@ -48,6 +86,7 @@
|
||||
|
||||
initialize () {
|
||||
this.model.on("change", this.render, this);
|
||||
this.status_modal = new _converse.ChatStatusModal({model: this.model});
|
||||
},
|
||||
|
||||
toHTML () {
|
||||
@ -64,24 +103,8 @@
|
||||
}));
|
||||
},
|
||||
|
||||
toggleOptions (ev) {
|
||||
ev.preventDefault();
|
||||
utils.slideInAllElements(
|
||||
_converse.root.querySelectorAll('#conversejs .contact-form-container')
|
||||
);
|
||||
utils.slideToggleElement(this.el.querySelector("#target dd ul"));
|
||||
},
|
||||
|
||||
renderStatusChangeForm (ev) {
|
||||
ev.preventDefault();
|
||||
const xmppstatus = this.el.querySelector('.xmpp-status');
|
||||
xmppstatus.parentNode.classList.add('no-border');
|
||||
xmppstatus.outerHTML = tpl_change_status_message({
|
||||
'status_message': _converse.xmppstatus.get('status_message') || '',
|
||||
'label_custom_status': __('Custom status'),
|
||||
'label_save': __('Save')
|
||||
});
|
||||
this.el.querySelector('.custom-xmpp-status').focus();
|
||||
this.status_modal.show();
|
||||
},
|
||||
|
||||
setStatusMessage (ev) {
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
<fieldset>
|
||||
<span class="input-button-group">
|
||||
<input type="text" class="custom-xmpp-status" value="{{{o.status_message}}}" placeholder="{{{o.label_custom_status}}}"/>
|
||||
<input type="submit" class="pure-button button-primary" value="{{{o.label_save}}}"/>
|
||||
</span>
|
||||
</fieldset>
|
||||
46
src/templates/chat_status_modal.html
Normal file
46
src/templates/chat_status_modal.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!-- Change status Modal -->
|
||||
<div class="modal fade" id="modal-status-change" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="changeStatusModalLabel">{{{o.modal_title}}}</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{{{o.label_close}}}">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="pure-form set-xmpp-status" id="set-xmpp-status">
|
||||
<ul class="xmpp-status-menu form-group">
|
||||
<li>
|
||||
<a href="#" class="online" data-value="online">
|
||||
<span class="fa fa-circle"></span> {{{o.label_online}}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dnd" data-value="dnd">
|
||||
<span class="fa fa-minus-circle"></span> {{{o.label_busy}}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="away" data-value="away">
|
||||
<span class="fa fa-circle-o"></span> {{{o.label_away}}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="logout" data-value="logout">
|
||||
<span class="fa fa-times-circle"></span> {{{o.label_offline}}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" value="" placeholder="{{{o.placeholder_status_message}}}">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">{{{o.label_save}}}</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.label_cancel}}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1 +1,2 @@
|
||||
<div class="row no-gutters"></div>
|
||||
<div id="converse-modals"></div>
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
<div class="d-flex xmpp-status">
|
||||
<span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}">
|
||||
<span class="fa fa-circle"></span> {{{o.status_message}}}</span>
|
||||
<a class="chatbox-btn fa fa-pencil" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
<a class="chatbox-btn change-status fa fa-pencil" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user