e82112715d
Instead of padding the container, pad individual elements that need it. This enables us to have highlighting (e.g. on hover) that spans the full width of the controlbox. updates #1069
215 lines
14 KiB
HTML
215 lines
14 KiB
HTML
<!-- <div id="users" class="controlbox-pane"> -->
|
|
<div class="controlbox-padded userinfo">
|
|
<div class="profile d-flex">
|
|
<canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
|
|
<span class="username w-100 align-self-center">Romeo Montague</span>
|
|
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
|
|
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
|
|
<a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a>
|
|
</div>
|
|
<div class="d-flex xmpp-status">
|
|
<span class="online w-100 align-self-center" data-value="online">
|
|
<span class="fa fa-circle"></span> Online</span>
|
|
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="headlines" class="controlbox-section">
|
|
<div class="d-flex controlbox-padded">
|
|
<span class="w-100 controlbox-heading">Announcements</span>
|
|
</div>
|
|
<div class="list-container">
|
|
<div class="items-list">
|
|
<div class="controlbox-padded list-item open-headline d-flex flex-row">
|
|
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Montague.lit</a>
|
|
</div>
|
|
<div class="controlbox-padded list-item open-headline d-flex flex-row">
|
|
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Capulet.lit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chatrooms" class="controlbox-section">
|
|
<div class="d-flex controlbox-padded">
|
|
<span class="w-100 controlbox-heading">Group Chats</span>
|
|
<a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
|
|
</div>
|
|
<div class="list-container rooms-list-container">
|
|
<div class="rooms-list items-list">
|
|
<div class="controlbox-padded list-item 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="chatroom.html">Capulet's orchard</a>
|
|
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
|
|
<a href="#"
|
|
class="room-info fa fa-info-circle" 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">
|
|
</a>
|
|
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room"> </a>
|
|
</div>
|
|
<div class="controlbox-padded list-item 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="chatroom.html">Juliet's Balcony</a>
|
|
<a href="#"
|
|
class="room-info fa fa-info-circle" 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">
|
|
</a>
|
|
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room"> </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bookmarks" class="controlbox-section">
|
|
<div class="d-flex controlbox-padded">
|
|
<span class="w-100 controlbox-heading">Bookmarks</span>
|
|
</div>
|
|
<div class="list-container rooms-list-container">
|
|
<div class="rooms-list items-list">
|
|
<div class="controlbox-padded list-item 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="chatroom.html">Capulet's orchard</a>
|
|
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
|
|
<a href="#"
|
|
class="room-info fa fa-info-circle" 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">
|
|
</a>
|
|
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room"> </a>
|
|
</div>
|
|
<div class="controlbox-padded list-item 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="chatroom.html">Juliet's Balcony</a>
|
|
<a href="#"
|
|
class="room-info fa fa-info-circle" 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">
|
|
</a>
|
|
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room"> </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="converse-roster" class="controlbox-section">
|
|
<div class="d-flex controlbox-padded">
|
|
<span class="w-100 controlbox-heading">Contacts</span>
|
|
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
|
|
</div>
|
|
<form class="controlbox-padded roster-filter-form input-button-group">
|
|
<div class="form-inline flex-nowrap">
|
|
<div class="btn-group">
|
|
<input value="" class="roster-filter form-control" placeholder="Filter">
|
|
<span class="clear-roster-filter fa fa-times {[ if (!o.filter_text) { ]} hidden {[ } ]}"></span>
|
|
</div>
|
|
<div class="filter-by d-flex flex-nowrap">
|
|
<span class="fa fa-user" title="Filter by contacts"></span>
|
|
<span class="fa fa-users" title="Filter by groups"></span>
|
|
<span class="fa fa-circle" title="Filter by status"></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="roster-contacts">
|
|
<div class="roster-group" id="xmpp-contact-requests">
|
|
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
|
<span class="fa fa-caret-down"></span> Contact Requests</a>
|
|
<ul class="roster-group-contacts">
|
|
<li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
|
|
<span class="req-contact-name w-100">The Nurse</span>
|
|
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
|
|
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
|
|
<span class="req-contact-name w-100">Friar Laurence</span>
|
|
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
|
|
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="roster-group" data-group="Colleagues">
|
|
<a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
|
<span class="fa fa-caret-down"></span> Colleagues</a>
|
|
<ul>
|
|
<li class=" controlbox-padded away current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded dnd current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
</li>
|
|
</div>
|
|
|
|
<div class="roster-group" data-group="Family">
|
|
<a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
|
<span class="fa fa-caret-down"></span> Family</a>
|
|
<ul>
|
|
<li class=" controlbox-padded online current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded offline current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded offline current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="roster-group" data-group="Friends">
|
|
<a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
|
<span class="fa fa-caret-down"></span> Friends</a>
|
|
<ul>
|
|
<li class=" controlbox-padded online current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="roster-group" data-group="Ungrouped">
|
|
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
|
<span class="fa fa-caret-down"></span> Ungrouped</a>
|
|
<ul>
|
|
<li class=" controlbox-padded online current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded online current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded online current-xmpp-contact d-flex">
|
|
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
|
|
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="roster-group" id="pending-xmpp-contacts">
|
|
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
|
|
<span class="fa fa-caret-down"></span> Pending Contacts</a>
|
|
<ul>
|
|
<li class=" controlbox-padded offline pending-xmpp-contact d-flex">
|
|
<span class="pending-contact-name w-100">An Apothecary</span>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
<li class=" controlbox-padded offline pending-xmpp-contact d-flex">
|
|
<span class="pending-contact-name w-100">Abram</span>
|
|
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|