From 1de2f7145c1745c773b34047b0d30c67cb73f079 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 18 Oct 2016 11:05:02 +0200
Subject: [PATCH] Let bookmarks list use same markup/css as the available rooms
 list

---
 css/converse.css                  | 46 +++++++++++++------------------
 sass/_bookmarks.scss              | 44 ++++++++++++++---------------
 sass/_controlbox.scss             |  5 ++--
 spec/bookmarks.js                 |  4 +--
 src/templates/bookmark.html       |  4 +--
 src/templates/bookmarks_list.html |  2 +-
 src/templates/room_panel.html     |  2 +-
 7 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index cb2846fa7..bfbbee2a4 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1614,18 +1614,18 @@
     #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
     #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
       width: 100%; }
-    #conversejs #controlbox #chatrooms #available-chatrooms {
+    #conversejs #controlbox #chatrooms dl.rooms-list {
       margin: 0 1em;
       padding: 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms #available-chatrooms dt {
+      #conversejs #controlbox #chatrooms dl.rooms-list dt {
         border: none;
         color: #818479;
         font-weight: normal;
         padding: 0;
         padding-bottom: 0.5em;
         text-shadow: 0 1px 0 #FAFAFA; }
-      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
+      #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom {
         border: none;
         clear: both;
         color: #818479;
@@ -1634,30 +1634,29 @@
         padding: 0.4em;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom:hover {
           background-color: #DCF9F6; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
-          display: none;
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.room-info {
           clear: right;
           display: block; }
-          #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info:before {
+          #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.room-info:before {
             font-size: 15px; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.open-room {
           float: left;
           width: 85%; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
-          font-size: 11px;
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom .room-info {
+          font-size: 12px;
           font-style: normal;
           font-weight: normal; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom li.room-info {
           display: block;
           margin-left: 5px; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom p.room-info {
           margin: 0;
           padding: 0;
           display: block;
           white-space: normal; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
+        #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom div.room-info {
           clear: left;
           width: 100%; }
   #conversejs #controlbox .dropdown {
@@ -2167,23 +2166,16 @@
     right: 116px;
     bottom: 10px; }
 
-#conversejs #controlbox .bookmarks-list .bookmarks-toggle {
+#conversejs #controlbox #chatrooms .bookmarks-list .bookmarks-toggle {
   display: block;
   font-weight: bold;
   color: #818479;
   margin-bottom: 0.5em; }
-#conversejs #controlbox .bookmarks-list .bookmarks li {
-  padding: 0.1em 1em; }
-  #conversejs #controlbox .bookmarks-list .bookmarks li .open-room {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 75%;
-    text-align: left; }
-  #conversejs #controlbox .bookmarks-list .bookmarks li .room-info {
-    float: right; }
-  #conversejs #controlbox .bookmarks-list .bookmarks li .remove-bookmark {
-    float: right; }
+#conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.room-info {
+  clear: none; }
+#conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
+  width: 75%; }
+#conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom .remove-bookmark {
+  float: right; }
 
 /*# sourceMappingURL=converse.css.map */
diff --git a/sass/_bookmarks.scss b/sass/_bookmarks.scss
index 70ddfe0bb..b47134000 100644
--- a/sass/_bookmarks.scss
+++ b/sass/_bookmarks.scss
@@ -1,28 +1,26 @@
 #conversejs {
     #controlbox {
-        .bookmarks-list {
-            .bookmarks-toggle {
-                display: block;
-                font-weight: bold;
-                color: $text-color;
-                margin-bottom: 0.5em;
-            }
-            .bookmarks {
-                li {
-                    padding: 0.1em 1em;
-                    .open-room {
-                        display: inline-block;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        width: 75%;
-                        text-align: left;
-                    }
-                    .room-info {
-                        float: right;
-                    }
-                    .remove-bookmark {
-                        float: right;
+        #chatrooms {
+            .bookmarks-list {
+                .bookmarks-toggle {
+                    display: block;
+                    font-weight: bold;
+                    color: $text-color;
+                    margin-bottom: 0.5em;
+                }
+                dl.rooms-list.bookmarks {
+                    dd.available-chatroom {
+                        a {
+                            &.room-info {
+                                clear: none;
+                            }
+                            &.open-room {
+                                width: 75%;
+                            }
+                        }
+                        .remove-bookmark {
+                            float: right;
+                        }
                     }
                 }
             }
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index ceb8fd736..2a474681e 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -117,7 +117,7 @@
                     width: 100%;
                 }
             }
-            #available-chatrooms {
+            dl.rooms-list {
                 margin: 0 1em;
                 padding: 0;
                 text-align: left;
@@ -143,7 +143,6 @@
                     }
                     a {
                         &.room-info {
-                            display: none;
                             clear: right;
                             display: block;
                             &:before {
@@ -156,7 +155,7 @@
                         }
                     }
                     .room-info {
-                        font-size: 11px;
+                        font-size: $font-size-small;
                         font-style: normal;
                         font-weight: normal;
                     }
diff --git a/spec/bookmarks.js b/spec/bookmarks.js
index 90c38c2f8..f1f16c274 100644
--- a/spec/bookmarks.js
+++ b/spec/bookmarks.js
@@ -386,7 +386,7 @@
             beforeEach(function () {
                 test_utils.openRoomsPanel();
                 converse.bookmarks.reset();
-                converse.chatboxviews.get('controlbox').$('#chatrooms ul.bookmarks').html('');
+                converse.chatboxviews.get('controlbox').$('#chatrooms dl.bookmarks').html('');
             });
 
             it("shows a list of bookmarks", function () {
@@ -417,7 +417,7 @@
                                         'jid': 'another@conference.shakespeare.lit'
                                     }).c('nick').t('JC').up().up();
                 converse.connection._dataRecv(test_utils.createRequest(stanza));
-                expect($('#chatrooms ul.bookmarks li').length).toBe(3);
+                expect($('#chatrooms dl.bookmarks dd').length).toBe(3);
             });
         });
     });
diff --git a/src/templates/bookmark.html b/src/templates/bookmark.html
index 30359ca22..01be34a79 100644
--- a/src/templates/bookmark.html
+++ b/src/templates/bookmark.html
@@ -1,7 +1,7 @@
-<li>
+<dd class="available-chatroom">
     <a class="open-room" data-room-jid="{{jid}}" title="{{open_title}}" href="#">{{name}}</a>
     <a class="remove-bookmark icon-close" data-room-jid="{{jid}}" data-bookmark-name="{{name}}"
        title="{{info_remove}}" href="#">&nbsp;</a>
     <a class="room-info icon-room-info" data-room-jid="{{jid}}"
        title="{{info_title}}" href="#">&nbsp;</a>
-</li>
+</dd>
diff --git a/src/templates/bookmarks_list.html b/src/templates/bookmarks_list.html
index dafbb3093..51719d223 100644
--- a/src/templates/bookmarks_list.html
+++ b/src/templates/bookmarks_list.html
@@ -1,2 +1,2 @@
 <a href="#" class="bookmarks-toggle icon-{{toggle_state}}" title="{{desc_bookmarks}}">{{label_bookmarks}}</a>
-<ul class="bookmarks"></ul>
+<dl class="bookmarks rooms-list"></dl>
diff --git a/src/templates/room_panel.html b/src/templates/room_panel.html
index 94e2a887f..5ef117745 100644
--- a/src/templates/room_panel.html
+++ b/src/templates/room_panel.html
@@ -10,4 +10,4 @@
         <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
     </fieldset>
 </form>
-<dl id="available-chatrooms"></dl>
+<dl id="available-chatrooms" class="rooms-list"></dl>