1280: Workspace GUI: quote and available feature improvements

Task-Url: https://support.d4science.org/issues/1280

Added following How-To: share, upload, public link

Updated pom version at 6.10

git-svn-id: http://svn.d4science-ii.research-infrastructures.eu/gcube/trunk/portlets/user/workspace@120176 82a268e6-3cf1-43bd-a215-b396298e98cf

pom.xml

@@ -11,7 +11,7 @@
 	<groupId>org.gcube.portlets.user</groupId>
 	<artifactId>workspace</artifactId>
 	<packaging>war</packaging>
-	<version>6.9.0-SNAPSHOT</version>
+	<version>6.10.0-SNAPSHOT</version>
 	<name>gCube Workspace Portlet</name>
 	<description>
 		gcube Workspace Portlet is a portlet for users workspace management

src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.java

@@ -3,6 +3,8 @@
  */
 package org.gcube.portlets.user.workspace.client.view;
 
+import org.gcube.portlets.user.workspace.client.resources.Resources;
+
 import com.github.gwtbootstrap.client.ui.Label;
 import com.github.gwtbootstrap.client.ui.Popover;
 import com.github.gwtbootstrap.client.ui.constants.Placement;
@@ -12,6 +14,7 @@ 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.HasVerticalAlignment;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Widget;
 
