diff --git a/css/converse.css b/css/converse.css
index cc5cca22d..2ec3f8007 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -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; }
diff --git a/css/inverse.css b/css/inverse.css
index bcd8b0b07..2af56e06b 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -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; }
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index a0c39f842..c2788f44f 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -221,8 +221,8 @@
overflow: hidden;
text-overflow: ellipsis;
}
- .d-flex {
- margin-bottom: 0.2em;
+ .profile {
+ margin-bottom: 0.75em;
}
}
}
diff --git a/src/converse-bookmarks.js b/src/converse-bookmarks.js
index bb295faac..0a90f9494 100644
--- a/src/converse-bookmarks.js
+++ b/src/converse-bookmarks.js
@@ -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});
}
diff --git a/src/converse-roomslist.js b/src/converse-roomslist.js
index 1cf724724..bc2b8b551 100644
--- a/src/converse-roomslist.js
+++ b/src/converse-roomslist.js
@@ -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");
});
}
}
diff --git a/src/converse-rosterview.js b/src/converse-rosterview.js
index 5d3f8a3d9..6ccb80926 100644
--- a/src/converse-rosterview.js
+++ b/src/converse-rosterview.js
@@ -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);
diff --git a/src/templates/bookmarks_list.html b/src/templates/bookmarks_list.html
index 008c0feaf..ad0fc8542 100644
--- a/src/templates/bookmarks_list.html
+++ b/src/templates/bookmarks_list.html
@@ -1,2 +1,4 @@
-{{{o.label_bookmarks}}}
+
+
+ {{{o.label_bookmarks}}}
diff --git a/src/templates/group_header.html b/src/templates/group_header.html
index 31993655d..7a9889d76 100644
--- a/src/templates/group_header.html
+++ b/src/templates/group_header.html
@@ -1,2 +1,4 @@
-{{{o.label_group}}}
+
+
+ {{{o.label_group}}}
diff --git a/src/templates/profile_view.html b/src/templates/profile_view.html
index a959f8c57..f9bdd17d4 100644
--- a/src/templates/profile_view.html
+++ b/src/templates/profile_view.html
@@ -1,5 +1,5 @@