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
This commit is contained in:
Francesco Mangiacrapa 2015-10-30 17:13:02 +00:00
parent cdc86aaf5f
commit 48339d7baa
11 changed files with 488 additions and 47 deletions

View File

@ -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>

12
pom.xml
View File

@ -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> -->
<!-- <groupId>xerces</groupId> -->
<!-- <artifactId>xerces</artifactId> -->
<!-- <version>2.4.0</version> -->
<!-- </dependency> -->
<dependency>
<groupId>xerces</groupId>
<artifactId>xerces</artifactId>
<version>2.4.0</version>
</dependency>
<!-- This dependency is needed and is need on TOP to use GWT UI BInder
without old Xerces version of gCore complaining -->

View File

@ -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;
String html = "<div style=\"width: 100%; text-align: left; font-size: 9px; padding: 5px;\">" + msg +"</div>";
htmlWorkspaceSize.setHTML(html);
workspaceFeatures.updateQuotes(msg);
}
@ -2033,7 +2033,7 @@ public class AppController implements SubscriberInterface {
}
private void setVisibleUserQuote(boolean bool){
htmlWorkspaceSize.setVisible(bool);
workspaceFeatures.setQuoteVisible(bool);
}

View File

@ -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();
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 B

View File

@ -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);
}
}

View File

@ -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>

View File

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

View File

@ -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
}

View File

@ -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,7 +328,7 @@
}
.Breadcrumbs-Personal {
font-family: Arial,"Times New Roman",Georgia,Serif;
font-family: Arial, "Times New Roman", Georgia, Serif;
font-size: 12px;
list-style: none outside none;
margin-bottom: 3px;
@ -315,24 +336,57 @@
margin-top: 3px;
padding: 5px !important;
}
.Breadcrumbs-Personal li {
display: inline-block;
}
.Breadcrumbs-Personal .active {
color: #999999;
text-decoration: none;
}
.Breadcrumbs-Personal .divider {
color: #AABBCC;
padding: 0 5px;
}
.Breadcrumbs-Personal a {
color: #226599;
text-decoration: none;
}
.Breadcrumbs-Personal a:hover {
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%;
}