Update mockup with group/user filter toggle

03cf27af · JC Brand · e7d563b3 · 03cf27af · 03cf27af · 03cf27af
Commit 03cf27af authored Aug 11, 2014 by JC Brand
5 changed files
--- a/css/converse.css
+++ b/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 {

--- a/index.html
+++ b/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">

--- a/less/converse.less
+++ b/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: */

--- a/mockup/controlbox.html
+++ b/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>

--- a/mockup/index.html
+++ b/mockup/index.html