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

Fix some style issues on the controlbox.

Browse Source
This commit is contained in:
JC Brand 2015-01-16 22:56:23 +01:00
parent 8478b432c3
commit 5ed0e75ee5
6 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
builds/templates.js
View File

@ -52,13 +52,13 @@ this["templates"]["change_status_message"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '<form id="set-custom-xmpp-status">\n <input type="text" class="custom-xmpp-status" ' +
__p += '<form id="set-custom-xmpp-status">\n <span class="input-button-group">\n <input type="text" class="custom-xmpp-status" ' +
((__t = (status_message)) == null ? '' : __t) +
'\n placeholder="' +
'\n placeholder="' +
((__t = (label_custom_status)) == null ? '' : __t) +
'"/>\n <button type="submit">' +
'"/>\n <button type="submit">' +
((__t = (label_save)) == null ? '' : __t) +
'</button>\n</form>\n';
'</button>\n </span>\n</form>\n';
}
return __p
@ -849,7 +849,7 @@ this["templates"]["roster"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '<span class="roster-filter-group">\n <input style="display: none;" class="roster-filter" placeholder="' +
__p += '<span class="input-button-group">\n <input style="display: none;" class="roster-filter" placeholder="' +
((__t = (placeholder)) == null ? '' : __t) +
'">\n <select style="display: none;" class="filter-type">\n <option value="contacts">' +
((__t = (label_contacts)) == null ? '' : __t) +

24
css/converse.css
View File

@ -370,6 +370,11 @@
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
#conversejs .input-button-group {
display: table; }
#conversejs .input-button-group button,
#conversejs .input-button-group input {
display: table-cell; }
#conversejs #minimized-chats {
color: white;
display: none;
@ -678,8 +683,6 @@
overflow: hidden;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-group {
display: table; }
#conversejs #converse-roster .filter-type {
display: table-cell;
font-size: 14px;
@ -690,7 +693,6 @@
#conversejs #converse-roster .roster-filter {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
display: table-cell;
font-size: 14px;
height: 25px;
margin: 0 0 0.5em 6px;
@ -952,7 +954,7 @@
width: 100%;
height: 30px;
margin: 5px 0 10px 0;
padding: 0.5em; }
padding-left: 0.5em; }
#conversejs #converse-register .input-group {
display: table;
margin: auto;
@ -1042,7 +1044,7 @@
border-bottom: 1px solid #CCC;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.5);
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
color: #888;
display: block;
font-size: 12px;
@ -1150,14 +1152,14 @@
float: left;
padding: 0; }
#conversejs #set-custom-xmpp-status input {
height: 23px; }
height: 26px;
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
padding: 0 0 0 0.5em; }
#conversejs #set-custom-xmpp-status button {
height: 23px;
height: 26px;
width: 40px;
padding: 1px 2px 1px 1px; }
#conversejs .custom-xmpp-status {
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px); }
padding: 1px; }
#conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0; }

2
mockup/index.html
View File

@ -131,7 +131,7 @@
</dd>
</dl>
<div id="converse-roster">
<span class="roster-filter-group">
<span class="input-button-group">
<input class="roster-filter" placeholder="Type to filter">
<select class="filter-type">
<option value="contacts">Contacts</option>

27
sass/converse.scss
View File

@ -289,6 +289,14 @@
}
}
.input-button-group {
display: table;
}
.input-button-group button,
.input-button-group input {
display: table-cell;
}
#minimized-chats {
color: $inverse-link-color;
display: none;
@ -715,9 +723,6 @@
height: calc(100% - 68px);
overflow: hidden;
.roster-filter-group {
display: table;
}
.filter-type {
display: table-cell;
font-size: $font-size;
@ -729,7 +734,6 @@
.roster-filter {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999;
display: table-cell;
font-size: $font-size;
height: $controlbox-dropdown-height;
margin: 0 0 0.5em 6px;
@ -1091,7 +1095,7 @@
width: 100%;
height: 30px;
margin: 5px 0 10px 0;
padding: 0.5em;
padding-left: 0.5em;
}
#converse-register {
@ -1213,7 +1217,7 @@
border-bottom: 1px solid $border-color;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.5);
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
color: #888;
display: block;
font-size: 12px;
@ -1365,17 +1369,16 @@
float: left;
padding: 0;
input {
height: $controlbox-dropdown-height - 2px;
height: $controlbox-dropdown-height + 1px;
@include calc(width, '100% - 40px');
padding: 0 0 0 0.5em;
}
button {
height: $controlbox-dropdown-height - 2px;
height: $controlbox-dropdown-height + 1px;
width: 40px;
padding: 1px 2px 1px 1px;
padding: 1px;
}
}
.custom-xmpp-status {
@include calc(width, '100% - 40px');
}
.chat-textarea-chatbox-selected {
border: 1px solid #578308;

8
src/templates/change_status_message.html
View File

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

2
src/templates/roster.html
View File

@ -1,4 +1,4 @@
<span class="roster-filter-group">
<span class="input-button-group">
<input style="display: none;" class="roster-filter" placeholder="{{placeholder}}">
<select style="display: none;" class="filter-type">
<option value="contacts">{{label_contacts}}</option>