gCubeSystem
/
geoportal-data-viewer-app
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New icons added for layer (in)visible

This commit is contained in:
Francesco Mangiacrapa 2021-12-22 15:40:45 +01:00
parent 736264ddf1
commit e819f34267
6 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/GNAImages.java
View File

@ -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();
}

2
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/baseIcons.css
View File

@ -22,4 +22,4 @@
vertical-align: middle;
width: 17px !important;
height: 17px !important;
}
}

BIN
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/layer_invisible.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/layer_visible.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 B

69
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java
View File

@ -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<Boolean>() {
buttonLayerVisibility.addClickHandler(new ClickHandler() {
@Override
public void onValueChange(ValueChangeEvent<Boolean> 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;
}

5
src/main/webapp/GeoportalDataViewer.css
View File

@ -505,4 +505,9 @@ body {
border-radius: 4px;
box-shadow: 2px 2px #08c;
}
.layer-visibility-st {
padding-left: 7px;
padding-right: 5px;
cursor: pointer;
}