Daniel Erez has uploaded a new change for review. Change subject: webadmin: resizable dialogs support (#846327) ......................................................................
webadmin: resizable dialogs support (#846327) https://bugzilla.redhat.com/846327 UI infrastructure - resizable dialogs * Added ResizableDialogBox widget (extends DialogBox): ** Enables resizing of the dialog by catching browser's mouse events. ** Contains a 'resize' symbol at bottom-right corner. * Currently, the feature is disabled by default (since some dialogs require tweaking of their inner widgets for proper resizing - should be revisited separately). * The resizable behavior would be enabled for Storage and Disk dialogs. Change-Id: Iec5acd2fdc6aafebecf306b2be3b4a2f53b1cf62 Signed-off-by: Daniel Erez <[email protected]> --- M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/DialogBoxWithKeyHandlers.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/ResizableDialogBox.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml A frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/public/images/dialog/panel_edge_BR_resize.png 4 files changed, 172 insertions(+), 3 deletions(-) git pull ssh://gerrit.ovirt.org:29418/ovirt-engine refs/changes/54/7554/1 diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/DialogBoxWithKeyHandlers.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/DialogBoxWithKeyHandlers.java index 0b2e61f..7f5fe12 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/DialogBoxWithKeyHandlers.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/DialogBoxWithKeyHandlers.java @@ -2,9 +2,8 @@ import com.google.gwt.user.client.Event; import com.google.gwt.user.client.Event.NativePreviewEvent; -import com.google.gwt.user.client.ui.DialogBox; -public class DialogBoxWithKeyHandlers extends DialogBox { +public class DialogBoxWithKeyHandlers extends ResizableDialogBox { private PopupNativeKeyPressHandler keyPressHandler; diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/ResizableDialogBox.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/ResizableDialogBox.java new file mode 100644 index 0000000..591d5503 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/ResizableDialogBox.java @@ -0,0 +1,170 @@ +package org.ovirt.engine.ui.common.widget.dialog; + +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.NodeList; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Event; +import com.google.gwt.user.client.ui.DialogBox; + +public class ResizableDialogBox extends DialogBox { + + private boolean resizeSupportEnabled; + private boolean dragging; + private boolean rightEdge, bottomEdge; + private int minWidth; + private int minHeight; + + private static int EDGE_SIZE = 3; + private static int EDGE_THRESHOLD = 10; + + public ResizableDialogBox() { + enableResizeSupport(false); + } + + @Override + public void onBrowserEvent(Event event) { + // When resize support is disabled, fall-back to default browser behavior + if (!resizeSupportEnabled) { + super.onBrowserEvent(event); + return; + } + + // Set the default dialog's dimensions as minimal dimensions + if (minWidth == 0 || minHeight == 0) { + minWidth = getOffsetWidth(); + minHeight = getOffsetHeight(); + } + + // While dragging dialog's edge is on, disable default event behavior + if (isDragging()) { + event.preventDefault(); + } + else { + super.onBrowserEvent(event); + } + + final int eventType = DOM.eventGetType(event); + if (Event.ONMOUSEMOVE == eventType) { + if (isDragging()) { + // Get cursor's position + int cursorX = event.getClientX(); + int cursorY = event.getClientY(); + + // Calculates dialog's new dimensions + int newWidth = cursorX - DOM.getAbsoluteLeft(getElement()) + EDGE_SIZE; + int newHeight = cursorY - DOM.getAbsoluteTop(getElement()) + EDGE_SIZE; + + updateDialogDimensions(newWidth, newHeight); + } + else { + updateResizeCursor(event); + } + } else if (Event.ONMOUSEDOWN == eventType) { + if (updateResizeCursor(event) && !isDragging()) { + event.preventDefault(); + setDragging(true); + DOM.setCapture(getElement()); + } + } else if (Event.ONMOUSEUP == eventType) { + if (isDragging()) { + setDragging(false); + DOM.releaseCapture(getElement()); + } + } else if (Event.ONMOUSEOUT == eventType) { + if (!isDragging()) { + updateResizeCursor(event); + } + } + } + + private boolean isDragging() { + return dragging; + } + + private void setDragging(boolean isDragging) { + this.dragging = isDragging; + } + + /** + * Enable/Disable dialog's resize support + * + * @param enabled + */ + public void enableResizeSupport(boolean enabled) { + this.resizeSupportEnabled = enabled; + + String bottomRightCornerImageUrl = + enabled ? "images/dialog/panel_edge_BR_resize.png" : "images/dialog/panel_edge_BR.png"; //$NON-NLS-1$ //$NON-NLS-2$ + setBackgroundImageByClassName("dialogBottomRight", bottomRightCornerImageUrl); //$NON-NLS-1$ + } + + /** + * Update dialog's dimensions according to the sepcified width/height + * + * @param newWidth + * @param newHeight + */ + private void updateDialogDimensions(int newWidth, int newHeight) { + if (newWidth <= minWidth) { + newWidth = minWidth; + } + + if (newHeight <= minHeight) { + newHeight = minHeight; + } + + if (rightEdge && bottomEdge) { + setWidth(newWidth + "px"); //$NON-NLS-1$ + setHeight(newHeight + "px"); //$NON-NLS-1$ + } + else if (rightEdge) { + setWidth(newWidth + "px"); //$NON-NLS-1$ + } + else if (bottomEdge) { + setHeight(newHeight + "px"); //$NON-NLS-1$ + } + } + + /** + * Detect dialog's edges and update mouse cursor according to hovered dialog edge + * + * @param event + * @return + */ + private boolean updateResizeCursor(Event event) { + int cursorX = event.getClientX(); + int initialX = getAbsoluteLeft(); + int width = getOffsetWidth(); + + int cursorY = event.getClientY(); + int initialY = getAbsoluteTop(); + int height = getOffsetHeight(); + + rightEdge = (initialX + width - EDGE_THRESHOLD) < cursorX && cursorX < (initialX + width); + bottomEdge = (initialY + height - EDGE_THRESHOLD) < cursorY && cursorY < (initialY + height); + + String cursor = bottomEdge && rightEdge ? "se-resize" : //$NON-NLS-1$ + rightEdge ? "e-resize" : bottomEdge ? "n-resize" : "default"; //$NON-NLS-1$ //$NON-NLS-2$ //$NON-NLS-3$ + + getElement().getParentElement().getStyle().setProperty("cursor", cursor); //$NON-NLS-1$ + + return rightEdge || bottomEdge; + } + + /** + * Set background by class name - used for displaying 'resize' mark on bottom-right corner + * + * @param className + * @param imageUrl + */ + private void setBackgroundImageByClassName(String className, String imageUrl) { + NodeList<Element> elements = getElement().getElementsByTagName("td"); //$NON-NLS-1$ + + for (int i = 0; i < elements.getLength(); i++) { + Element element = elements.getItem(i); + if (element.getClassName().contains(className)) { + element.getStyle().setBackgroundImage("url(" + imageUrl + ")"); //$NON-NLS-1$ //$NON-NLS-2$ + } + } + } +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml index d81a3f2..ea9a6fa 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml @@ -53,7 +53,7 @@ .footer { position: absolute; - right: 11px; + right: 16px; bottom: 9px; width: 95%; } diff --git a/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/public/images/dialog/panel_edge_BR_resize.png b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/public/images/dialog/panel_edge_BR_resize.png new file mode 100644 index 0000000..9122a48 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/public/images/dialog/panel_edge_BR_resize.png Binary files differ -- To view, visit http://gerrit.ovirt.org/7554 To unsubscribe, visit http://gerrit.ovirt.org/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Iec5acd2fdc6aafebecf306b2be3b4a2f53b1cf62 Gerrit-PatchSet: 1 Gerrit-Project: ovirt-engine Gerrit-Branch: master Gerrit-Owner: Daniel Erez <[email protected]> _______________________________________________ Engine-patches mailing list [email protected] http://lists.ovirt.org/mailman/listinfo/engine-patches
