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

Update mockup with group/user filter toggle

Browse Source
This commit is contained in:
JC Brand 2014-08-11 19:55:58 +02:00
parent e7d563b34b
commit 03cf27af67
5 changed files with 167 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/converse.css
View File

@ -754,7 +754,7 @@ dl.add-converse-contact {
clear: right; clear: right;
height: 22px; height: 22px;
width: 12px; width: 12px;
padding: 0px 5px 0 0; padding: 0px 15px 0 0;
color: #4f4f4f; color: #4f4f4f;
} }
#conversejs ul#found-users { #conversejs ul#found-users {
@ -891,10 +891,18 @@ dl.add-converse-contact {
overflow-x: hidden; overflow-x: hidden;
} }
#converse-roster .roster-filter { #converse-roster .roster-filter {
margin: 0 0.5em 5px 0.5em; padding: 0;
width: 185px; 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; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999; 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: */ /* (jQ addClass:) if input has value: */
#converse-roster .roster-filter.x { #converse-roster .roster-filter.x {

10
index.html
View File

@ -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/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="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/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<!-- Only for development: <script data-main="main" src="components/requirejs/require.js"></script> --> <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]-->
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <body id="page-top" data-spy="scroll" data-target=".navbar-custom">

15
less/converse.less
View File

@ -831,7 +831,7 @@ dl.add-converse-contact {
clear: right; clear: right;
height: 22px; height: 22px;
width: 12px; width: 12px;
padding: 0px 5px 0 0; padding: 0px 15px 0 0;
color: rgb(79, 79, 79); color: rgb(79, 79, 79);
} }
@ -990,10 +990,19 @@ dl.add-converse-contact {
} }
#converse-roster .roster-filter { #converse-roster .roster-filter {
margin: 0 0.5em 5px 0.5em; padding: 0;
width: 185px; 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; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999; 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: */ /* (jQ addClass:) if input has value: */

4
mockup/controlbox.html
View File

@ -116,6 +116,10 @@
</dl> </dl>
<div id="converse-roster"> <div id="converse-roster">
<input class="roster-filter" placeholder="Type to filter"> <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;"> <dl class="roster-contacts" style="display: block;">
<dt class="roster-group" 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> <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>

219
mockup/index.html
View File

@ -114,89 +114,146 @@
</ul> </ul>
</dd> </dd>
</dl> </dl>
<dl id="converse-roster" style="display: block;"> <div id="converse-roster">
<dt id="xmpp-contacts" style="display: block;">My contacts</dt> <input class="roster-filter" placeholder="Type to filter">
<dd class="online current-xmpp-contact"> <select class="filter-type">
<a class="open-chat" title="Click to chat with this contact" href="#"> <option value="contacts">Contacts</option>
<span class="icon-online" title="This contact is online"></span> <option value="groups">Groups</option>
John Smit</a> </select>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <dl class="roster-contacts" style="display: block;">
</dd> <dt class="roster-group" style="display: block;">
<dd class="away current-xmpp-contact"> <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
<a class="open-chat" title="Click to chat with this contact" href="#"> </dt>
<span class="icon-away" title="this contact is away"></span> <dd class="online current-xmpp-contact">
Francois Pienaar</a> <a class="open-chat" title="Click to chat with this contact" href="#">
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <span class="icon-online" title="This contact is online"></span>
</dd> Victor Matfield
<dd class="dnd current-xmpp-contact"> </a>
<a class="open-chat" title="Click to chat with this contact" href="#"> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
<span class="icon-dnd" title="This contact is busy"></span> </dd>
Gary Teichmann</a> <dd class="away current-xmpp-contact">
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <a class="open-chat" title="Click to chat with this contact" href="#">
</dd> <span class="icon-away" title="this contact is away"></span>
<dd class="offline current-xmpp-contact"> William Winterbottom
<a class="open-chat" title="Click to chat with this contact" href="#"> </a>
<span class="icon-offline" title="This contact is offline"></span> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
Corné Krige</a> </dd>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <dd class="dnd current-xmpp-contact">
</dd> <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> <dt class="roster-group" style="display: block;">
<dd class="offline requesting-xmpp-contact"> <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
<span>Bob Skinstad</span> </dt>
<span class="request-actions"> <dd class="away current-xmpp-contact">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a> <a class="open-chat" title="Click to chat with this contact" href="#">
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a> <span class="icon-away" title="this contact is away"></span>
</span> Allan Donald
</dd> </a>
<dd class="offline requesting-xmpp-contact"> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
<span>André Vos</span> </dd>
<span class="request-actions"> <dd class="offline current-xmpp-contact">
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a> <a class="open-chat" title="Click to chat with this contact" href="#">
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a> <span class="icon-offline" title="This contact is offline"></span>
</span> Corné Krige
</dd> </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> <dt class="roster-group" style="display: block;">
<dd class="offline pending-xmpp-contact"><span>Rassie Erasmus</span> <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> </dt>
</dd> <dd class="online current-xmpp-contact">
<dd class="offline pending-xmpp-contact"><span>Victor Matfield</span> <a class="open-chat" title="Click to chat with this contact" href="#">
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a> <span class="icon-online" title="This contact is online"></span>
</dd> John Smit
</dl> </a>
</div> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
<div id="chatrooms" style="display: none;"> </dd>
<form class="add-chatroom" action="" method="post"> <dd class="online current-xmpp-contact">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name"> <a class="open-chat" title="Click to chat with this contact" href="#">
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname"> <span class="icon-online" title="This contact is online"></span>
<input type="text" name="server" class="new-chatroom-server" placeholder="Server"> Bakkies Botha
<input type="submit" name="join" value="Join"> </a>
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;"> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</form> </dd>
<dl id="available-chatrooms">
<dt>Rooms on conference.opkode.im</dt> <dt class="roster-group" style="display: block;">
<dd class="available-chatroom"> <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
<a class="open-room" </dt>
data-room-jid="converse.js@conference.opkode.im" <dd class="online current-xmpp-contact">
title="Click to open this room" href="#">Special chatroom with a long name (2)</a> <a class="open-chat" title="Click to chat with this contact" href="#">
<a class="room-info icon-room-info" <span class="icon-online" title="This contact is online"></span>
data-room-jid="converse.js@conference.opkode.im" James Small
title="Show more information on this room" href="#">&nbsp;</a> </a>
<div class="room-info"> <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
<p class="room-info"><strong>Description:</strong></p> </dd>
<p class="room-info"><strong>Occupants:</strong> 2</p>
<p class="room-info"><strong>Features:</strong> </p> <dt id="xmpp-contact-requests" style="display: block;">
<ul> <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
<li class="room-info">Moderated</li><li class="room-info">Open room</li> </dt>
<li class="room-info">Permanent room</li><li class="room-info">Public</li> <dd class="offline requesting-xmpp-contact">
<li class="room-info">Semi-anonymous</li> <span class="req-contact-name">Bob Skinstad</span>
<li class="room-info">Requires authentication <span class="icon-lock"></span></li> <span class="request-actions">
<p></p> <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
</ul> <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
</div> </span>
</dd> </dd>
</dl> <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="#">&nbsp;</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> </div>
</div> </div>