gCubeSystem
/
image-previewer-widget
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The widget size has been enlarged to be the 80% (for both width and height) of the browser's window. Moreover, when the user clicks on the download button, the widget is not closed anymore. Finally, the close button has been added. 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@122522 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante 2016-01-26 13:56:24 +00:00
parent 1e0706c639
commit 96523d5efb
3 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java
View File

@ -21,10 +21,11 @@ public class ImagePreviewer implements EntryPoint {
public void onModuleLoad() {
// decomment for testing purpose
//test();
// test();
}
@SuppressWarnings("unused")
private void test(){
// random images for test

8
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java
View File

@ -87,8 +87,8 @@ public class Carousel extends Composite{
horizontaFooterPanel.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
// set central buttons' cell widths to be equal TODO
//horizontaFooterPanel.setCellWidth(downloadButton, "200px");
//horizontaFooterPanel.setCellWidth(closeButton, "200px");
horizontaFooterPanel.setCellWidth(downloadButton, "200px");
horizontaFooterPanel.setCellWidth(closeButton, "200px");
// set vertical alignment
horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
@ -104,9 +104,6 @@ public class Carousel extends Composite{
prevButton.setIconSize(IconSize.LARGE);
nextButton.setIconSize(IconSize.LARGE);
// TODO hide close button (for now)
closeButton.setVisible(false);
//on user click on the image, go on
shownImage.addClickHandler(new ClickHandler() {
@ -143,7 +140,6 @@ public class Carousel extends Composite{
String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
if(downloadUrl != null){
mainModalPanel.hide();
Window.open(downloadUrl, "_blank", "");
}

41
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml
View File

@ -9,26 +9,49 @@
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-height: 400px;
max-height: 95%;
width: auto;
}
.image-loading {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 35%;
margin-bottom: 35%;
position: relative;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.arrow {
color: #3B5998;
}
@external .modal;
.modal {
position: fixed;
top: 10%;
left: 15%;
margin-left: -5%;
width: 80%;
height: 80%;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
@external .modal-header;
.modal-header {
font-family: "Helvetica Neue", Arial, sans-serif;
height: 20px;
height: 5%;
color: #3B5998 !important;
}
@ -39,7 +62,8 @@
@external .modal-body;
.modal-body {
position: relative;
height: 400px;
height: 90%;
max-height: 100%;
padding: 0;
overflow: hidden;
}
@ -48,6 +72,7 @@
.modal-footer {
padding: 10px 10px 10px;
margin-bottom: 0px;
height: 5%;
text-align: right;
background-color: #F5F5F5;
border-top: 1px solid #DDD;