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

moving to responsive portlet almost finished 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126950 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante 2016-04-08 21:32:09 +00:00
parent e0ded15b43
commit 182545150a
2 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,8 @@ import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
/**
@ -58,6 +60,9 @@ public class Carousel extends Composite{
@UiField
Image loadingImage;
@UiField
HorizontalPanel commands;
// list of enhanced images to show
private List<EnhancedImage> listOfAttachmentsToShow;
@ -76,9 +81,22 @@ public class Carousel extends Composite{
initWidget(uiBinder.createAndBindUi(this));
// set buttons width
closeButton.setWidth("100px");
downloadButton.setWidth("100px");
// set vertical alignment
commands.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
commands.setCellVerticalAlignment(prevButton, VerticalPanel.ALIGN_MIDDLE);
// set alignment of the horizontal panel's children
commands.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
commands.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
commands.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
commands.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
// set central buttons' cell widths to be equal as well as their widths
commands.setCellWidth(downloadButton, "20%");
commands.setCellWidth(closeButton, "20%");
downloadButton.setWidth("80px");
closeButton.setWidth("80px");
// set icons
downloadButton.setIcon(IconType.DOWNLOAD);
@ -264,8 +282,8 @@ public class Carousel extends Composite{
shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
// change the title to the modal
String shownTitle = listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().length() > 50 ?
listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 50) + "..." :
String shownTitle = listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().length() > 40 ?
listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 40) + "..." :
listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow();
mainModalPanel.setTitle(shownTitle);

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

@ -4,31 +4,20 @@
<g:HTMLPanel>
<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
closeVisible="true" animation="true" dynamicSafe="true">
<g:HTMLPanel styleName="body-container">
<g:HTMLPanel styleName="image-container">
<b:Image styleName="image-loading" ui:field="loadingImage"></b:Image>
<b:Image styleName="shown-image" ui:field="shownImage"></b:Image>
</g:HTMLPanel>
<g:HTMLPanel styleName="command-container">
<b:Row>
<b:Column size="1">
<b:Button title="Previous" ui:field="prevButton"
styleName="arrow"></b:Button>
</b:Column>
<b:Column offset="2" size="1">
<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
</b:Column>
<b:Column offset="1" size="1">
<b:Button title="Close" ui:field="closeButton">Close</b:Button>
</b:Column>
<b:Column offset="2" size="1">
<b:Button title="Next" ui:field="nextButton" styleName="arrow"></b:Button>
</b:Column>
</b:Row>
</g:HTMLPanel>
<g:HorizontalPanel ui:field="commands" styleName="command-container">
<b:Button title="Previous" ui:field="prevButton"
styleName="arrow"></b:Button>
<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
<b:Button title="Close" ui:field="closeButton">Close</b:Button>
<b:Button title="Next" ui:field="nextButton" styleName="arrow"></b:Button>
</g:HorizontalPanel>
</g:HTMLPanel>
</b:Modal>
</g:HTMLPanel>