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

UI optimized for less than 1600w screen resolution

This commit is contained in:
Francesco Mangiacrapa 2023-08-29 14:41:32 +02:00
parent 34f2ba4c7e
commit 6338792427
8 changed files with 163 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java
View File

@ -416,7 +416,8 @@ public class GeoportalDataViewer implements EntryPoint {
int height = rootHeight;
mainPanel.setPanelsHeight(height);
GWT.log("Set height: " + height);
mainPanel.setPanelsWidth(Window.getClientWidth());
}
/**

30
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerConstants.java
View File

@ -14,6 +14,8 @@ import com.google.gwt.i18n.client.DateTimeFormat;
* Nov 24, 2020
*/
public class GeoportalDataViewerConstants {
public static final int TABLET_WIDTH = 1601;
public static final String MAP_DIV = "map";
@ -25,7 +27,7 @@ public class GeoportalDataViewerConstants {
public static final String GET_MAX_ZOOM_LEVEL = OpenLayersMapParameters.OL_MAP_PARAM.maxzoomlevel.name();
public static final String GET_ZOOM = OpenLayersMapParameters.OL_MAP_PARAM.zoom.name();
public static final String GET_CENTER_MAP_TO_LONG_LAT = OpenLayersMapParameters.OL_MAP_PARAM.centermap.name();
public static final Double INITIAL_LAYER_OPACITY = 0.8;
public static final int SEARCH_LIMIT_RESULTS_TO_MAXIMUM = 50;
@ -37,6 +39,32 @@ public class GeoportalDataViewerConstants {
public static final String PROJECT_ID_KEY_FEATURE = "projectid";
public static enum GisToolbarFacilities {
COLLECTION("Collection", "Open the collections"),
MAP("Map", "Select the base Map"),
OVERLAY("Overlay", "Add overlay layers"),
SEARCH("Search", "Search in the collections"),
FILTER("Filter", "Apply spatial filtering"),
LAYERS("Layers", "Layers added to Map"),
PRESET_LOCATION("Preset Location", "Center the Map to Location");
String name;
String tooltip;
GisToolbarFacilities(String name, String tooltip) {
this.name = name;
this.tooltip = tooltip;
}
public String getName() {
return name;
}
public String getTooltip() {
return tooltip;
}
}
/**
* The Enum LayerType.
*

1
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java
View File

@ -1142,6 +1142,7 @@ public class LayerManager {
FlexTable intFlex = new FlexTable();
intFlex.setCellPadding(1);
intFlex.setCellSpacing(1);
intFlex.getElement().addClassName("thePopDataTable");
if (projectDV.getTheDocument() != null) {
LinkedHashMap<String, Object> map = projectDV.getTheDocument().getDocumentAsMap();
// my-html-table

13
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/DetailsPanel.ui.xml
View File

@ -11,9 +11,20 @@
top: 50px;
right: 10px;
}
.to-align-left {
position: absolute;
top: 5px;
color: white !important;
text-decoration: none !important;
}
.to-align-left :hover {
color: #F5F5F5;
}
</ui:style>
<g:HTMLPanel ui:field="detailsHTMLPanel" visible="false">
<b:Button ui:field="closeButton" addStyleNames="{style.to-align-right}"></b:Button>
<b:Button ui:field="closeButton" addStyleNames="{style.to-align-left}"></b:Button>
<g:HTMLPanel ui:field="datailsContainerPanel"></g:HTMLPanel>
</g:HTMLPanel>
</ui:UiBinder>

35
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java
View File

@ -16,6 +16,7 @@ import org.gcube.application.geoportalcommon.shared.geoportal.ucd.UseCaseDescrip
import org.gcube.application.geoportalcommon.shared.geoportal.view.ProjectView;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewer;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.GisToolbarFacilities;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.MAP_PROJECTION;
import org.gcube.portlets.user.geoportaldataviewer.client.events.ChangeMapLayerEvent;
import org.gcube.portlets.user.geoportaldataviewer.client.events.MapExtentToEvent;
@ -79,6 +80,8 @@ import com.google.gwt.user.client.ui.Widget;
*/
public class GeonaDataViewMainPanel extends Composite {
private static final String PLACEHOLDER_SELECT_SEARCH_IN = "Select Collection...";
private static GeonaDataViewMainPanelUiBinder uiBinder = GWT.create(GeonaDataViewMainPanelUiBinder.class);
@ -286,10 +289,17 @@ public class GeonaDataViewMainPanel extends Composite {
}
});
openCollectionDropDown.setTitle(GisToolbarFacilities.COLLECTION.getTooltip());
linkCustomOverlayLayers.setTitle(GisToolbarFacilities.OVERLAY.getTooltip());
linkCrossFilteringLayers.setTitle(GisToolbarFacilities.FILTER.getTooltip());
searchFacilityButton.setTitle(GisToolbarFacilities.SEARCH.getTooltip());
linkLayers.setTitle(GisToolbarFacilities.LAYERS.getTooltip());
linkMap.setTitle(GisToolbarFacilities.MAP.getTooltip());
linkPresetLocation.setTitle(GisToolbarFacilities.PRESET_LOCATION.getTooltip());
// layersDDB.setToggle(true);
bindEvents();
}
/**
@ -366,6 +376,27 @@ public class GeonaDataViewMainPanel extends Composite {
setOverlayPanelMaxHeight();
}
public void setPanelsWidth(int clientWidth) {
if(clientWidth<GeoportalDataViewerConstants.TABLET_WIDTH) {
openCollectionDropDown.setText("");
linkCustomOverlayLayers.setText("");
linkCrossFilteringLayers.setText("");
searchFacilityButton.setText("");
linkLayers.setText("");
linkPresetLocation.setText("");
linkMap.setText("");
}else {
openCollectionDropDown.setText(GisToolbarFacilities.COLLECTION.getName());
linkCustomOverlayLayers.setText(GisToolbarFacilities.OVERLAY.getName());
linkCrossFilteringLayers.setText(GisToolbarFacilities.FILTER.getName());
searchFacilityButton.setText(GisToolbarFacilities.SEARCH.getName());
linkLayers.setText(GisToolbarFacilities.LAYERS.getName());
linkMap.setText(GisToolbarFacilities.MAP.getName());
linkPresetLocation.setText(GisToolbarFacilities.PRESET_LOCATION.getName());
}
}
/**
* Sets the overlay panel max height.
@ -750,4 +781,6 @@ public class GeonaDataViewMainPanel extends Composite {
}
}

12
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml
View File

@ -55,18 +55,15 @@
addStyleNames="open-collection-style">
</g:HTMLPanel>
</b:DropdownButton>
<b:DropdownButton type="LINK"
title="Select the base Map" text="Map" ui:field="linkMap" icon="GLOBE">
<b:DropdownButton type="LINK" text="Map" ui:field="linkMap" icon="GLOBE">
<g:HTMLPanel ui:field="panelBaseLayers">
</g:HTMLPanel>
</b:DropdownButton>
<b:DropdownButton type="LINK" visible="false"
title="Add overlay layers.." text="Overlay" ui:field="linkCustomOverlayLayers" icon="REORDER">
<b:DropdownButton type="LINK" visible="false" text="Overlay" ui:field="linkCustomOverlayLayers" icon="REORDER">
<g:HTMLPanel ui:field="panelCustomOverlayLayers" addStyleNames="overlay-panel-style">
</g:HTMLPanel>
</b:DropdownButton>
<b:DropdownButton type="LINK" visible="false"
title="Apply spatial filtering.." text="Filter" ui:field="linkCrossFilteringLayers" icon="FILTER">
<b:DropdownButton type="LINK" visible="false" text="Filter" ui:field="linkCrossFilteringLayers" icon="FILTER">
<g:HTMLPanel ui:field="panelCrossFilteringLayers" addStyleNames="filter-panel-style">
</g:HTMLPanel>
</b:DropdownButton>
@ -83,8 +80,7 @@
<g:ScrollPanel ui:field="searchFacilityPanel"
addStyleNames="search-facility"></g:ScrollPanel>
</b:DropdownButton>
<b:DropdownButton type="LINK"
title="Center Map to Location" text="Preset Location"
<b:DropdownButton type="LINK" text="Preset Location"
ui:field="linkPresetLocation" addStyleNames="preset-location">
<b:Nav>
<b:Button type="LINK" ui:field="extentToItaly"

1
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml
View File

@ -23,6 +23,7 @@
color: white;
padding: 10px 10px;
font-size: 14px;
padding-left: 40px;
}
.width-100 {

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

@ -200,7 +200,7 @@ body {
/*margin-top: 30px;*/
overflow-y: auto;
transition: width 0.5s;
z-index: 999;
z-index: 200;
}
.overlay {
@ -756,62 +756,6 @@ Table Of Contents (TOC)
padding: 20px;
}
/******************************
RESPONSIVE
*******************************/
@media all and (max-width: 2350px) {
#timeline-data {
width: 700px;
left: 550px;
}
}
@media all and (max-width: 2048px) {
#timeline-data {
width: 600px;
left: 310px;
bottom: 50px
}
.details-panel {
width: 530px;
}
}
@media all and (max-width: 1024px) {
#timeline-data {
width: 260px;
left: 140px;
bottom: 50px
}
.details-panel {
width: 400px;
}
.search-facility {
width: 250px;
max-width: 300px;
}
.inner-toolbar {
width: 100px;
}
}
@media all and (max-height: 900px) {
.ol-popup{
min-width: 150px;
max-width: 150px;
max-height: 150px;
overflow-y: scroll;
}
.ol-popup img {
width: 100%;
max-width: 150px;
}
}
/* OPEN COLLECTION UI */
.open-collection-style {
padding-left: 10px;
@ -901,3 +845,82 @@ RESPONSIVE
.opacity-09 {
opacity: 0.9;
}
/******************************
RESPONSIVE
*******************************/
@media all and (max-width: 2350px) {
#timeline-data {
width: 700px;
left: 550px;
}
}
@media all and (max-width: 2048px) {
#timeline-data {
width: 600px;
left: 310px;
bottom: 50px
}
.details-panel {
width: 530px;
}
}
@media all and (max-width: 1601px) {
.layers-panel {
width: 350px;
}
.dand-layer {
width: 336px;
}
.search-facility {
width: 100%;
}
.thePopDataTable {
}
.ol-popup {
min-width: 220px;
width: 220px;
}
.thePopDataTable tr:last-of-type {
display: none;
}
}
@media all and (max-width: 1024px) {
#timeline-data {
width: 260px;
left: 140px;
bottom: 50px
}
.details-panel {
width: 400px;
}
.search-facility {
width: 250px;
max-width: 300px;
}
.inner-toolbar {
/*width: 100px;*/
}
}
@media all and (max-height: 900px) {
.ol-popup{
min-width: 150px;
max-width: 150px;
max-height: 150px;
overflow-y: scroll;
}
.ol-popup img {
width: 100%;
max-width: 150px;
}
}
/******************************
END RESPONSIVE
*******************************/