Procházet zdrojové kódy

HUE-1348 [search] Improve collection dropdown

Restyled dropdown, improved placeholder and made action button more visible
Enrico Berti před 12 roky
rodič
revize
d2f147d

+ 1 - 1
apps/search/src/search/forms.py

@@ -26,7 +26,7 @@ class QueryForm(forms.Form):
   collection = forms.ChoiceField() # Aka collection_id
 
   query = forms.CharField(label='', max_length=256, required=False, initial='',
-                          widget=forms.TextInput(attrs={'class': 'search-query input-xxlarge', 'placeholder': 'Search...'}))
+                          widget=forms.TextInput(attrs={'class': 'search-query input-xxlarge'}))
   fq = forms.CharField(label='', max_length=256, required=False, initial='', widget=forms.HiddenInput(), help_text='Solr Filter query')
   sort = forms.CharField(label='', max_length=256, required=False, initial='', widget=forms.HiddenInput(), help_text='Solr sort')
   rows = forms.CharField(label='', required=False, initial='', widget=forms.HiddenInput(), help_text='Solr records per page')

+ 40 - 16
apps/search/src/search/templates/search.mako

@@ -56,23 +56,28 @@ ${ commonheader(_('Search'), "search", user, "90px") | n,unicode }
     </div>
   % endif
   <form class="form-search" style="margin: 0">
-    <div class="dropdown" style="display: inline">
-      ${ _('Search in')} <a href="#" data-toggle="dropdown"><strong class="current-collection"></strong> <i class="fa fa-caret-down"></i></a>
-      <ul class="dropdown-menu">
-        % if user.is_superuser:
-          % for collection in hue_collections:
-            <li><a class="dropdown-collection" href="#" data-value="${ collection.id }" data-settings-url="${ collection.get_absolute_url() }">${ collection.label }</a></li>
-          % endfor
-        % else:
-          % for collection in hue_collections:
-            <li><a class="dropdown-collection" href="#" data-value="${ collection.id }">${ collection.label }</a></li>
-          % endfor
-        % endif
-      </ul>
-    </div>
+    <strong>${_("Search")}</strong>
     <div class="input-append">
+      <div class="selectMask">
+        <i class="fa fa-caret-down" style="float:right;margin-top: 8px; margin-left: 5px"></i>
+        <span class="current-collection"></span>
+        <div id="collectionPopover" class="hide">
+        <ul class="unstyled">
+          % if user.is_superuser:
+            % for collection in hue_collections:
+              <li><a class="dropdown-collection" href="#" data-value="${ collection.id }" data-settings-url="${ collection.get_absolute_url() }">${ collection.label }</a></li>
+            % endfor
+          % else:
+            % for collection in hue_collections:
+              <li><a class="dropdown-collection" href="#" data-value="${ collection.id }">${ collection.label }</a></li>
+            % endfor
+          % endif
+        </ul>
+        </div>
+      </div>
+
       ${ search_form | n,unicode }
-      <button type="submit" class="btn"><i class="fa fa-search"></i></button>
+      <button type="submit" class="btn btn-inverse"><i class="fa fa-search"></i></button>
     </div>
   </form>
 </div>
@@ -304,6 +309,7 @@ ${ commonheader(_('Search'), "search", user, "90px") | n,unicode }
 
 <script>
   $(document).ready(function () {
+
     if ($(".errorlist").length > 0) {
       $(".errorlist li").each(function () {
         $(document).trigger("error", $(this).text());
@@ -396,7 +402,7 @@ ${ commonheader(_('Search'), "search", user, "90px") | n,unicode }
       % endif
     % endif
 
-    $(".dropdown-collection").click(function (e) {
+    $(document).on("click", ".dropdown-collection", function (e) {
       e.preventDefault();
       var collectionId = $(this).data("value");
       $("select[name='collection']").val(collectionId);
@@ -406,6 +412,24 @@ ${ commonheader(_('Search'), "search", user, "90px") | n,unicode }
       $.cookie("hueSearchLastCollection", collectionId, {expires: 90});
       $("form").find("input[type='hidden']").val("");
       $("form").submit();
+      $(".selectMask").popover("hide");
+    });
+
+    function getCollectionPopoverContent() {
+      var _html = "<ul class='unstyled'>";
+      $("#collectionPopover ul li").each(function () {
+        if ($(this).find("a").data("value") != $("#id_collection").val()) {
+          _html += $(this).clone().wrap('<p>').parent().html();
+        }
+      });
+      _html += "</ul>";
+      return _html;
+    }
+
+    $(".selectMask").popover({
+      html: true,
+      content: getCollectionPopoverContent(),
+      placement: "bottom"
     });
 
     $("#recordsPerPage").change(function () {

+ 35 - 1
apps/search/static/css/search.css

@@ -135,4 +135,38 @@ body {
 
 .facetItem {
   display: none;
-}
+}
+
+.selectMask {
+  background-color: #F9F9F9;
+  background-image: linear-gradient(to bottom, #FFFFFF, #F1F1F1);
+  background-repeat: repeat-x;
+  border: 1px solid #C0C0C0;
+  border-right-color: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: none;
+  color: #444444;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 13px;
+  height: 29px;
+  line-height: 29px;
+  margin: 0;
+  margin-left: 5px;
+  min-height: 29px;
+  min-width: 120px;
+  padding: 0 8px;
+  text-shadow: none;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search-query {
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+  margin-left: 0 !important;
+  border-left: 0 !important;
+}