optimized the view

.settings/com.gwtplugins.gdt.eclipse.core.prefs

@@ -1,4 +1,4 @@
 eclipse.preferences.version=1
-lastWarOutDir=/home/francescomangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-1.0.0-SNAPSHOT
+lastWarOutDir=/home/francesco-mangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-1.0.0-SNAPSHOT
 warSrcDir=src/main/webapp
 warSrcDirIsOutput=false

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java

@@ -174,8 +174,18 @@ public class LayerManager {
 							VerticalPanel vpPanel = new VerticalPanel();
 							vpPanel.add(flex);
 							
-							if(button!=null)
+							if(button!=null) {
 								vpPanel.add(button);
+								button.setType(ButtonType.LINK);
+								button.addClickHandler(new ClickHandler() {
+									
+									@Override
+									public void onClick(ClickEvent event) {
+										applicationBus.fireEvent(new ShowDetailsEvent(ProductType.CONCESSIONE, theFeature));
+										
+									}
+								});
+							}
 								
 							olMap.showPopup(vpPanel.toString(), queryEvent.getoLCoordinate());
 
@@ -196,16 +206,7 @@ public class LayerManager {
 									    });
 								}
 							});
-							button.setType(ButtonType.LINK);
+			
-							button.addClickHandler(new ClickHandler() {
-								
-								@Override
-								public void onClick(ClickEvent event) {
-									GWT.log("qui");
-									applicationBus.fireEvent(new ShowDetailsEvent(ProductType.CONCESSIONE, theFeature));
-									
-								}
-							});
 						}
 					});
 				}

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/LightOpenLayerOSM.java

@@ -31,7 +31,6 @@ import ol.source.XyzOptions;
 import ol.style.FillOptions;
 import ol.style.Icon;
 import ol.style.IconOptions;
