From 281a27e8754f03bb577ea8472f6cd6b2a21282e2 Mon Sep 17 00:00:00 2001
From: Giancarlo Panichi <giancarlo.panichi@isti.cnr.it>
Date: Wed, 3 Jun 2015 16:58:06 +0000
Subject: [PATCH] 209: TDM - Show the resources through a ListView widget
 Task-Url: https://support.d4science.org/issues/209

Updated ResourcesListView

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/user/tabular-data-resources-widget@115201 82a268e6-3cf1-43bd-a215-b396298e98cf
---
 .../client/ResourcesListView.html             |   2 +-
 .../client/ResourcesListViewDetail.css        |  26 ++
 .../client/ResourcesListViewDetail.html       |  17 +-
 .../client/ResourcesListViewPanel.java        | 240 ++++++++++++++----
 .../client/ResourcesPanel.java                |   2 +-
 .../client/ResourcesListView.html             |   2 +-
 .../client/ResourcesListViewDetail.css        |  26 ++
 .../client/ResourcesListViewDetail.html       |  17 +-
 8 files changed, 265 insertions(+), 67 deletions(-)
 create mode 100644 src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css
 create mode 100644 src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css

diff --git a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html
index 91e06b7..5734619 100644
--- a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html
+++ b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html
@@ -1,4 +1,4 @@
 <div class="{style.thumb}">
-	<!-- <img src="{resourceTDDescriptor.pathUri}" title="{resourceTDDescriptor.name}">-->
+	<img src="{thumbnailPath}">
 </div>
 <span class="x-editable">{resourceTDDescriptor.name:shorten(18)}</span>
\ No newline at end of file
diff --git a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css
new file mode 100644
index 0000000..54d9095
--- /dev/null
+++ b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css
@@ -0,0 +1,26 @@
+@CHARSET "UTF-8";
+
+.details {
+	padding: 10px;
+	text-align: center;
+}
+
+.detailsInfo {
+	border-top: 1px solid #ccc;
+	font: 11px Arial, Helvetica, sans-serif;
+	margin-top: 5px;
+	padding-top: 5px;
+	text-align: left;
+}
+
+.detailsTable {
+	border: none;
+}
+
+.detailsHead {
+	font-weight: bold;
+}
+
+.detailsData {
+	padding-left: 5px;	
+}
\ No newline at end of file
diff --git a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html
index cd9fbb0..3995886 100644
--- a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html
+++ b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html
@@ -1,8 +1,13 @@
-<div class="details">
-	<!-- 
-  <img src="{pathUri}">-->
-	<div class="details-info">
-		<b>Name:</b> <span>{resourceTDDescriptor.name}</span><b>Description:</b>
-		<span>{resourceTDDescriptor.description}</span><b>Creation Date:</b> <span>{resourceTDDescriptor.creationDate}</span>
+<div class="{style.details}">
+	<img src="{thumbnailPath}" title="{resourceTDDescriptor.name}">
+	<div class="{style.detailsInfo}">
+	    <table class="{style.detailsTable}">
+	    <tr><td class="{style.detailsHead}">Name:</td></tr>
+	    <tr><td class="{style.detailsData}">{resourceTDDescriptor.name}</td></tr>
+	    <tr><td class="{style.detailsHead}">Description:</td></tr>
+	    <tr><td class="{style.detailsData}">{resourceTDDescriptor.description}</td></tr>
+	    <tr><td class="{style.detailsHead}">Creation Date:</td></tr>
+	    <tr><td class="{style.detailsData}">{resourceTDDescriptor.creationDate}</td></tr>
+		</table>
 	</div>
 </div>
\ No newline at end of file
diff --git a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewPanel.java b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewPanel.java
index 278a724..7fd1527 100644
--- a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewPanel.java
+++ b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewPanel.java
@@ -1,13 +1,19 @@
 package org.gcube.portlets.user.td.resourceswidget.client;
 
 import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.Comparator;
 import java.util.List;
 
 import org.gcube.portlets.user.td.gwtservice.client.rpc.TDGWTServiceAsync;
 import org.gcube.portlets.user.td.gwtservice.shared.exception.TDGWTIsLockedException;
 import org.gcube.portlets.user.td.gwtservice.shared.exception.TDGWTSessionExpiredException;
