Work on the status modal

css/converse.css

@@ -5013,6 +5013,11 @@ body.reset {
   #conversejs .button-cancel {
     color: white;
     background-color: #777; }
+  #conversejs form .clear-input {
+    position: absolute;
+    right: 0.2em;
+    cursor: pointer;
+    font-size: 0.75rem; }
   #conversejs form.pure-form.converse-form {
     background: white;
     padding: 1em; }
@@ -5628,10 +5633,22 @@ body.reset {
     flex-direction: column; }
     #conversejs:not(.fullscreen) > .row.no-gutters {
       margin: -1em; } }
+#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
+  color: #3AA569; }
+#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
+  color: #E77051; }
+#conversejs .set-xmpp-status .fa-dot-circle-o, #conversejs .xmpp-status .fa-dot-circle-o, #conversejs .roster-contacts .fa-dot-circle-o {
+  color: #E7A151; }
+#conversejs .set-xmpp-status .fa-circle-o, #conversejs .xmpp-status .fa-circle-o, #conversejs .roster-contacts .fa-circle-o {
+  color: #A8ABA1; }
+#conversejs .set-xmpp-status .fa-times-circle, #conversejs .xmpp-status .fa-times-circle, #conversejs .roster-contacts .fa-times-circle {
+  color: #A8ABA1; }
+#conversejs #converse-modals .set-xmpp-status {
+  margin: 1em; }
+  #conversejs #converse-modals .set-xmpp-status .custom-control-label {
+    margin-top: 0.25em; }
 #conversejs #controlbox {
   margin-right: 1.5em; }
-  #conversejs #controlbox .pure-form.converse-form {
-    padding: 0; }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
     overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
@@ -5869,54 +5886,6 @@ body.reset {
     cursor: pointer;
     display: block;
     padding: 4px 7px 0 5px; }
-  #conversejs #controlbox #select-xmpp-status {
-    display: none;
-    float: right;
-    margin-right: 0.5em; }
-  #conversejs #controlbox .fancy-dropdown {
-    border: 1px solid #B1BFC4;
-    height: 25px;
-    border-radius: 5px;
-    text-align: left; }
-    #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
-    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
-      line-height: 25px;
-      text-shadow: 0 1px 0 #ffffff;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block; }
-      #conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
-      #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
-        color: #206485; }
-    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
-      padding: 0 0.5em;
-      width: 100%; }
-    #conversejs #controlbox .fancy-dropdown.no-border {
-      border: 0; }
-  #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
-    padding: 0 0.5em; }
-  #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
-    line-height: 25px;
-    float: right;
-    clear: right;
-    width: 12px;
-    color: #578EA9; }
-    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
-      color: #206485; }
-  #conversejs #controlbox #fancy-xmpp-status-select fieldset {
-    padding: 0;
-    margin-top: -1px; }
-  #conversejs #controlbox #fancy-xmpp-status-select input {
-    height: 26px;
-    width: -webkit-calc(100% - 40px);
-    width: calc(100% - 40px);
-    padding: 0 0 0 0.5em; }
-  #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
-    height: 26px;
-    width: 40px;
-    padding: 1px;
-    float: right; }
   #conversejs #controlbox .controlbox-panes {
     height: 100%;
     overflow-y: auto;
@@ -5955,24 +5924,6 @@ body.reset {
       width: 100%; }
     #conversejs #controlbox .add-xmpp-contact button {
       width: 100%; }
-  #conversejs #controlbox .xmpp-status-menu {
-    text-align: left;
-    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
-    #conversejs #controlbox .xmpp-status-menu.collapsed {
-      box-shadow: none; }
-    #conversejs #controlbox .xmpp-status-menu li {
-      padding: 2px; }
-      #conversejs #controlbox .xmpp-status-menu li a {
-        width: 100%;
-        padding: 0.3em; }
-  #conversejs #controlbox .xmpp-status-menu li a.logout,
-  #conversejs #controlbox .xmpp-status-menu li a.logout span {
-    color: #D24E2B; }
-  #conversejs #controlbox .set-xmpp-status {
-    background: none;
-    margin: 1em 0 0.5em 0em; }
-    #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
-      z-index: 22; }
 #conversejs .toggle-controlbox {
   background-color: #578EA9;
   border-top-left-radius: 5px;
