Ver Fonte

Update mockup with group/user filter toggle

JC Brand há 11 anos atrás
pai
commit
03cf27af67
5 ficheiros alterados com 167 adições e 95 exclusões
  1. 11 3
      css/converse.css
  2. 2 8
      index.html
  3. 12 3
      less/converse.less
  4. 4 0
      mockup/controlbox.html
  5. 138 81
      mockup/index.html

+ 11 - 3
css/converse.css

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

+ 2 - 8
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">

+ 12 - 3
less/converse.less

@@ -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: */

+ 4 - 0
mockup/controlbox.html

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

+ 138 - 81
mockup/index.html

@@ -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="#">&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>
+                        <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="#">&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>