From 3cb98e9d07e61073963cf5ef77813893db5ed18c Mon Sep 17 00:00:00 2001 From: Giancarlo Panichi Date: Wed, 15 Mar 2017 19:03:35 +0000 Subject: [PATCH] ref 6078:TDM - Create a new widget to support operations's invocation on DataMiner https://support.d4science.org/issues/6078 Updated to support DataMiner git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/user/tabular-data-portlet@144974 82a268e6-3cf1-43bd-a215-b396298e98cf --- .../user/td/client/ribbon/FileToolBar.java | 22 +- src/main/webapp/tabulardataportlet.css | 415 ++++++++++++++++++ 2 files changed, 425 insertions(+), 12 deletions(-) diff --git a/src/main/java/org/gcube/portlets/user/td/client/ribbon/FileToolBar.java b/src/main/java/org/gcube/portlets/user/td/client/ribbon/FileToolBar.java index b998a38..4313436 100644 --- a/src/main/java/org/gcube/portlets/user/td/client/ribbon/FileToolBar.java +++ b/src/main/java/org/gcube/portlets/user/td/client/ribbon/FileToolBar.java @@ -94,7 +94,7 @@ public class FileToolBar { // File ButtonGroup fileGroup = new ButtonGroup(); - fileGroup.setId("Tabular Resource"); + //fileGroup.setId("Tabular Resource"); fileGroup.setStyleName("ribbon"); fileGroup.setHeadingText(msgs.fileGroupHeadingText()); toolBar.add(fileGroup); @@ -105,7 +105,7 @@ public class FileToolBar { openButton = new TextButton(msgs.openButton(), TabularDataResources.INSTANCE.trOpen32()); - openButton.setId("openButton"); + //openButton.setId("openButton"); openButton.setScale(ButtonScale.LARGE); openButton.setIconAlign(IconAlign.TOP); openButton.setArrowAlign(ButtonArrowAlign.BOTTOM); @@ -124,7 +124,6 @@ public class FileToolBar { closeButton = new TextButton(msgs.closeButton(), TabularDataResources.INSTANCE.trClose32()); closeButton.disable(); - closeButton.setId("closeButton"); closeButton.setScale(ButtonScale.LARGE); closeButton.setIconAlign(IconAlign.TOP); closeButton.setArrowAlign(ButtonArrowAlign.BOTTOM); @@ -143,7 +142,6 @@ public class FileToolBar { cloneButton = new TextButton(msgs.cloneButton(), TabularDataResources.INSTANCE.clone32()); cloneButton.disable(); - cloneButton.setId("cloneButton"); cloneButton.setScale(ButtonScale.LARGE); cloneButton.setIconAlign(IconAlign.TOP); cloneButton.setArrowAlign(ButtonArrowAlign.BOTTOM); @@ -162,7 +160,7 @@ public class FileToolBar { shareButton = new TextButton(msgs.shareButton(), TabularDataResources.INSTANCE.trShare32()); shareButton.disable(); - shareButton.setId("shareButton"); + //shareButton.setId("shareButton"); shareButton.setScale(ButtonScale.LARGE); shareButton.setIconAlign(IconAlign.TOP); shareButton.setArrowAlign(ButtonArrowAlign.BOTTOM); @@ -181,7 +179,7 @@ public class FileToolBar { deleteButton = new TextButton(msgs.deleteButton(), TabularDataResources.INSTANCE.delete()); deleteButton.disable(); - deleteButton.setId("closeButton"); + //deleteButton.setId("closeButton"); deleteButton.setToolTip(msgs.deleteButtonToolTip()); fileLayout.setWidget(0, 4, deleteButton); @@ -195,7 +193,7 @@ public class FileToolBar { propertiesButton = new TextButton(msgs.propertiesButton(), TabularDataResources.INSTANCE.properties()); propertiesButton.disable(); - propertiesButton.setId("propertiesButton"); + //propertiesButton.setId("propertiesButton"); propertiesButton.setToolTip(msgs.propertiesButtonToolTip()); fileLayout.setWidget(1, 4, propertiesButton); @@ -210,7 +208,7 @@ public class FileToolBar { // Import ButtonGroup importGroup = new ButtonGroup(); - importGroup.setId("Import"); + //importGroup.setId("Import"); importGroup.setStyleName("ribbon"); importGroup.setHeadingText(msgs.importGroupHeadingText()); toolBar.add(importGroup); @@ -264,7 +262,7 @@ public class FileToolBar { // Export ButtonGroup exportGroup = new ButtonGroup(); - exportGroup.setId("Export"); + //exportGroup.setId("Export"); exportGroup.setStyleName("ribbon"); exportGroup.setHeadingText(msgs.exportGroupHeadingText()); // exportGroup.disable(); @@ -317,7 +315,7 @@ public class FileToolBar { // TimeLine (Tasks) ButtonGroup taskGroup = new ButtonGroup(); - taskGroup.setId("TasksStatus"); + //taskGroup.setId("TasksStatus"); taskGroup.setStyleName("ribbon"); taskGroup.setHeadingText(msgs.taskGroupHeadingText()); toolBar.add(taskGroup); @@ -363,7 +361,7 @@ public class FileToolBar { // History Group ButtonGroup historyGroup = new ButtonGroup(); - historyGroup.setId("History"); + //historyGroup.setId("History"); historyGroup.setStyleName("ribbon"); historyGroup.setHeadingText(msgs.historyGroupHeadingText()); historyGroup.enable(); @@ -409,7 +407,7 @@ public class FileToolBar { // Help ButtonGroup helpGroup = new ButtonGroup(); - helpGroup.setId("Help"); + //helpGroup.setId("Help"); helpGroup.setStyleName("ribbon"); helpGroup.setHeadingText(msgs.helpGroupHeadingText()); toolBar.add(helpGroup); diff --git a/src/main/webapp/tabulardataportlet.css b/src/main/webapp/tabulardataportlet.css index 4822248..942a5c2 100644 --- a/src/main/webapp/tabulardataportlet.css +++ b/src/main/webapp/tabulardataportlet.css @@ -48,3 +48,418 @@ + + + +/* Data Miner */ +.smLayoutContainer { + /* Blue + box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 0px 0 40px + rgba(0, 28, 121, 0.15); + -moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 0px 0 40px + rgba(0, 28, 121, 0.15); + -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 0px 0 40px + rgba(0, 28, 121, 0.15); + -o-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(0, 28, 121, 1), 71px 0 27px + rgba(0, 28, 121, 0.15);*/ + box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px + rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px + rgba(0, 0, 0, 0.15); + -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px + rgba(0, 0, 0, 0.15); + -o-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 71px 0 27px + rgba(0, 0, 0, 0.15); + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -o-border-radius: 0; +} + +.smMenu { + /*width: 720px !important;*/ /*height: 570px !important;*/ + /*overflow: auto; + margin: auto; + margin-bottom: 20px;*/ + +} + +.layoutContainerArea { + margin-right: 20px; +} + +.smMenuItem { + box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px + rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px + rgba(0, 0, 0, 0.15); + -webkit-box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 0px 0 27px + rgba(0, 0, 0, 0.15); + -o-box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 5px rgba(196, 196, 196, 1), 71px 0 27px + rgba(0, 0, 0, 0.15); + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -o-border-radius: 0; + /*padding: 10px;*/ +/*margin-bottom: 30px; + margin-left: 200px; + width: 480px;*/ +} + +.smMenuItem:HOVER { + cursor: pointer; + opacity: 0.7; +} + +.smMenuItem img { + border: 1px solid #C0C0C0; + display: inline; +} + +.smMenuItemText b { + display: block; + color: #225f97; + font-size: 20px; +} + +.smMenuItemText { + font: 12px/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, + sans-serif; + display: block; + color: #606060; + /*margin-right: 10px;*/ +} + +/* OPERATORS PANEL */ +.opePanel { + +} + +.opePanel:hover { + cursor: pointer; +} + +.categoryItem { + margin-top: 10px; + margin-left: 5px; + font-size: 15px; + font-variant: small-caps; + font-weight: bolder; + border-bottom: 2px solid #505050; + margin-bottom: 5px; + background-image: url(images/triangle-right.png); + background-repeat: no-repeat; + background-position: right; +} + +.categoryItem-Collapsed { + background-image: url(images/triangle-right.png); +} + +.categoryItem-Expanded { + background-image: url(images/triangle-down.png); +} + +.categoryItem:hover { + color: #3087d6; + cursor: pointer; +} + +.filterResultText { + margin-top: 10px; + margin-left: 5px; + font-size: 15px; + font-variant: small-caps; + font-weight: bolder; + border-bottom: 2px solid #505050; + margin-bottom: 5px; +} + +.categoryItem .counter, .filterResultText .counter { + font-size: 10px; + color: #555555; +} + +.operatorPanel { + box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -moz-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -webkit-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -o-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -o-border-radius: 5px; + margin: 0px 5px 5px 10px; /* top right bottom left*/ + padding: 5px; + overflow: hidden; + height: 78px; +} + +.operatorPanel-selected { + background-color: #e0e7f7; +} + +.operatorPanel-title { + font-size: 13px; + font-weight: bolder; + color: #225f97; +} + +.operatorPanel-title-selected { + color: #770000; +} + +.operatorPanel-briefDescription { + font-size: 10px; + color: #505050; +} + +.operatorPanel img { + float: right; +} + +.operatorPanel img:hover { + cursor: pointer; + opacity: 0.6; +} + +.tableImporter, .uploadMonitor { + box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -moz-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -webkit-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -o-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -o-border-radius: 5px; + padding: 5px; + border: 1px solid black; + margin-left: 5px; + margin-right: 5px; +} + +/* WORKFLOW PANEL */ +.workflow { + box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -moz-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -webkit-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + -o-box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.11), 0 0 0 + rgba(255, 255, 255, 1), 0 0 1px rgba(196, 196, 196, 1), inset 0 0 1px + rgba(77, 77, 77, 1); + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -o-border-radius: 5px; + /*padding: 5px;*/ + border: 1px solid black; + /*margin-left: 5px; + margin-right: 5px;*/ + +} + +.workflow-icon { + border: 1px solid black; + float: left; + position: relative; + left: 10px; + top: -20px; +} + +.workflow-title { + text-align: center; + font-size: 16px; + font-weight: bold; + color: #225f97; +} + +.workflow-description { + font-size: 13px; + color: #505050; +} + +.workflow-computation-title { + padding-left: 5px; + padding-right: 5px; + padding-top: 8px; +} + +.workflow-fieldDescription { + font-size: 12px; + color: #505050; +} + +.workflow-templatesList { + font-size: 9px; + color: #505050; + margin-top: 4px; +} + +.workflow-parameters-description { + font-size: 10px; + color: #505050; + margin-top: 4px; +} + +.workflow-parameters-tableDescription { + font-size: 12px; + /* border: 1px solid gray;*/ + color: white; + margin-right: 5px; + padding-right: 4px; + padding-left: 4px; + background-color: gray; +} + +.workflow-parameters-preload { + display: block; + background: url('ajax-loader-big.gif') no-repeat; + width: 400px; + height: 180px; +} + +/* TOOLTIP */ +.x-tip-mc { + padding: 6px; +} + +.categoryItemTooltip { + height: 80px; +} + +.categoryItemTooltip img { + border: 1px solid black; + float: left; + margin-right: 5px; +} + +/* TABLE EXPLORER */ +.tableSelector-details { + margin-top: 20px; + margin-left: 5px; + margin-right: 5px; +} + +.tableSelector-details img { + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; +} + +#computationGrid .x-grid3-cell { + vertical-align: middle; +} + +.menuImgLogo:HOVER { + /* cursor: pointer;*/ + +} + +.menuItemImage { + opacity: 0.5; +} + +.menuItemImage:HOVER { + cursor: pointer; + opacity: 1; +} + +.menuItemImage-selected { + opacity: 1; +} + +.menuItemImage-selected:HOVER { + cursor: auto; +} + +/* +* Computation Execution +*/ +.computationExcecutionPanel { + font-size: 12px; + color: black; +} + +.computationStatusPanel { + border: 1px solid black; + padding: 10px; +} + +.computationStatusTitle { + +} + +.computationStatusDate { + +} + +/** +* Computation Output +*/ +.computation-output-outputType { + background-color: #EEEEEE; + border: 1px solid #BDBDBD; + /*font-weight: bold;*/ + padding: 5px; + text-align: center; + margin-top: 20px; + margin-bottom: 10px; +} + +.computation-output-groupTitle { + font-style: italic; + font-weight: bold; + margin-top: 5px; + margin-bottom: 5px; +} + +.computation-output-separator { + border-top: 2px solid #AAAAAA; + margin-top: 8px; + margin-bootm: 8px; + + /* height: 30px; + margin: 8px auto auto; + width: 400px; + */ +} + +.computation-output-fileName { + margin-top: 2px; + margin-bottom: 2px; +}