@@ -5984,14 +5935,6 @@ body.reset {
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
-#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
-  color: #33925d; }
-#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
-  color: #E77051; }
-#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
-  color: #578EA9; }
-#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
-  color: #818479; }
 
 @media screen and (max-width: 767px) {
   #conversejs #controlbox .box-flyout {
@@ -6049,11 +5992,6 @@ body.reset {
     #conversejs #converse-roster .roster-filter-form .roster-filter {
       width: 100%;
       margin: 0.2em; }
-    #conversejs #converse-roster .roster-filter-form .clear-roster-filter {
-      position: absolute;
-      right: 0.2em;
-      cursor: pointer;
-      font-size: 0.75rem; }
     #conversejs #converse-roster .roster-filter-form .state-type {
       font-size: calc(14px - 2px);
       height: 25px;

css/inverse.css

@@ -5013,6 +5013,11 @@ body.reset {
   #conversejs .button-cancel {
     color: white;
     background-color: #777; }
+  #conversejs form .clear-input {
+    position: absolute;
+    right: 0.2em;
+    cursor: pointer;
+    font-size: 0.75rem; }
   #conversejs form.pure-form.converse-form {
     background: white;
     padding: 1em; }
@@ -5700,10 +5705,22 @@ body {
 @media screen and (max-width: 767px) {
   #conversejs.fullscreen .chatbox {
     width: calc(100% - 50px); } }
+#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
+  color: #3AA569; }
+#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
+  color: #E77051; }
+#conversejs .set-xmpp-status .fa-dot-circle-o, #conversejs .xmpp-status .fa-dot-circle-o, #conversejs .roster-contacts .fa-dot-circle-o {
+  color: #E7A151; }
+#conversejs .set-xmpp-status .fa-circle-o, #conversejs .xmpp-status .fa-circle-o, #conversejs .roster-contacts .fa-circle-o {
+  color: #A8ABA1; }
+#conversejs .set-xmpp-status .fa-times-circle, #conversejs .xmpp-status .fa-times-circle, #conversejs .roster-contacts .fa-times-circle {
+  color: #A8ABA1; }
+#conversejs #converse-modals .set-xmpp-status {
+  margin: 1em; }
+  #conversejs #converse-modals .set-xmpp-status .custom-control-label {
+    margin-top: 0.25em; }
 #conversejs #controlbox {
   margin-right: 1.5em; }
-  #conversejs #controlbox .pure-form.converse-form {
-    padding: 0; }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
     overflow-y: auto; }
   #conversejs #controlbox form.search-xmpp-contact {
@@ -5941,54 +5958,6 @@ body {
     cursor: pointer;
     display: block;
     padding: 4px 7px 0 5px; }
-  #conversejs #controlbox #select-xmpp-status {
-    display: none;
-    float: right;
-    margin-right: 0.5em; }
-  #conversejs #controlbox .fancy-dropdown {
-    border: 1px solid #B1BFC4;
-    height: 30px;
-    border-radius: 5px;
-    text-align: left; }
-    #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
-    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
-      line-height: 30px;
-      text-shadow: 0 1px 0 #ffffff;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block; }
-      #conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
-      #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
-        color: #206485; }
-    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
-      padding: 0 0.5em;
-      width: 100%; }
-    #conversejs #controlbox .fancy-dropdown.no-border {
-      border: 0; }
-  #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
-    padding: 0 0.5em; }
-  #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
-    line-height: 30px;
-    float: right;
-    clear: right;
-    width: 12px;
-    color: #578EA9; }
-    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
-      color: #206485; }
-  #conversejs #controlbox #fancy-xmpp-status-select fieldset {
-    padding: 0;
-    margin-top: -1px; }
-  #conversejs #controlbox #fancy-xmpp-status-select input {
-    height: 31px;
-    width: -webkit-calc(100% - 40px);
-    width: calc(100% - 40px);
-    padding: 0 0 0 0.5em; }
-  #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
-    height: 31px;
-    width: 40px;
-    padding: 1px;
-    float: right; }
   #conversejs #controlbox .controlbox-panes {
     height: 100%;
     overflow-y: auto;
