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

Let bookmarks list use same markup/css as the available rooms list

Browse Source
This commit is contained in:
JC Brand 2016-10-18 11:05:02 +02:00
parent 623c56c89f
commit 1de2f7145c
7 changed files with 48 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
css/converse.css
View File

@ -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 */

44
sass/_bookmarks.scss
View File

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

5
sass/_controlbox.scss
View File

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

4
spec/bookmarks.js
View File

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

4
src/templates/bookmark.html
View File

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

2
src/templates/bookmarks_list.html
View File

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

2
src/templates/room_panel.html
View File

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