gwt: Make sure body isn't scrolled while scrolling the popup. Use wor…

…d-wrap instead of horizontal scrolling.
rosedu · Mar 10, 2015 · e0bf24e · e0bf24e
1 parent 584839b
commit e0bf24e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 44 deletions.
diff --git a/gwt/vmchecker-gui/src/ro/pub/cs/vmchecker/client/ui/VmcheckerPopup.java b/gwt/vmchecker-gui/src/ro/pub/cs/vmchecker/client/ui/VmcheckerPopup.java
@@ -14,11 +14,17 @@
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.Event.NativePreviewEvent;
 import com.google.gwt.core.client.Scheduler;
+import com.google.gwt.dom.client.Style;
+import com.google.gwt.dom.client.Style.Overflow;
+import com.google.gwt.dom.client.Document;
 
 /**
  * Wrapper over the classic PopupPanel
  * Adds a close button and a scrollable content panel
  * @author claudiugh
+ * Implement proper scrolling support and make sure
+ * the body doesn't scroll when used.
+ * @author calin.iorgulescu
  *
  */
 public class VmcheckerPopup extends PopupPanel {
@@ -33,8 +39,7 @@ public class VmcheckerPopup extends PopupPanel {
 	private Anchor popupCloseButton = new Anchor();
 
 	public VmcheckerPopup() {
-//		super(true, true);
-		super(true, false);
+		super(true);
 		setup();
 	}
 
@@ -61,28 +66,21 @@ public void onClick(ClickEvent event) {
 
 	}
 
-/*
-	private void focusContentPanel() {
-		Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
-			@Override
-			public void execute() {
-				detailsPopupContent.getElement().focus();
-			}
-		});
-	}
-*/
-
 	public void showContent(String htmlContent) {
 		detailsPopupContent.clear();
 		detailsPopupContent.add(new HTML(htmlContent));
 		center();
 		show();
-//		focusContentPanel();
+		Document.get().getBody().getStyle().setOverflow(Style.Overflow.HIDDEN);
 	}
 
 	@Override
 	protected void onPreviewNativeEvent(NativePreviewEvent event) {
 		super.onPreviewNativeEvent(event);
+		if (!isShowing()) {
+			return;
+		}
+
 		switch (event.getTypeInt()) {
 			case Event.ONKEYDOWN:
 				if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ESCAPE) {
@@ -138,35 +136,15 @@ protected void onPreviewNativeEvent(NativePreviewEvent event) {
 					detailsPopupContent.scrollToTop();
 				}
 
-				if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_RIGHT) {
-					int scrollIncrement = (detailsPopupContent.getMaximumHorizontalScrollPosition() - 
-						detailsPopupContent.getMinimumHorizontalScrollPosition()) / 20;
-					if (detailsPopupContent.getHorizontalScrollPosition() <
-							detailsPopupContent.getMaximumHorizontalScrollPosition()) {
-						detailsPopupContent.setHorizontalScrollPosition(
-							detailsPopupContent.getHorizontalScrollPosition() + scrollIncrement);
-					}
-				}
-
-				if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_LEFT) {
-					int scrollIncrement = (detailsPopupContent.getMaximumHorizontalScrollPosition() - 
-						detailsPopupContent.getMinimumHorizontalScrollPosition()) / 20;
-					if (detailsPopupContent.getHorizontalScrollPosition() >
-							detailsPopupContent.getMinimumHorizontalScrollPosition()) {
-						detailsPopupContent.setHorizontalScrollPosition(
-							detailsPopupContent.getHorizontalScrollPosition() - scrollIncrement);
-					}
-				}
-
+				event.cancel();
 				break;
-/*
-			case Event.ONCLICK:
-				// XXX: Kind of hack-ish, but if the scrollpanel doesn't have focus
-				// it won't allow scrolling with keys.
-				focusContentPanel();
-				break;
-*/
 		}
 	}
 
+	@Override
+	protected void onUnload() {
+		super.onUnload();
+		Document.get().getBody().getStyle().clearOverflow();
+	}
+
 }
diff --git a/gwt/vmchecker-gui/war/Vmchecker.css b/gwt/vmchecker-gui/war/Vmchecker.css
@@ -69,7 +69,6 @@ h2 {
 	border: 3px solid #9B0000;
 	padding:10px;
 	background:none repeat scroll 0 0 white; 
-	overflow:scroll;
 	cursor: pointer;
 }
 
@@ -82,7 +81,6 @@ h2 {
 	border: 3px solid green;
 	padding:10px;
 	background:none repeat scroll 0 0 white; 
-	overflow:scroll;
 }
 
 .resultsPopup a, .resultsPopup a:hover, .resultsPopup a:visited {
@@ -115,7 +113,9 @@ a.fillButton:hover {
 	margin-top: 10px;
 	padding-top: 10px;
 	border-top: 1px solid #CCCCCC;
-	overflow: scroll;
+	overflow-x: scroll;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
 }		
 
 .check_error {