@@ -6027,24 +5996,6 @@ body {
       width: 100%; }
     #conversejs #controlbox .add-xmpp-contact button {
       width: 100%; }
-  #conversejs #controlbox .xmpp-status-menu {
-    text-align: left;
-    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
-    #conversejs #controlbox .xmpp-status-menu.collapsed {
-      box-shadow: none; }
-    #conversejs #controlbox .xmpp-status-menu li {
-      padding: 2px; }
-      #conversejs #controlbox .xmpp-status-menu li a {
-        width: 100%;
-        padding: 0.3em; }
-  #conversejs #controlbox .xmpp-status-menu li a.logout,
-  #conversejs #controlbox .xmpp-status-menu li a.logout span {
-    color: #D24E2B; }
-  #conversejs #controlbox .set-xmpp-status {
-    background: none;
-    margin: 1em 0 0.5em 0em; }
-    #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
-      z-index: 22; }
 #conversejs .toggle-controlbox {
   background-color: #578EA9;
   border-top-left-radius: 5px;
@@ -6056,14 +6007,6 @@ body {
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
-#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
-  color: #33925d; }
-#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
-  color: #E77051; }
-#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
-  color: #578EA9; }
-#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
-  color: #818479; }
 
 @media screen and (max-width: 767px) {
   #conversejs #controlbox .box-flyout {
@@ -6177,11 +6120,6 @@ body {
     #conversejs #converse-roster .roster-filter-form .roster-filter {
       width: 100%;
       margin: 0.2em; }
-    #conversejs #converse-roster .roster-filter-form .clear-roster-filter {
-      position: absolute;
-      right: 0.2em;
-      cursor: pointer;
-      font-size: 0.75rem; }
     #conversejs #converse-roster .roster-filter-form .state-type {
       font-size: calc(16px - 2px);
       height: 30px;

mockup/chatbox.html

@@ -119,7 +119,7 @@
                 </div>
             </div>
         </div>
-        <div class="modals"></div>
+        <div id="converse-modals" class="modals"></div>
     </div>
 
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>

mockup/chatroom.html

@@ -121,7 +121,7 @@
                 </div>
             </div>
         </div>
-    <div class="modals"></div>
+        <div id="converse-modals" class="modals"></div>
     </div>
 
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>

mockup/converse.html

@@ -257,7 +257,7 @@
                     </div>
                 </div>
             </div>
-            <div class="modals"></div>
+            <div id="converse-modals" class="modals"></div>
         </div>
     </div>
 </body>

mockup/modals.html

@@ -75,40 +75,40 @@
                     <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> Online
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="dnd" data-value="dnd">
-                                <span class="fa fa-minus-circle"></span> Busy
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="away" data-value="away">
-                                <span class="fa fa-circle-o"></span> Away
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="logout" data-value="logout">
-                                <span class="fa fa-times-circle"></span> Offline
-                            </a>
-                        </li>
-                    </ul>
-
+            <form class="set-xmpp-status" id="set-xmpp-status">
+                <div class="modal-body">
                     <div class="form-group">
+                        <div class="custom-control custom-radio">
+                            <input type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-online">
+                                <span class="fa fa-circle"></span>&nbsp;Online</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                            <input type="radio" id="radio-busy" value="busy" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-busy">
+                                <span class="fa fa-minus-circle"></span>&nbsp;Busy</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                            <input type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-away">
+                                <span class="fa fa-dot-circle-o"></span>&nbsp;Away</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                            <input type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-xa">
+                                <span class="fa fa-circle-o"></span>&nbsp;Away for long</label>
+                        </div>
+                    </div>
+
+                    <div class="btn-group w-100">
                         <input type="text" class="form-control" value="" placeholder="Personal status message">
+                        <span class="clear-input fa fa-times"></span>
                     </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary">Save</button>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-            </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
         </div>
     </div>
 </div>

sass/_controlbox.scss

@@ -1,10 +1,35 @@
 #conversejs {
-    #controlbox {
-        margin-right: 3*$chat-gutter;
 
-        .pure-form.converse-form {
-            padding: 0;
+    .set-xmpp-status, .xmpp-status, .roster-contacts {
+        .fa-circle {
+            color: $green;
+        }
+        .fa-minus-circle {
+            color: $red
+        }
+        .fa-dot-circle-o {
+            color: $orange,
+        }
+        .fa-circle-o {
+            color: $subdued-color;
+        }
+        .fa-times-circle {
+            color: $subdued-color;
         }
+    }
+
+
+    #converse-modals {
+        .set-xmpp-status {
+            margin: 1em;
+            .custom-control-label {
+                margin-top: 0.25em;
+            }
+        }
+    }
+
+    #controlbox {
+        margin-right: 3*$chat-gutter;
 
         &.logged-out {
             .box-flyout {
@@ -114,13 +139,13 @@
             }
         }
 
-		#login-dialog {
+        #login-dialog {
             flex-direction: column;
 
-			.brand-heading {
+            .brand-heading {
                 color: $global-background-color;
             }
-		}
+        }
 
         .toggle-register-login {
             font-weight: bold;
@@ -328,70 +353,6 @@
             }
         }
 
