Add client info modal showing name and version number

CHANGES.md

@@ -5,17 +5,18 @@
 - Error `FATAL: TypeError: Cannot read property 'extend' of undefined` when using `embedded` view mode.
 - Default paths in converse-notifications.js are now relative
 - Add a button to regenerate OMEMO keys
+- Add client info modal which shows Converse's version number
 - #141 XEP-0184: Message Delivery Receipts
+- #1033 Setting show_send_button to true didn't work
 - #1188 Feature request: drag and drop file to HTTP Upload
 - #1268 Switch from SASS variables to CSS custom properties
 - #1278 Replace the default avatar with a SVG version
-- #1033 Setting show_send_button to true didn't work
-- #1306 added option `notification_delay`
 - #1305 added value 'all' for 'show_desktop_notifications' to notifiy even if converse.js is open
+- #1306 added option `notification_delay`
 - #1312 Error `unrecognized expression` in Safari
+- #1316 show version info in login dialog
 - #1318 added values 'on' and 'off' for 'trusted' option which removes the "This is a trusted device" checkbox from the login form
 - #1319 Implement sending of presences according to XEP-0319: Last User Interaction in Presence
-- #1316 show version info in login dialog
 
 ## 4.0.4 (2018-10-29)
 

css/converse.css

@@ -9502,10 +9502,11 @@ body.reset {
     left: -15px; }
   #conversejs.converse-overlayed {
     height: 3em; }
+  #conversejs .brand-heading-container {
+    text-align: center; }
   #conversejs .brand-heading {
+    font-size: 200%;
     font-family: var(--heading-font); }
-    #conversejs .brand-heading .icon-conversejs {
-      font-size: 80%; }
   #conversejs .popover {
     position: fixed; }
   #conversejs .converse-chatboxes {
@@ -10697,7 +10698,7 @@ body.reset {
   #conversejs #controlbox .controlbox-section .controlbox-heading__btn {
     cursor: pointer;
     align-self: flex-start;
-    font-size: 1.1em;
+    font-size: 1em;
     padding: 0;
     margin: 0.75em 0 0.75em 0.75em; }
     #conversejs #controlbox .controlbox-section .controlbox-heading__btn.fa-vcard {

dev.html

@@ -21,9 +21,6 @@
             <div class="converse-brand__padding"></div>
             <div class="converse-brand__heading">
                 <div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
-                <div class="converse-brand__byline">
-                    brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> 
-                </div>
             </div>
         </div>
     </div>

fullscreen.html

@@ -18,9 +18,6 @@
             <div class="converse-brand__padding"></div>
             <div class="converse-brand__heading">
                 <div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
-                <div class="converse-brand__byline">
-                    brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> 
-                </div>
             </div>
         </div>
     </div>

sass/_controlbox.scss