+import org.gcube.portlets.user.td.gwtservice.shared.tr.resources.InternalURITD;
+import org.gcube.portlets.user.td.gwtservice.shared.tr.resources.ResourceTD;
 import org.gcube.portlets.user.td.gwtservice.shared.tr.resources.ResourceTDDescriptor;
+import org.gcube.portlets.user.td.gwtservice.shared.tr.resources.StringResourceTD;
+import org.gcube.portlets.user.td.gwtservice.shared.tr.resources.TableResourceTD;
+import org.gcube.portlets.user.td.resourceswidget.client.resources.ResourceBundle;
 import org.gcube.portlets.user.td.resourceswidget.client.utils.UtilsGXT3;
 import org.gcube.portlets.user.td.widgetcommonevent.client.event.SessionExpiredEvent;
 import org.gcube.portlets.user.td.widgetcommonevent.client.type.SessionExpiredType;
@@ -17,15 +23,20 @@ import com.allen_sauer.gwt.log.client.Log;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.Scheduler;
 import com.google.gwt.core.client.Scheduler.ScheduledCommand;
+import com.google.gwt.event.logical.shared.SelectionEvent;
+import com.google.gwt.event.logical.shared.SelectionHandler;
 import com.google.gwt.resources.client.ClientBundle;
 import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.safehtml.shared.SafeHtml;
 import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.google.gwt.safehtml.shared.SafeUri;
+import com.google.gwt.safehtml.shared.UriUtils;
 import com.google.gwt.text.shared.AbstractSafeHtmlRenderer;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.web.bindery.event.shared.EventBus;
 import com.sencha.gxt.cell.core.client.SimpleSafeHtmlCell;
+import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
 import com.sencha.gxt.core.client.IdentityValueProvider;
 import com.sencha.gxt.core.client.Style.SelectionMode;
 import com.sencha.gxt.core.client.XTemplates;
@@ -34,26 +45,30 @@ import com.sencha.gxt.core.client.XTemplates.FormatterFactories;
 import com.sencha.gxt.core.client.XTemplates.FormatterFactory;
 import com.sencha.gxt.core.client.dom.ScrollSupport.ScrollMode;
 import com.sencha.gxt.core.client.resources.CommonStyles;
+import com.sencha.gxt.core.client.resources.ThemeStyles;
 import com.sencha.gxt.core.client.util.Format;
+import com.sencha.gxt.core.client.util.Margins;
 import com.sencha.gxt.data.client.loader.RpcProxy;
 import com.sencha.gxt.data.shared.ListStore;
 import com.sencha.gxt.data.shared.ModelKeyProvider;
 import com.sencha.gxt.data.shared.SortDir;
 import com.sencha.gxt.data.shared.Store;
 import com.sencha.gxt.data.shared.Store.StoreSortInfo;
+import com.sencha.gxt.data.shared.StringLabelProvider;
 import com.sencha.gxt.data.shared.loader.ListLoadConfig;
 import com.sencha.gxt.data.shared.loader.ListLoadResult;
 import com.sencha.gxt.data.shared.loader.ListLoader;
 import com.sencha.gxt.data.shared.loader.ListStoreBinding;
 import com.sencha.gxt.data.shared.loader.Loader;
 import com.sencha.gxt.theme.base.client.listview.ListViewCustomAppearance;
-import com.sencha.gxt.widget.core.client.Dialog;
-import com.sencha.gxt.widget.core.client.Dialog.PredefinedButton;
 import com.sencha.gxt.widget.core.client.FramedPanel;
 import com.sencha.gxt.widget.core.client.ListView;
+import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
+import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
 import com.sencha.gxt.widget.core.client.container.MarginData;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
