Made the recon service list collapsible to have more space for services

configuration

main/webapp/modules/core/langs/translation-default.json

@@ -364,7 +364,8 @@
 		"fb-key": "a Freebase key in",
 		"fb-en-ns": "the Wikipedia English namespace",
 		"this-ns": "this namespace:",
-		"max-candidates" : "Maximum number of candidates to return"
+		"max-candidates" : "Maximum number of candidates to return",
+		"service-title": "Services"
 	},
 	"core-util-enc": {
 		"select-enc": "Select Encoding",

main/webapp/modules/core/langs/translation-en.json

@@ -364,8 +364,8 @@
 		"fb-key": "a Freebase key in",
 		"fb-en-ns": "the Wikipedia English namespace",
 		"this-ns": "this namespace:",
-		"max-candidates" : "Maximum number of candidates to return"
+		"max-candidates" : "Maximum number of candidates to return",
-		
+		"service-title": "Services"
 	},
 	"core-util-enc": {
 		"select-enc": "Select Encoding",

main/webapp/modules/core/langs/translation-it.json

@@ -365,6 +365,7 @@
 		"fb-en-ns": "namespace di Wikipedia inglese",
 		"this-ns": "questo namespace:",
                 "max-candidates" : "Maximum number of candidates to return [TODO - translate]",	
+        "service-title": "Servizi"
 	},
 	"core-util-enc": {
 		"select-enc": "Seleziona la codifica",

main/webapp/modules/core/scripts/reconciliation/recon-dialog.html

@@ -3,7 +3,13 @@
 	<div class="dialog-body" bind="dialogBody">
 		<div class="grid-layout layout-normal layout-full grid-layout-for-ui">
 			<div class="recon-dialog-service">
-				<div class="recon-dialog-service-list" bind="serviceList"></div>
+				<div class="recon-dialog-service-list-container">
+					<div class="recon-dialog-service-opener">
+						<div class="recon-dialog-service-opener-title" bind="serviceListTitle"></div>
+						<img class="recon-dialog-service-opener-img" src="images/menu-opener.png" />
+					</div>
+					<div class="recon-dialog-service-list" bind="serviceList"></div>
+				</div>
 				<div class="recon-dialog-service-panel-container"
 					bind="servicePanelContainer">
 					<div class="recon-dialog-service-panel-message"

main/webapp/modules/core/scripts/reconciliation/recon-dialog.js

@@ -47,6 +47,7 @@ ReconDialog.prototype._createDialog = function() {
   this._elmts.dialogHeader.text($.i18n._('core-recon')["recon-col"]+' "' + this._column.name + '"');
   
   this._elmts.servicePanelMessage.html($.i18n._('core-recon')["pick-service"]);
+  this._elmts.serviceListTitle.html($.i18n._('core-recon')["service-title"]);
   this._elmts.addStandardServiceButton.html($.i18n._('core-buttons')["add-std-svc"]+"...");
   this._elmts.addNamespacedServiceButton.html($.i18n._('core-buttons')["add-named-svc"]+"...");
   this._elmts.reconcileButton.html($.i18n._('core-buttons')["start-recon"]);
@@ -113,6 +114,7 @@ ReconDialog.prototype._populateDialog = function() {
       .text(service.name)
       .appendTo(self._elmts.serviceList)
       .click(function() {
+    	self._toggleServices();
         self._selectService(record);
       });
 
@@ -132,9 +134,32 @@ ReconDialog.prototype._populateDialog = function() {
     for (var i = 0; i < services.length; i++) {
       renderService(services[i]);
     }
+    
+
+    $('.recon-dialog-service-opener').click(function() {
+      self._toggleServices();
+    });
   }
 };
 
+ReconDialog.prototype._toggleServices = function() {
+  var self = this;
+  self._toggleServiceTitle(500);
+  self._toggleServiceList(500);
+};
+
+ReconDialog.prototype._toggleServiceTitle = function(duration) {
+  var title = $('.recon-dialog-service-opener-title');
+  title.animate({
+	width : 'toggle'
+	}, duration, 'swing', function() {
+  });
+};
+
+ReconDialog.prototype._toggleServiceList = function(duration) {
+  $(".recon-dialog-service-list").toggle("slide", duration);
+};
+
 ReconDialog.prototype._selectService = function(record) {
   for (var i = 0; i < this._serviceRecords.length; i++) {
     if (record === this._serviceRecords[i]) {

main/webapp/modules/core/styles/reconciliation/recon-dialog.less

@@ -35,20 +35,57 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 .recon-dialog-service {
   height: 500px;
-  padding: 5px 0;
+  padding: 0 0 10px;
  }
  
+.recon-dialog-service-list-container {
+  position: absolute;
+  }
+
 .recon-dialog-service-list {
-  border: 1px solid #aaa;
+  background: none repeat scroll 0 0 #FFFFFF;
-  padding: 1px;
+  border: 1px solid #AAAAAA;
+  height: 470px;
+  margin-left: 10px;
   overflow: auto;
+  padding: 1px;
   width: 200px;
-  height: 500px;
+  }
+  
+.recon-dialog-service-opener {
+  height: 25px;
+  margin-left: -5px;
+  }
+  
+.recon-dialog-service-opener:hover {
+  cursor: pointer;
+  }
+  
+.recon-dialog-service-opener-title {
+  background: none repeat scroll 0 0 #E0EDFE;
   float: left;
+  font-size: 18px;
+  height: 100%;
+  text-align: center;
+  width: 220px;
+  }
+  
+.recon-dialog-service-opener-img {
+  background: none repeat scroll 0 0 #E0EDFE;
+  border-bottom-right-radius: 12px;
+  border-top-right-radius: 12px;
+  padding: 4px 2px;
+  }
+  
+.recon-dialog-service-opener-img:hover {
+  background: none repeat scroll 0 0 #BFDBFF;
   }
   
 .recon-dialog-service-panel-container {
   float: left;
+  height: 500px;
+  margin-left: 20px;
+  width: 850px;
   }
 
 a.recon-dialog-service-selector {