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

Update styling for the status change form.

Browse Source
This commit is contained in:
JC Brand 2015-11-03 17:14:13 +00:00
parent 984c74b516
commit 341d5e746d
4 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
converse.js
View File

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

29
css/converse.css
View File

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

19
sass/_controlbox.scss
View File

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

9
src/templates/change_status_message.html
View File

@ -1,7 +1,8 @@
<form id="set-custom-xmpp-status">
<form id="set-custom-xmpp-status" class="pure-form">
<fieldset>
<span class="input-button-group">
<input type="text" class="custom-xmpp-status" {{status_message}}
placeholder="{{label_custom_status}}"/>
<button type="submit">{{label_save}}</button>
<input type="text" class="custom-xmpp-status" {{status_message}} placeholder="{{label_custom_status}}"/>
<input type="submit" class="pure-button button-primary" value="{{label_save}}"/>
</span>
</fieldset>
</form>