From b32a8c5391eeb3e547a1ff9f59e8aec2130374a1 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 8 May 2017 21:06:33 +0200
Subject: [PATCH] Update and simplify HTML/CSS for choosing status

Should also fix some of the issues mentioned in #847
---
 css/converse.css                         | 49 +++++++++------------
 sass/_controlbox.scss                    | 56 ++++++++++--------------
 spec/controlbox.js                       |  6 +--
 src/converse-controlbox.js               |  5 +--
 src/templates/change_status_message.html |  2 -
 src/templates/contacts_panel.html        | 26 +++++------
 6 files changed, 61 insertions(+), 83 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 57e691d2d..9955e8e4a 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1937,9 +1937,8 @@
   #conversejs #controlbox .dropdown {
     /* Custom addition for CSP */ }
     #conversejs #controlbox .dropdown a {
-      width: 148px;
-      display: inline-block;
-      line-height: 25px; }
+      width: 143px;
+      display: inline-block; }
     #conversejs #controlbox .dropdown li {
       list-style: none;
       padding-left: 0; }
@@ -1969,22 +1968,6 @@
     display: none;
     float: right;
     margin-right: 0.5em; }
-  #conversejs #controlbox #set-custom-xmpp-status {
-    float: left;
-    padding: 0; }
-    #conversejs #controlbox #set-custom-xmpp-status fieldset {
-      padding: 0;
-      margin-top: -1px; }
-    #conversejs #controlbox #set-custom-xmpp-status input {
-      height: 26px;
-      width: -webkit-calc(100% - 40px);
-      width: calc(100% - 40px);
-      padding: 0 0 0 0.5em; }
-    #conversejs #controlbox #set-custom-xmpp-status input[type=submit] {
-      height: 26px;
-      width: 40px;
-      padding: 1px;
-      float: right; }
   #conversejs #controlbox #controlbox-tabs {
     text-align: center;
     display: inline;
@@ -2025,8 +2008,7 @@
     height: 25px;
     border-radius: 4px;
     text-align: left;
-    padding: 0;
-    padding-left: 0.3em; }
+    padding: 0.3em 0.3em 0 0.3em; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
     #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
       text-shadow: 0 1px 0 #ffffff;
@@ -2036,17 +2018,28 @@
       display: inline-block; }
     #conversejs #controlbox .fancy-dropdown.no-border {
       border: 0; }
+  #conversejs #controlbox .xmpp-status {
+    padding: 0.3em 0.3em 0 0.3em; }
   #conversejs #controlbox #fancy-xmpp-status-select {
-    padding-left: 0; }
-    #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
-      margin-left: 0.3em;
-      display: inline; }
+    padding: 0em; }
     #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
       float: right;
       clear: right;
       width: 12px;
-      margin-right: 0.3em;
       color: #2A9D8F; }
+    #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-pane {
     background-color: white;
     border-bottom-left-radius: 4px;
@@ -2075,7 +2068,7 @@
     overflow-y: hidden; }
   #conversejs #controlbox .add-xmpp-contact {
     background: none;
-    padding: 1em; }
+    padding: 1em 0.5em; }
     #conversejs #controlbox .add-xmpp-contact input {
       margin: 0 0 1rem;
       width: 100%; }
@@ -2088,7 +2081,7 @@
       padding: 2px; }
       #conversejs #controlbox .xmpp-status-menu li a {
         width: 100%;
