Add status modal

mockup/modals.html

@@ -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

src/config.js

@@ -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",
@@ -136,7 +137,7 @@ require.config({
         'awesomplete':              { exports: 'Awesomplete'},
         'emojione':                 { exports: 'emojione'},
         'xss':  {
-            init: function (xss_noconflict) {
+            'init': function (xss_noconflict) {
                 return {
                     filterXSS: window.filterXSS,
                     filterCSS: window.filterCSS

src/converse-profile.js

@@ -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) {

src/templates/change_status_message.html

-<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>

src/templates/chat_status_modal.html

+<!-- 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">&times;</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>

src/templates/chatboxes.html

 <div class="row no-gutters"></div>
+<div id="converse-modals"></div>

src/templates/profile_view.html

@@ -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>