-        #select-xmpp-status {
-            display: none;
-            float: right;
-            margin-right: 0.5em;
-        }
-
-        .fancy-dropdown {
-            border: 1px solid $light-background-border-color;
-            height: $controlbox-dropdown-height;
-            border-radius: $button-border-radius;
-            text-align: left;
-
-            .choose-xmpp-status,
-            .toggle-xmpp-contact-form {
-                line-height: $controlbox-dropdown-height;
-                text-shadow: 0 1px 0 #ffffff;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                display: inline-block;
-                &:hover {
-                    color: $dark-link-color;
-                }
-            }
-            .toggle-xmpp-contact-form {
-                padding: 0 0.5em;
-                width: 100%;
-            }
-            &.no-border {
-                border: 0;
-            }
-
-        }
-        #fancy-xmpp-status-select {
-            .xmpp-status {
-                padding: 0 0.5em;
-            }
-            a.change-xmpp-status-message {
-                line-height: $controlbox-dropdown-height;
-                float: right;
-                clear: right;
-                width: 12px;
-                color: $link-color;
-                &:hover {
-                    color: $dark-link-color;
-                }
-            }
-            fieldset {
-                padding: 0;
-                margin-top: -1px;
-            }
-            input {
-                height: $controlbox-dropdown-height + 1px;
-                @include calc(width, '100% - 40px');
-                padding: 0 0 0 0.5em;
-            }
-            input[type=submit] {
-                height: $controlbox-dropdown-height + 1px;
-                width: 40px;
-                padding: 1px;
-                float: right;
-            }
-        }
-
         .controlbox-panes {
             height: 100%;
             overflow-y: auto;
@@ -447,33 +408,6 @@
                 width: 100%;
             }
         }
-
-        .xmpp-status-menu {
-            text-align: left;
-            box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
-            &.collapsed {
-                box-shadow: none;
-            }
-            li {
-                padding: 2px;
-                a {
-                    width: 100%;
-                    padding: 0.3em;
-                }
-            }
-        }
-        .xmpp-status-menu li a.logout,
-        .xmpp-status-menu li a.logout span {
-            color: $warning-color;
-        }
-
-        .set-xmpp-status {
-            background: none;
-            margin: 1em 0 0.5em 0em;
-            .dropdown dd ul {
-                z-index: 22;
-            }
-        }
     }
 
     .toggle-controlbox {
@@ -489,21 +423,6 @@
             color: $inverse-link-color;
         }
     }
