Update mockup with group/user filter toggle
This commit is contained in:
JC Brand
parent
e7d563b34b
commit
03cf27af67
@ -754,7 +754,7 @@ dl.add-converse-contact {
|
||||
clear: right;
|
||||
height: 22px;
|
||||
width: 12px;
|
||||
padding: 0px 5px 0 0;
|
||||
padding: 0px 15px 0 0;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
#conversejs ul#found-users {
|
||||
@ -891,10 +891,18 @@ dl.add-converse-contact {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#converse-roster .roster-filter {
|
||||
margin: 0 0.5em 5px 0.5em;
|
||||
width: 185px;
|
||||
padding: 0;
|
||||
margin: 0 0 5px 0.5em;
|
||||
width: 111px;
|
||||
height: 20px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
|
||||
border: 1px solid #999;
|
||||
display: inline-block;
|
||||
}
|
||||
#converse-roster .filter-type {
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
/* (jQ addClass:) if input has value: */
|
||||
#converse-roster .roster-filter.x {
|
||||
|
||||
10
index.html
10
index.html
@ -11,14 +11,8 @@
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="components/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="components/fontawesome/css/font-awesome.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.min.css" />
|
||||
<!-- Only for development: <script data-main="main" src="components/requirejs/require.js"></script> -->
|
||||
<![if gte IE 9]>
|
||||
<script src="builds/converse.website.min.js"></script>
|
||||
<![endif]>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="builds/converse.website-no-otr.min.js"></script>
|
||||
<![endif]-->
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
|
||||
<script data-main="main" src="components/requirejs/require.js"></script>
|
||||
</head>
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
|
||||
|
||||
@ -831,7 +831,7 @@ dl.add-converse-contact {
|
||||
clear: right;
|
||||
height: 22px;
|
||||
width: 12px;
|
||||
padding: 0px 5px 0 0;
|
||||
padding: 0px 15px 0 0;
|
||||
color: rgb(79, 79, 79);
|
||||
}
|
||||
|
||||
@ -990,10 +990,19 @@ dl.add-converse-contact {
|
||||
}
|
||||
|
||||
#converse-roster .roster-filter {
|
||||
margin: 0 0.5em 5px 0.5em;
|
||||
width: 185px;
|
||||
padding: 0;
|
||||
margin: 0 0 5px 0.5em;
|
||||
width: 111px;
|
||||
height: 20px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
|
||||
border: 1px solid #999;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#converse-roster .filter-type {
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
|
||||
/* (jQ addClass:) if input has value: */
|
||||
|
||||
@ -116,6 +116,10 @@
|
||||
</dl>
|
||||
<div id="converse-roster">
|
||||
<input class="roster-filter" placeholder="Type to filter">
|
||||
<select class="filter-type">
|
||||
<option value="contacts">Contacts</option>
|
||||
<option value="groups">Groups</option>
|
||||
</select>
|
||||
<dl class="roster-contacts" style="display: block;">
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
|
||||
|
||||
@ -114,89 +114,146 @@
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl id="converse-roster" style="display: block;">
|
||||
<dt id="xmpp-contacts" style="display: block;">My contacts</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
John Smit</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="away current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-away" title="this contact is away"></span>
|
||||
Francois Pienaar</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="dnd current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-dnd" title="This contact is busy"></span>
|
||||
Gary Teichmann</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="offline current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-offline" title="This contact is offline"></span>
|
||||
Corné Krige</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<div id="converse-roster">
|
||||
<input class="roster-filter" placeholder="Type to filter">
|
||||
<select class="filter-type">
|
||||
<option value="contacts">Contacts</option>
|
||||
<option value="groups">Groups</option>
|
||||
</select>
|
||||
<dl class="roster-contacts" style="display: block;">
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
Victor Matfield
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="away current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-away" title="this contact is away"></span>
|
||||
William Winterbottom
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="dnd current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-dnd" title="This contact is busy"></span>
|
||||
Gary Teichmann
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
|
||||
<dt id="xmpp-contact-requests" style="display: block;">Contact requests</dt>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span>Bob Skinstad</span>
|
||||
<span class="request-actions">
|
||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||
</span>
|
||||
</dd>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span>André Vos</span>
|
||||
<span class="request-actions">
|
||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||
</span>
|
||||
</dd>
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
|
||||
</dt>
|
||||
<dd class="away current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-away" title="this contact is away"></span>
|
||||
Allan Donald
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="offline current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-offline" title="This contact is offline"></span>
|
||||
Corné Krige
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
|
||||
<dt id="pending-xmpp-contacts" style="display: block;">Pending contacts</dt>
|
||||
<dd class="offline pending-xmpp-contact"><span>Rassie Erasmus</span>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="offline pending-xmpp-contact"><span>Victor Matfield</span>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div id="chatrooms" style="display: none;">
|
||||
<form class="add-chatroom" action="" method="post">
|
||||
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
|
||||
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
|
||||
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
|
||||
<input type="submit" name="join" value="Join">
|
||||
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
|
||||
</form>
|
||||
<dl id="available-chatrooms">
|
||||
<dt>Rooms on conference.opkode.im</dt>
|
||||
<dd class="available-chatroom">
|
||||
<a class="open-room"
|
||||
data-room-jid="converse.js@conference.opkode.im"
|
||||
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
|
||||
<a class="room-info icon-room-info"
|
||||
data-room-jid="converse.js@conference.opkode.im"
|
||||
title="Show more information on this room" href="#"> </a>
|
||||
<div class="room-info">
|
||||
<p class="room-info"><strong>Description:</strong></p>
|
||||
<p class="room-info"><strong>Occupants:</strong> 2</p>
|
||||
<p class="room-info"><strong>Features:</strong> </p>
|
||||
<ul>
|
||||
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
|
||||
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
|
||||
<li class="room-info">Semi-anonymous</li>
|
||||
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
|
||||
<p></p>
|
||||
</ul>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
John Smit
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
Bakkies Botha
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
|
||||
<dt class="roster-group" style="display: block;">
|
||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
|
||||
</dt>
|
||||
<dd class="online current-xmpp-contact">
|
||||
<a class="open-chat" title="Click to chat with this contact" href="#">
|
||||
<span class="icon-online" title="This contact is online"></span>
|
||||
James Small
|
||||
</a>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
|
||||
<dt id="xmpp-contact-requests" style="display: block;">
|
||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
|
||||
</dt>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span class="req-contact-name">Bob Skinstad</span>
|
||||
<span class="request-actions">
|
||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||
</span>
|
||||
</dd>
|
||||
<dd class="offline requesting-xmpp-contact">
|
||||
<span class="req-contact-name">André Vos</span>
|
||||
<span class="request-actions">
|
||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
<dt id="pending-xmpp-contacts" style="display: block;">
|
||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
|
||||
</dt>
|
||||
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Rassie Erasmus</span>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
|
||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div id="chatrooms" style="display: none;">
|
||||
<form class="add-chatroom" action="" method="post">
|
||||
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
|
||||
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
|
||||
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
|
||||
<input type="submit" name="join" value="Join">
|
||||
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
|
||||
</form>
|
||||
<dl id="available-chatrooms">
|
||||
<dt>Rooms on conference.opkode.im</dt>
|
||||
<dd class="available-chatroom">
|
||||
<a class="open-room"
|
||||
data-room-jid="converse.js@conference.opkode.im"
|
||||
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
|
||||
<a class="room-info icon-room-info"
|
||||
data-room-jid="converse.js@conference.opkode.im"
|
||||
title="Show more information on this room" href="#"> </a>
|
||||
<div class="room-info">
|
||||
<p class="room-info"><strong>Description:</strong></p>
|
||||
<p class="room-info"><strong>Occupants:</strong> 2</p>
|
||||
<p class="room-info"><strong>Features:</strong> </p>
|
||||
<ul>
|
||||
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
|
||||
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
|
||||
<li class="room-info">Semi-anonymous</li>
|
||||
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
|
||||
<p></p>
|
||||
</ul>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user