소스 검색

HUE-2126 [search] Beautify limit, range, zoom out, etc. of widgets

Removed buttons and added labels for range and sort
Fixed size problems for small column widgets
Unified Zoom out
Enrico Berti 11 년 전
부모
커밋
4d3b7785bf
3개의 변경된 파일72개의 추가작업 그리고 21개의 파일을 삭제
  1. 35 17
      apps/search/src/search/templates/search.mako
  2. 31 1
      apps/search/static/css/search.css
  3. 6 3
      apps/search/static/js/nv.d3.multiBarWithBrushChart.js

+ 35 - 17
apps/search/src/search/templates/search.mako

@@ -309,6 +309,24 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 </script>
 
 <script type="text/html" id="facet-toggle">
+    <div class="facet-field-cnt" data-bind="visible: properties.canRange">
+      <span class="facet-field-label facet-field-label-fixed-width">${ _('Type') }</span>
+      <a href="javascript: void(0)" title="${ _('Toggle range or field facet') }" data-bind="click: $root.collection.toggleRangeFacet" data-loading-text="...">
+        <i class="fa" data-bind="css: { 'fa-arrows-h': type() == 'range', 'fa-circle': type() == 'field' }, attr: { title: type() == 'range' ? 'Range' : 'Term' }"></i>
+        <span data-bind="visible: type() == 'range'">${_('range')}</span>
+        <span data-bind="visible: type() == 'field'">${_('field')}</span>
+      </a>
+    </div>
+
+    <div class="facet-field-cnt">
+      <span class="facet-field-label facet-field-label-fixed-width">${ _('Sorting') }</span>
+      <a href="javascript: void(0)" title="${ _('Toggle sort order') }" data-bind="click: $root.collection.toggleSortFacet" data-loading-text="...">
+        <i class="fa" data-bind="css: { 'fa-caret-down': properties.sort() == 'desc', 'fa-caret-up': properties.sort() == 'asc' }"></i>
+        <span data-bind="visible: properties.sort() == 'desc'">${_('descending')}</span>
+        <span data-bind="visible: properties.sort() == 'asc'">${_('ascending')}</span>
+      </a>
+    </div>
+
     <!-- ko if: type() == 'range' -->
       <!-- ko ifnot: properties.isDate() -->
         <div class="slider-cnt" data-bind="slider: {start: properties.start, end: properties.end, gap: properties.gap, min: properties.min, max: properties.max}"></div>
@@ -322,17 +340,11 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
     <!-- ko if: type() == 'field' -->
       <div class="facet-field-cnt">
         <span class="spinedit-cnt">
-          <span class="facet-field-label">${ _('Limit') }</span> <input type="text" class="input-medium" data-bind="spinedit: properties.limit" />
+          <span class="facet-field-label facet-field-label-fixed-width">${ _('Limit') }</span> <input type="text" class="input-medium" data-bind="spinedit: properties.limit" />
         </span>
       </div>
     <!-- /ko -->
 
-    <a href="javascript: void(0)" title="${ _('Toggle range or field facet') }" class="btn btn-loading" data-bind="visible: properties.canRange, click: $root.collection.toggleRangeFacet" data-loading-text="...">
-      <i class="fa" data-bind="css: { 'fa-arrows-h': type() == 'range', 'fa-circle': type() == 'field' }, attr: { title: type() == 'range' ? 'Range' : 'Term' }"></i>
-    </a>
-    <a href="javascript: void(0)" title="${ _('Toggle sort order') }" class="btn btn-loading" data-bind="click: $root.collection.toggleSortFacet" data-loading-text="...">
-      <i class="fa" data-bind="css: { 'fa-caret-down': properties.sort() == 'desc', 'fa-caret-up': properties.sort() == 'asc' }"></i>
-    </a>
 </script>
 
 <script type="text/html" id="facet-widget">
@@ -715,9 +727,9 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       </span>
     </div>
 
-    <div style="padding-bottom: 10px; text-align: right; padding-right: 20px">
+    <div style="padding-bottom: 10px; text-align: right; padding-right: 20px" data-bind="visible: counts.length > 0">
       <span class="facet-field-label">${ _('Zoom') }</span>
-      <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i> ${ _('reset') }</a> &nbsp;|&nbsp;
+      <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i> ${ _('reset') }</a>
       <span class="facet-field-label">${ _('Group by') }</span>
       <select class="input-medium" data-bind="options: $root.query.multiqs, optionsValue: 'id',optionsText: 'label', value: $root.query.selectedMultiq"></select>
     </div>
@@ -747,7 +759,10 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
     <div data-bind="with: $root.collection.getFacetById($parent.id())">
       <!-- ko if: type() == 'range' -->
