From 0e2f646c6f3bae48d45ceeab1610400ae2df7d80 Mon Sep 17 00:00:00 2001 From: Massimiliano Assante Date: Tue, 23 May 2017 12:09:25 +0000 Subject: [PATCH] Updated style of arrows and loader, Added possibility to override click next and click prev git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@148950 82a268e6-3cf1-43bd-a215-b396298e98cf --- .classpath | 11 ++- .settings/com.google.gdt.eclipse.core.prefs | 2 +- .settings/org.eclipse.jdt.core.prefs | 6 +- ....eclipse.wst.common.project.facet.core.xml | 2 +- distro/changelog.xml | 4 + pom.xml | 2 +- .../client/CarouselInterface.java | 6 ++ .../client/ImagePreviewer.java | 22 ++++- .../client/resources/loading.gif | Bin 5215 -> 11128 bytes .../client/ui/Carousel.java | 90 +++++++++++------- .../client/ui/Carousel.ui.xml | 18 ++-- .../public/ImagePreviewer.css | 13 +++ 12 files changed, 120 insertions(+), 56 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/CarouselInterface.java diff --git a/.classpath b/.classpath index effbc0d..052d3e8 100644 --- a/.classpath +++ b/.classpath @@ -17,11 +17,6 @@ - - - - - @@ -32,5 +27,11 @@ + + + + + + diff --git a/.settings/com.google.gdt.eclipse.core.prefs b/.settings/com.google.gdt.eclipse.core.prefs index f7c4208..98bffdd 100644 --- a/.settings/com.google.gdt.eclipse.core.prefs +++ b/.settings/com.google.gdt.eclipse.core.prefs @@ -1,4 +1,4 @@ eclipse.preferences.version=1 -lastWarOutDir=/home/costantino/workspace/image-previewer-widget/target/image-previewer-widget-1.0.0-SNAPSHOT +lastWarOutDir=/Users/massi/Documents/workspace/image-previewer-widget/target/image-previewer-widget-1.2.0-SNAPSHOT warSrcDir=src/main/webapp warSrcDirIsOutput=false diff --git a/.settings/org.eclipse.jdt.core.prefs b/.settings/org.eclipse.jdt.core.prefs index 443e085..6e80039 100644 --- a/.settings/org.eclipse.jdt.core.prefs +++ b/.settings/org.eclipse.jdt.core.prefs @@ -1,8 +1,8 @@ eclipse.preferences.version=1 org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled -org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.7 -org.eclipse.jdt.core.compiler.compliance=1.7 +org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8 +org.eclipse.jdt.core.compiler.compliance=1.8 org.eclipse.jdt.core.compiler.problem.assertIdentifier=error org.eclipse.jdt.core.compiler.problem.enumIdentifier=error org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning -org.eclipse.jdt.core.compiler.source=1.7 +org.eclipse.jdt.core.compiler.source=1.8 diff --git a/.settings/org.eclipse.wst.common.project.facet.core.xml b/.settings/org.eclipse.wst.common.project.facet.core.xml index 735eb31..3f2dd2b 100644 --- a/.settings/org.eclipse.wst.common.project.facet.core.xml +++ b/.settings/org.eclipse.wst.common.project.facet.core.xml @@ -1,7 +1,7 @@ - + diff --git a/distro/changelog.xml b/distro/changelog.xml index d5b1b3e..a5e185f 100644 --- a/distro/changelog.xml +++ b/distro/changelog.xml @@ -1,4 +1,8 @@ + + Updated style of arrows and loader + Added possibility to override click next and click prev + Minor fix diff --git a/pom.xml b/pom.xml index 07f377a..115c91f 100644 --- a/pom.xml +++ b/pom.xml @@ -12,7 +12,7 @@ org.gcube.portlets.widgets image-previewer-widget - 1.1.3-SNAPSHOT + 1.2.0-SNAPSHOT gCube Image previewer widget gCube Image Previewer widget is a GWT Widget that can be used to show a preview of one or more images diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/CarouselInterface.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/CarouselInterface.java new file mode 100644 index 0000000..a025542 --- /dev/null +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/CarouselInterface.java @@ -0,0 +1,6 @@ +package org.gcube.portlets.widgets.imagepreviewerwidget.client; + +public interface CarouselInterface { + void onClickPrev(); + void onClickNext(); +} diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java index 248f1b5..c78370f 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java @@ -7,6 +7,7 @@ import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel; import com.github.gwtbootstrap.client.ui.Button; import com.google.gwt.core.client.EntryPoint; +import com.google.gwt.core.shared.GWT; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.ui.RootPanel; @@ -21,7 +22,7 @@ public class ImagePreviewer implements EntryPoint { public void onModuleLoad() { // decomment for testing purpose - // test(); +// test(); } @@ -40,8 +41,21 @@ public class ImagePreviewer implements EntryPoint { images.add(new EnhancedImage("https://upload.wikimedia.org/wikipedia/it/1/17/Il_grande_Lebowski.jpg")); - final Carousel c = new Carousel(); - c.updateImages(images); + final Carousel c = new Carousel() { + @Override + public void onClickNext() { + GWT.log("onClickNext intercepted"); + show(new EnhancedImage("http://images6.alphacoders.com/316/316963.jpg")); + } + @Override + public void onClickPrev() { + GWT.log("onClickPrev intercepted"); + show(new EnhancedImage("http://nerdist.com/wp-content/uploads/2014/07/ned-stark-970x545.jpg")); + } + + }; + c.show(new EnhancedImage("http://ftp.d4science.org/previews/2771b8d3-7b39-451e-a642-fd7eea1c1baa.jpg")); + //c.updateImages(images); // button to show the carousel Button b = new Button(new ClickHandler() { @@ -54,7 +68,7 @@ public class ImagePreviewer implements EntryPoint { }); b.setText("Show preview"); - b.click(); + // b.click(); RootPanel.get("image-previewer-div").add(b); } diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/loading.gif b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/loading.gif index 4c4d825935c0fc0e5a97f0559011438ee3e35971..2cc4b54426d406ec537d8cf175852d6a5e5dfefd 100644 GIT binary patch literal 11128 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 literal 5215 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 diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java index ab170fd..e59641e 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java @@ -1,7 +1,9 @@ package org.gcube.portlets.widgets.imagepreviewerwidget.client.ui; +import java.util.ArrayList; import java.util.List; +import org.gcube.portlets.widgets.imagepreviewerwidget.client.CarouselInterface; import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage; import org.gcube.portlets.widgets.imagepreviewerwidget.client.ImageService; import org.gcube.portlets.widgets.imagepreviewerwidget.client.ImageServiceAsync; @@ -14,6 +16,7 @@ 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.github.gwtbootstrap.client.ui.resources.ButtonSize; import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.NodeList; @@ -38,7 +41,7 @@ import com.google.gwt.user.client.ui.Widget; * (costantino.perciante@isti.cnr.it) * */ -public class Carousel extends Composite{ +public class Carousel extends Composite implements CarouselInterface { private static CarouselUiBinder uiBinder = GWT .create(CarouselUiBinder.class); @@ -94,7 +97,7 @@ public class Carousel extends Composite{ public Carousel() { initWidget(uiBinder.createAndBindUi(this)); - + listOfAttachmentsToShow = new ArrayList<>(); // add custom styles to gwt-bootstrap-modal (just once) mainModalPanel.addStyleName("modal-custom"); ((Element)mainModalPanel.getElement().getChildNodes().getItem(1)).addClassName("modal-body-custom"); @@ -116,14 +119,17 @@ public class Carousel extends Composite{ closeButton.setWidth("90px"); downloadButtonSmart.setWidth("15px"); closeButtonSmart.setWidth("15px"); - + closeButtonSmart.setSize(ButtonSize.LARGE); + // set icons downloadButton.setIcon(IconType.DOWNLOAD_ALT); closeButton.setIcon(IconType.COLLAPSE); downloadButtonSmart.setIcon(IconType.DOWNLOAD_ALT); closeButtonSmart.setIcon(IconType.COLLAPSE); prevButton.setIcon(IconType.CHEVRON_LEFT); + prevButton.setSize(ButtonSize.LARGE); nextButton.setIcon(IconType.CHEVRON_RIGHT); + nextButton.setSize(ButtonSize.LARGE); // set icons'size prevButton.setIconSize(IconSize.LARGE); @@ -217,21 +223,31 @@ public class Carousel extends Composite{ } + @Override + public void onClickPrev() { + // evaluate prev index + currentPreviewPosition = currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1; + // show the image + showImage(currentPreviewPosition); + } + + @Override + public void onClickNext() { + // evaluate next index + currentPreviewPosition = currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 0 : currentPreviewPosition + 1; + // show the image + showImage(currentPreviewPosition); + } + @UiHandler("prevButton") /** * Show the previous image, if any. * @param e */ - public void onClickPrev(ClickEvent e){ - - // evaluate prev index - currentPreviewPosition = - currentPreviewPosition == 0 ? - listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1; - - // show the image - showImage(currentPreviewPosition); + public void onClickPrev(ClickEvent e) { + GWT.log("onClickPrev classic"); + onClickPrev(); } @UiHandler("nextButton") @@ -240,15 +256,7 @@ public class Carousel extends Composite{ * @param e */ public void onClickNext(ClickEvent e){ - - // evaluate next index - currentPreviewPosition = - currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? - 0 : currentPreviewPosition + 1; - - // show the image - showImage(currentPreviewPosition); - + onClickNext(); } /** @@ -269,19 +277,22 @@ public class Carousel extends Composite{ * Used to show a specific image of this carousel. */ public void show(EnhancedImage image){ - + GWT.log("image=" + image.getDownloadUrl()); // evaluate where this image is int index = evaluateImagePosition(image); - - if(index == -1) - return; - - // take the first object - currentPreviewPosition = index; - - // show the image - showImage(currentPreviewPosition); - + GWT.log("index=" + index); + if(index == -1) { + listOfAttachmentsToShow.clear(); + listOfAttachmentsToShow.add(image); + index = 0; + showImage(index); + } + else { + // take the first object + currentPreviewPosition = index; + // show the image + showImage(currentPreviewPosition); + } // show the panel mainModalPanel.show(); } @@ -314,13 +325,22 @@ public class Carousel extends Composite{ } /** - * Hide Previous and Next arrows of the carousel. + * use showArrows(boolean visible) */ - public void hideArrows(){ - + @Deprecated + public void hideArrows() { nextButton.setVisible(false); prevButton.setVisible(false); + } + + /** + * Hide/Show Previous and Next arrows of the carousel. + * @param visible the visibility of the command arrows + */ + public void showArrows(boolean visible) { + nextButton.setVisible(visible); + prevButton.setVisible(visible); } /** diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml index 95d62c9..345d7fc 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml @@ -1,6 +1,8 @@ + xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" + xmlns:c="urn:import:org.gcube.portlets.widgets.imagepreviewerwidget.client.resources"> + @@ -12,13 +14,17 @@ - - - + + + + + Download Close - + + + diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css index 278605f..4a5238d 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css @@ -33,6 +33,18 @@ } } +.arrowYPos-right { + position: relative; + top: -280px; + float: right; +} + +.arrowYPos-left { + position: relative; + top: -280px; + float: left; +} + .modal-custom { min-width: 300px !important; top: 3% !important; @@ -69,6 +81,7 @@ height: 90%; width: 100%; margin-bottom: 2%; + cursor: pointer; } .command-container {