1280: Workspace GUI: quote and available feature improvements

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

Start working..

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

.classpath

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry kind="src" output="target/workspace-6.10.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
+	<classpathentry kind="src" output="target/workspace-6.9.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
 		<attributes>
 			<attribute name="optional" value="true"/>
 			<attribute name="maven.pomderived" value="true"/>
@@ -26,5 +26,5 @@
 			<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="output" path="target/workspace-6.10.0-SNAPSHOT/WEB-INF/classes"/>
+	<classpathentry kind="output" path="target/workspace-6.9.0-SNAPSHOT/WEB-INF/classes"/>
 </classpath>

pom.xml

@@ -11,7 +11,7 @@
 	<groupId>org.gcube.portlets.user</groupId>
 	<artifactId>workspace</artifactId>
 	<packaging>war</packaging>
-	<version>6.10.0-SNAPSHOT</version>
+	<version>6.9.0-SNAPSHOT</version>
 	<name>gCube Workspace Portlet</name>
 	<description>
 		gcube Workspace Portlet is a portlet for users workspace management
@@ -60,11 +60,11 @@
 	<dependencies>
 
 		<!-- UNCOMMENT THIS TO RUN IN DEVO MODE -->
-<!-- 		<dependency> -->
+		<dependency>
-<!-- 			<groupId>xerces</groupId> -->
+			<groupId>xerces</groupId>
-<!-- 			<artifactId>xerces</artifactId> -->
+			<artifactId>xerces</artifactId>
-<!-- 			<version>2.4.0</version> -->
+			<version>2.4.0</version>
-<!-- 		</dependency> -->
+		</dependency>
 		
 		<!-- This dependency is needed and is need on TOP to use GWT UI BInder 
 			without old Xerces version of gCore complaining -->

src/main/java/org/gcube/portlets/user/workspace/client/AppController.java

@@ -97,6 +97,7 @@ import org.gcube.portlets.user.workspace.client.model.FileGridModel;
 import org.gcube.portlets.user.workspace.client.model.FileModel;
 import org.gcube.portlets.user.workspace.client.model.FolderModel;
 import org.gcube.portlets.user.workspace.client.model.ScopeModel;
+import org.gcube.portlets.user.workspace.client.view.WorkspaceFeatures;
 import org.gcube.portlets.user.workspace.client.view.WorskpacePortlet;
 import org.gcube.portlets.user.workspace.client.view.panels.GxtBorderLayoutPanel;
 import org.gcube.portlets.user.workspace.client.view.panels.GxtItemsPanel;
@@ -149,7 +150,8 @@ public class AppController implements SubscriberInterface {
 	private HasWidgets rootPanel;
 	private String selectedSmartFolderId;
 	private String selectedSmartFolderCategory;
-	private HTML htmlWorkspaceSize = new HTML();
+//	private Alert alertFeatures = new Alert();
+	private WorkspaceFeatures workspaceFeatures = new WorkspaceFeatures();
 
 	public static final Logger logger = Logger.getLogger("WsAppController");
 
@@ -1368,7 +1370,7 @@ public class AppController implements SubscriberInterface {
 			}
 		});
 		
-		rootPanel.add(htmlWorkspaceSize);
+		rootPanel.add(workspaceFeatures);
 	}
 	
 	private void setWorkspaceUserQuotes(String size, long totalItems){
@@ -1383,9 +1385,7 @@ public class AppController implements SubscriberInterface {
 		}
 		
 		msg+= ", "+size;
-		
+		workspaceFeatures.updateQuotes(msg);
-		String html = "<div style=\"width: 100%; text-align: left; font-size: 9px; padding: 5px;\">" + msg +"</div>";
-		htmlWorkspaceSize.setHTML(html);
 	}
 
 
@@ -2033,7 +2033,7 @@ public class AppController implements SubscriberInterface {
 	}
 	
 	private void setVisibleUserQuote(boolean bool){
-		htmlWorkspaceSize.setVisible(bool);
+		workspaceFeatures.setQuoteVisible(bool);
 	}
 
 

src/main/java/org/gcube/portlets/user/workspace/client/resources/WsPortletResources.java

@@ -0,0 +1,21 @@
+/**
+ * 
+ */
+package org.gcube.portlets.user.workspace.client.resources;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.ImageResource;
+
+/**
+ * @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
+ * @Jan 15, 2015
+ *
+ */
+public interface WsPortletResources extends ClientBundle {
+
+	public static final WsPortletResources ICONS = GWT.create(WsPortletResources.class);
+
+	@Source("upload16.png")
+	ImageResource upload16();
+}

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