-
-    .xmpp-status, .xmpp-status-menu {
-        .online, .fa-circle {
-            color: darken($green, 5%);
-        }
-        .dnd {
-            color: $red
-        }
-        .away {
-            color: $light-blue;
-        }
-        .logout, .offline {
-            color: $gray-color;
-        }
-    }
 }
 
 @media screen and (max-width: 767px) {

sass/_core.scss

@@ -340,6 +340,13 @@ body.reset {
     }
 
     form {
+        .clear-input {
+            position: absolute;
+            right: 0.2em;
+            cursor: pointer;
+            font-size: 0.75rem;
+        }
+
         &.pure-form.converse-form {
             background: white;
             padding: 1em;

sass/_roster.scss

@@ -44,12 +44,6 @@
             width: 100%;
             margin: 0.2em;
         }
-        .clear-roster-filter {
-            position: absolute;
-            right: 0.2em;
-            cursor: pointer;
-            font-size: 0.75rem;
-        }
         .state-type {
             font-size: calc(#{$font-size} - 2px);
             height: $controlbox-dropdown-height;

src/converse-profile.js

@@ -11,7 +11,6 @@
             "bootstrap.native",
             "tpl!chat_status_modal",
             "tpl!profile_view",
-            "tpl!choose_status",
             "tpl!status_option",
             "converse-vcard"
     ], factory);
@@ -20,12 +19,12 @@
             bootstrap,
             tpl_chat_status_modal,
             tpl_profile_view,
-            tpl_choose_status,
             tpl_status_option
         ) {
     "use strict";
 
     const { Strophe, Backbone, Promise, utils, _, moment } = converse.env;
+    const u = converse.env.utils;
 
 
     converse.plugins.add('converse-profile', {
@@ -41,7 +40,8 @@
             _converse.ChatStatusModal = Backbone.VDOMView.extend({
                 id: "modal-status-change",
                 events: {
-                    "submit.set-xmpp-status .logout": "onFormSubmitted"
+                    "submit form#set-xmpp-status": "onFormSubmitted",
+                    "click .clear-input": "clearStatusMessage"
                 },
 
                 initialize () {
@@ -52,15 +52,6 @@
                     });
                 },
 
-                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'),
@@ -77,17 +68,40 @@
                     }));
                 },
 
+                insertIntoDOM () {
+                    const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
+                    container_el.insertAdjacentElement('beforeEnd', this.el);
+                },
+
+                show () {
+                    this.render();
+                    this.modal.show();
+                },
+
+                clearStatusMessage (ev) {
+                    if (ev && ev.preventDefault) {
+                        ev.preventDefault();
+                        u.hideElement(this.el.querySelector('.clear-input'));
+                    }
+                    const roster_filter = this.el.querySelector('input[name="status_message"]');
+                    roster_filter.value = '';
+                },
+
                 onFormSubmitted (ev) {
                     ev.preventDefault();
-                    debugger;
-                    this.model.save('status_message', ev.target.querySelector('input').value);
+                    const data = new FormData(ev.target);
+                    this.model.save({
+                        'status_message': data.get('status_message'),
+                        'status': data.get('chat_status')
+                    });
+                    this.modal.hide();
                 }
             });
 
             _converse.XMPPStatusView = Backbone.VDOMView.extend({
                 tagName: "div",
                 events: {
-                    "click a.change-status": this.status_modal.show.bind(this.status_modal),
+                    "click a.change-status": "showStatusChangeModal",
                     "click .dropdown dd ul li a": "setStatus",
                     "click .logout": "logOut"
                 },
@@ -111,6 +125,10 @@
                     }));
                 },
 
