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

Show caret for room, bookmark and group toggles

Browse Source
This commit is contained in:
JC Brand 2018-03-17 11:42:17 +00:00
parent c986634d4f
commit f0ae8c44ff
10 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/converse.css
View File

@ -5549,8 +5549,8 @@ body.reset {
margin-left: 0.5em;
overflow: hidden;
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .d-flex {
margin-bottom: 0.2em; }
#conversejs #controlbox .controlbox-pane .userinfo .profile {
margin-bottom: 0.75em; }
#conversejs #controlbox #chatrooms {
padding: 0;
border-bottom: 1px solid #818479; }

4
css/inverse.css
View File

@ -5619,8 +5619,8 @@ body {
margin-left: 0.5em;
overflow: hidden;
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .d-flex {
margin-bottom: 0.2em; }
#conversejs #controlbox .controlbox-pane .userinfo .profile {
margin-bottom: 0.75em; }
#conversejs #controlbox #chatrooms {
padding: 0;
border-bottom: 1px solid #818479; }

4
sass/_controlbox.scss
View File

@ -221,8 +221,8 @@
overflow: hidden;
text-overflow: ellipsis;
}
.d-flex {
margin-bottom: 0.2em;
.profile {
margin-bottom: 0.75em;
}
}
}

11
src/converse-bookmarks.js
View File

@ -529,14 +529,15 @@
toggleBookmarksList (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
if (u.hasClass('icon-opened', ev.target)) {
const icon_el = ev.target.querySelector('.fa');
if (u.hasClass('fa-caret-down', icon_el)) {
u.slideIn(this.el.querySelector('.bookmarks'));
this.list_model.save({'toggle-state': _converse.CLOSED});
ev.target.classList.remove("icon-opened");
ev.target.classList.add("icon-closed");
icon_el.classList.remove("fa-caret-down");
icon_el.classList.add("fa-caret-right");
} else {
ev.target.classList.remove("icon-closed");
ev.target.classList.add("icon-opened");
icon_el.classList.remove("fa-caret-right");
icon_el.classList.add("fa-caret-down");
u.slideOut(this.el.querySelector('.bookmarks'));
this.list_model.save({'toggle-state': _converse.OPENED});
}

17
src/converse-roomslist.js
View File

@ -139,7 +139,7 @@
events: {
'click .add-bookmark': 'addBookmark',
'click .close-room': 'closeRoom',
'click .open-rooms-toggle': 'toggleRoomsList',
'click .rooms-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark',
'click .open-room': 'openRoom',
},
@ -168,7 +168,8 @@
this.el.innerHTML = tpl_rooms_list({
'toggle_state': this.list_model.get('toggle-state'),
'desc_rooms': __('Click to toggle the rooms list'),
'label_rooms': __('Open Rooms')
'label_rooms': __('Open Rooms'),
'_converse': _converse
});
if (this.list_model.get('toggle-state') !== _converse.OPENED) {
this.el.querySelector('.open-rooms-list').classList.add('collapsed');
@ -229,18 +230,18 @@
toggleRoomsList (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
const el = ev.target;
if (el.classList.contains("icon-opened")) {
const icon_el = ev.target.querySelector('.fa');
if (icon_el.classList.contains("fa-caret-down")) {
utils.slideIn(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.CLOSED});
el.classList.remove("icon-opened");
el.classList.add("icon-closed");
icon_el.classList.remove("fa-caret-down");
icon_el.classList.add("fa-caret-right");
});
} else {
utils.slideOut(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.OPENED});
el.classList.remove("icon-closed");
el.classList.add("icon-opened");
icon_el.classList.remove("fa-caret-right");
icon_el.classList.add("fa-caret-down");
});
}
}

11
src/converse-rosterview.js
View File

@ -603,15 +603,16 @@
toggle (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
if (_.includes(ev.target.classList, "icon-opened")) {
const icon_el = ev.target.querySelector('.fa');
if (_.includes(icon_el.classList, "fa-caret-down")) {
this.model.save({state: _converse.CLOSED});
this.collapse().then(() => {
ev.target.classList.remove("icon-opened");
ev.target.classList.add("icon-closed");
icon_el.classList.remove("fa-caret-down");
icon_el.classList.add("fa-caret-right");
});
} else {
ev.target.classList.remove("icon-closed");
ev.target.classList.add("icon-opened");
icon_el.classList.remove("fa-caret-right");
icon_el.classList.add("fa-caret-down");
this.model.save({state: _converse.OPENED});
this.filter();
u.showElement(this.el);

4
src/templates/bookmarks_list.html
View File

@ -1,2 +1,4 @@
<a href="#" class="rooms-toggle bookmarks-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_bookmarks}}}">{{{o.label_bookmarks}}}</a>
<a href="#" class="rooms-toggle bookmarks-toggle" title="{{{o.desc_bookmarks}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_bookmarks}}}</a>
<div class="bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>

4
src/templates/group_header.html
View File

@ -1,2 +1,4 @@
<a href="#" class="group-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_group_toggle}}}">{{{o.label_group}}}</a>
<a href="#" class="group-toggle" title="{{{o.desc_group_toggle}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_group}}}</a>
<ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

2
src/templates/profile_view.html
View File

@ -1,5 +1,5 @@
<div class="userinfo">
<div class="d-flex">
<div class="profile d-flex">
{[ if (o.image) { ]}
<a class="show-profile" href="#">
<img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>

4
src/templates/rooms_list.html
View File

@ -1,2 +1,4 @@
<a href="#" class="rooms-toggle open-rooms-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_rooms}}}">{{{o.label_rooms}}}</a>
<a href="#" class="rooms-toggle open-rooms-toggle" title="{{{o.desc_rooms}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_rooms}}}</a>
<div class="rooms-list open-rooms-list"></div>