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

Render rooms and bookmarks lists according to mockups

Browse Source
This commit is contained in:
JC Brand 2018-02-16 15:08:16 +01:00
parent ede21e7c32
commit c4a99c7f29
10 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/converse.css
View File

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

2
css/inverse.css
View File

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

6
mockup/user-panel.html
View File

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

4
sass/_core.scss
View File

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

8
src/converse-bookmarks.js
View File

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

10
src/templates/bookmark.html
View File

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

4
src/templates/room_item.html
View File

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

5
src/templates/room_panel.html
View File

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

2
src/templates/rooms_list.html
View File

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

11
src/templates/rooms_list_item.html
View File

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