+               showStatusChangeModal (ev) {
+                    this.status_modal.show();
+                },
+
                 logOut (ev) {
                     ev.preventDefault();
                     const result = confirm(__("Are you sure you want to log out?"));

src/converse-rosterview.js

@@ -134,7 +134,7 @@
                 events: {
                     "keydown .roster-filter": "liveFilter",
                     "submit form.roster-filter-form": "submitFilter",
-                    "click .clear-roster-filter": "clearFilter",
+                    "click .clear-input": "clearFilter",
                     "click .filter-by span": "changeTypeFilter",
                     "change .state-type": "changeChatStateFilter"
                 },
@@ -241,7 +241,7 @@
                 clearFilter (ev) {
                     if (ev && ev.preventDefault) {
                         ev.preventDefault();
-                        u.hideElement(this.el.querySelector('.clear-roster-filter'));
+                        u.hideElement(this.el.querySelector('.clear-input'));
                     }
                     const roster_filter = this.el.querySelector('.roster-filter');
                     roster_filter.value = '';
@@ -336,7 +336,9 @@
                     const chat_status = item.get('chat_status') || 'offline';
                     if (chat_status === 'online') {
                         status_icon = 'fa-circle';
-                    } else if (chat_status === 'away' || chat_status === 'xa') {
+                    } else if (chat_status === 'away') {
+                        status_icon = 'fa-dot-circle-o';
+                    } else if (chat_status === 'xa') {
                         status_icon = 'fa-circle-o';
                     } else if (chat_status === 'dnd') {
                         status_icon = 'fa-minus-circle';

src/templates/chat_status_modal.html

@@ -8,39 +8,44 @@
                     <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>
+            <form class="set-xmpp-status" id="set-xmpp-status">
+                <div class="modal-body">
                     <div class="form-group">
-                        <input type="text" class="form-control" value="" placeholder="{{{o.placeholder_status_message}}}">
+                        <div class="custom-control custom-radio">
+                            <input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
+                                   type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-online">
+                                <span class="fa fa-circle"></span>&nbsp;{{{o.label_online}}}</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                            <input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]}
+                                   type="radio" id="radio-busy" value="busy" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-busy">
+                                <span class="fa fa-minus-circle"></span>&nbsp;{{{o.label_busy}}}</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                            <input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]}
+                                   type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-away">
+                                <span class="fa fa-dot-circle-o"></span>&nbsp;{{{o.label_away}}}</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                            <input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]}
+                                   type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
+                            <label class="custom-control-label" for="radio-xa">
+                                <span class="fa fa-circle-o"></span>&nbsp;{{{o.label_xa}}}</label>
+                        </div>
                     </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 class="btn-group w-100">
+                        <input name="status_message" type="text" class="form-control" 
+                               value="{{{o.status_message}}}" placeholder="{{{o.placeholder_status_message}}}">
+                        <span class="clear-input fa fa-times {[ if (!o.status_message) { ]} hidden {[ } ]}"></span>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">{{{o.label_save}}}</button>
+                </div>
+            </form>
         </div>
     </div>
 </div>

src/templates/choose_status.html

@@ -1,4 +0,0 @@
-<dl id="target" class="dropdown">
-    <dt id="fancy-xmpp-status-select" class="fancy-dropdown"></dt>
-    <dd><ul class="xmpp-status-menu"></ul></dd>
-</dl>

src/templates/profile_view.html

@@ -10,7 +10,12 @@
 </div>
 <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>
+        <span class="fa
+            {[ if (o.chat_status === 'online') { ]} fa-circle {[ } ]}
+            {[ if (o.chat_status === 'busy') { ]} fa-minus-circle {[ } ]}
+            {[ if (o.chat_status === 'away') { ]} fa-dot-circle-o {[ } ]}
+            {[ if (o.chat_status === 'xa') { ]} fa-circle-o {[ } ]}
+            {[ if (o.chat_status === 'offline') { ]} fa-times-circle {[ } ]}"></span> {{{o.status_message}}}</span>
     <a class="chatbox-btn change-status fa fa-pencil" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
 </div>
 </div>

src/templates/roster_filter.html

@@ -4,7 +4,7 @@
             <input value="{{{o.filter_text}}}"
                 class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
                 placeholder="{{{o.placeholder}}}">
-            <span class="clear-roster-filter fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
+            <span class="clear-input fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
         </div>
 
         <select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}">