Skip to content

C
converse.js
Commit 493ecb2e authored by JC Brand's avatar JC Brand
Browse files
Options

Update markup for the roster filter

parent 2fa83049
Show whitespace changes
Inline Side-by-side
Showing with 35 additions and 147 deletions
css/converse.css
View file @ 493ecb2e
...@@ -4794,6 +4794,8 @@ body.reset { ...@@ -4794,6 +4794,8 @@ body.reset {
#conversejs canvas { #conversejs canvas {
background: #777; background: #777;
border-radius: 4px; } border-radius: 4px; }
#conversejs .selected {
color: #578EA9 !important; }
#conversejs .circle { #conversejs .circle {
border-radius: 50%; } border-radius: 50%; }
#conversejs .sidebar { #conversejs .sidebar {
...@@ -4921,8 +4923,8 @@ body.reset { ...@@ -4921,8 +4923,8 @@ body.reset {
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
animation-timing-function: ease; } animation-timing-function: ease; }
#conversejs .hidden { #conversejs .hidden {
opacity: 0; opacity: 0 !important;
display: none; } display: none !important; }
#conversejs .collapsed { #conversejs .collapsed {
height: 0 !important; height: 0 !important;
overflow: hidden !important; overflow: hidden !important;
...@@ -4979,14 +4981,6 @@ body.reset { ...@@ -4979,14 +4981,6 @@ body.reset {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
clear: both; } 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 { #conversejs .error {
color: #A53214; } color: #A53214; }
#conversejs .info { #conversejs .info {
...@@ -5003,8 +4997,6 @@ body.reset { ...@@ -5003,8 +4997,6 @@ body.reset {
display: block !important; } display: block !important; }
#conversejs .pure-form-message { #conversejs .pure-form-message {
padding: 0.5em 0; } padding: 0.5em 0; }
#conversejs .pure-button {
border-radius: 5px; }
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #3AA569; } background-color: #3AA569; }
...@@ -6034,50 +6026,23 @@ body.reset { ...@@ -6034,50 +6026,23 @@ body.reset {
#conversejs #converse-roster .search-xmpp ul li.chat-info { #conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; } padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form { #conversejs #converse-roster .roster-filter-form {
margin: 0.2em 0 0;
width: 100%; width: 100%;
/* (dynamically added) if input has value: */ /* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ } /* (dynamically added) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-form span { #conversejs #converse-roster .roster-filter-form span {
margin: 0; padding: 0.3em;
padding: 0.2em;
color: #888; color: #888;
cursor: pointer; } cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter { #conversejs #converse-roster .roster-filter-form .roster-filter {
float: left; width: 100%; }
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%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x { #conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; } background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX { #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
cursor: pointer; } cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter-state {
display: none; }
#conversejs #converse-roster .roster-filter-form .state-type { #conversejs #converse-roster .roster-filter-form .state-type {
float: left;
border: 1px solid #999;
font-size: calc(14px - 2px); font-size: calc(14px - 2px);
height: 25px; height: 25px;
margin: 0; width: 100%; }
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; }
#conversejs #converse-roster .roster-contacts { #conversejs #converse-roster .roster-contacts {
padding: 0; padding: 0;
margin: 0.2em 0; margin: 0.2em 0;
......
css/inverse.css
View file @ 493ecb2e
...@@ -4794,6 +4794,8 @@ body.reset { ...@@ -4794,6 +4794,8 @@ body.reset {
#conversejs canvas { #conversejs canvas {
background: #777; background: #777;
border-radius: 4px; } border-radius: 4px; }
#conversejs .selected {
color: #578EA9 !important; }
#conversejs .circle { #conversejs .circle {
border-radius: 50%; } border-radius: 50%; }
#conversejs .sidebar { #conversejs .sidebar {
...@@ -4921,8 +4923,8 @@ body.reset { ...@@ -4921,8 +4923,8 @@ body.reset {
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
animation-timing-function: ease; } animation-timing-function: ease; }
#conversejs .hidden { #conversejs .hidden {
opacity: 0; opacity: 0 !important;
display: none; } display: none !important; }
#conversejs .collapsed { #conversejs .collapsed {
height: 0 !important; height: 0 !important;
overflow: hidden !important; overflow: hidden !important;
...@@ -4979,14 +4981,6 @@ body.reset { ...@@ -4979,14 +4981,6 @@ body.reset {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
clear: both; } 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 { #conversejs .error {
color: #A53214; } color: #A53214; }
#conversejs .info { #conversejs .info {
...@@ -5003,8 +4997,6 @@ body.reset { ...@@ -5003,8 +4997,6 @@ body.reset {
display: block !important; } display: block !important; }
#conversejs .pure-form-message { #conversejs .pure-form-message {
padding: 0.5em 0; } padding: 0.5em 0; }
#conversejs .pure-button {
border-radius: 5px; }
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #E7A151; } background-color: #E7A151; }
...@@ -6160,50 +6152,23 @@ body { ...@@ -6160,50 +6152,23 @@ body {
#conversejs #converse-roster .search-xmpp ul li.chat-info { #conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; } padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form { #conversejs #converse-roster .roster-filter-form {
margin: 0.2em 0 0;
width: 100%; width: 100%;
/* (dynamically added) if input has value: */ /* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ } /* (dynamically added) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-form span { #conversejs #converse-roster .roster-filter-form span {
margin: 0; padding: 0.3em;
padding: 0.2em;
color: #888; color: #888;
cursor: pointer; } cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter { #conversejs #converse-roster .roster-filter-form .roster-filter {
float: left; width: 100%; }
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%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x { #conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; } background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX { #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
cursor: pointer; } cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter-state {
display: none; }
#conversejs #converse-roster .roster-filter-form .state-type { #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); font-size: calc(16px - 2px);
height: 30px; height: 30px;
padding: 0; width: 100%; }
width: 47%;
border-radius: 0;
border: 1px solid; }
#conversejs #converse-roster .roster-contacts { #conversejs #converse-roster .roster-contacts {
padding: 0; padding: 0;
margin: 0.2em 0; margin: 0.2em 0;
......
mockup/user-panel.html
View file @ 493ecb2e
...@@ -46,10 +46,10 @@ ...@@ -46,10 +46,10 @@
<span class="w-100">Contacts</span> <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> <a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
</div> </div>
<form class="pure-form roster-filter-form input-button-group"> <form class="roster-filter-form input-button-group">
<div class="form-group form-inline"> <div class="form-inline flex-nowrap">
<input value="" class="roster-filter form-control" placeholder="Filter"> <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-user" title="Filter by contacts"></span>
<span class="fa fa-users" title="Filter by groups"></span> <span class="fa fa-users" title="Filter by groups"></span>
<span class="fa fa-circle" title="Filter by status"></span> <span class="fa fa-circle" title="Filter by status"></span>
......
sass/_core.scss
View file @ 493ecb2e
...@@ -57,6 +57,10 @@ body.reset { ...@@ -57,6 +57,10 @@ body.reset {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
} }
.selected {
color: $link-color !important;
}
.circle { .circle {
border-radius: 50%; border-radius: 50%;
} }
...@@ -166,8 +170,8 @@ body.reset { ...@@ -166,8 +170,8 @@ body.reset {
} }
.hidden { .hidden {
opacity: 0; opacity: 0 !important;
display: none; display: none !important;
} }
.collapsed { .collapsed {
height: 0 !important; height: 0 !important;
...@@ -223,18 +227,6 @@ body.reset { ...@@ -223,18 +227,6 @@ body.reset {
clear: both; 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 { .error {
color: $error-color; color: $error-color;
} }
...@@ -259,9 +251,6 @@ body.reset { ...@@ -259,9 +251,6 @@ body.reset {
.pure-form-message { .pure-form-message {
padding: 0.5em 0; padding: 0.5em 0;
} }
.pure-button {
border-radius: $button-border-radius;
}
.button-primary { .button-primary {
color: white; color: white;
background-color: $primary-color; background-color: $primary-color;
......
sass/_roster.scss
View file @ 493ecb2e
...@@ -29,24 +29,16 @@ ...@@ -29,24 +29,16 @@
} }
.roster-filter-form { .roster-filter-form {
margin: 0.2em 0 0;
width: 100%; width: 100%;
span { span {
margin: 0; padding: 0.3em;
padding: 0.2em;
color: #888; color: #888;
cursor: pointer; cursor: pointer;
} }
.roster-filter { .roster-filter {
float: left; width: 100%;
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%;
} }
/* (dynamically added) if input has value: */ /* (dynamically added) if input has value: */
.roster-filter.x { .roster-filter.x {
...@@ -56,32 +48,10 @@ ...@@ -56,32 +48,10 @@
.roster-filter.onX { .roster-filter.onX {
cursor: pointer; cursor: pointer;
} }
.roster-filter-state {
display: none;
}
.state-type { .state-type {
float: left;
border: 1px solid #999;
font-size: calc(#{$font-size} - 2px); font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height; height: $controlbox-dropdown-height;
margin: 0; width: 100%;
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;
} }
} }
......
src/converse-rosterview.js
View file @ 493ecb2e
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
"submit form.roster-filter-form": "submitFilter", "submit form.roster-filter-form": "submitFilter",
"click .onX": "clearFilter", "click .onX": "clearFilter",
"mousemove .x": "toggleX", "mousemove .x": "toggleX",
"change .filter-type": "changeTypeFilter", "click .filter-by span": "changeTypeFilter",
"change .state-type": "changeChatStateFilter" "change .state-type": "changeChatStateFilter"
}, },
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
changeTypeFilter (ev) { changeTypeFilter (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const type = ev.target.value; const type = ev.target.dataset.type;
if (type === 'state') { if (type === 'state') {
this.model.save({ this.model.save({
'filter_type': type, 'filter_type': type,
...@@ -211,7 +211,6 @@ ...@@ -211,7 +211,6 @@
liveFilter: _.debounce(function (ev) { liveFilter: _.debounce(function (ev) {
this.model.save({ this.model.save({
'filter_type': this.el.querySelector('.filter-type').value,
'filter_text': this.el.querySelector('.roster-filter').value 'filter_text': this.el.querySelector('.roster-filter').value
}); });
}, 250), }, 250),
......
src/templates/roster_filter.html
View file @ 493ecb2e
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}"> <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}}}" <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}}}"> 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 value="">{{{o.label_any}}}</option>
<option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]} <option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
value="unread_messages">{{{o.label_unread_messages}}}</option> value="unread_messages">{{{o.label_unread_messages}}}</option>
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
value="offline">{{{o.label_offline}}}</option> value="offline">{{{o.label_offline}}}</option>
</select> </select>
<div class="filter-by"> <div class="filter-by d-flex flex-nowrap">
<span class="fa fa-user" data-type="contact" title="{{{o.title_contact_filter}}}"></span> <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" data-type="group" title="{{{o.title_group_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" data-type="status" title="{{{o.title_status_filter}}}"></span> <span class="fa fa-circle {[ if (o.filter_type === 'state') { ]} selected {[ } ]}" data-type="state" title="{{{o.title_status_filter}}}"></span>
</div> </div>
</div> </div>
</form> </form>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7