Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update and simplify HTML/CSS for choosing status

Browse Source 
Should also fix some of the issues mentioned in #847
This commit is contained in:
JC Brand 2017-05-08 21:06:33 +02:00
parent 3ec90096b9
commit b32a8c5391
6 changed files with 61 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/converse.css
View File

@ -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; }

56
sass/_controlbox.scss
View File

@ -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;
}
}
}

6
spec/controlbox.js
View File

@ -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);

5
src/converse-controlbox.js
View File

@ -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"
},

2
src/templates/change_status_message.html
View File

@ -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>

26
src/templates/contacts_panel.html
View File

@ -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>