Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
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

44
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=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] { #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
width: 100%; } width: 100%; }
#conversejs #controlbox #chatrooms #available-chatrooms { #conversejs #controlbox #chatrooms dl.rooms-list {
margin: 0 1em; margin: 0 1em;
padding: 0; padding: 0;
text-align: left; } text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt { #conversejs #controlbox #chatrooms dl.rooms-list dt {
border: none; border: none;
color: #818479; color: #818479;
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
padding-bottom: 0.5em; padding-bottom: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; } 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; border: none;
clear: both; clear: both;
color: #818479; color: #818479;
@ -1634,30 +1634,29 @@
padding: 0.4em; padding: 0.4em;
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; } 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; } background-color: #DCF9F6; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info { #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom a.room-info {
display: none;
clear: right; clear: right;
display: block; } 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; } 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; float: left;
width: 85%; } width: 85%; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info { #conversejs #controlbox #chatrooms dl.rooms-list dd.available-chatroom .room-info {
font-size: 11px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: 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; display: block;
margin-left: 5px; } 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; margin: 0;
padding: 0; padding: 0;
display: block; display: block;
white-space: normal; } 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; clear: left;
width: 100%; } width: 100%; }
#conversejs #controlbox .dropdown { #conversejs #controlbox .dropdown {
@ -2167,23 +2166,16 @@
right: 116px; right: 116px;
bottom: 10px; } bottom: 10px; }
#conversejs #controlbox .bookmarks-list .bookmarks-toggle { #conversejs #controlbox #chatrooms .bookmarks-list .bookmarks-toggle {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: #818479; color: #818479;
margin-bottom: 0.5em; } margin-bottom: 0.5em; }
#conversejs #controlbox .bookmarks-list .bookmarks li { #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.room-info {
padding: 0.1em 1em; } clear: none; }
#conversejs #controlbox .bookmarks-list .bookmarks li .open-room { #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
display: inline-block; width: 75%; }
overflow: hidden; #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom .remove-bookmark {
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; } float: right; }
/*# sourceMappingURL=converse.css.map */ /*# sourceMappingURL=converse.css.map */

22
sass/_bookmarks.scss
View File

@ -1,5 +1,6 @@
#conversejs { #conversejs {
#controlbox { #controlbox {
#chatrooms {
.bookmarks-list { .bookmarks-list {
.bookmarks-toggle { .bookmarks-toggle {
display: block; display: block;
@ -7,19 +8,15 @@
color: $text-color; color: $text-color;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.bookmarks { dl.rooms-list.bookmarks {
li { dd.available-chatroom {
padding: 0.1em 1em; a {
.open-room { &.room-info {
display: inline-block; clear: none;
overflow: hidden; }
white-space: nowrap; &.open-room {
text-overflow: ellipsis; width: 75%;
width: 75%;
text-align: left;
} }
.room-info {
float: right;
} }
.remove-bookmark { .remove-bookmark {
float: right; float: right;
@ -29,3 +26,4 @@
} }
} }
} }
}

5
sass/_controlbox.scss
View File

@ -117,7 +117,7 @@
width: 100%; width: 100%;
} }
} }
#available-chatrooms { dl.rooms-list {
margin: 0 1em; margin: 0 1em;
padding: 0; padding: 0;
text-align: left; text-align: left;
@ -143,7 +143,6 @@
} }
a { a {
&.room-info { &.room-info {
display: none;
clear: right; clear: right;
display: block; display: block;
&:before { &:before {
@ -156,7 +155,7 @@
} }
} }
.room-info { .room-info {
font-size: 11px; font-size: $font-size-small;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }

4
spec/bookmarks.js
View File

@ -386,7 +386,7 @@
beforeEach(function () { beforeEach(function () {
test_utils.openRoomsPanel(); test_utils.openRoomsPanel();
converse.bookmarks.reset(); 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 () { it("shows a list of bookmarks", function () {
@ -417,7 +417,7 @@
'jid': 'another@conference.shakespeare.lit' 'jid': 'another@conference.shakespeare.lit'
}).c('nick').t('JC').up().up(); }).c('nick').t('JC').up().up();
converse.connection._dataRecv(test_utils.createRequest(stanza)); 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="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}}" <a class="remove-bookmark icon-close" data-room-jid="{{jid}}" data-bookmark-name="{{name}}"
title="{{info_remove}}" href="#">&nbsp;</a> title="{{info_remove}}" href="#">&nbsp;</a>
<a class="room-info icon-room-info" data-room-jid="{{jid}}" <a class="room-info icon-room-info" data-room-jid="{{jid}}"
title="{{info_title}}" href="#">&nbsp;</a> 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> <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}}"/> <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</fieldset> </fieldset>
</form> </form>
<dl id="available-chatrooms"></dl> <dl id="available-chatrooms" class="rooms-list"></dl>