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

[search] Restyled demi modal

Enrico Berti 11 жил өмнө
parent
commit
95f5401

+ 12 - 28
apps/search/src/search/templates/search2.mako

@@ -284,7 +284,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="hit-widget">
 <script type="text/html" id="hit-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
+
   <!-- /ko -->
   <!-- /ko -->
 
 
   <!-- ko if: $root.getFacetFromQuery(id()) -->
   <!-- ko if: $root.getFacetFromQuery(id()) -->
@@ -300,13 +300,15 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="facet-toggle">
 <script type="text/html" id="facet-toggle">
     <!-- ko if: type() == 'range' -->
     <!-- ko if: type() == 'range' -->
+      ${ _('Start') }:
+      <input type="text" data-bind="spinedit: properties.start" />
+      <br/>
+      ${ _('End') }: <input type="text" data-bind="spinedit: properties.end" />
       <br/>
       <br/>
-      ${ _('Start') }: <input type="text" data-bind="value: properties.start" />
-      ${ _('End') }: <input type="text" data-bind="value: properties.end" />
-      ${ _('Gap') }: <input type="text" data-bind="value: properties.gap" />
+      ${ _('Gap') }: <input type="text" data-bind="spinedit: properties.gap" />
     <!-- /ko -->
     <!-- /ko -->
     <!-- ko if: type() == 'field' -->
     <!-- ko if: type() == 'field' -->
-      ${ _('Limit') }: <input type="text" data-bind="value: properties.limit" />      
+      ${ _('Limit') }: <input type="text" data-bind="spinedit: properties.limit" />
     <!-- /ko -->
     <!-- /ko -->
 
 
     <a href="javascript: void(0)" class="btn btn-loading" data-bind="visible: properties.canRange, click: $root.collection.toggleRangeFacet" data-loading-text="...">
     <a href="javascript: void(0)" class="btn btn-loading" data-bind="visible: properties.canRange, click: $root.collection.toggleRangeFacet" data-loading-text="...">
@@ -319,7 +321,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="facet-widget">
 <script type="text/html" id="facet-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
   <!-- /ko -->
   <!-- /ko -->
 
 
   <div class="widget-spinner" data-bind="visible: isLoading()">
   <div class="widget-spinner" data-bind="visible: isLoading()">
@@ -641,7 +642,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="histogram-widget">
 <script type="text/html" id="histogram-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
   <!-- /ko -->
   <!-- /ko -->
 
 
   <div class="widget-spinner" data-bind="visible: isLoading()">
   <div class="widget-spinner" data-bind="visible: isLoading()">
@@ -674,7 +674,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="bar-widget">
 <script type="text/html" id="bar-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
   <!-- /ko -->
   <!-- /ko -->
 
 
   <div class="widget-spinner" data-bind="visible: isLoading()">
   <div class="widget-spinner" data-bind="visible: isLoading()">
@@ -701,7 +700,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="line-widget">
 <script type="text/html" id="line-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
   <!-- /ko -->
   <!-- /ko -->
 
 
   <div class="widget-spinner" data-bind="visible: isLoading()">
   <div class="widget-spinner" data-bind="visible: isLoading()">
@@ -728,7 +726,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="pie-widget">
 <script type="text/html" id="pie-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
   <!-- /ko -->
   <!-- /ko -->
 
 
   <!-- ko if: $root.getFacetFromQuery(id()) -->
   <!-- ko if: $root.getFacetFromQuery(id()) -->
@@ -762,14 +759,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   </div>
   </div>
 </script>
 </script>
 
 
-<script type="text/html" id="area-widget">
-  This is the area widget
-  <div class="widget-spinner" data-bind="visible: isLoading()">
-    <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
-    <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
-  </div>
-</script>
-
 <script type="text/html" id="filter-widget">
 <script type="text/html" id="filter-widget">
   <div data-bind="visible: $root.query.fqs().length == 0" class="alert alert-info" style="margin-top: 10px">${_('There are currently no filters applied.')}</div>
   <div data-bind="visible: $root.query.fqs().length == 0" class="alert alert-info" style="margin-top: 10px">${_('There are currently no filters applied.')}</div>
   <div data-bind="foreach: { data: $root.query.fqs, afterRender: function(){ isLoading(false); } }">
   <div data-bind="foreach: { data: $root.query.fqs, afterRender: function(){ isLoading(false); } }">
