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

Added icon buttons to show on small devices instead of the buttons download/close. 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126951 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante 2016-04-09 09:33:50 +00:00
parent 182545150a
commit 1c3dabd207
4 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@ public class ImagePreviewer implements EntryPoint {
public void onModuleLoad() {
// decomment for testing purpose
test();
//test();
}

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

@ -8,6 +8,7 @@ import org.gcube.portlets.widgets.imagepreviewerwidget.client.resources.Resource
import com.github.gwtbootstrap.client.ui.Button;
import com.github.gwtbootstrap.client.ui.Image;
import com.github.gwtbootstrap.client.ui.Modal;
import com.github.gwtbootstrap.client.ui.constants.Device;
import com.github.gwtbootstrap.client.ui.constants.IconSize;
import com.github.gwtbootstrap.client.ui.constants.IconType;
import com.google.gwt.core.client.GWT;
@ -54,6 +55,12 @@ public class Carousel extends Composite{
@UiField
Button closeButton;
@UiField
Button downloadButtonSmart;
@UiField
Button closeButtonSmart;
@UiField
Image shownImage;
@ -88,19 +95,22 @@ public class Carousel extends Composite{
// set alignment of the horizontal panel's children
commands.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
commands.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
commands.setCellHorizontalAlignment(closeButtonSmart, HorizontalPanel.ALIGN_CENTER);
commands.setCellHorizontalAlignment(downloadButtonSmart, 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%");
// set sizes
downloadButton.setWidth("80px");
closeButton.setWidth("80px");
downloadButtonSmart.setWidth("15px");
closeButtonSmart.setWidth("15px");
// set icons
downloadButton.setIcon(IconType.DOWNLOAD);
closeButton.setIcon(IconType.COLLAPSE);
downloadButtonSmart.setIcon(IconType.DOWNLOAD);
closeButtonSmart.setIcon(IconType.COLLAPSE);
prevButton.setIcon(IconType.CHEVRON_LEFT);
nextButton.setIcon(IconType.CHEVRON_RIGHT);
@ -108,6 +118,14 @@ public class Carousel extends Composite{
prevButton.setIconSize(IconSize.LARGE);
nextButton.setIconSize(IconSize.LARGE);
// choose devices
closeButtonSmart.setShowOn(Device.PHONE);
downloadButtonSmart.setShowOn(Device.PHONE);
downloadButton.setShowOn(Device.DESKTOP);
closeButton.setShowOn(Device.DESKTOP);
downloadButton.setHideOn(Device.PHONE);
closeButton.setHideOn(Device.PHONE);
//on user click on the image, go on
shownImage.addClickHandler(new ClickHandler() {

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

@ -14,6 +14,8 @@
<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="downloadButtonSmart"></b:Button>
<b:Button title="Close" ui:field="closeButtonSmart"></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>

7
src/main/webapp/ImagePreviewer.css
View File

@ -14,12 +14,16 @@
}
}
@media screen and (min-width: 200px) and (max-width: 800px) {
@media screen and (min-width: 300px) and (max-width: 800px) {
.modal-body {
height: 280px !important;
}
}
.modal {
min-width: 300px;
}
.body-container {
height: 100% !important;
width: 100% !important;
@ -77,6 +81,7 @@
.modal-header {
background: black;
border-bottom: black !important;
padding: 5px 5px 5px 5px !important;
}
.modal-header>.close {