-        padding: 0 8px; }
+        padding: 0.3em; }
   #conversejs #controlbox .xmpp-status-menu li a.logout,
   #conversejs #controlbox .xmpp-status-menu li a.logout span {
     color: #D24E2B; }
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index fabcbeafb..f860d5624 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -176,9 +176,8 @@
 
         .dropdown {
             a {
-                width: 148px;
+                width: 143px;
                 display: inline-block;
-                line-height: $controlbox-dropdown-height;
             }
             li {
                 list-style: none;
@@ -204,6 +203,7 @@
             /* Custom addition for CSP */
             dd.search-xmpp {
                 display: none;
+                width: 100%;
             }
 
             dd.search-xmpp ul {
@@ -225,26 +225,6 @@
             margin-right: 0.5em;
         }
 
-        #set-custom-xmpp-status {
-            float: left;
-            padding: 0;
-            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-tabs {
             text-align: center;
             display: inline;
@@ -293,8 +273,7 @@
             height: $controlbox-dropdown-height;
             border-radius: $chatbox-border-radius;
             text-align: left;
-            padding: 0;
-            padding-left: 0.3em;
+            padding: 0.3em 0.3em 0 0.3em;
             .choose-xmpp-status,
             .toggle-xmpp-contact-form {
                 text-shadow: 0 1px 0 #ffffff;
@@ -308,19 +287,32 @@
             }
 
         }
+        .xmpp-status {
+            padding: 0.3em 0.3em 0 0.3em;
+        }
         #fancy-xmpp-status-select {
-            padding-left: 0;
-            .xmpp-status {
-                margin-left: 0.3em;
-                display: inline;
-            }
+            padding: 0em;
             a.change-xmpp-status-message {
                 float: right;
                 clear: right;
                 width: 12px;
-                margin-right: 0.3em;
                 color: $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-pane {
@@ -357,7 +349,7 @@
 
         .add-xmpp-contact {
             background: none;
-            padding: 1em;
+            padding: 1em 0.5em;
             input {
                 margin: 0 0 1rem;
                 width: 100%;
@@ -374,7 +366,7 @@
                 padding: 2px;
                 a {
                     width: 100%;
-                    padding: 0 8px;
+                    padding: 0.3em;
                 }
             }
         }
diff --git a/spec/controlbox.js b/spec/controlbox.js
index e6bb21e77..1e6b99763 100644
--- a/spec/controlbox.js
+++ b/spec/controlbox.js
@@ -79,11 +79,9 @@
                 view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
                 view.$el.find('a.change-xmpp-status-message').click();
                 expect(view.renderStatusChangeForm).toHaveBeenCalled();
-                // The async testing here is used only to provide time for
-                // visual feedback
                 var msg = 'I am happy';
-                view.$el.find('form input.custom-xmpp-status').val(msg);
-                view.$el.find('form#set-custom-xmpp-status').submit();
+                view.$el.find('input.custom-xmpp-status').val(msg);
+                view.$el.submit();
                 expect(view.setStatusMessage).toHaveBeenCalled();
                 expect(_converse.emit).toHaveBeenCalledWith('statusMessageChanged', msg);
                 expect(view.$el.find('a.choose-xmpp-status').hasClass('online')).toBe(true);
diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js
index f4b9e8eeb..eac943a4f 100644
--- a/src/converse-controlbox.js
+++ b/src/converse-controlbox.js
@@ -459,12 +459,11 @@
 
 
             _converse.XMPPStatusView = Backbone.View.extend({
-                el: "span#xmpp-status-holder",
-
+                el: "form#set-xmpp-status",
                 events: {
                     "click a.choose-xmpp-status": "toggleOptions",
                     "click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm",
-                    "submit #set-custom-xmpp-status": "setStatusMessage",
+                    "submit": "setStatusMessage",
                     "click .dropdown dd ul li a": "setStatus"
                 },
 
diff --git a/src/templates/change_status_message.html b/src/templates/change_status_message.html
index 4d12691b1..9a17ab2ae 100644
--- a/src/templates/change_status_message.html
+++ b/src/templates/change_status_message.html
@@ -1,8 +1,6 @@
-<form id="set-custom-xmpp-status" class="pure-form">
 <fieldset>
     <span class="input-button-group">
         <input type="text" class="custom-xmpp-status" value="{{{status_message}}}" placeholder="{{{label_custom_status}}}"/>
         <input type="submit" class="pure-button button-primary" value="{{{label_save}}}"/>
     </span>
 </fieldset>
-</form>
diff --git a/src/templates/contacts_panel.html b/src/templates/contacts_panel.html
index 0830efe47..dd753de26 100644
--- a/src/templates/contacts_panel.html
+++ b/src/templates/contacts_panel.html
@@ -1,15 +1,13 @@
-<form class="pure-form set-xmpp-status" action="" method="post">
-    <span id="xmpp-status-holder">
-        <select id="select-xmpp-status">
-            <option value="online">{{{label_online}}}</option>
-            <option value="dnd">{{{label_busy}}}</option>
-            <option value="away">{{{label_away}}}</option>
-            {[ if (include_offline_state)  { ]}
-            <option value="offline">{{{label_offline}}}</option>
-            {[ } ]}
-            {[ if (allow_logout)  { ]}
-            <option value="logout">{{{label_logout}}}</option>
-            {[ } ]}
-        </select>
-    </span>
+<form class="pure-form set-xmpp-status" id="set-xmpp-status" action="" method="post">
+    <select id="select-xmpp-status">
+        <option value="online">{{{label_online}}}</option>
+        <option value="dnd">{{{label_busy}}}</option>
+        <option value="away">{{{label_away}}}</option>
+        {[ if (include_offline_state)  { ]}
+        <option value="offline">{{{label_offline}}}</option>
+        {[ } ]}
+        {[ if (allow_logout)  { ]}
+        <option value="logout">{{{label_logout}}}</option>
+        {[ } ]}
+    </select>
 </form>