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

Update markup for the roster filter

Browse Source
This commit is contained in:
JC Brand 2018-02-19 16:05:29 +01:00
parent 2fa8304945
commit 493ecb2e4f
7 changed files with 35 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/converse.css
View File

@ -4794,6 +4794,8 @@ body.reset {
#conversejs canvas {
background: #777;
border-radius: 4px; }
#conversejs .selected {
color: #578EA9 !important; }
#conversejs .circle {
border-radius: 50%; }
#conversejs .sidebar {
@ -4921,8 +4923,8 @@ body.reset {
-moz-animation-timing-function: ease;
animation-timing-function: ease; }
#conversejs .hidden {
opacity: 0;
display: none; }
opacity: 0 !important;
display: none !important; }
#conversejs .collapsed {
height: 0 !important;
overflow: hidden !important;
@ -4979,14 +4981,6 @@ body.reset {
display: block;
margin: 0 auto;
clear: both; }
#conversejs .button-group,
#conversejs .input-button-group {
display: table; }
#conversejs .button-group {
width: 100%; }
#conversejs .input-button-group button,
#conversejs .input-button-group input {
display: table-cell; }
#conversejs .error {
color: #A53214; }
#conversejs .info {
@ -5003,8 +4997,6 @@ body.reset {
display: block !important; }
#conversejs .pure-form-message {
padding: 0.5em 0; }
#conversejs .pure-button {
border-radius: 5px; }
#conversejs .button-primary {
color: white;
background-color: #3AA569; }
@ -6034,50 +6026,23 @@ body.reset {
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form {
margin: 0.2em 0 0;
width: 100%;
/* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-form span {
margin: 0;
padding: 0.2em;
padding: 0.3em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 14px;
height: 25px;
margin: 0.2em 0.2em 0.2em 0;
width: 60%; }
width: 100%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter-state {
display: none; }
#conversejs #converse-roster .roster-filter-form .state-type {
float: left;
border: 1px solid #999;
font-size: calc(14px - 2px);
height: 25px;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
display: none; }
#conversejs #converse-roster .roster-filter-form .state-type-state {
display: inline-block; }
#conversejs #converse-roster .roster-filter-form .filter-type {
display: table-cell;
float: right;
font-size: calc(14px - 2px);
height: 25px;
padding: 0;
width: 47%;
border-radius: 0;
border: 1px solid; }
width: 100%; }
#conversejs #converse-roster .roster-contacts {
padding: 0;
margin: 0.2em 0;

49
css/inverse.css
View File

@ -4794,6 +4794,8 @@ body.reset {
#conversejs canvas {
background: #777;
border-radius: 4px; }
#conversejs .selected {
color: #578EA9 !important; }
#conversejs .circle {
border-radius: 50%; }
#conversejs .sidebar {
@ -4921,8 +4923,8 @@ body.reset {
-moz-animation-timing-function: ease;
animation-timing-function: ease; }
#conversejs .hidden {
opacity: 0;
display: none; }
opacity: 0 !important;
display: none !important; }
#conversejs .collapsed {
height: 0 !important;
overflow: hidden !important;
@ -4979,14 +4981,6 @@ body.reset {
display: block;
margin: 0 auto;
clear: both; }
#conversejs .button-group,
#conversejs .input-button-group {
display: table; }
#conversejs .button-group {
width: 100%; }
#conversejs .input-button-group button,
#conversejs .input-button-group input {
display: table-cell; }
#conversejs .error {
color: #A53214; }
#conversejs .info {
@ -5003,8 +4997,6 @@ body.reset {
display: block !important; }
#conversejs .pure-form-message {
padding: 0.5em 0; }
#conversejs .pure-button {
border-radius: 5px; }
#conversejs .button-primary {
color: white;
background-color: #E7A151; }
@ -6160,50 +6152,23 @@ body {
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form {
margin: 0.2em 0 0;
width: 100%;
/* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-form span {
margin: 0;
padding: 0.2em;
padding: 0.3em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 16px;
height: 30px;
margin: 0.2em 0.2em 0.2em 0;
width: 60%; }
width: 100%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter-state {
display: none; }
#conversejs #converse-roster .roster-filter-form .state-type {
float: left;
border: 1px solid #999;
font-size: calc(16px - 2px);
height: 30px;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
display: none; }
#conversejs #converse-roster .roster-filter-form .state-type-state {
display: inline-block; }
#conversejs #converse-roster .roster-filter-form .filter-type {
display: table-cell;
float: right;
font-size: calc(16px - 2px);
height: 30px;
padding: 0;
width: 47%;
border-radius: 0;
border: 1px solid; }
width: 100%; }
#conversejs #converse-roster .roster-contacts {
padding: 0;
margin: 0.2em 0;

6
mockup/user-panel.html
View File

@ -46,10 +46,10 @@
<span class="w-100">Contacts</span>
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
</div>
<form class="pure-form roster-filter-form input-button-group">
<div class="form-group form-inline">
<form class="roster-filter-form input-button-group">
<div class="form-inline flex-nowrap">
<input value="" class="roster-filter form-control" placeholder="Filter">
<div class="filter-by">
<div class="filter-by d-flex flex-nowrap">
<span class="fa fa-user" title="Filter by contacts"></span>
<span class="fa fa-users" title="Filter by groups"></span>
<span class="fa fa-circle" title="Filter by status"></span>

23
sass/_core.scss
View File

@ -57,6 +57,10 @@ body.reset {
border-radius: $chatbox-border-radius;
}
.selected {
color: $link-color !important;
}
.circle {
border-radius: 50%;
}
@ -166,8 +170,8 @@ body.reset {
}
.hidden {
opacity: 0;
display: none;
opacity: 0 !important;
display: none !important;
}
.collapsed {
height: 0 !important;
@ -223,18 +227,6 @@ body.reset {
clear: both;
}
.button-group,
.input-button-group {
display: table;
}
.button-group {
width: 100%;
}
.input-button-group button,
.input-button-group input {
display: table-cell;
}
.error {
color: $error-color;
}
@ -259,9 +251,6 @@ body.reset {
.pure-form-message {
padding: 0.5em 0;
}
.pure-button {
border-radius: $button-border-radius;
}
.button-primary {
color: white;
background-color: $primary-color;

36
sass/_roster.scss
View File

@ -29,24 +29,16 @@
}
.roster-filter-form {
margin: 0.2em 0 0;
width: 100%;
span {
margin: 0;
padding: 0.2em;
padding: 0.3em;
color: #888;
cursor: pointer;
}
.roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999;
font-size: $font-size;
height: $controlbox-dropdown-height;
margin: 0.2em 0.2em 0.2em 0;
width: 60%;
width: 100%;
}
/* (dynamically added) if input has value: */
.roster-filter.x {
@ -56,32 +48,10 @@
.roster-filter.onX {
cursor: pointer;
}
.roster-filter-state {
display: none;
}
.state-type {
float: left;
border: 1px solid #999;
font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
display: none;
}
.state-type-state {
display: inline-block;
}
.filter-type {
display: table-cell;
float: right;
font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height;
padding: 0;
width: 47%;
border-radius: 0;
border: 1px solid;
width: 100%;
}
}

5
src/converse-rosterview.js
View File

@ -136,7 +136,7 @@
"submit form.roster-filter-form": "submitFilter",
"click .onX": "clearFilter",
"mousemove .x": "toggleX",
"change .filter-type": "changeTypeFilter",
"click .filter-by span": "changeTypeFilter",
"change .state-type": "changeChatStateFilter"
},
@ -195,7 +195,7 @@
changeTypeFilter (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
const type = ev.target.value;
const type = ev.target.dataset.type;
if (type === 'state') {
this.model.save({
'filter_type': type,
@ -211,7 +211,6 @@
liveFilter: _.debounce(function (ev) {
this.model.save({
'filter_type': this.el.querySelector('.filter-type').value,
'filter_text': this.el.querySelector('.roster-filter').value
});
}, 250),

14
src/templates/roster_filter.html
View File

@ -1,10 +1,10 @@
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<div class="form-group form-inline">
<div class="form-inline flex-nowrap">
<input value="{{{o.filter_text}}}"
class="roster-filter form-control roster-filter-{{{o.filter_type}}}"
class="roster-filter form-control {[ if (o.filter_type === 'state') { ]} hidden {[ } ]}"
placeholder="{{{o.placeholder}}}">
<select class="state-type state-type-{{{o.filter_type}}}">
<select class="form-control state-type {[ if (o.filter_type !== 'state') { ]} hidden {[ } ]}">
<option value="">{{{o.label_any}}}</option>
<option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
value="unread_messages">{{{o.label_unread_messages}}}</option>
@ -22,10 +22,10 @@
value="offline">{{{o.label_offline}}}</option>
</select>
<div class="filter-by">
<span class="fa fa-user" data-type="contact" title="{{{o.title_contact_filter}}}"></span>
<span class="fa fa-users" data-type="group" title="{{{o.title_group_filter}}}"></span>
<span class="fa fa-circle" data-type="status" title="{{{o.title_status_filter}}}"></span>
<div class="filter-by d-flex flex-nowrap">
<span class="fa fa-user {[ if (o.filter_type === 'contacts') { ]} selected {[ } ]}" data-type="contacts" title="{{{o.title_contact_filter}}}"></span>
<span class="fa fa-users {[ if (o.filter_type === 'groups') { ]} selected {[ } ]}" data-type="groups" title="{{{o.title_group_filter}}}"></span>
<span class="fa fa-circle {[ if (o.filter_type === 'state') { ]} selected {[ } ]}" data-type="state" title="{{{o.title_status_filter}}}"></span>
</div>
</div>
</form>