Work on search/icons

Author: jlukic

server/documents/elements/icon.html.eco

@@ -3753,7 +3753,7 @@ themes      : ['Default']
       <h4 class="ui header">Icons</h4>
       <p>Several icons can be used together as a group</p>
       <i class="huge icons">
-        <i class="big thin circle icon"></i>
+        <i class="big circle outline icon"></i>
         <i class="user icon"></i>
       </i>
     </div>
@@ -3762,10 +3762,6 @@ themes      : ['Default']
         <i class="big red dont icon"></i>
         <i class="black user icon"></i>
       </i>
-      <i class="huge icons">
-        <i class="big loading sun icon"></i>
-        <i class="user icon"></i>
-      </i>
     </div>
     <div class="example" data-class="corner">
       <h4 class="ui header">Corner Icon</h4>

server/documents/hotfix.html

@@ -8,73 +8,30 @@
 ---
 
 <div class="ui container">
-  <div class="ui search">
-  <div class="ui searchbox action icon input">
-    <input type="text" placeholder="Search">
-    <button id="search_options" class="ui transparent icon button">
-      <i class="angle down icon"></i>
-    </button>
-    <button class="ui blue icon button">
-      <i class="search icon"></i>
-    </button>
-  </div>
-  <div id="search_popup" class="ui fluid popup">
-      <div class="ui form">
-        <div class="fields">
-          <div class="inline field">
-            <div class="ui slider checkbox">
-              <input type="checkbox" tabindex="0" class="hidden">
-              <label>Exact Phrase</label>
-            </div>
-            <label></label>
-          </div>
-          <div class="field">
-            <select class="ui dropdown">
-              <option value="0">All Words</option>
-              <option value="1">Any Words</option>
-              <option value="2">Boolean</option>
-            </select>
-          </div>
-          <div class="inline field">
-            <div class="ui slider checkbox">
-              <input type="checkbox" tabindex="0" class="hidden">
-              <label>Only search email</label>
-            </div>
-            <label></label>
-          </div>
-        </div>
-        <div class="field">
-          <div class="ui fluid multiple search selection dropdown">
-            <input type="hidden" name="tags">
-            <div class="default text">Select Tags</div>
-            <div class="menu">
-              <div class="item" data-value="ub">uploaded by</div>
-              <div class="item" data-value="es">email senders</div>
-              <div class="item" data-value="er">email recepients</div>
-              <div class="item" data-value="dt">document types</div>
-              <div class="item" data-value="a">authors</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  <div class="results"></div>
+
+ <select name="skills" class="ui fluid search dropdown">
+  <option value="">Skills</option>
+  <option value="angular">Angular</option>
+  <option value="css">CSS</option>
+  <option value="design">Graphic Design</option>
+</select>
 </div>
 
 
 </div>
 
 <script>
   $(document).ready(function() {
-    $('.ui.checkbox').checkbox();
-$('.dropdown').dropdown();
-$('#search_options').popup({
-  on: 'click',
-  position: 'bottom right',
-  popup: '#search_popup',
-  movePopup: false
-});
-
+  $('.dropdown')
+  .dropdown({
+    action: 'select',
+    onChange: function(value, text, $selectedItem) {
+      console.log(value, text, $selectedItem);
+
+      // $selectedItem is defined
+    }
+  })
+;
   });
 </script>
 
@@ -84,20 +41,6 @@
 .ui.container {
   padding-top: 6em;
 }
-.searchbox {
-  width: 100%;
-  max-width: 50em;
-}
-
-.ui.transparent.icon.button {
-  margin-left: -39px;
-  background: transparent;
-  box-shadow: none;
-}
-
-#search_popup .fields .field {
-  align-self: center;
-}
 
 
 </style>

server/documents/modules/search.html.eco

@@ -217,6 +217,21 @@ type        : 'UI Module'
 
     <h2 class="ui dividing header">Variations</h2>
 
+    <div class="category example">
+      <h4 class="ui header">
+        Disabled
+        <div class="ui teal label">New in 2.3.1</div>
+      </h4>
+      <p>A search can show it is currently unable to be interacted with</p>
+      <div class="ui disabled category search">
+        <div class="ui icon input">
+          <input class="prompt" type="text" placeholder="Search animals...">
+          <i class="search icon"></i>
+        </div>
+        <div class="results"></div>
+      </div>
+    </div>
+
     <div class="category example">
       <h4 class="ui header">Fluid</h4>
       <p>A search can have its results take up the width of its container</p>