@@ -23,24 +26,33 @@ import com.google.gwt.user.client.ui.Widget;
 public class WorkspaceFeatures extends Composite {
 
 	@UiField
-	Label ws_quote_alert;
+	HorizontalPanel ws_features;
-
-	@UiField
-	FlowPanel ws_features;
 	
 	@UiField
 	HorizontalPanel hp_feautures;
 	
 	@UiField
-	Label dnd;
+	com.google.gwt.user.client.ui.Label how_to;
 	
 	@UiField
-	Label plk;
+	Label ws_quote;
 	
-	private Popover overDnD = new Popover();
+	@UiField
+	Label shf; //Share Folders & Files
+	
+	private Popover overShF= new Popover();
+	
+	@UiField
+	Label upl; //DRAG & DROP
+	
+	private Popover overUpload = new Popover();
+	
+	@UiField
+	Label plk; //PUBLIC LINK
 
 	private Popover overPlk = new Popover();
 	
+	
 	@UiField
 	FlowPanel fp1;
 	
@@ -68,34 +80,64 @@ public class WorkspaceFeatures extends Composite {
 	public WorkspaceFeatures() {
 
 		initWidget(uiBinder.createAndBindUi(this));
+		hp_feautures.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
+		ws_features.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
 		hp_feautures.setCellWidth(fp1, "33%");
 		hp_feautures.setCellWidth(fp2, "33%");
 		hp_feautures.setCellWidth(fp3, "33%");
-		fp3.getElement().getStyle().setTextAlign(com.google.gwt.dom.client.Style.TextAlign.RIGHT);
+		how_to.addStyleName("margin-right-10");
-		initPopupDndFeature();
+		shf.addStyleName("margin-right-10");
+		upl.addStyleName("margin-right-10");
+		plk.addStyleName("margin-right-10");
+		initPopupShareFeature();
+		initPopupUploadFeature();
 		initPopupPlkFeature();
-		// ws_features.add
 	}
 	
 	/**
 	 * 
 	 */
-	private void initPopupDndFeature() {
+	private void initPopupShareFeature() {
-		overDnD.setAnimation(true);
+		overShF.setAnimation(false);
-		overDnD.setWidget(dnd);
+		overShF.setWidget(shf);
-		overDnD.setHeading("Workspace DnD");
+		overShF.setHeading("Workspace Share Folders and Files");
-		overDnD.setText("Drag & Drop your files from Desktop to upload to Workspace");
+		String icon = "<span style=\"margin-right:5px\">"+Resources.getIconShareFolder().getSafeHtml().asString()+"</span>";
-		overDnD.setPlacement(Placement.TOP);
+		overShF.setText(icon+"The quickest way to share something is using the Share Folder. Locate the folder with the files you want to share and then click 'Share'");
-		overDnD.setTrigger(Trigger.HOVER);
+		overShF.setHtml(true);
-		overDnD.reconfigure();
+		overShF.setPlacement(Placement.TOP);
+		overShF.setTrigger(Trigger.HOVER);
+		overShF.reconfigure();
+	}
+
+	/**
+	 * 
+	 */
+	private void initPopupUploadFeature() {
+		overUpload.setAnimation(false);
+		overUpload.setWidget(upl);
+		overUpload.setHeading("Workspace Upload Files and Archives");
+		String iconUploadDND = "<span style=\"margin-right:5px\">"+Resources.getIconHand().getSafeHtml().asString()+"</span>";
+		String iconUploadFile = "<span style=\"margin-right:5px\">"+Resources.getIconFileUpload().getSafeHtml().asString()+"</span>";
+		String iconUploadArchive = "<span style=\"margin-right:5px\">"+Resources.getIconArchiveUpload().getSafeHtml().asString()+"</span>";
+		overUpload.setText("You can upload files in the Workspace in several ways:<br/>"
+				+iconUploadDND+ "1 - Drop your files from Desktop;<br/>"
+				+iconUploadFile+ "2 - Click 'Upload' and Browse Files;<br/>"
+				+iconUploadArchive+ "3 - Upload a zip file to unzip directly its content in the Workspace.<br/>");
+				
+		overUpload.setHtml(true);
+		overUpload.setPlacement(Placement.TOP);
+		overUpload.setTrigger(Trigger.HOVER);
+		overUpload.reconfigure();
 //		overImgUpload.show();
 	}
 	
 	private void initPopupPlkFeature() {
-		overPlk.setAnimation(true);
+		overPlk.setAnimation(false);
 		overPlk.setWidget(plk);
 		overPlk.setHeading("Workspace Public Link");
-		overPlk.setText("Create links to files in your Workspace to download them. You can send the links to anyone by pasting them into Workspace Message, your emails, instant messages, etc.");
+		String icon = "<span style=\"margin-right:5px\">"+Resources.getIconPublicLink().getSafeHtml().asString()+"</span>";
+		overPlk.setText(icon+"Create links to files in your Workspace to download them. You can send the links to anyone by pasting them into Workspace Message, your emails, instant messages, etc.");
+		overPlk.setHtml(true);
 		overPlk.setPlacement(Placement.TOP);
 		overPlk.setTrigger(Trigger.HOVER);
 		overPlk.reconfigure();
@@ -106,28 +148,21 @@ public class WorkspaceFeatures extends Composite {
 	 * @param html
 	 */
 	public void updateQuotes(String html) {
-		ws_quote_alert.setText(html);
+		ws_quote.setText(html);
 	}
 	
-//	public void showImgUploadDnD(boolean show) {
-//		if (show)
-//			overImgUpload.show();
-//		else
-//			overImgUpload.hide();
-//	}
-
 	/**
 	 * @param bool
 	 */
 	public void setQuoteVisible(boolean bool) {
-		ws_quote_alert.setVisible(bool);
+		ws_quote.setVisible(bool);
 	}
 
 	/**
 	 * @param bool
 	 */
 	public void setDndFeatureVisible(boolean bool) {
-		dnd.setVisible(bool);
+		upl.setVisible(bool);
 	}
 
 }

src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.ui.xml

@@ -5,15 +5,18 @@
 		<b:Alert close="false" animation="false">
 			<g:HorizontalPanel ui:field="hp_feautures" width="100%">
 				<g:FlowPanel ui:field="fp1">
-					<b:Label ui:field="ws_quote_alert" type="INFO"></b:Label>
+					<b:Label ui:field="ws_quote" type="INFO"></b:Label>
 				</g:FlowPanel>
 				<g:FlowPanel ui:field="fp2">
 				</g:FlowPanel>
 				<g:FlowPanel ui:field="fp3">
-					<g:FlowPanel ui:field="ws_features">
+					<g:HorizontalPanel ui:field="ws_features" verticalAlignment="middle">
-						<b:Label ui:field="dnd" text="DnD" styleName="margin-right-5"></b:Label>
+						<g:Label ui:field="how_to">How-to:</g:Label>
-						<b:Label ui:field="plk" text="PlK" styleName="margin-right-5"></b:Label>
+						<b:Label ui:field="shf" text="Share"></b:Label>
-					</g:FlowPanel>
+						<b:Label ui:field="plk" text="Public Link"></b:Label>
+						<b:Label ui:field="upl" text="Upload"></b:Label>
+<!-- 						<b:Label ui:field="upa" text="Upload Archive"></b:Label> -->
+					</g:HorizontalPanel>
 				</g:FlowPanel>
 			</g:HorizontalPanel>
 		</b:Alert>

src/main/webapp/workspaceportlet.css

@@ -391,6 +391,6 @@
 	width: 33%;
 }
 
-.margin-right-5{
+.margin-right-10{
-	margin-right: 5px;
+	margin-right: 10px;
 }