@@ -0,0 +1,118 @@
+/**
+ * 
+ */
+package org.gcube.portlets.user.workspace.client.view;
+
+import org.gcube.portlets.user.workspace.client.resources.WsPortletResources;
+
+import com.github.gwtbootstrap.client.ui.Label;
+import com.github.gwtbootstrap.client.ui.Popover;
+import com.github.gwtbootstrap.client.ui.constants.Placement;
+import com.github.gwtbootstrap.client.ui.constants.Trigger;
+import com.google.gwt.core.client.GWT;
+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.HorizontalPanel;
+import com.google.gwt.user.client.ui.Image;
+import com.google.gwt.user.client.ui.Widget;
+
+/**
+ * The Class PageTemplate.
+ *
+ * @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it Feb 19, 2015
+ */
+public class WorkspaceFeatures extends Composite {
+
+	@UiField
+	Label ws_quote_alert;
+
+	@UiField
+	FlowPanel ws_features;
+	
+	@UiField
+	HorizontalPanel hp_feautures;
+
+	private Image imgUpload = new Image(WsPortletResources.ICONS.upload16());
+
+	private Popover overImgUpload = new Popover();
+	
+	@UiField
+	FlowPanel fp1;
+	
+	@UiField
+	FlowPanel fp2;
+	
+	@UiField
+	FlowPanel fp3;
+
+	private static WorkspaceFeaturesUiBinder uiBinder = GWT.create(WorkspaceFeaturesUiBinder.class);
+
+	/**
+	 * The Interface PageTemplateUiBinder.
+	 *
+	 * @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it Feb 19,
+	 *         2015
+	 */
+	interface WorkspaceFeaturesUiBinder extends
+			UiBinder<Widget, WorkspaceFeatures> {
+	}
+
+	/**
+	 * Instantiates a new page template.
+	 */
+	public WorkspaceFeatures() {
+
+		initWidget(uiBinder.createAndBindUi(this));
+		initPopupDndFeature();
+		hp_feautures.setCellWidth(fp1, "33%");
+		hp_feautures.setCellWidth(fp2, "33%");
+		hp_feautures.setCellWidth(fp3, "33%");
+		ws_features.add(imgUpload);
+		// ws_features.add
+	}
+
+	/**
+	 * 
+	 */
+	private void initPopupDndFeature() {
+		overImgUpload.setAnimation(true);
+		overImgUpload.setWidget(imgUpload);
+		overImgUpload.setHeading("Workspace DnD");
+		overImgUpload.setText("Drop your files here to upload to Workspace");
+		overImgUpload.setPlacement(Placement.TOP);
+		overImgUpload.setTrigger(Trigger.HOVER);
+		overImgUpload.reconfigure();
+//		overImgUpload.show();
+	}
+
+	/**
+	 * @param html
+	 */
+	public void updateQuotes(String html) {
+		ws_quote_alert.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);
+	}
+
+	/**
+	 * @param bool
+	 */
+	public void setDndFeatureVisible(boolean bool) {
+		imgUpload.setVisible(bool);
+	}
+
+}

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

@@ -0,0 +1,19 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
+	<g:FlowPanel>
+		<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>
+				</g:FlowPanel>
+				<g:FlowPanel ui:field="fp2">
+				</g:FlowPanel>
+				<g:FlowPanel ui:field="fp3">
+					<g:FlowPanel ui:field="ws_features">
+					</g:FlowPanel>
+				</g:FlowPanel>
+			</g:HorizontalPanel>
+		</b:Alert>
+	</g:FlowPanel>
+</ui:UiBinder> 

src/main/resources/org/gcube/portlets/user/workspace/WorkspacePortlet.gwt.xml

@@ -18,8 +18,7 @@
 	<inherits name='org.gcube.portlets.user.workspace.WorkspaceTree' />
 	<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' />
 
-	<inherits
+<!-- 	<inherits name='org.gcube.portlets.widgets.lighttree.WorkspacePortletLightTree' /> -->
-		name='org.gcube.portlets.widgets.lighttree.WorkspacePortletLightTree' />
 
 	<inherits name='org.gcube.portlets.widgets.wsmail.WsMail_Widget' />
 

src/main/webapp/workspacebootstrap.min.css