+import com.sencha.gxt.widget.core.client.form.SimpleComboBox;
 import com.sencha.gxt.widget.core.client.form.StoreFilterField;
 import com.sencha.gxt.widget.core.client.selection.SelectionChangedEvent;
 import com.sencha.gxt.widget.core.client.selection.SelectionChangedEvent.SelectionChangedHandler;
@@ -71,17 +86,26 @@ import com.sencha.gxt.widget.core.client.toolbar.ToolBar;
  * 
  */
 public class ResourcesListViewPanel extends FramedPanel {
-	
+
 	public interface DetailRenderer extends XTemplates {
 		@XTemplate(source = "ResourcesListViewDetail.html")
-		public SafeHtml render(ResourceTDDescriptor resourceTDDescriptor);
+		public SafeHtml render(ResourceTDDescriptor resourceTDDescriptor,
+				SafeUri thumbnailPath, ResourceListViewDetailCSS style);
+	}
+
+	public interface DetailRendererBundle extends ClientBundle {
+		public static final DetailRendererBundle INSTANCE = GWT
+				.create(DetailRendererBundle.class);
+
+		@Source("ResourcesListViewDetail.css")
+		ResourceListViewDetailCSS css();
 	}
 
 	@FormatterFactories(@FormatterFactory(factory = ShortenFactory.class, name = "shorten"))
 	public interface Renderer extends XTemplates {
 		@XTemplate(source = "ResourcesListView.html")
 		public SafeHtml renderItem(ResourceTDDescriptor resourceTDDescriptor,
-				ResourceListViewCSS style);
+				SafeUri thumbnailPath, ResourceListViewCSS style);
 	}
 
 	public interface ResourcesListViewBundle extends ClientBundle {
@@ -92,6 +116,19 @@ public class ResourcesListViewPanel extends FramedPanel {
 		ResourceListViewCSS css();
 	}
 
+	public interface ResourceListViewDetailCSS extends CssResource {
+		String details();
+
+		String detailsInfo();
+
+		String detailsTable();
+
+		String detailsHead();
+
+		String detailsData();
+
+	}
+
 	public interface ResourceListViewCSS extends CssResource {
 		String over();
 
@@ -100,6 +137,7 @@ public class ResourcesListViewPanel extends FramedPanel {
 		String thumb();
 
 		String thumbWrap();
+
 	}
 
 	static class Shorten implements Formatter<String> {
@@ -121,9 +159,48 @@ public class ResourcesListViewPanel extends FramedPanel {
 		}
 	}
 
-	private Dialog chooser;
+	enum ResourcesSortInfo {
+		Name("Name"), CreationDate("Creation Date");
+
+		private String id;
+
+		private static List<String> resourcesSortInfoStringList;
+
+		static {
+			resourcesSortInfoStringList = new ArrayList<String>();
+			for (ResourcesSortInfo r : values()) {
+				resourcesSortInfoStringList.add(r.getId());
+			}
+		}
+
+		private ResourcesSortInfo(String id) {
+			this.id = id;
+		}
+
+		public String getId() {
+			return id;
+		}
+
+		public String toString() {
+			return id;
+		}
+
+		public static List<ResourcesSortInfo> asList() {
+			List<ResourcesSortInfo> list = Arrays.asList(values());
+			return list;
+		}
+
+		public static List<String> asStringList() {
+			return resourcesSortInfoStringList;
+
+		}
+
+	}
+
+	// private Dialog chooser;
 	private HTML details;
 	private static DetailRenderer detailRenderer;
+	private static ResourceListViewDetailCSS detailStyle;
 
 	private TRId trId;
 	private EventBus eventBus;
@@ -134,6 +211,7 @@ public class ResourcesListViewPanel extends FramedPanel {
 	private boolean drawed = false;
 
 	private ListView<ResourceTDDescriptor, ResourceTDDescriptor> view;
+	private SimpleComboBox<String> comboSort;
 
 	public ResourcesListViewPanel(TRId trId, EventBus eventBus) {
 		super();
@@ -157,7 +235,7 @@ public class ResourcesListViewPanel extends FramedPanel {
 	protected void init() {
 		setHeaderVisible(false);
 		setBodyBorder(false);
-		setResize(true);
+		setResize(true); 
 		setWidth("630px");
 		setHeight("470px");
 
@@ -166,6 +244,9 @@ public class ResourcesListViewPanel extends FramedPanel {
 	protected void create() {
 		Log.debug("Create Resource List View");
 
+		DetailRendererBundle.INSTANCE.css().ensureInjected();
+		detailStyle = DetailRendererBundle.INSTANCE.css();
+
 		detailRenderer = GWT.create(DetailRenderer.class);
 
 		RpcProxy<Object, List<ResourceTDDescriptor>> proxy = new RpcProxy<Object, List<ResourceTDDescriptor>>() {
@@ -189,14 +270,17 @@ public class ResourcesListViewPanel extends FramedPanel {
 					@Override
 					public int compare(ResourceTDDescriptor o1,
 							ResourceTDDescriptor o2) {
-						/*
-						 * String v = comboSort.getCurrentValue(); if
-						 * (v.equals("Name")) { return
-						 * o1.getName().compareToIgnoreCase(o2.getName()); }
-						 * else if (v.equals("File Size")) { return o1.getSize()
-						 * < o2.getSize() ? -1 : 1; } else {
-						 * o1.getDate().compareTo(o2.getDate()); }
-						 */
+
+						String v = comboSort.getCurrentValue();
+						if (v.equals("Name")) {
+							return o1.getName().compareToIgnoreCase(
+									o2.getName());
+						} else if (v.equals("Creation Date")) {
+							return o1.getCreationDate().compareTo(
+									o2.getCreationDate());
+
+						}
+
 						return 0;
 					}
 				}, SortDir.ASC));
@@ -234,19 +318,24 @@ public class ResourcesListViewPanel extends FramedPanel {
 		toolbar.add(filterField);
 		toolbar.add(new SeparatorToolItem());
 		toolbar.add(new LabelToolItem("Sort By:"));
-		/*
-		 * comboSort = new SimpleComboBox<String>(new
-		 * StringLabelProvider<String>());
-		 * comboSort.setTriggerAction(TriggerAction.ALL);
-		 * comboSort.setEditable(false); comboSort.setForceSelection(true);
-		 * comboSort.setWidth(120); comboSort.add("Name");
-		 * comboSort.add("File Size"); comboSort.add("Last Modified");
-		 * comboSort.setValue("Name"); comboSort.addSelectionHandler(new
-		 * SelectionHandler<String>() {
-		 * 
-		 * @Override public void onSelection(SelectionEvent<String> event) {
-		 * store.applySort(false); } }); toolbar.add(comboSort);
-		 */
+
+		comboSort = new SimpleComboBox<String>(
+				new StringLabelProvider<String>());
+		comboSort.setTriggerAction(TriggerAction.ALL);
+		comboSort.setEditable(false);
+		comboSort.setForceSelection(true);
+		comboSort.setWidth(120);
+		comboSort.add(ResourcesSortInfo.asStringList());
+		comboSort.setValue(ResourcesSortInfo.CreationDate.getId());
+		comboSort.addSelectionHandler(new SelectionHandler<String>() {
+
+			@Override
+			public void onSelection(SelectionEvent<String> event) {
+				store.applySort(false);
+			}
+
+		});
+		toolbar.add(comboSort);
 
 		//
 		ResourcesListViewBundle.INSTANCE.css().ensureInjected();
@@ -300,8 +389,33 @@ public class ResourcesListViewPanel extends FramedPanel {
 		view.setCell(new SimpleSafeHtmlCell<ResourceTDDescriptor>(
 				new AbstractSafeHtmlRenderer<ResourceTDDescriptor>() {
 					@Override
-					public SafeHtml render(ResourceTDDescriptor object) {
-						return renderer.renderItem(object, style);
+					public SafeHtml render(ResourceTDDescriptor descriptor) {
+						SafeUri thumbnailPath = ResourceBundle.INSTANCE
+								.resources32().getSafeUri();
+						ResourceTD resourceTD = descriptor.getResourceTD();
+
+						if (resourceTD instanceof InternalURITD) {
+							InternalURITD internalURITD = (InternalURITD) resourceTD;
+							if (internalURITD.getThumbnailTD() != null
+									&& internalURITD.getThumbnailTD().getUrl() != null) {
+								thumbnailPath = UriUtils
+										.fromTrustedString(internalURITD
+												.getThumbnailTD().getUrl());
+							}
+						} else {
+							if (resourceTD instanceof StringResourceTD) {
+								thumbnailPath = ResourceBundle.INSTANCE
+										.resources32().getSafeUri();
+							} else {
+								if (resourceTD instanceof TableResourceTD) {
+									thumbnailPath = ResourceBundle.INSTANCE
+											.resources32().getSafeUri();
+								}
+							}
+						}
+
+						return renderer.renderItem(descriptor, thumbnailPath,
+								style);
 					}
 				}));
 		view.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
@@ -317,38 +431,60 @@ public class ResourcesListViewPanel extends FramedPanel {
 
 		VerticalLayoutContainer main = new VerticalLayoutContainer();
 		main.setScrollMode(ScrollMode.AUTO);
-		main.setAdjustForScroll(true);
+		// main.setAdjustForScroll(true);
 		main.setBorders(true);
 		main.add(toolbar, new VerticalLayoutData(1, -1));
 		main.add(view, new VerticalLayoutData(1, 1));
 
-		/*
-		 * details = new HTML();
-		 * details.addStyleName(ThemeStyles.get().style().border());
-		 * details.getElement().getStyle().setBackgroundColor("white");
-		 * 
-		 * BorderLayoutData eastData = new BorderLayoutData(200);
-		 * eastData.setSplit(true);
-		 * 
-		 * BorderLayoutData centerData = new BorderLayoutData();
-		 * centerData.setMargins(new Margins(0, 5, 0, 0));
-		 * 
-		 * BorderLayoutContainer con = new BorderLayoutContainer();
-		 * con.setCenterWidget(main, centerData); con.setEastWidget(details,
-		 * eastData);
-		 */
+		details = new HTML();
+		details.addStyleName(ThemeStyles.get().style().border());
+		details.getElement().getStyle().setBackgroundColor("white");
 
-		add(main, new MarginData(0));
+		BorderLayoutData eastData = new BorderLayoutData(200);
+		eastData.setSplit(true);
+
+		BorderLayoutData centerData = new BorderLayoutData();
+		centerData.setMargins(new Margins(0, 5, 0, 0));
+
+		BorderLayoutContainer con = new BorderLayoutContainer();
+		con.setCenterWidget(main, centerData);
+		con.setEastWidget(details, eastData);
+
+		add(con, new MarginData(0));
 	}
 
 	private void onSelectionChange(
 			SelectionChangedEvent<ResourceTDDescriptor> se) {
 		if (se.getSelection().size() > 0) {
-			details.setHTML(detailRenderer.render(se.getSelection().get(0))
-					.asString());
-			chooser.getButton(PredefinedButton.OK).enable();
+			ResourceTDDescriptor descriptor = se.getSelection().get(0);
+			SafeUri thumbnailPath = ResourceBundle.INSTANCE.resources32()
+					.getSafeUri();
+			ResourceTD resourceTD = descriptor.getResourceTD();
+
+			if (resourceTD instanceof InternalURITD) {
+				InternalURITD internalURITD = (InternalURITD) resourceTD;
+				if (internalURITD.getThumbnailTD() != null
+						&& internalURITD.getThumbnailTD().getUrl() != null) {
+					thumbnailPath = UriUtils.fromTrustedString(internalURITD
+							.getThumbnailTD().getUrl());
+				}
+			} else {
+				if (resourceTD instanceof StringResourceTD) {
+					thumbnailPath = ResourceBundle.INSTANCE.resources32()
+							.getSafeUri();
+				} else {
+					if (resourceTD instanceof TableResourceTD) {
+						thumbnailPath = ResourceBundle.INSTANCE.resources32()
+								.getSafeUri();
+					}
+				}
+			}
+
+			details.setHTML(detailRenderer.render(descriptor, thumbnailPath,
+					detailStyle).asString());
+			// chooser.getButton(PredefinedButton.OK).enable();
 		} else {
-			chooser.getButton(PredefinedButton.OK).disable();
+			// chooser.getButton(PredefinedButton.OK).disable();
 			details.setHTML("");
 		}
 	}
@@ -372,7 +508,7 @@ public class ResourcesListViewPanel extends FramedPanel {
 								Log.error("Error Retrieving Resources: "
 										+ caught.getLocalizedMessage());
 								UtilsGXT3.alert("Error retrieving resources",
-										"Error retrieving resources");
+										caught.getLocalizedMessage());
 							}
 						}
 						callback.onFailure(caught);
diff --git a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesPanel.java b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesPanel.java
index f439071..d02dd50 100644
--- a/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesPanel.java
+++ b/src/main/java/org/gcube/portlets/user/td/resourceswidget/client/ResourcesPanel.java
@@ -817,7 +817,7 @@ public class ResourcesPanel extends FramedPanel {
 								Log.error("Error Retrieving Resources: "
 										+ caught.getLocalizedMessage());
 								UtilsGXT3.alert("Error retrieving resources",
-										"Error retrieving resources");
+										caught.getLocalizedMessage());
 							}
 						}
 						callback.onFailure(caught);
diff --git a/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html b/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html
index 91e06b7..5734619 100644
--- a/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html
+++ b/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListView.html
@@ -1,4 +1,4 @@
 <div class="{style.thumb}">
-	<!-- <img src="{resourceTDDescriptor.pathUri}" title="{resourceTDDescriptor.name}">-->
+	<img src="{thumbnailPath}">
 </div>
 <span class="x-editable">{resourceTDDescriptor.name:shorten(18)}</span>
\ No newline at end of file
diff --git a/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css b/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css
new file mode 100644
index 0000000..54d9095
--- /dev/null
+++ b/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.css
@@ -0,0 +1,26 @@
+@CHARSET "UTF-8";
+
+.details {
+	padding: 10px;
+	text-align: center;
+}
+
+.detailsInfo {
+	border-top: 1px solid #ccc;
+	font: 11px Arial, Helvetica, sans-serif;
+	margin-top: 5px;
+	padding-top: 5px;
+	text-align: left;
+}
+
+.detailsTable {
+	border: none;
+}
+
+.detailsHead {
+	font-weight: bold;
+}
+
+.detailsData {
+	padding-left: 5px;	
+}
\ No newline at end of file
diff --git a/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html b/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html
index cd9fbb0..3995886 100644
--- a/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html
+++ b/src/main/resources/org/gcube/portlets/user/td/resourceswidget/client/ResourcesListViewDetail.html
@@ -1,8 +1,13 @@
-<div class="details">
-	<!-- 
-  <img src="{pathUri}">-->
-	<div class="details-info">
-		<b>Name:</b> <span>{resourceTDDescriptor.name}</span><b>Description:</b>
-		<span>{resourceTDDescriptor.description}</span><b>Creation Date:</b> <span>{resourceTDDescriptor.creationDate}</span>
+<div class="{style.details}">
+	<img src="{thumbnailPath}" title="{resourceTDDescriptor.name}">
+	<div class="{style.detailsInfo}">
+	    <table class="{style.detailsTable}">
+	    <tr><td class="{style.detailsHead}">Name:</td></tr>
+	    <tr><td class="{style.detailsData}">{resourceTDDescriptor.name}</td></tr>
+	    <tr><td class="{style.detailsHead}">Description:</td></tr>
+	    <tr><td class="{style.detailsData}">{resourceTDDescriptor.description}</td></tr>
+	    <tr><td class="{style.detailsHead}">Creation Date:</td></tr>
+	    <tr><td class="{style.detailsData}">{resourceTDDescriptor.creationDate}</td></tr>
+		</table>
 	</div>
 </div>
\ No newline at end of file