-        <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i></a>
+        <div style="padding-bottom: 10px; text-align: right; padding-right: 20px">
+          <span class="facet-field-label">${ _('Zoom') }</span>
+          <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i> ${ _('reset') }</a>
+        </div>
       <!-- /ko -->
     </div>
 
@@ -782,7 +797,10 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       </span>
     </div>
 
-    <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i></a>
+    <div style="padding-bottom: 10px; text-align: right; padding-right: 20px" data-bind="visible: counts.length > 0">
+      <span class="facet-field-label">${ _('Zoom') }</span>
+      <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i> ${ _('reset') }</a>
+    </div>
 
     <div data-bind="lineChart: {datum: {counts: counts, widget_id: $parent.id(), label: label}, field: field, label: label,
       transformer: lineChartDataTransformer,
@@ -1446,8 +1464,8 @@ $(document).ready(function () {
                       '<div class="input-prepend input-group">' +
                         '<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>' +
                         '<input type="text" class="input-small form-control start-date" />' +
-                      '</div>&nbsp;' +
-                      '<div class="input-prepend input-group">' +
+                      '</div>' +
+                      '<div class="input-prepend input-group left-margin">' +
                         '<span class="add-on input-group-addon"><i class="fa fa-clock-o"></i></span>' +
                         '<input type="text" class="input-mini form-control start-time" />' +
                       '</div>' +
@@ -1457,8 +1475,8 @@ $(document).ready(function () {
                       '<div class="input-prepend input-group">' +
                         '<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>' +
                         '<input type="text" class="input-small form-control end-date" />' +
-                      '</div>&nbsp;' +
-                      '<div class="input-prepend input-group">' +
+                      '</div>' +
+                      '<div class="input-prepend input-group left-margin">' +
                         '<span class="add-on input-group-addon"><i class="fa fa-clock-o"></i></span>' +
                         '<input type="text" class="input-mini form-control end-time" />' +
                       '</div>' +
@@ -1472,7 +1490,7 @@ $(document).ready(function () {
                     '</div>' +
                     '<div class="facet-field-cnt picker">' +
                       '<div class="facet-field-label facet-field-label-fixed-width"></div>' +
-                      '<div class="facet-field-switch"><a href="javascript:void(0)"><i class="fa fa-calendar-o"></i> ${ _('Custom properties') }</a></div>' +
+                      '<div class="facet-field-switch"><a href="javascript:void(0)"><i class="fa fa-calendar-o"></i> ${ _('Custom format') }</a></div>' +
                     '</div>' +
                     '<div class="facet-field-cnt custom">' +
                       '<div class="facet-field-label facet-field-label-fixed-width">${ _('Start') }</div>' +
@@ -1497,7 +1515,7 @@ $(document).ready(function () {
                     '</div>' +
                     '<div class="facet-field-cnt custom">' +
                       '<div class="facet-field-label facet-field-label-fixed-width"></div>' +
-                      '<div class="facet-field-switch"><a href="javascript:void(0)"><i class="fa fa-calendar"></i> ${ _('Show pickers') }</a></div>' +
+                      '<div class="facet-field-switch"><a href="javascript:void(0)"><i class="fa fa-calendar"></i> ${ _('Date pickers') }</a></div>' +
                     '</div>' +
 
                   '</div>'

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

@@ -591,7 +591,37 @@ body.modal-open {
   display: inline-block;
 }
 
+.simpledaterangepicker .left-margin {
+  margin-left: 6px;
+}
+
+.card-column.span2 .facet-field-label-fixed-width {
+  text-align: left;
+  width: auto;
+}
+
+.card-column.span2 .simpledaterangepicker .facet-field-label-fixed-width {
+  display: block;
+}
+
+.card-column.span2 .simpledaterangepicker .input-prepend {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.card-column.span2 .simpledaterangepicker .left-margin {
+  margin-left: 0;
+}
+
+.card-column.span2 .simpledaterangepicker input[type='text'] {
+  width: 70%;
+}
+
+.card-column.span2 .simpledaterangepicker select {
+  margin-bottom: 5px;
+}
+
+
 .card-widget .input-append, .card-widget .input-prepend, .card-widget select, .card-widget input {
   margin-bottom: 0;
 }
-

+ 6 - 3
apps/search/static/js/nv.d3.multiBarWithBrushChart.js

@@ -204,9 +204,12 @@ nv.models.multiBarWithBrushChart = function() {
             series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
           })
 
-        g.select('.nv-legendWrap')
-            .datum(data)
-            .call(legend);
+        try {
+          g.select('.nv-legendWrap')
+              .datum(data)
+              .call(legend);
+        }
+        catch (e){}
 
         if ( margin.top != legend.height()) {
           margin.top = legend.height();