Merge pull request mozilla-services#2488 from AdrianGaudebert/1073591…

…-simple-search Fixes bug 1073591 - Added a simplified UI to Super Search.
lauraxt · Nov 20, 2014 · b00d557 · b00d557
2 parents 4fd4ea4 + 2938355
commit b00d557
Show file tree

Hide file tree

Showing 9 changed files with 468 additions and 94 deletions.
diff --git a/webapp-django/crashstats/base/static/img/3rdparty/silk/magnifier.png b/webapp-django/crashstats/base/static/img/3rdparty/silk/magnifier.png
diff --git a/webapp-django/crashstats/base/templates/crashstats_base.html b/webapp-django/crashstats/base/templates/crashstats_base.html
@@ -113,8 +113,13 @@ <h1>Product Navigation</h1>
   {% endblock %}
 
         <div class="search">
-            <a href="{{ url('crashstats:query') }}?product={{ product }}{% if version and version != 'ALL' %}&amp;version={{ product}}:{{ version }}{% endif %}#advanced">Advanced Search</a>
-            - <a href="{{ url('supersearch.search') }}">Super Search</a>
+            <a href="{{ url('crashstats:query') }}?product={{ product }}{% if version and version != 'ALL' %}&amp;version={{ product}}:{{ version }}{% endif %}#advanced">
+                Advanced Search
+            </a>
+            -
+            <a href="{{ url('supersearch.search') }}?product={{ product }}{% if version and version != 'ALL' %}&amp;version={{ version }}{% endif %}">
+                Super Search
+            </a>
         </div>
     </div>
 

diff --git a/webapp-django/crashstats/settings/base.py b/webapp-django/crashstats/settings/base.py
@@ -238,6 +238,14 @@ def COMPRESS_JINJA2_GET_ENVIRONMENT():
     'name',
 )
 
+# fields used in the simplified UI for Super Search
+SIMPLE_SEARCH_FIELDS = (
+    'product',
+    'version',
+    'platform',
+    'process_type',
+)
+
 # the number of result filter on tcbs
 TCBS_RESULT_COUNTS = (
     '50',

diff --git a/webapp-django/crashstats/supersearch/static/supersearch/css/search.less b/webapp-django/crashstats/supersearch/static/supersearch/css/search.less
@@ -15,14 +15,11 @@
         vertical-align: middle;
     }
     #search-button:before {
-        content: url(../../img/search-icon.png);
+        content: url(../../img/3rdparty/silk/magnifier.png);
     }
     .new-line:before {
         content: url(../../img/3rdparty/silk/application_form_add.png);
     }
-    .customize {
-        clear: both;
-    }
     .customize:before {
         content: url(../../img/3rdparty/silk/wrench.png);
     }
@@ -57,6 +54,102 @@
         text-indent: -9999px;
     }
 
+    #ui-mode-switch {
+        font-weight: bold;
+        font-size: 1.1em;
+
+        span {
+            background-color: #222;
+            border-radius: 12px;
+            box-shadow: inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
+            display: inline-block;
+            float: left;
+            font-size: .9em;
+            height: 22px;
+            margin-right: 8px;
+            overflow: hidden;
+            position: relative;
+            text-align: left;
+            width: 50px;
+
+            input {
+                bottom: 0;
+                cursor: pointer;
+                display: block;
+                filter: alpha(opacity=0);
+                height: 100%;
+                left: 0;
+                margin: 0 0;
+                opacity: 0;
+                padding: 0 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100%;
+                z-index: 2;
+            }
+            input + label {
+                background-color: #3c3c3c;
+                background-image: linear-gradient(
+                    -40deg,
+                    rgba(0, 0, 0, 0),
+                    rgba(255, 255, 255, 0.1),
+                    rgba(0, 0, 0, 0.2)
+                );
+                border-radius: 11px;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.7);
+                color: #999;
+                display: inline-block;
+                height: 20px;
+                line-height: 20px;
+                margin: 1px;
+                text-align: center;
+                text-shadow: 0 -1px 0 rgba(0,0,0,0.7);
+                transition: margin-left 0.2s ease-in-out;
+                width: 30px;
+            }
+            label:before {
+                content: attr(data-off);
+            }
+            input:checked + label {
+                background-color: #034B78;
+                color: white;
+                margin-left: 19px;
+            }
+            input:checked + label:before {
+                content: attr(data-on);
+            }
+        }
+    }
+
+    #advanced-search,
+    #simple-search {
+        clear: both;
+    }
+
+    #simple-search {
+        display: none;
+
+        fieldset {
+            text-align: center;
+
+            > div {
+                float: left;
+                padding: 4px 10px;
+                width: 25%;
+
+                select {
+                    width: 100%;
+                }
+
+                label {
+                    display: block;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
     fieldset.options {
         h4 {
             cursor: pointer;

diff --git a/webapp-django/crashstats/supersearch/static/supersearch/js/lib/dynamic_form.js b/webapp-django/crashstats/supersearch/static/supersearch/js/lib/dynamic_form.js
@@ -20,11 +20,19 @@
      */
     function dynamicForm(action, initialParams, containerId, onReadyCallback, sortFuntion) {
         var form = this;
+        var dynamic = form.data('dynamic');
+        var lines = [];
+        var container = form;
+
+        if (dynamic) {
+            lines = dynamic.lines;
+            container = dynamic.container;
+        }
+
         initialParams = initialParams || null;
         containerId = containerId || null;
 
         if (action === 'newLine' || action === 'getParams' || action === 'setParams') {
-            var dynamic = form.data('dynamic');
             if (!dynamic) {
                 throw new Error('Impossible to call ' + action + ' on an object that was not initialized first');
             }
@@ -51,9 +59,7 @@
         var fieldsURL = action;
         var fields = {};
         var sortedFieldNames = [];
-        var lines = [];
         var lastFieldLineId = 0;
-        var container = form;
 
         if (containerId) {
             container = $(containerId, form);
@@ -564,7 +570,9 @@
             newLine: newLine,
             createLine: createLine,
             getParams: getParams,
-            setParams: setParams
+            setParams: setParams,
+            lines: lines,
+            container: container
         });
 
         return form;