From 48339d7baac91c1e26dc311686f0e78d944fed58 Mon Sep 17 00:00:00 2001 From: Francesco Mangiacrapa Date: Fri, 30 Oct 2015 17:13:02 +0000 Subject: [PATCH] 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 | 4 +- pom.xml | 12 +- .../user/workspace/client/AppController.java | 12 +- .../client/resources/WsPortletResources.java | 21 ++ .../workspace/client/resources/upload-24.png | Bin 0 -> 649 bytes .../workspace/client/resources/upload16.png | Bin 0 -> 308 bytes .../client/view/WorkspaceFeatures.java | 118 +++++++++ .../client/view/WorkspaceFeatures.ui.xml | 19 ++ .../user/workspace/WorkspacePortlet.gwt.xml | 3 +- src/main/webapp/workspacebootstrap.min.css | 230 ++++++++++++++++++ src/main/webapp/workspaceportlet.css | 116 ++++++--- 11 files changed, 488 insertions(+), 47 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/workspace/client/resources/WsPortletResources.java create mode 100644 src/main/java/org/gcube/portlets/user/workspace/client/resources/upload-24.png create mode 100644 src/main/java/org/gcube/portlets/user/workspace/client/resources/upload16.png create mode 100644 src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.java create mode 100644 src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.ui.xml create mode 100644 src/main/webapp/workspacebootstrap.min.css diff --git a/.classpath b/.classpath index 994826f..afbc978 100644 --- a/.classpath +++ b/.classpath @@ -1,6 +1,6 @@ - + @@ -26,5 +26,5 @@ - + diff --git a/pom.xml b/pom.xml index b0c23f5..5e321bd 100644 --- a/pom.xml +++ b/pom.xml @@ -11,7 +11,7 @@ org.gcube.portlets.user workspace war - 6.10.0-SNAPSHOT + 6.9.0-SNAPSHOT gCube Workspace Portlet gcube Workspace Portlet is a portlet for users workspace management @@ -60,11 +60,11 @@ - - - - - + + xerces + xerces + 2.4.0 + diff --git a/src/main/java/org/gcube/portlets/user/workspace/client/AppController.java b/src/main/java/org/gcube/portlets/user/workspace/client/AppController.java index 31d2987..207809a 100644 --- a/src/main/java/org/gcube/portlets/user/workspace/client/AppController.java +++ b/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; - - String html = "
" + msg +"
"; - 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); } diff --git a/src/main/java/org/gcube/portlets/user/workspace/client/resources/WsPortletResources.java b/src/main/java/org/gcube/portlets/user/workspace/client/resources/WsPortletResources.java new file mode 100644 index 0000000..7a6b0fd --- /dev/null +++ b/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(); +} diff --git a/src/main/java/org/gcube/portlets/user/workspace/client/resources/upload-24.png b/src/main/java/org/gcube/portlets/user/workspace/client/resources/upload-24.png new file mode 100644 index 0000000000000000000000000000000000000000..c5cd3e9663912d2d527eac520c231d2ee4b8f08f GIT binary patch literal 649 zcmV;40(Sk0P)OYDixJmN@ z;u9!cxsobn79}b9TqHA-PGV-z1NWYjd++(qIp00phy^81vp(n%kb$?8Xlb;FpB4kp z*ML{Ruv&Tp+)bkJm;pb>-*K9c#u=)jsOp|N zVWT7pf3z0aQbDWCr|9p}8Ne<T={krwKzc@#B4?5W`eSn3X7 z7cIz*xl86yq_dh`sq@-!)^w}|h|~NzaFRsfy#_vfon5o5SYyNf(gqx-`4eC@z`kXB zt3AH=ZFYduS&9&u;i;tkc2~A+-&UMvzd*;pK&I#cBcs0H${@{;1cjl{^Z{+na4g1w04xxJ zO(1d6(3gDD1HGVp0Y3{)DRGO%US}q6RHcHdxt1}@NIN~?vEVmw4YM@)UDY*HyKEkV jt0%C{mNLm7K+paF+@uG3@?3ze00000NkvXXu0mjfsPrd< literal 0 HcmV?d00001 diff --git a/src/main/java/org/gcube/portlets/user/workspace/client/resources/upload16.png b/src/main/java/org/gcube/portlets/user/workspace/client/resources/upload16.png new file mode 100644 index 0000000000000000000000000000000000000000..4f8cda1e47feca50101beeba3f6ff87f8987edd7 GIT binary patch literal 308 zcmV-40n7f0P)YU9L4cZL*k^Mt4o(Yg;R*TgCK%Xq??W_S&4hSSH;Y zCKF87tUf{+V~$~1QuX5+f8NSO5e_krF~SWF*34Mf5~Cln5lAtdP~lnt0000 { + } + + /** + * 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); + } + +} diff --git a/src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.ui.xml b/src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.ui.xml new file mode 100644 index 0000000..08916ee --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/workspace/client/view/WorkspaceFeatures.ui.xml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/resources/org/gcube/portlets/user/workspace/WorkspacePortlet.gwt.xml b/src/main/resources/org/gcube/portlets/user/workspace/WorkspacePortlet.gwt.xml index e52c582..46081ba 100644 --- a/src/main/resources/org/gcube/portlets/user/workspace/WorkspacePortlet.gwt.xml +++ b/src/main/resources/org/gcube/portlets/user/workspace/WorkspacePortlet.gwt.xml @@ -18,8 +18,7 @@ - + diff --git a/src/main/webapp/workspacebootstrap.min.css b/src/main/webapp/workspacebootstrap.min.css new file mode 100644 index 0000000..c49463d --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/src/main/webapp/workspaceportlet.css b/src/main/webapp/workspaceportlet.css index 60054c3..5161983 100644 --- a/src/main/webapp/workspaceportlet.css +++ b/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-size: 12px; - list-style: none outside none; - margin-bottom: 3px; - margin-left: 2px; - margin-top: 3px; - padding: 5px !important; + font-family: Arial, "Times New Roman", Georgia, Serif; + font-size: 12px; + list-style: none outside none; + margin-bottom: 3px; + margin-left: 2px; + margin-top: 3px; + padding: 5px !important; } + .Breadcrumbs-Personal li { - display: inline-block; + display: inline-block; } + .Breadcrumbs-Personal .active { - color: #999999; - text-decoration: none; + color: #999999; + text-decoration: none; } + .Breadcrumbs-Personal .divider { - color: #AABBCC; - padding: 0 5px; + color: #AABBCC; + padding: 0 5px; } + .Breadcrumbs-Personal a { - color: #226599; - text-decoration: none; + color: #226599; + 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%; } \ No newline at end of file