diff --git a/converse.js b/converse.js index 7fe6d7e83..eadd1ac73 100644 --- a/converse.js +++ b/converse.js @@ -5319,7 +5319,9 @@ 'label_custom_status': __('Custom status'), 'label_save': __('Save') }); - this.$el.find('.xmpp-status').replaceWith(input); + var $xmppstatus = this.$el.find('.xmpp-status'); + $xmppstatus.parent().addClass('no-border'); + $xmppstatus.replaceWith(input); this.$el.find('.custom-xmpp-status').focus().focus(); }, @@ -5362,7 +5364,7 @@ // # For translators: the %1$s part gets replaced with the status // # Example, I am online var status_message = model.get('status_message') || __("I am %1$s", this.getPrettyStatus(stat)); - this.$el.find('#fancy-xmpp-status-select').html( + this.$el.find('#fancy-xmpp-status-select').removeClass('no-border').html( converse.templates.chat_status({ 'chat_status': stat, 'status_message': status_message, diff --git a/css/converse.css b/css/converse.css index 0ddabe17e..2b8006e6f 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1605,15 +1605,19 @@ #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 button { + #conversejs #controlbox #set-custom-xmpp-status input[type=submit] { height: 26px; width: 40px; - padding: 1px; } + padding: 1px; + float: right; } #conversejs #controlbox #controlbox-tabs { text-align: center; display: inline; @@ -1649,8 +1653,6 @@ height: 55px; cursor: default; color: #818479; } - #conversejs #controlbox .xmpp-status { - display: inline; } #conversejs #controlbox .fancy-dropdown { border: 1px solid #B1BFC4; height: 25px; @@ -1667,12 +1669,19 @@ text-overflow: ellipsis; white-space: nowrap; display: inline; } - #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-dropdown.no-border { + border: 0; } + #conversejs #controlbox #fancy-xmpp-status-select { + padding-left: 0; } + #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status { + margin-left: 0.3em; + display: inline; } + #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 .controlbox-pane { background-color: white; border-bottom-left-radius: 4px; diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 70f3e4ba3..c88a07df2 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -207,15 +207,20 @@ #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; } - button { + input[type=submit] { height: $controlbox-dropdown-height + 1px; width: 40px; padding: 1px; + float: right; } } @@ -262,9 +267,6 @@ } } - .xmpp-status { - display: inline; - } .fancy-dropdown { border: 1px solid $light-background-border-color; height: $controlbox-dropdown-height; @@ -283,8 +285,17 @@ white-space: nowrap; display: inline; } + &.no-border { + border: 0; + } + } #fancy-xmpp-status-select { + padding-left: 0; + .xmpp-status { + margin-left: 0.3em; + display: inline; + } a.change-xmpp-status-message { float: right; clear: right; diff --git a/src/templates/change_status_message.html b/src/templates/change_status_message.html index 35cd887ee..1998ae8d3 100644 --- a/src/templates/change_status_message.html +++ b/src/templates/change_status_message.html @@ -1,7 +1,8 @@ -
+ +
- - + + +