@@ -0,0 +1,230 @@
+/*!
+ * Bootstrap v2.3.2
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * 
+ *
+ * MINIMAL FOR GCUBE-WORKSPACE
+ */
+.popover {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1010;
+	display: none;
+	max-width: 276px;
+	padding: 1px;
+	text-align: left;
+	white-space: normal;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-webkit-background-clip: padding-box;
+	-moz-background-clip: padding;
+	background-clip: padding-box
+}
+
+.popover.top {
+	margin-top: -10px
+}
+
+.popover.right {
+	margin-left: 10px
+}
+
+.popover.bottom {
+	margin-top: 10px
+}
+
+.popover.left {
+	margin-left: -10px
+}
+
+.popover-title {
+	padding: 8px 14px;
+	margin: 0;
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 18px;
+	background-color: #f7f7f7;
+	border-bottom: 1px solid #ebebeb;
+	-webkit-border-radius: 5px 5px 0 0;
+	-moz-border-radius: 5px 5px 0 0;
+	border-radius: 5px 5px 0 0
+}
+
+.popover-title:empty {
+	display: none
+}
+
+.popover-content {
+	padding: 9px 14px
+}
+
+.popover .arrow, .popover .arrow:after {
+	position: absolute;
+	display: block;
+	width: 0;
+	height: 0;
+	border-color: transparent;
+	border-style: solid
+}
+
+.popover .arrow {
+	border-width: 11px
+}
+
+.popover .arrow:after {
+	border-width: 10px;
+	content: ""
+}
+
+.popover.top .arrow {
+	bottom: -11px;
+	left: 50%;
+	margin-left: -11px;
+	border-top-color: #999;
+	border-top-color: rgba(0, 0, 0, 0.25);
+	border-bottom-width: 0
+}
+
+.popover.top .arrow:after {
+	bottom: 1px;
+	margin-left: -10px;
+	border-top-color: #fff;
+	border-bottom-width: 0
+}
+
+.popover.right .arrow {
+	top: 50%;
+	left: -11px;
+	margin-top: -11px;
+	border-right-color: #999;
+	border-right-color: rgba(0, 0, 0, 0.25);
+	border-left-width: 0
+}
+
+.popover.right .arrow:after {
+	bottom: -10px;
+	left: 1px;
+	border-right-color: #fff;
+	border-left-width: 0
+}
+
+.popover.bottom .arrow {
+	top: -11px;
+	left: 50%;
+	margin-left: -11px;
+	border-bottom-color: #999;
+	border-bottom-color: rgba(0, 0, 0, 0.25);
+	border-top-width: 0
+}
+
+.popover.bottom .arrow:after {
+	top: 1px;
+	margin-left: -10px;
+	border-bottom-color: #fff;
+	border-top-width: 0
+}
+
+.popover.left .arrow {
+	top: 50%;
+	right: -11px;
+	margin-top: -11px;
+	border-left-color: #999;
+	border-left-color: rgba(0, 0, 0, 0.25);
+	border-right-width: 0
+}
+
+.popover.left .arrow:after {
+	right: 1px;
+	bottom: -10px;
+	border-left-color: #fff;
+	border-right-width: 0
+}
+
+.label, .badge {
+	display: inline-block;
+	padding: 2px 4px;
+	font-size: 11.844px;
+	font-weight: bold;
+	line-height: 14px;
+	color: #fff;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	white-space: nowrap;
+	vertical-align: baseline;
+	background-color: #999
+}
+
+.label {
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px
+}
+
+.badge {
+	padding-right: 9px;
+	padding-left: 9px;
+	-webkit-border-radius: 9px;
+	-moz-border-radius: 9px;
+	border-radius: 9px
+}
+
+.label:empty, .badge:empty {
+	display: none
+}
+
+/* a.label:hover, a.label:focus, a.badge:hover, a.badge:focus { */
+/* 	color: #fff; */
+/* 	text-decoration: none; */
+/* 	cursor: pointer */
+/* } */
+.label-important, .badge-important {
+	background-color: #b94a48
+}
+
+.label-important[href], .badge-important[href] {
+	background-color: #953b39
+}
+
+.label-warning, .badge-warning {
+	background-color: #f89406
+}
+
+.label-warning[href], .badge-warning[href] {
+	background-color: #c67605
+}
+
+.label-success, .badge-success {
+	background-color: #468847
+}
+
+.label-success[href], .badge-success[href] {
+	background-color: #356635
+}
+
+.label-info, .badge-info {
+	background-color: #3a87ad
+}
+
+.label-info[href], .badge-info[href] {
+	background-color: #2d6987
+}
+
+.label-inverse, .badge-inverse {
+	background-color: #333
+}
+
+.label-inverse[href], .badge-inverse[href] {
+	background-color: #1a1a1a
+}

src/main/webapp/workspaceportlet.css

@@ -4,6 +4,8 @@
 
 @import url(workspace/old-dialog.css);
 