@@ -806,7 +795,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <script type="text/html" id="map-widget">
 <script type="text/html" id="map-widget">
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
   <!-- ko ifnot: $root.getFacetFromQuery(id()) -->
-    <a data-bind="click: showAddFacetDemiModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
   <!-- /ko -->
   <!-- /ko -->
 
 
   <!-- ko if: $root.getFacetFromQuery(id()) -->
   <!-- ko if: $root.getFacetFromQuery(id()) -->
@@ -837,12 +825,13 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 
 <div id="addFacetDemiModal" class="demi-modal hide" data-backdrop="false">
 <div id="addFacetDemiModal" class="demi-modal hide" data-backdrop="false">
   <div class="modal-body">
   <div class="modal-body">
+    <a href="javascript: void(0)" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel" class="pull-right"><i class="fa fa-times"></i></a>
     <div style="float: left; margin-right: 10px;text-align: center">
     <div style="float: left; margin-right: 10px;text-align: center">
       <input id="addFacetInput" type="text" data-bind="value: $root.collection.template.fieldsModalFilter, valueUpdate:'afterkeydown'" placeholder="${_('Filter fields')}" class="input" style="float: left" /><br/>
       <input id="addFacetInput" type="text" data-bind="value: $root.collection.template.fieldsModalFilter, valueUpdate:'afterkeydown'" placeholder="${_('Filter fields')}" class="input" style="float: left" /><br/>
     </div>
     </div>
     <div>
     <div>
       <ul data-bind="foreach: $root.collection.template.filteredModalFields().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 }), visible: $root.collection.template.filteredModalFields().length > 0"
       <ul data-bind="foreach: $root.collection.template.filteredModalFields().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 }), visible: $root.collection.template.filteredModalFields().length > 0"
-          class="unstyled inline fields-chooser" style="height: 70px; overflow-y: auto">
+          class="unstyled inline fields-chooser" style="height: 100px; overflow-y: auto">
         <li data-bind="click: addFacetDemiModalFieldPreview">
         <li data-bind="click: addFacetDemiModalFieldPreview">
           <span class="badge badge-info"><span data-bind="text: name(), attr: {'title': type()}"></span>
           <span class="badge badge-info"><span data-bind="text: name(), attr: {'title': type()}"></span>
           </span>
           </span>
@@ -851,10 +840,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       <div class="alert alert-info inline" data-bind="visible: $root.collection.template.filteredModalFields().length == 0" style="margin-left: 124px;height: 42px;line-height: 42px">
       <div class="alert alert-info inline" data-bind="visible: $root.collection.template.filteredModalFields().length == 0" style="margin-left: 124px;height: 42px;line-height: 42px">
         ${_('There are no fields matching your search term.')}
         ${_('There are no fields matching your search term.')}
       </div>
       </div>
