Эх сурвалжийг харах

[search] Added icons to the left

Enrico Berti 10 жил өмнө
parent
commit
749ca4edc9

+ 2 - 1
apps/search/src/search/models.py

@@ -355,6 +355,7 @@ class Collection(models.Model):
 
 
   @classmethod
   @classmethod
   def _make_gridlayout_header_field(cls, field, isDynamic=False):
   def _make_gridlayout_header_field(cls, field, isDynamic=False):
+    print field
     return {'name': field['name'], 'sort': {'direction': None}, 'isDynamic': isDynamic}
     return {'name': field['name'], 'sort': {'direction': None}, 'isDynamic': isDynamic}
 
 
   def get_absolute_url(self):
   def get_absolute_url(self):
@@ -558,7 +559,7 @@ class Collection2(object):
 
 
   @classmethod
   @classmethod
   def _make_gridlayout_header_field(cls, field, isDynamic=False):
   def _make_gridlayout_header_field(cls, field, isDynamic=False):
-    return {'name': field['name'], 'sort': {'direction': None}, 'isDynamic': isDynamic}
+    return {'name': field['name'], 'type': field['type'], 'sort': {'direction': None}, 'isDynamic': isDynamic}
 
 
   def get_absolute_url(self):
   def get_absolute_url(self):
     return reverse('search:index') + '?collection=%s' % self.id
     return reverse('search:index') + '?collection=%s' % self.id

+ 55 - 0
apps/search/src/search/static/search/css/search.css

@@ -592,4 +592,59 @@ em {
   text-align: left;
   text-align: left;
   white-space: nowrap;
   white-space: nowrap;
   padding-right: 20px;
   padding-right: 20px;
+}
+
+.grid-row {
+  position: relative;
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.grid-left-bar {
+  position:absolute;
+  display:inline-block;
+  height:auto;
+  left:0;
+  top:0;
+  bottom:0;
+  width: 35px;
+}
+
+.grid-results {
+  margin-left: 35px;
+  margin-right: 20px;
+}
+
+.grid-side-btn {
+  color: #DBE8F1;
+  display: inline-block;
+  line-height: 27px;
+  height: 27px;
+  min-height: 27px;
+  padding: 0 7px;
+  margin: 0;
+  font-size: 13px;
+  cursor: pointer;
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+}
+
+.grid-side-btn.disabled {
+  cursor: default !important;
+  color: #DBE8F1 !important;
+}
+
+.grid-side-btn:focus {
+  color: #DBE8F1;
+}
+
+.grid-side-btn.active {
+  color: #338bb8;
+}
+
+.grid-side-btn:hover {
+  color: #338bb8;
 }
 }

+ 20 - 0
apps/search/src/search/static/search/js/search.ko.js

@@ -1246,6 +1246,26 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
 
 
   self.isPlayerMode = ko.observable(false);
   self.isPlayerMode = ko.observable(false);
 
 
