Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
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 { #conversejs #controlbox .dropdown {
/* Custom addition for CSP */ } /* Custom addition for CSP */ }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
width: 148px; width: 143px;
display: inline-block; display: inline-block; }
line-height: 25px; }
#conversejs #controlbox .dropdown li { #conversejs #controlbox .dropdown li {
list-style: none; list-style: none;
padding-left: 0; } padding-left: 0; }
@ -1969,22 +1968,6 @@
display: none; display: none;
float: right; float: right;
margin-right: 0.5em; } 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 { #conversejs #controlbox #controlbox-tabs {
text-align: center; text-align: center;
display: inline; display: inline;
@ -2025,8 +2008,7 @@
height: 25px; height: 25px;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
padding: 0; padding: 0.3em 0.3em 0 0.3em; }
padding-left: 0.3em; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status, #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form { #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
@ -2036,17 +2018,28 @@
display: inline-block; } display: inline-block; }
#conversejs #controlbox .fancy-dropdown.no-border { #conversejs #controlbox .fancy-dropdown.no-border {
border: 0; } border: 0; }
#conversejs #controlbox .xmpp-status {
padding: 0.3em 0.3em 0 0.3em; }
#conversejs #controlbox #fancy-xmpp-status-select { #conversejs #controlbox #fancy-xmpp-status-select {
padding-left: 0; } padding: 0em; }
#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 { #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
float: right; float: right;
clear: right; clear: right;
width: 12px; width: 12px;
margin-right: 0.3em;
color: #2A9D8F; } 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 { #conversejs #controlbox .controlbox-pane {
background-color: white; background-color: white;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
@ -2075,7 +2068,7 @@
overflow-y: hidden; } overflow-y: hidden; }
#conversejs #controlbox .add-xmpp-contact { #conversejs #controlbox .add-xmpp-contact {
background: none; background: none;
padding: 1em; } padding: 1em 0.5em; }
#conversejs #controlbox .add-xmpp-contact input { #conversejs #controlbox .add-xmpp-contact input {
margin: 0 0 1rem; margin: 0 0 1rem;
width: 100%; } width: 100%; }
@ -2088,7 +2081,7 @@
padding: 2px; } padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a { #conversejs #controlbox .xmpp-status-menu li a {
width: 100%; width: 100%;
padding: 0 8px; } padding: 0.3em; }
#conversejs #controlbox .xmpp-status-menu li a.logout, #conversejs #controlbox .xmpp-status-menu li a.logout,
#conversejs #controlbox .xmpp-status-menu li a.logout span { #conversejs #controlbox .xmpp-status-menu li a.logout span {
color: #D24E2B; } color: #D24E2B; }

54
sass/_controlbox.scss
View File

@ -176,9 +176,8 @@
.dropdown { .dropdown {
a { a {
width: 148px; width: 143px;
display: inline-block; display: inline-block;
line-height: $controlbox-dropdown-height;
} }
li { li {
list-style: none; list-style: none;
@ -204,6 +203,7 @@
/* Custom addition for CSP */ /* Custom addition for CSP */
dd.search-xmpp { dd.search-xmpp {
display: none; display: none;
width: 100%;
} }
dd.search-xmpp ul { dd.search-xmpp ul {
@ -225,26 +225,6 @@
margin-right: 0.5em; 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 { #controlbox-tabs {
text-align: center; text-align: center;
display: inline; display: inline;
@ -293,8 +273,7 @@
height: $controlbox-dropdown-height; height: $controlbox-dropdown-height;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
text-align: left; text-align: left;
padding: 0; padding: 0.3em 0.3em 0 0.3em;
padding-left: 0.3em;
.choose-xmpp-status, .choose-xmpp-status,
.toggle-xmpp-contact-form { .toggle-xmpp-contact-form {
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
@ -308,19 +287,32 @@
} }
} }
#fancy-xmpp-status-select {
padding-left: 0;
.xmpp-status { .xmpp-status {
margin-left: 0.3em; padding: 0.3em 0.3em 0 0.3em;
display: inline;
} }
#fancy-xmpp-status-select {
padding: 0em;
a.change-xmpp-status-message { a.change-xmpp-status-message {
float: right; float: right;
clear: right; clear: right;
width: 12px; width: 12px;
margin-right: 0.3em;
color: $link-color; 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 { .controlbox-pane {
@ -357,7 +349,7 @@
.add-xmpp-contact { .add-xmpp-contact {
background: none; background: none;
padding: 1em; padding: 1em 0.5em;
input { input {
margin: 0 0 1rem; margin: 0 0 1rem;
width: 100%; width: 100%;
@ -374,7 +366,7 @@
padding: 2px; padding: 2px;
a { a {
width: 100%; 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.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
view.$el.find('a.change-xmpp-status-message').click(); view.$el.find('a.change-xmpp-status-message').click();
expect(view.renderStatusChangeForm).toHaveBeenCalled(); expect(view.renderStatusChangeForm).toHaveBeenCalled();
// The async testing here is used only to provide time for
// visual feedback
var msg = 'I am happy'; var msg = 'I am happy';
view.$el.find('form input.custom-xmpp-status').val(msg); view.$el.find('input.custom-xmpp-status').val(msg);
view.$el.find('form#set-custom-xmpp-status').submit(); view.$el.submit();
expect(view.setStatusMessage).toHaveBeenCalled(); expect(view.setStatusMessage).toHaveBeenCalled();
expect(_converse.emit).toHaveBeenCalledWith('statusMessageChanged', msg); expect(_converse.emit).toHaveBeenCalledWith('statusMessageChanged', msg);
expect(view.$el.find('a.choose-xmpp-status').hasClass('online')).toBe(true); 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({ _converse.XMPPStatusView = Backbone.View.extend({
el: "span#xmpp-status-holder", el: "form#set-xmpp-status",
events: { events: {
"click a.choose-xmpp-status": "toggleOptions", "click a.choose-xmpp-status": "toggleOptions",
"click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm", "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" "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> <fieldset>
<span class="input-button-group"> <span class="input-button-group">
<input type="text" class="custom-xmpp-status" value="{{{status_message}}}" placeholder="{{{label_custom_status}}}"/> <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}}}"/> <input type="submit" class="pure-button button-primary" value="{{{label_save}}}"/>
</span> </span>
</fieldset> </fieldset>
</form>

4
src/templates/contacts_panel.html
View File

@ -1,5 +1,4 @@
<form class="pure-form set-xmpp-status" action="" method="post"> <form class="pure-form set-xmpp-status" id="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder">
<select id="select-xmpp-status"> <select id="select-xmpp-status">
<option value="online">{{{label_online}}}</option> <option value="online">{{{label_online}}}</option>
<option value="dnd">{{{label_busy}}}</option> <option value="dnd">{{{label_busy}}}</option>
@ -11,5 +10,4 @@
<option value="logout">{{{label_logout}}}</option> <option value="logout">{{{label_logout}}}</option>
{[ } ]} {[ } ]}
</select> </select>
</span>
</form> </form>