-      <div style="margin-left: 124px">
-        <input type="button" class="btn btn-primary" data-bind="enable: $root.collection.template.fieldsModalOkButton" data-dismiss="modal" value="${_('Pick!')}" /> or
-        <a href="javascript: void(0)" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel">${_('cancel')}</a>
-      </div>
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>
@@ -980,6 +965,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   .card-widget {
   .card-widget {
     padding-top: 0;
     padding-top: 0;
     border: 0;
     border: 0;
+    min-height: 100px;
   }
   }
 
 
   .card-widget .card-heading {
   .card-widget .card-heading {
@@ -1791,12 +1777,10 @@ $(document).ready(function () {
       viewModel.collection.template.fieldsModalFilter("");
       viewModel.collection.template.fieldsModalFilter("");
       viewModel.collection.template.fieldsModalType(widget.widgetType());
       viewModel.collection.template.fieldsModalType(widget.widgetType());
       viewModel.collection.template.fieldsModalFilter.valueHasMutated();
       viewModel.collection.template.fieldsModalFilter.valueHasMutated();
-      viewModel.collection.template.fieldsModalOkButton(false);
       $('#addFacetInput').typeahead({
       $('#addFacetInput').typeahead({
           'source': viewModel.collection.template.availableWidgetFieldsNames(), 
           'source': viewModel.collection.template.availableWidgetFieldsNames(), 
           'updater': function(item) {
           'updater': function(item) {
               addFacetDemiModalFieldPreview({'name': function(){return item}});
               addFacetDemiModalFieldPreview({'name': function(){return item}});
-              $("#addFacetDemiModal").modal("hide");
               return item;
               return item;
            }
            }
       });
       });
@@ -1811,12 +1795,12 @@ $(document).ready(function () {
     var _existingFacet = viewModel.collection.getFacetById(selectedWidget.id());
     var _existingFacet = viewModel.collection.getFacetById(selectedWidget.id());
     if (selectedWidget != null) {
     if (selectedWidget != null) {
       selectedWidget.isLoading(true);
       selectedWidget.isLoading(true);
-      viewModel.collection.template.fieldsModalOkButton(true);
       viewModel.collection.addFacet({'name': field.name(), 'widget_id': selectedWidget.id(), 'widgetType': selectedWidget.widgetType()});
       viewModel.collection.addFacet({'name': field.name(), 'widget_id': selectedWidget.id(), 'widgetType': selectedWidget.widgetType()});
       if (_existingFacet != null) {
       if (_existingFacet != null) {
         _existingFacet.label(field.name());
         _existingFacet.label(field.name());
         _existingFacet.field(field.name());
         _existingFacet.field(field.name());
-      }      
+      }
+      $("#addFacetDemiModal").modal("hide");
     }
     }
   }
   }
   
   

+ 15 - 2
apps/search/static/js/nv.d3.datamaps.js

@@ -35,6 +35,7 @@
         hideAntarctica: true,
         hideAntarctica: true,
         borderWidth: 1,
         borderWidth: 1,
         borderColor: '#FDFDFD',
         borderColor: '#FDFDFD',
+        selectedBorderColor: '#EE8081',
         popupTemplate: function(geography, data) {
         popupTemplate: function(geography, data) {
           return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
           return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong></div>';
         },
         },
@@ -150,8 +151,20 @@
           onClick(colorCodeData[d.id]);
           onClick(colorCodeData[d.id]);
         }
         }
       })
       })
-      .style('stroke-width', geoConfig.borderWidth)
-      .style('stroke', geoConfig.borderColor);
+      .style('stroke-width', function(d) {
+        var strokeWidth = geoConfig.borderWidth;
+        if ( colorCodeData[d.id] && colorCodeData[d.id].isSelected ) {
+          strokeWidth = 2;
+        }
+        return strokeWidth;
+      })
+      .style('stroke', function(d) {
+        var strokeColor = geoConfig.borderColor;
+        if ( colorCodeData[d.id] && colorCodeData[d.id].isSelected ) {
+          strokeColor = geoConfig.selectedBorderColor;
+        }
+        return strokeColor;
+      });
   }
   }
 
 
   function handleGeographyConfig () {
   function handleGeographyConfig () {

+ 0 - 1
apps/search/static/js/search.ko.js

@@ -495,7 +495,6 @@ var Collection = function (vm, collection) {
   self.template.fieldsModalFilter = ko.observable(""); // For UI
   self.template.fieldsModalFilter = ko.observable(""); // For UI
   self.template.fieldsModalType = ko.observable(""); // For UI
   self.template.fieldsModalType = ko.observable(""); // For UI
   self.template.fieldsAttributesFilter = ko.observable(""); // For UI
   self.template.fieldsAttributesFilter = ko.observable(""); // For UI
-  self.template.fieldsModalOkButton = ko.observable(false);
   self.template.filteredModalFields = ko.observableArray();
   self.template.filteredModalFields = ko.observableArray();
   self.template.filteredAttributeFields = ko.computed(function() {
   self.template.filteredAttributeFields = ko.computed(function() {
 	var _fields = [];
 	var _fields = [];