+  var snippet = {};
+
+  self.chartType = ko.observable(typeof snippet.chartType != "undefined" && snippet.chartType != null ? snippet.chartType : ko.HUE_CHARTS.TYPES.BARCHART);
+  self.chartSorting = ko.observable(typeof snippet.chartSorting != "undefined" && snippet.chartSorting != null ? snippet.chartSorting : "none");
+  self.chartScatterGroup = ko.observable(typeof snippet.chartScatterGroup != "undefined" && snippet.chartScatterGroup != null ? snippet.chartScatterGroup : null);
+  self.chartScatterSize = ko.observable(typeof snippet.chartScatterSize != "undefined" && snippet.chartScatterSize != null ? snippet.chartScatterSize : null);
+  self.chartScope = ko.observable(typeof snippet.chartScope != "undefined" && snippet.chartScope != null ? snippet.chartScope : "world");
+  self.chartX = ko.observable(typeof snippet.chartX != "undefined" && snippet.chartX != null ? snippet.chartX : null);
+  self.chartYSingle = ko.observable(typeof snippet.chartYSingle != "undefined" && snippet.chartYSingle != null ? snippet.chartYSingle : null);
+  self.chartYMulti = ko.observableArray(typeof snippet.chartYMulti != "undefined" && snippet.chartYMulti != null ? snippet.chartYMulti : []);
+  self.chartData = ko.observableArray(typeof snippet.chartData != "undefined" && snippet.chartData != null ? snippet.chartData : []);
+  self.chartMapLabel = ko.observable(typeof snippet.chartMapLabel != "undefined" && snippet.chartMapLabel != null ? snippet.chartMapLabel : null);
+
+  self.hasDataForChart = ko.computed(function () {
+    if (self.chartType() == ko.HUE_CHARTS.TYPES.BARCHART || self.chartType() == ko.HUE_CHARTS.TYPES.LINECHART) {
+      return typeof self.chartX() != "undefined" && self.chartX() != null && self.chartYMulti().length > 0;
+    }
+    return typeof self.chartX() != "undefined" && self.chartX() != null && typeof self.chartYSingle() != "undefined" && self.chartYSingle() != null ;
+  });
+
   function bareWidgetBuilder(name, type){
   function bareWidgetBuilder(name, type){
     return new Widget({
     return new Widget({
       size: 12,
       size: 12,

+ 87 - 0
apps/search/src/search/templates/search.mako

@@ -542,6 +542,91 @@ ${ dashboard.layout_skeleton() }
 
 
 <script type="text/html" id="resultset-widget">
 <script type="text/html" id="resultset-widget">
   <!-- ko if: $root.collection.template.isGridLayout() -->
   <!-- ko if: $root.collection.template.isGridLayout() -->
+
+  <div class="grid-row">
+
+    <div class="grid-left-bar">
+      <div style="opacity:1">
+        <div style="margin-top:25px;">
+          <a class="grid-side-btn active" href="javascript: void(0)"
+             data-bind="click: function() {  }, css: {'active': true}" title="${_('Grid')}">
+            <i class="fa fa-th"></i>
+          </a>
+        </div>
+
+        <div class="dropdown">
+          <a class="grid-side-btn" style="padding-right:0" href="javascript: void(0)"
+             data-bind="css: {'active': true }, click: function() {  }">
+            <i class="hcha hcha-bar-chart" data-bind="visible: $root.chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
+            <i class="hcha hcha-line-chart" data-bind="visible: $root.chartType() == ko.HUE_CHARTS.TYPES.LINECHART"
+               style="display: none;"></i>
+            <i class="hcha hcha-pie-chart" data-bind="visible: $root.chartType() == ko.HUE_CHARTS.TYPES.PIECHART"
+               style="display: none;"></i>
+            <i class="fa fa-fw fa-dot-circle-o"
+               data-bind="visible: $root.chartType() == ko.HUE_CHARTS.TYPES.SCATTERCHART" style="display: none;"></i>
+            <i class="fa fa-fw fa-map-marker" data-bind="visible: $root.chartType() == ko.HUE_CHARTS.TYPES.MAP"
+               style="display: none;"></i>
+            <i class="hcha hcha-map-chart" data-bind="visible: $root.chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP"
+               style="display: none;"></i>
+          </a>
+          <a class="dropdown-toggle snippet-side-btn" style="padding:0" data-toggle="dropdown"
+             href="javascript: void(0)" data-bind="css: {'active': true}">
+            <i class="fa fa-caret-down"></i>
+          </a>
+
+          <ul class="dropdown-menu">
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': $root.chartType() == ko.HUE_CHARTS.TYPES.BARCHART}, click: function(){ $root.chartType(ko.HUE_CHARTS.TYPES.BARCHART); }"
+                 class="active">
+                <i class="hcha hcha-bar-chart"></i> Bars
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': $root.chartType() == ko.HUE_CHARTS.TYPES.LINECHART}, click: function(){ $root.chartType(ko.HUE_CHARTS.TYPES.LINECHART); }">
+                <i class="hcha hcha-line-chart"></i> Lines
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': $root.chartType() == ko.HUE_CHARTS.TYPES.PIECHART}, click: function(){ $root.chartType(ko.HUE_CHARTS.TYPES.PIECHART); }">
+                <i class="hcha hcha-pie-chart"></i> Pie
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': $root.chartType() == ko.HUE_CHARTS.TYPES.SCATTERCHART}, click: function(){ $root.chartType(ko.HUE_CHARTS.TYPES.SCATTERCHART); }">
+                <i class="fa fa-fw fa-dot-circle-o chart-icon"></i> Scatter
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': $root.chartType() == ko.HUE_CHARTS.TYPES.MAP}, click: function(){ $root.chartType(ko.HUE_CHARTS.TYPES.MAP); }">
+                <i class="fa fa-fw fa-map-marker chart-icon"></i> Marker Map
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)"
+                 data-bind="css: {'active': $root.chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP}, click: function(){ $root.chartType(ko.HUE_CHARTS.TYPES.GRADIENTMAP); }">
+                <i class="hcha hcha-map-chart"></i> Gradient Map
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <a class="grid-side-btn" href="javascript:void(0)" data-bind="click: function(){ }, css: { 'blue' : true }"><i
+              class="fa fa-cog"></i></a>
+        </div>
+
+
+      </div>
+    </div>
+  </div>
+
+  <div class="grid-results">
+
     <div style="float:left; margin-right: 10px">
     <div style="float:left; margin-right: 10px">
       <div data-bind="visible: ! $root.collection.template.showFieldList()" style="padding-top: 5px; display: inline-block">
       <div data-bind="visible: ! $root.collection.template.showFieldList()" style="padding-top: 5px; display: inline-block">
         <a href="javascript: void(0)"  data-bind="click: function(){ $root.collection.template.showFieldList(true) }">
         <a href="javascript: void(0)"  data-bind="click: function(){ $root.collection.template.showFieldList(true) }">
@@ -628,6 +713,8 @@ ${ dashboard.layout_skeleton() }
           </table>
           </table>
         </div>
         </div>
       </div>
       </div>
+      </div>
+    </div>
     </div>
     </div>
   <!-- /ko -->
   <!-- /ko -->
 </script>
 </script>