Render rooms and bookmarks lists according to mockups

css/converse.css

@@ -4789,6 +4789,8 @@ body.reset {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
+  #conversejs a:hover {
+    text-decoration: none; }
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }

css/inverse.css

@@ -4789,6 +4789,8 @@ body.reset {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
+  #conversejs a:hover {
+    text-decoration: none; }
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }

mockup/user-panel.html

@@ -22,19 +22,19 @@
         <div class="rooms-list">
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
-                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                <a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
                 <a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room">&nbsp;</a>
                 <a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a>
             </div>
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
-                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                <a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
             </div>
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
-                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                <a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
             </div>
         </div>

sass/_core.scss

@@ -48,6 +48,10 @@ body.reset {
         background-color: $highlight-color;
     }
 
+    a:hover {
+        text-decoration: none;
+    }
+
      canvas {
         background: $text-color;
         border-radius: $chatbox-border-radius;

src/converse-bookmarks.js

@@ -433,7 +433,7 @@
 
             _converse.BookmarksView = Backbone.OrderedListView.extend({
                 tagName: 'div',
-                className: 'bookmarks-list rooms-list-container',
+                className: 'bookmarks-list list-container rooms-list-container',
                 events: {
                     'click .add-bookmark': 'addBookmark',
                     'click .bookmarks-toggle': 'toggleBookmarksList',
@@ -479,9 +479,9 @@
                     const controlboxview = _converse.chatboxviews.get('controlbox');
                     if (!_.isUndefined(controlboxview) &&
                             !_converse.root.contains(this.el)) {
-                        const container = controlboxview.el.querySelector('#chatrooms');
-                        if (!_.isNull(container)) {
-                            container.insertBefore(this.el, container.firstChild);
+                        const el = controlboxview.el.querySelector('.bookmarks-list');
+                        if (!_.isNull(el)) {
+                            el.parentNode.replaceChild(this.el, el);
                         }
                     }
                 },

src/templates/bookmark.html

@@ -1,8 +1,8 @@
-<dd class="available-chatroom {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
-    <a class="open-room" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
-    <a class="right remove-bookmark icon-pushpin {[ if (o.bookmarked) { ]} button-on {[ } ]}"
+<div class="available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
+    <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
+    <a class="remove-bookmark fa fa-bookmark-o align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
        data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
        title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
-    <a class="right room-info icon-room-info" data-room-jid="{{{o.jid}}}"
+    <a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"
        title="{{{o.info_title}}}" href="#">&nbsp;</a>
-</dd>
+</div>

src/templates/room_item.html

@@ -1,4 +1,4 @@
-<dd class="available-chatroom">
+<div class="available-chatroom d-flex flex-row">
 <a class="open-room available-room"
    data-room-jid="{{{o.jid}}}"
    title="{{{o.open_title}}}"
@@ -6,4 +6,4 @@
 <a class="right room-info icon-room-info"
    data-room-jid="{{{o.jid}}}"
    title="{{{o.info_title}}}" href="#">&nbsp;</a>
-</dd>
+</div>

src/templates/room_panel.html

@@ -4,7 +4,6 @@
     <span class="w-100">Chatrooms</span>
     <a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>
 </div>
-<div class="list-container open-rooms-list rooms-list-container">
-    <div id="available-chatrooms" class="rooms-list"></div>
-</div>
+<div class="list-container open-rooms-list rooms-list-container"></div>
+<div class="list-container bookmarks-list rooms-list-container"></div>
 <!-- </div> -->

src/templates/rooms_list.html

@@ -1,2 +1,2 @@
 <a href="#" class="rooms-toggle open-rooms-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_rooms}}}">{{{o.label_rooms}}}</a>
-<dl class="rooms-list open-rooms-list"></dl>
+<div class="rooms-list open-rooms-list"></div>

src/templates/rooms_list_item.html

@@ -1,21 +1,22 @@
-<dd class="available-chatroom {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
+<div class="available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator">{{{ o.num_unread }}}</span>
 {[ } ]}
-<a class="open-room"
+<a class="open-room available-room w-100"
     data-room-jid="{{{o.jid}}}"
     title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
+
 <a class="right close-room icon-leave"
    data-room-jid="{{{o.jid}}}"
    data-room-name="{{{o.name}}}"
    title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>
 
 {[ if (o.allow_bookmarks) { ]}
-<a class="right icon-pushpin {[ if (o.bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
+<a class="fa fa-bookmark-o align-self-center {[ if (o.bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
    data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
    title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
    href="#">&nbsp;</a>
 {[ } ]}
-<a class="right room-info icon-room-info" data-room-jid="{{{o.jid}}}"
+<a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"
    title="{{{o.info_title}}}" href="#">&nbsp;</a>
-</dd>
+</div>