-import ol.style.Image;
 import ol.style.Style;
 
  public class LightOpenLayerOSM {

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.java

@@ -1,7 +1,6 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.ui.map;
 
 import org.gcube.portlets.user.geoportaldataviewer.client.gis.LightOpenLayerOSM;
-import org.gcube.portlets.user.geoportaldataviewer.client.gis.OpenLayerOSM;
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.Scheduler;

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.java

@@ -4,12 +4,13 @@ import java.util.List;
 
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.images.ImageView;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView;
+import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
 import org.gcube.portlets.user.geoportaldataviewer.shared.products.ConcessioneDV;
 import org.gcube.portlets.user.geoportaldataviewer.shared.products.model.UploadedImageDV;
 
-import com.github.gwtbootstrap.client.ui.Column;
+import com.gargoylesoftware.htmlunit.Page;
-import com.github.gwtbootstrap.client.ui.Heading;
 import com.github.gwtbootstrap.client.ui.Label;
+import com.github.gwtbootstrap.client.ui.PageHeader;
 import com.github.gwtbootstrap.client.ui.Paragraph;
 import com.github.gwtbootstrap.client.ui.Thumbnails;
 import com.github.gwtbootstrap.client.ui.constants.LabelType;
@@ -22,105 +23,105 @@ import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.Widget;
 
-
 public class ConcessioneView extends Composite {
 
 	private static ConcessioneViewUiBinder uiBinder = GWT.create(ConcessioneViewUiBinder.class);
 
 	interface ConcessioneViewUiBinder extends UiBinder<Widget, ConcessioneView> {
 	}
-	
+
 	@UiField
-	Heading titolo;
+	PageHeader titolo;
-	
+
 	@UiField
 	Paragraph introduzione;
 	
 	@UiField
-	HTMLPanel recordPanel;
+	HTMLPanel concessioniPanel;
-	
+
-	@UiField
-	Column autori;
-	
-	@UiField
-	Column contributore;
-	
 	@UiField
 	HTMLPanel imagesPanel;
-	
+
 	@UiField
 	HTMLPanel pageViewDetails;
-	
+
 	@UiField
 	HTMLPanel mapViewPanel;
-	
+
 	private ConcessioneDV concessioneDV;
-	
+
 	private Thumbnails thumbNails = new Thumbnails();
 
+	private CustomFlexTable customTable = new CustomFlexTable();
+
 	public ConcessioneView() {
 		initWidget(uiBinder.createAndBindUi(this));
 		pageViewDetails.getElement().setId("page-view-details");
 	}
 
-
 	public ConcessioneView(ConcessioneDV concessioneDV) {
 		this();
-		recordPanel.setVisible(true);
-		recordPanel.add(new RecordView(concessioneDV));
 		this.concessioneDV = concessioneDV;
 		titolo.setText(concessioneDV.getNome());
 		introduzione.setText(concessioneDV.getIntroduzione());
+
+		concessioniPanel.add(new RecordView(concessioneDV));
+
 		
-		if(concessioneDV.getAuthors()!=null) {
+		if (concessioneDV.getDataInizioProgetto() != null) {
-		
+			customTable.addNextKeyValue("Data Inizio Progetto", concessioneDV.getDataFineProgetto());
-			for (String author : concessioneDV.getAuthors()) {
-				addLabel(autori, author);
-				//autori.add(new Label(author));
-			}
 		}
 		
-		addLabel(contributore, concessioneDV.getContributore());
+		if (concessioneDV.getDataFineProgetto() != null) {
-		addImages();
+			customTable.addNextKeyValue("Data Fine Progetto", concessioneDV.getDataFineProgetto());
+			
+		}
 		
+		if (concessioneDV.getAuthors() != null) {
+			customTable.addNextKeyValues("Autori", concessioneDV.getAuthors(), "\n");
+			
+		}
+
+		customTable.addNextKeyValue("Contributore", concessioneDV.getContributore());
+		
+		concessioniPanel.add(customTable);
+		addImages();
 		addMap();
 	}
-	
+
 	private void addMap() {
 		MapView mapView = new MapView(concessioneDV.getCentroidLong(), concessioneDV.getCentroidLat());
 		mapViewPanel.add(mapView);
 	}
 
-
 	private void addImages() {
 		List<UploadedImageDV> immagini = concessioneDV.getImmaginiRappresentative();
-		if(immagini!=null && immagini.size()>0) {
+		if (immagini != null && immagini.size() > 0) {
 			imagesPanel.setVisible(true);
 			int i = 0;
 			for (UploadedImageDV uploadedImageDV : immagini) {
-				if(i==0)
+				if (i == 0)
 					imagesPanel.add(thumbNails);
-				
+
 				thumbNails.add(new ImageView(uploadedImageDV));
 			}
 		}
-		
+
 	}
 
-
+	public void addLabel(FlowPanel w, String labelValue, LabelType type) {
-	public void addLabel(FlowPanel w, String labelValue, LabelType type){
 		Label label = new Label(labelValue);
 		label.setType(type);
 		label.getElement().getStyle().setMarginRight(5, Unit.PX);
 		w.add(label);
 	}
-	
+
-	public void addLabel(FlowPanel w, String labelValue){
+	public void addLabel(FlowPanel w, String labelValue) {
 		com.google.gwt.user.client.ui.Label label = new com.google.gwt.user.client.ui.Label(labelValue);
 		label.getElement().getStyle().setMarginRight(5, Unit.PX);
 		w.add(label);
 	}
-	
+
 	public ConcessioneDV getConcessioneDV() {
 		return concessioneDV;
 	}

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.ui.xml

@@ -16,41 +16,31 @@
 		font-size: 22px;
 	}
 	
-	.display-60 {
+	<!--
-		width: 60%;
+	.display-60 {--><!--
+		width: 60%; --> <!--
 		display: inline-block;
+		-->
+		<!--
 	}
 	
-	.display-400-px {
+	-->
-		width: 400px;
+	<!--
+	.display-400-px {--><!--
+		width: 400px; --> <!--
 		display: inline-block;
+		-->
+		<!--
 	}
+	-->
 	</ui:style>
 	<g:HTMLPanel ui:field="pageViewDetails">
-		<b:Hero>
+		<b:PageHeader ui:field="titolo"></b:PageHeader>
-			<b:Heading size="2" ui:field="titolo"></b:Heading>
+		<b:Paragraph ui:field="introduzione"></b:Paragraph>
-			<b:Paragraph ui:field="introduzione"></b:Paragraph>
-		</b:Hero>
 		<g:HorizontalPanel>
-			<g:HTMLPanel ui:field="concessioniPanel"
+			<g:HTMLPanel ui:field="concessioniPanel">
-				addStyleNames="{style.display-60}">
-				<g:HTMLPanel ui:field="recordPanel" visible="false">
-				</g:HTMLPanel>
-				<g:HorizontalPanel>
-					<b:Column size="2">
-						<g:Label>Autori</g:Label>
-					</b:Column>
-					<b:Column size="8" ui:field="autori"></b:Column>
-				</g:HorizontalPanel>
-				<b:Row>
-					<b:Column size="2">
-						<g:Label>Contributore</g:Label>
-					</b:Column>
-					<b:Column size="8" ui:field="contributore"></b:Column>
-				</b:Row>
 			</g:HTMLPanel>
-			<g:HTMLPanel ui:field="mapViewPanel"
+			<g:HTMLPanel ui:field="mapViewPanel">
-				addStyleNames="{style.display-400-px}">
 			</g:HTMLPanel>
 		</g:HorizontalPanel>
 		<g:HTMLPanel ui:field="relazioneScavoPanel"

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/RecordView.java

@@ -1,14 +1,15 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.ui.products;
 
+import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
 import org.gcube.portlets.user.geoportaldataviewer.shared.products.model.RecordDV;
 
-import com.github.gwtbootstrap.client.ui.Column;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.Widget;
 
 public class RecordView extends Composite {
@@ -17,15 +18,11 @@ public class RecordView extends Composite {
 
 	interface RecordViewUiBinder extends UiBinder<Widget, RecordView> {
 	}
-
-	@UiField
-	Column creationTime;
 	
 	@UiField
-	Column lastUpdateTime;
+	HTMLPanel recordDVPanel;
 	
-	@UiField
+	private CustomFlexTable customTable = new CustomFlexTable();
-	Column updatedByUser;
 	
 	public RecordView() {
 		initWidget(uiBinder.createAndBindUi(this));
@@ -33,10 +30,11 @@ public class RecordView extends Composite {
 
 	public RecordView(RecordDV record) {
 		initWidget(uiBinder.createAndBindUi(this));
-		addLabel(creationTime, record.getCreationTime());
-		addLabel(lastUpdateTime, record.getLastUpdateTime());
-		addLabel(updatedByUser, record.getLastUpdateUser());
 		
+		customTable.addNextKeyValue("Created", record.getCreationTime());
+		customTable.addNextKeyValue("Last Updated", record.getLastUpdateTime());
+		customTable.addNextKeyValue("Updated by", record.getLastUpdateUser());
+		recordDVPanel.add(customTable);
 	}
 	
 	public void addLabel(FlowPanel w, String labelValue){

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/RecordView.ui.xml

@@ -5,23 +5,5 @@
 	<ui:style>
 	</ui:style>
 	<g:HTMLPanel ui:field="recordDVPanel">
-		<b:Row>
-			<b:Column size="2">
-				<g:Label>Created</g:Label>
-			</b:Column>
-			<b:Column size="8" ui:field="creationTime"></b:Column>
-		</b:Row>
-		<b:Row>
-			<b:Column size="2">
-				<g:Label>Last Update</g:Label>
-			</b:Column>
-			<b:Column size="8" ui:field="lastUpdateTime"></b:Column>
-		</b:Row>
-		<b:Row>
-			<b:Column size="2">
-				<g:Label>Updated By</g:Label>
-			</b:Column>
-			<b:Column size="8" ui:field="updatedByUser"></b:Column>
-		</b:Row>
 	</g:HTMLPanel>
 </ui:UiBinder> 

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/util/CustomFlexTable.java

@@ -0,0 +1,84 @@
+package org.gcube.portlets.user.geoportaldataviewer.client.ui.util;
+
+import java.util.List;
+
+import com.google.gwt.user.client.ui.FlexTable;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.Widget;
+
+
+/**
+ * The Class CustomFlexTable.
+ *
+ * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
+ * 
+ * Nov 11, 2020
+ */
+public class CustomFlexTable extends FlexTable {
+
+	/**
+	 * Instantiates a new custom flex table.
+	 */
+	public CustomFlexTable() {
+		
+		this.getElement().addClassName("my-custom-flex-table");
+	}
+	
+
+	/**
+	 * Adds the next key values.
+	 *
+	 * @param key the key
+	 * @param listValues the list values
+	 * @param separator the separator
+	 */
+	public void addNextKeyValues(String key, List<String> listValues, String separator) {
+		Label keyLabel = new Label(key);
+		int row = getRowCount() + 1;
+		setWidget(row, 0, keyLabel);
+		
+		if(listValues==null)
+			return;
+		
+		String valuesAsString = "";
+		for (String value : listValues) {
+			valuesAsString+=value+separator;
+		}
+		valuesAsString = valuesAsString.substring(0, valuesAsString.lastIndexOf(separator));
+		Label valuesLabel = new Label(valuesAsString);
+		setWidget(row, 1, valuesLabel);
+	}
+
+	/**
+	 * Adds the next key value.
+	 *
+	 * @param key the key
+	 * @param value the value
+	 */
+	public void addNextKeyValue(String key, String value) {
+		Label keyLabel = new Label(key);
+
+		// keyLabel.getElement().getStyle().setMarginRight(5, Unit.PX);
+		int row = getRowCount() + 1;
+		setWidget(row, 0, keyLabel);
+		if(value==null)
+			return;
+		
+		Label valueLabel = new Label(value);
+		setWidget(row, 1, valueLabel);
+	}
+
+	/**
+	 * Adds the next key widget.
+	 *
+	 * @param key the key
+	 * @param value the value
+	 */
+	public void addNextKeyWidget(String key, Widget value) {
+		Label keyLabel = new Label(key);
+		int row = getRowCount() + 1;
+		setWidget(row, 0, keyLabel);
+		setWidget(row, 1, value);
+	}
+
+}

src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/ConvertToDataViewModel.java

@@ -96,7 +96,7 @@ public class ConvertToDataViewModel {
 			
 			theConcessione.setRelazioneScavo(toRelazioneScavo(concessione.getRelazioneScavo()));
 			
-			/*
+			
 			if (concessione.getImmaginiRappresentative() != null) {
 				List<UploadedImageDV> uploadedImagesDV = new ArrayList<UploadedImageDV>(
 						concessione.getImmaginiRappresentative().size());
@@ -104,9 +104,9 @@ public class ConvertToDataViewModel {
 					uploadedImagesDV.add(toUploadedImage(ui));
 				}
 				theConcessione.setImmaginiRappresentative(uploadedImagesDV);
-			}*/
+			}
+			
 			
-			/*
 			if (concessione.getGenericContent() != null) {
 				List<OtherContentDV> otherContentsDV = new ArrayList<OtherContentDV>(
 						concessione.getGenericContent().size());
@@ -114,9 +114,9 @@ public class ConvertToDataViewModel {
 					otherContentsDV.add(toOtherContentDV(gc));
 				}
 				theConcessione.setGenericContent(otherContentsDV);
-			}*/
+			}
 	
-			/*
+			
 			if (concessione.getPianteFineScavo() != null) {
 				List<LayerConcessioneDV> piantaScavoDV = new ArrayList<LayerConcessioneDV>(
 						concessione.getPianteFineScavo().size());
@@ -129,7 +129,7 @@ public class ConvertToDataViewModel {
 			if (concessione.getPosizionamentoScavo() != null) {
 				LayerConcessioneDV thePosizScavo = toLayerConcessione(concessione.getPosizionamentoScavo());
 				theConcessione.setPosizionamentoScavo(thePosizScavo);
-			}*/
+			}
 	
 	
 			LOG.debug("Returning concessione: " + theConcessione);

src/main/java/org/gcube/portlets/user/geoportaldataviewer/server/GeoportalDataViewerServiceImpl.java

@@ -8,7 +8,6 @@ import org.gcube.application.geoportal.managers.AbstractRecordManager;
 import org.gcube.application.geoportal.managers.ManagerFactory;
 import org.gcube.application.geoportal.model.Record;
 import org.gcube.application.geoportal.model.concessioni.Concessione;
-import org.gcube.common.scope.api.ScopeProvider;
 import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerService;
 import org.gcube.portlets.user.geoportaldataviewer.server.gis.FeatureParser;
 import org.gcube.portlets.user.geoportaldataviewer.server.gis.WMSUrlValidator;

src/main/webapp/GeoportalDataViewer.css

@@ -69,23 +69,30 @@
 	font-weight: bold;
 }
 
-#page-view-details div {
+#page-view-details{ 
+	margin: 10px;
+	text-rendering: optimizelegibility;
 	font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 }
 
-#page-view-details .hero-unit h1, #page-view-details .hero-unit h2,
+#page-view-details > h1 { 
-	#page-view-details .hero-unit p {
+	font-size: 32px;
-	font-family: Lato, -apple-system, BlinkMacSystemFont, system-ui,
-		Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 }
 
-#page-view-details .hero-unit {
+#page-view-details > p { 
-	padding: 40px;
+	font-size: 24px;
-	margin-left: 5px;
+	padding: 10px;
-	margin-right: 5px;
+	color: #999;
 }
 
-#page-view-details .span1 .gwt-Label, #page-view-details .span2 .gwt-Label {
+#page-view-details .my-custom-flex-table{
+	margin-left: 20px;
+	margin-right: 20px;
+	font-size: 14px;
+}
+
+#page-view-details .my-custom-flex-table tbody tr > td:first-child {
 	color: gray;
 	font-weight: bold;
+	width: 170px;	
 }