Show caret for room, bookmark and group toggles

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; }

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; }

sass/_controlbox.scss

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

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});
                     }

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");
                         });
                     }
                 }

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);

src/templates/bookmarks_list.html

-<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>

src/templates/group_header.html

-<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>

src/templates/profile_view.html

 <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}}}"/>

src/templates/rooms_list.html

-<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>