Update and simplify HTML/CSS for choosing status
Should also fix some of the issues mentioned in #847
This commit is contained in:
parent
3ec90096b9
commit
b32a8c5391
@ -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; }
|
||||
|
@ -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 @@
|
||||
}
|
||||
|
||||
}
|
||||
#fancy-xmpp-status-select {
|
||||
padding-left: 0;
|
||||
.xmpp-status {
|
||||
margin-left: 0.3em;
|
||||
display: inline;
|
||||
padding: 0.3em 0.3em 0 0.3em;
|
||||
}
|
||||
#fancy-xmpp-status-select {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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"
|
||||
},
|
||||
|
||||
|
@ -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>
|
||||
|
@ -1,5 +1,4 @@
|
||||
<form class="pure-form set-xmpp-status" action="" method="post">
|
||||
<span id="xmpp-status-holder">
|
||||
<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>
|
||||
@ -11,5 +10,4 @@
|
||||
<option value="logout">{{{label_logout}}}</option>
|
||||
{[ } ]}
|
||||
</select>
|
||||
</span>
|
||||
</form>
|
||||
|
Loading…
Reference in New Issue
Block a user