@@ -224,7 +224,7 @@
             .controlbox-heading__btn {
                 cursor: pointer;
                 align-self: flex-start;
-                font-size: 1.1em;
+                font-size: 1em;
                 padding: 0;
                 margin: 0.75em 0 0.75em 0.75em;
                 &.fa-vcard {

sass/_core.scss

@@ -136,11 +136,13 @@ body.reset {
         height: 3em;
     }
 
+    .brand-heading-container {
+        text-align: center;
+    }
+
     .brand-heading {
+        font-size: 200%;
         font-family: var(--heading-font);
-        .icon-conversejs {
-            font-size: 80%;
-        }
     }
 
     .popover {

src/converse-controlbox.js

@@ -213,10 +213,7 @@ converse.plugins.add('converse-controlbox', {
                         this.model.set('closed', !_converse.show_controlbox_by_default);
                     }
                 }
-                this.el.innerHTML = tpl_controlbox(_.extend(this.model.toJSON(), {
-                    'version_name': _converse.VERSION_NAME,
-                    'view_mode': _converse.view_mode
-                }));
+                this.el.innerHTML = tpl_controlbox(_.extend(this.model.toJSON()));
 
                 if (!this.model.get('closed')) {
                     this.show();

src/converse-profile.js

@@ -12,6 +12,7 @@ import _FormData from "formdata-polyfill";
 import bootstrap from "bootstrap";
 import converse from "@converse/headless/converse-core";
 import tpl_chat_status_modal from "templates/chat_status_modal.html";
+import tpl_client_info_modal from "templates/client_info_modal.html";
 import tpl_profile_modal from "templates/profile_modal.html";
 import tpl_profile_view from "templates/profile_view.html";
 import tpl_status_option from "templates/status_option.html";
@@ -185,11 +186,37 @@ converse.plugins.add('converse-profile', {
             }
         });
 
+        _converse.ClientInfoModal = _converse.BootstrapModal.extend({
+
+            toHTML () {
+                return tpl_client_info_modal(
+                    _.extend(
+                        this.model.toJSON(),
+                        this.model.vcard.toJSON(), {
+                            '__': __,
+                            'modal_title': __('About'),
+                            'version_name': _converse.VERSION_NAME,
+                            'first_subtitle': __( '%1$s Open Source %2$s XMPP chat client brought to you by %3$s Opkode %2$s',
+                                '<a target="_blank" rel="nofollow" href="https://conversejs.org">',
+                                '</a>',
+                                '<a target="_blank" rel="nofollow" href="https://opkode.com">'
+                            ),
+                            'second_subtitle': __('%1$s Translate %2$s it into your own language',
+                                '<a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">',
+                                '</a>'
+                            )
+                        }
+                    )
+                );
+            }
+        });
+
         _converse.XMPPStatusView = _converse.VDOMViewWithAvatar.extend({
             tagName: "div",
             events: {
                 "click a.show-profile": "showProfileModal",
                 "click a.change-status": "showStatusChangeModal",
+                "click .show-client-info": "showClientInfoModal",
                 "click .logout": "logOut"
             },
 
@@ -212,6 +239,7 @@ converse.plugins.add('converse-profile', {
                     'title_change_settings': __('Change settings'),
                     'title_change_status': __('Click to change your chat status'),
                     'title_log_out': __('Log out'),
+                    'info_details': __('Show details about this chat client'),
                     'title_your_profile': __('Your profile')
                 }));
             },
@@ -234,6 +262,13 @@ converse.plugins.add('converse-profile', {
                 this.status_modal.show(ev);
             },
 
+            showClientInfoModal(ev) {
+                if (_.isUndefined(this.client_info_modal)) {
+                    this.client_info_modal = new _converse.ClientInfoModal({model: this.model});
+                }
+                this.client_info_modal.show(ev);
+            },
+
             logOut (ev) {
                 ev.preventDefault();
                 const result = confirm(__("Are you sure you want to log out?"));

src/headless/converse-core.js

@@ -401,8 +401,6 @@ _converse.initialize = function (settings, callback) {
          * Parameters:
          *  (String) stat: The user's chat status
          */
-        /* Send out a Chat Status Notification (XEP-0352) */
-        // XXX if (converse.features[Strophe.NS.CSI] || true) {
         _converse.api.send($build(stat, {xmlns: Strophe.NS.CSI}));
         _converse.inactive = (stat === _converse.INACTIVE) ? true : false;
     };
@@ -414,7 +412,7 @@ _converse.initialize = function (settings, callback) {
         }
         if (!_converse.connection.authenticated) {
             // We can't send out any stanzas when there's no authenticated connection.
-            // converse can happen when the connection reconnects.
+            // This can happen when the connection reconnects.
             return;
         }
         if (_converse.inactive) {
@@ -476,7 +474,7 @@ _converse.initialize = function (settings, callback) {
             return;
         }
         _converse.idle_seconds = 0
-        _converse.auto_changed_status = false; // Was the user's status changed by _converse.js?
+        _converse.auto_changed_status = false; // Was the user's status changed by Converse?
         window.addEventListener('click', _converse.onUserActivity);
         window.addEventListener('focus', _converse.onUserActivity);
         window.addEventListener('keypress', _converse.onUserActivity);

src/templates/client_info_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">
+                <div class="container brand-heading-container">
+                    <h6 class="brand-heading"><i class="icon-conversejs"></i>Converse</h6>
+                    <p class="brand-subtitle">{{{o.version_name}}}</p>
+                    <p class="brand-subtitle">{{o.first_subtitle}}</a> </p>
+                    <p class="brand-subtitle">{{o.second_subtitle}}</p>
+                <div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/templates/controlbox.html

@@ -5,9 +5,4 @@
         {[ } ]}
     </div>
     <div class="controlbox-panes"></div>
-    {[ if (o.view_mode != 'fullscreen') { ]}
-        <div class="controlbox-subtitle">
-            {{{o.version_name}}}
-        </div>
-    {[ } ]}
 </div>

src/templates/profile_view.html

 <div class="userinfo controlbox-padded">
-<div class="profile d-flex">
+<div class="controlbox-section profile d-flex">
     <a class="show-profile" href="#">
         <canvas alt="o.__('Your avatar')" class="avatar align-self-center" height="40" width="40"></canvas>
     </a>
     <span class="username w-100 align-self-center">{{{o.fullname}}}</span>
-    <!-- <a class="chatbox-btn fa fa-id-card align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a> -->
-    <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#settingsModal"></a> -->
+    <a class="controlbox-heading__btn show-client-info fa fa-info-circle align-self-center" title="{{{o.info_details}}}"></a>
     {[ if (o._converse.allow_logout) { ]}
-        <a class="chatbox-btn logout fa fa-sign-out-alt align-self-center" title="{{{o.title_log_out}}}"></a>
+        <a class="controlbox-heading__btn logout fa fa-sign-out-alt align-self-center" title="{{{o.title_log_out}}}"></a>
     {[ } ]}
 </div>
 <div class="d-flex xmpp-status">
@@ -18,6 +17,6 @@
             {[ if (o.chat_status === 'away') { ]} fa fa-circle chat-status chat-status--away{[ } ]}
             {[ if (o.chat_status === 'xa') { ]} far fa-circle chat-status chat-status--xa {[ } ]}
             {[ if (o.chat_status === 'offline') { ]} fa fa-circle chat-status chat-status--offline{[ } ]}"></span> {{{o.status_message}}}</span>
-    <a class="chatbox-btn change-status fa fa-pencil-alt" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
+    <a class="controlbox-heading__btn change-status fa fa-pencil-alt" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
 </div>
 </div>