From e819f342674f92f04f25732870b42dd75b7907a2 Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Wed, 22 Dec 2021 15:40:45 +0100 Subject: [PATCH] New icons added for layer (in)visible --- .../client/resources/GNAImages.java | 33 ++++++--- .../client/resources/baseIcons.css | 2 +- .../client/resources/layer_invisible.png | Bin 0 -> 1099 bytes .../client/resources/layer_visible.png | Bin 0 -> 650 bytes .../client/ui/dandd/DragDropLayer.java | 69 ++++++++++++------ src/main/webapp/GeoportalDataViewer.css | 5 ++ 6 files changed, 72 insertions(+), 37 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/layer_invisible.png create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/layer_visible.png diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/GNAImages.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/GNAImages.java index e327a65..ae46827 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/GNAImages.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/GNAImages.java @@ -6,23 +6,26 @@ import com.google.gwt.resources.client.CssResource; import com.google.gwt.resources.client.ImageResource; public interface GNAImages extends ClientBundle { - + /** Get access to the css resource during gwt compilation */ @Source("baseIcons.css") CssResource css(); public static final GNAImages ICONS = GWT.create(GNAImages.class); - - /** Our sample image icon. Makes the image resource for the gwt-compiler's css composer accessible */ - @Source("map.png") - ImageResource map(); - - @Source("preset_location.png") - ImageResource preset_location(); - - @Source("layers.png") - ImageResource layers(); - + + /** + * Our sample image icon. Makes the image resource for the gwt-compiler's css + * composer accessible + */ + @Source("map.png") + ImageResource map(); + + @Source("preset_location.png") + ImageResource preset_location(); + + @Source("layers.png") + ImageResource layers(); + @Source("loading.gif") ImageResource loading(); @@ -38,4 +41,10 @@ public interface GNAImages extends ClientBundle { @Source("world.png") ImageResource worldIcon(); + @Source("layer_visible.png") + ImageResource layerVisible(); + + @Source("layer_invisible.png") + ImageResource layerInvisible(); + } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/baseIcons.css b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/baseIcons.css index d209eca..a4e6cf6 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/baseIcons.css +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/baseIcons.css @@ -22,4 +22,4 @@ vertical-align: middle; width: 17px !important; height: 17px !important; -} \ No newline at end of file +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/layer_invisible.png b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/layer_invisible.png new file mode 100644 index 0000000000000000000000000000000000000000..68cb9997292afcd33c31558c24ee0f43c1e4dc72 GIT binary patch literal 1099 zcmV-R1ho5!P)jW^+}@zL21(uDTL3v_ealK2Rcr!cdED1k>C(vzn;o&O7IQ zy4X>-ZFa^2pUdYw&;R%Q-}8RJC5$+6^9x0{<=SQ1G4We)si2W{3)HhkgcGN`&&~u6 z{V#CA>MZfueW+e9B3B{)N)H}2rvyDB$brhi+*USA7F+j_dbR+6c;n}!_Oe40^;&{E zS87*2tUrhF6uy2d00N4F3Ic$R6|1gbvt&Ki&GVj5fRmZ=bC27OpPOk*vt-u_?aX!5 zUle!==xnW4hHZX-WSN>;IX$t(OiV=9JrH!bp9E|RsDd5_ zjsR=Ya=5Nw-GdG2pGN)MVVmDyNU}|McOXt&Z%fBf(XB)n0CJO=6Oni8k}Ds#^4s`f z@q7-P71ga-lLo8VX_PTWR>!B$X(#GTD84}7*JPHIaU(EIUx zCNPR>Z>1dWi~8$tjDwDGguy6r1OEWW{dKEj|FcybteRjj=%{a1v|1_U--)fex8c-z zqrGW4|3jSAUqg9e5{=b`#1#P~w)Mx=>&Hy8(awcHS>S6g%u8Ph`+98cZtrCW;MHhv z)#mp`N$nYs584<|MHU5keYG95QGPVb!UNT{va8$H?($x?1L}>=AF=tpg;hFJa8tCc z5CS@AypcZ6AI273VYIqdelOVCoo39b7^4eDZ2tSG-wkTMexo9@+jCKnK2x>9R#j}9 z5noSB`40=Wc87TR0?3Ks;bEKqE=t@0$~_}TgKvSw7lBQxrC^%@sFuSL!rDowZ&gac z%Tcj*yYccR5Mo$ZvEiP$SbJWP>GjcIQ9Pqw1g>kz6gH&gaG+u4LPUw{0|q#M%w$tq z$}NkF?lu+K1x&%PFty<~=X$!VUL9!GkLt56n3*W6D&=s)1wRuaPF$~|?{rk=h|E&_G^2;bwkJdxUP`^5A$T3CpXA}EJJu&@y!rD7w9U@8R>0tP%VcETw^MY*U*KqWZ~@4!YWqKyamAM!87I!2R26tWXM-?uEZuw2%O1%_hWbUGy$ONw~X@}MH8Y(9; z%z`NQRG6->cL9e0)BK9w3?@1Axg-m#!0SeJqgekypugF5L9419mXLf<7ltsX!A^yc z_J}Y6($f?T6%Fpdr%UqwCwRlC_NF#{BuH;Yrm2`XK(t#Gy$*ELlKVr9U#s)4SQ;b?csq&8-rUDRrOqr|TwYWM5VKj)8$f40K5vkdQDYU6X^IwC zBUGfFKxb7sVr?=T2}2T5liI1&rJIb%U7$NF(^c)%P{9EbQSJjzSaR469OO?2$a4Mj kk@<`M$0xB;f8$&H0XTL3sHU8q%>V!Z07*qoM6N<$g3c!o%K!iX literal 0 HcmV?d00001 diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java index cc6deb7..6c53001 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java @@ -4,18 +4,20 @@ import org.gcube.application.geoportalcommon.shared.products.BaseConcessioneDV; import org.gcube.portlets.user.geoportaldataviewer.client.events.DoActionOnDetailLayersEvent; import org.gcube.portlets.user.geoportaldataviewer.client.events.DoActionOnDetailLayersEvent.DO_LAYER_ACTION; import org.gcube.portlets.user.geoportaldataviewer.client.events.DoActionOnDetailLayersEvent.SwapLayer; +import org.gcube.portlets.user.geoportaldataviewer.client.resources.GNAImages; import org.gcube.portlets.user.geoportaldataviewer.client.util.StringUtil; import org.gcube.portlets.user.geoportaldataviewer.shared.gis.LayerItem; import org.gcube.portlets.user.geoportaldataviewer.shared.gis.LayerObject; import com.github.gwtbootstrap.client.ui.Button; -import com.github.gwtbootstrap.client.ui.CheckBox; import com.github.gwtbootstrap.client.ui.Label; import com.github.gwtbootstrap.client.ui.constants.IconType; import com.github.gwtbootstrap.client.ui.constants.LabelType; import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.Style.Unit; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.event.dom.client.DragLeaveEvent; import com.google.gwt.event.dom.client.DragLeaveHandler; import com.google.gwt.event.dom.client.DragOverEvent; @@ -24,11 +26,11 @@ import com.google.gwt.event.dom.client.DragStartEvent; import com.google.gwt.event.dom.client.DragStartHandler; import com.google.gwt.event.dom.client.DropEvent; import com.google.gwt.event.dom.client.DropHandler; -import com.google.gwt.event.logical.shared.ValueChangeEvent; -import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.event.shared.HandlerManager; import com.google.gwt.user.client.ui.FlexTable; import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.HTML; +import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.SimplePanel; import com.google.gwt.user.client.ui.Widget; @@ -38,25 +40,28 @@ public class DragDropLayer extends FlowPanel { private static DragDropLayer draggingTarget = null; final boolean droppable; private Label labelLayerName; - private CheckBox checkBoxVisibility = new CheckBox(); + private Image imgLayerVisible = new Image(GNAImages.ICONS.layerVisible()); + private Image imgLayerInvisible = new Image(GNAImages.ICONS.layerInvisible()); private Button draggableButton = new Button(); private HandlerManager applicationBus; private LayerObject layerObject; private LayerItem layerItem; + private boolean layerVisibility = true; + private HTML buttonLayerVisibility = new HTML(); public DragDropLayer(HandlerManager applicationBus, LayerObject layerObject, boolean draggable, boolean droppable) { this.applicationBus = applicationBus; this.layerObject = layerObject; this.layerItem = layerObject.getLayerItem(); - + String layerName = StringUtil.fullNameToLayerName(layerItem.getName(), ":"); - + this.labelLayerName = new Label(layerName); this.labelLayerName.setTitle(layerItem.getName()); this.labelLayerName.setType(LabelType.INFO); - + BaseConcessioneDV refConcessione = layerObject.getSourceConcessione(); - String nameConcessione = StringUtil.ellipsize(refConcessione.getNome(),40); + String nameConcessione = StringUtil.ellipsize(refConcessione.getNome(), 40); com.google.gwt.user.client.ui.Label labelConcessione = new com.google.gwt.user.client.ui.Label(nameConcessione); labelConcessione.setTitle(refConcessione.getNome()); @@ -79,33 +84,47 @@ public class DragDropLayer extends FlowPanel { } RangeSlider rs = new RangeSlider(applicationBus, layerItem); - rs.getElement().addClassName("range-slider "); + rs.getElement().addClassName("range-slider"); FlexTable ft = new FlexTable(); ft.setWidget(0, 0, draggableButton); draggableButton.setTitle("Drag and Drop me up or down to change my position on the Map"); - checkBoxVisibility.getElement().getStyle().setMarginLeft(10, Unit.PX); - checkBoxVisibility.setValue(true); - //labelLayerName.getElement().getStyle().setMarginLeft(10, Unit.PX); - ft.setWidget(0, 1, checkBoxVisibility); + imgLayerVisible.getElement().addClassName("layer-visibility-st"); + imgLayerInvisible.getElement().addClassName("layer-visibility-st"); + setLayerVisibilityButtonImage(); + + // labelLayerName.getElement().getStyle().setMarginLeft(10, Unit.PX); + ft.setWidget(0, 1, buttonLayerVisibility); ft.setWidget(0, 2, labelConcessione); ft.setWidget(1, 2, labelLayerName); ft.setWidget(2, 2, new SimplePanel(rs)); add(ft); draggableButton.setIcon(IconType.MOVE); - checkBoxVisibility.addValueChangeHandler(new ValueChangeHandler() { + buttonLayerVisibility.addClickHandler(new ClickHandler() { @Override - public void onValueChange(ValueChangeEvent event) { - DoActionOnDetailLayersEvent dae = new DoActionOnDetailLayersEvent(DO_LAYER_ACTION.VISIBILITY, layerItem); - dae.setVisibility(checkBoxVisibility.getValue()); + public void onClick(ClickEvent event) { + layerVisibility = !layerVisibility; + setLayerVisibilityButtonImage(); + DoActionOnDetailLayersEvent dae = new DoActionOnDetailLayersEvent(DO_LAYER_ACTION.VISIBILITY, + layerItem); + dae.setVisibility(layerVisibility); applicationBus.fireEvent(dae); - } }); } + private void setLayerVisibilityButtonImage() { + buttonLayerVisibility.getElement().removeAllChildren(); + if (layerVisibility) { + buttonLayerVisibility.getElement().appendChild(imgLayerVisible.getElement()); + } else { + buttonLayerVisibility.getElement().appendChild(imgLayerInvisible.getElement()); + } + + } + private void initDrag() { draggableButton.getElement().setDraggable(Element.DRAGGABLE_TRUE); @@ -156,9 +175,9 @@ public class DragDropLayer extends FlowPanel { source = dragging; int sourceIndex = tree.getWidgetIndex(source); int targetIndex = tree.getWidgetIndex(draggingTarget); - - GWT.log("sourceIndex: " + sourceIndex+", sourceItem: "+dragging.getLayerItem().getName()); - GWT.log("targetIndex: " + targetIndex+", targetItem: "+draggingTarget.getLayerItem().getName()); + + GWT.log("sourceIndex: " + sourceIndex + ", sourceItem: " + dragging.getLayerItem().getName()); + GWT.log("targetIndex: " + targetIndex + ", targetItem: " + draggingTarget.getLayerItem().getName()); if (sourceIndex != targetIndex && targetIndex >= 0) { tree.remove(source); target = tree; @@ -168,8 +187,10 @@ public class DragDropLayer extends FlowPanel { // target.setState(true); DoActionOnDetailLayersEvent actionSwapLayers = new DoActionOnDetailLayersEvent( DO_LAYER_ACTION.SWAP, layerItem); - SwapLayer swapLS = new DoActionOnDetailLayersEvent.SwapLayer(dragging.getLayerItem(), sourceIndex); - SwapLayer swapLT = new DoActionOnDetailLayersEvent.SwapLayer(draggingTarget.getLayerItem(), targetIndex); + SwapLayer swapLS = new DoActionOnDetailLayersEvent.SwapLayer(dragging.getLayerItem(), + sourceIndex); + SwapLayer swapLT = new DoActionOnDetailLayersEvent.SwapLayer(draggingTarget.getLayerItem(), + targetIndex); actionSwapLayers.setSwapLayers(swapLS, swapLT); applicationBus.fireEvent(actionSwapLayers); } @@ -179,7 +200,7 @@ public class DragDropLayer extends FlowPanel { } }, DropEvent.getType()); } - + public LayerItem getLayerItem() { return layerItem; } diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index 6bb8759..f7ce891 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -505,4 +505,9 @@ body { border-radius: 4px; box-shadow: 2px 2px #08c; } +.layer-visibility-st { + padding-left: 7px; + padding-right: 5px; + cursor: pointer; +} \ No newline at end of file