From b32a8c5391eeb3e547a1ff9f59e8aec2130374a1 Mon Sep 17 00:00:00 2001 From: JC Brand 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 @@ -
-
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 @@ -
- - - + +