+@import url(workspacebootstrap.min.css);
+
 #SearchAndFilter {
 	background-color: #d0def0;
 	/* Mozilla Firefox */
@@ -36,7 +38,7 @@
 	background-color: white;
 }
 
-.x-form-text,textarea.x-form-field {
+.x-form-text, textarea.x-form-field {
 	-moz-border-radius: 3px !important;
 	-webkit-border-radius: 3px !important;
 	border-radius: 3px !important;
@@ -60,8 +62,8 @@
 	padding: 1px;
 }
 
-.wizardButton[disabled]:hover,.wizardButton[disabled]:active,.wizardButton[disabled]
+.wizardButton[disabled]:hover, .wizardButton[disabled]:active,
-	{
+	.wizardButton[disabled] {
 	color: #CCC;
 	border-color: #BBB;
 	cursor: default;
@@ -119,13 +121,17 @@
 }
 
 /* remove images */
-.button-link .x-btn-tl,.button-link .x-btn-tr,.button-link .x-btn-tc,.button-link .x-btn-ml,.button-link .x-btn-mr,.button-link .x-btn-mc,.button-link .x-btn-bl,.button-link .x-btn-br,.button-link .x-btn-bc
+.button-link .x-btn-tl, .button-link .x-btn-tr, .button-link .x-btn-tc,
+	.button-link .x-btn-ml, .button-link .x-btn-mr, .button-link .x-btn-mc,
+	.button-link .x-btn-bl, .button-link .x-btn-br, .button-link .x-btn-bc
 	{
 	background-image: none !important;
 	/*boder: 1px !important;*/
 }
 
-.button-link .x-btn-tl i,.button-link .x-btn-tr i,.button-link .x-btn-tc i,.button-link .x-btn-ml i,.button-link .x-btn-mr i,.button-link .x-btn-mc i,.button-link .x-btn-bl i,.button-link .x-btn-br i,.button-link .x-btn-bc i
+.button-link .x-btn-tl i, .button-link .x-btn-tr i, .button-link .x-btn-tc i,
+	.button-link .x-btn-ml i, .button-link .x-btn-mr i, .button-link .x-btn-mc i,
+	.button-link .x-btn-bl i, .button-link .x-btn-br i, .button-link .x-btn-bc i
 	{
 	font-size: 0px;
 	/*background-color: red !important;*/
@@ -190,21 +196,30 @@
 }
 
 /* remove images */
-.button-hyperlink .x-btn-tl,.button-hyperlink.x-btn-tr,.button-hyperlink .x-btn-tc,.button-hyperlink .x-btn-ml,.button-hyperlink .x-btn-mr,.button-hyperlink .x-btn-mc,.button-hyperlink .x-btn-bl,.button-hyperlink .x-btn-br,.button-hyperlink .x-btn-bc
+.button-hyperlink .x-btn-tl, .button-hyperlink.x-btn-tr,
-	{
+	.button-hyperlink .x-btn-tc, .button-hyperlink .x-btn-ml,
+	.button-hyperlink .x-btn-mr, .button-hyperlink .x-btn-mc,
+	.button-hyperlink .x-btn-bl, .button-hyperlink .x-btn-br,
+	.button-hyperlink .x-btn-bc {
 	background-image: none !important;
 	background: none !important;
 }
 
-.button-hyperlink .x-btn-small .x-btn-mr,.button-hyperlink .x-btn-small .x-btn-ml,.button-hyperlink .x-btn-small .x-btn-mc,.button-hyperlink .x-btn-small .x-btn-br,.button-hyperlink .x-btn-small .x-btn-bl,.button-hyperlink .x-btn-small .x-btn-bc,.button-hyperlink .x-btn-small .x-btn-tc,.button-hyperlink .x-btn-small .x-btn-tr,.button-hyperlink .x-btn-small .x-btn-tl
+.button-hyperlink .x-btn-small .x-btn-mr, .button-hyperlink .x-btn-small .x-btn-ml,
-	{
+	.button-hyperlink .x-btn-small .x-btn-mc, .button-hyperlink .x-btn-small .x-btn-br,
+	.button-hyperlink .x-btn-small .x-btn-bl, .button-hyperlink .x-btn-small .x-btn-bc,
+	.button-hyperlink .x-btn-small .x-btn-tc, .button-hyperlink .x-btn-small .x-btn-tr,
+	.button-hyperlink .x-btn-small .x-btn-tl {
 	background-image: none !important;
 	background: none !important;
 }
 
 /* remove little dots in FF */
-.button-hyperlink .x-btn-tl i,.button-hyperlink .x-btn-tr i,.button-hyperlink .x-btn-tc i,.button-hyperlink .x-btn-ml i,.button-hyperlink .x-btn-mr i,.button-hyperlink .x-btn-mc i,.button-hyperlink .x-btn-bl i,.button-hyperlink .x-btn-br i,.button-hyperlink .x-btn-bc i
+.button-hyperlink .x-btn-tl i, .button-hyperlink .x-btn-tr i,
-	{
+	.button-hyperlink .x-btn-tc i, .button-hyperlink .x-btn-ml i,
+	.button-hyperlink .x-btn-mr i, .button-hyperlink .x-btn-mc i,
+	.button-hyperlink .x-btn-bl i, .button-hyperlink .x-btn-br i,
+	.button-hyperlink .x-btn-bc i {
 	font-size: 0px;
 }
 
@@ -233,15 +248,21 @@
 }
 
 /* remove images */
-.button-attachments .x-btn-tl,.button-attachments.x-btn-tr,.button-attachments .x-btn-tc,.button-attachments .x-btn-ml,.button-attachments .x-btn-mr,.button-attachments .x-btn-mc,.button-attachments .x-btn-bl,.button-attachments .x-btn-br,.button-attachments .x-btn-bc
+.button-attachments .x-btn-tl, .button-attachments.x-btn-tr,
-	{
+	.button-attachments .x-btn-tc, .button-attachments .x-btn-ml,
+	.button-attachments .x-btn-mr, .button-attachments .x-btn-mc,
+	.button-attachments .x-btn-bl, .button-attachments .x-btn-br,
+	.button-attachments .x-btn-bc {
 	background-image: none !important;
 	background: none !important;
 }
 
 /* remove little dots in FF */
-.button-attachments .x-btn-tl i,.button-attachments .x-btn-tr i,.button-attachments .x-btn-tc i,.button-attachments .x-btn-ml i,.button-attachments .x-btn-mr i,.button-attachments .x-btn-mc i,.button-attachments .x-btn-bl i,.button-attachments .x-btn-br i,.button-attachments .x-btn-bc i
+.button-attachments .x-btn-tl i, .button-attachments .x-btn-tr i,
-	{
+	.button-attachments .x-btn-tc i, .button-attachments .x-btn-ml i,
+	.button-attachments .x-btn-mr i, .button-attachments .x-btn-mc i,
+	.button-attachments .x-btn-bl i, .button-attachments .x-btn-br i,
+	.button-attachments .x-btn-bc i {
 	font-size: 0px;
 	background: none !important;
 }
@@ -290,7 +311,7 @@
 	transition: background-color .5s ease-in-out;
 }
 
-.smartButton:active,.smartButton:focus,.smartButton:hover {
+.smartButton:active, .smartButton:focus, .smartButton:hover {
 	background: #E2EBF5;
 	font-weight: 500;
 }
@@ -307,32 +328,65 @@
 }
 
 .Breadcrumbs-Personal {
- 	font-family: Arial,"Times New Roman",Georgia,Serif;
+	font-family: Arial, "Times New Roman", Georgia, Serif;
-    font-size: 12px;
+	font-size: 12px;
-    list-style: none outside none;
+	list-style: none outside none;
-    margin-bottom: 3px;
+	margin-bottom: 3px;
-    margin-left: 2px;
+	margin-left: 2px;
-    margin-top: 3px;
+	margin-top: 3px;
-    padding: 5px !important;
+	padding: 5px !important;
 }
+
 .Breadcrumbs-Personal li {
-    display: inline-block;
+	display: inline-block;
 }
+
 .Breadcrumbs-Personal .active {
-    color: #999999;
+	color: #999999;
-    text-decoration: none;
+	text-decoration: none;
 }
+
 .Breadcrumbs-Personal .divider {
-    color: #AABBCC;
+	color: #AABBCC;
-    padding: 0 5px;
+	padding: 0 5px;
 }
+
 .Breadcrumbs-Personal a {
-    color: #226599;
+	color: #226599;
-    text-decoration: none;
+	text-decoration: none;
 }
+
 .Breadcrumbs-Personal a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
+
 .bSearchIn {
 	cursor: pointer;
+}
+
+#dnd_target_outer {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#dnd_target_inner {
+	width: 50%;
+	height: 50%;
+	top: 25%;
+	margin: 0 auto;
+	position: relative;
+	/* 	background: orange; */
+}
+
+.right-position {
+	/* 	top: 20px; */
+	text-align: right;
+	/* 	margin-top: 10px; */
+/*     color: red; */
+}
+
+.thirty_percent {
+	width: 33%;
 }