Tomas Jelinek has uploaded a new change for review. Change subject: frontend: Added support for detachable widgets ......................................................................
frontend: Added support for detachable widgets WIP Change-Id: I1fcc24e753fad19273ba3b16fba0b8be70bc4395 Signed-off-by: Tomas Jelinek <[email protected]> --- A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/EntityModelDetachableWidgetWithInfo.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/HasDetachable.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/BaseEntityModelDetachableWidget.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.ui.xml A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.ui.xml A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.ui.xml A frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/joined.png A frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/separated.png 11 files changed, 473 insertions(+), 0 deletions(-) git pull ssh://gerrit.ovirt.org:29418/ovirt-engine refs/changes/23/25023/1 diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/EntityModelDetachableWidgetWithInfo.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/EntityModelDetachableWidgetWithInfo.java new file mode 100644 index 0000000..798ab5d --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/EntityModelDetachableWidgetWithInfo.java @@ -0,0 +1,33 @@ +package org.ovirt.engine.ui.common.widget; + +import com.google.gwt.user.client.ui.HasEnabled; +import org.ovirt.engine.ui.common.widget.editor.EntityModelLabel; +import org.ovirt.engine.ui.common.widget.editor.generic.EntityModelDetachableWidget; + +public class EntityModelDetachableWidgetWithInfo extends EntityModelWidgetWithInfo implements HasDetachable, HasEnabled { + + public EntityModelDetachableWidgetWithInfo(EntityModelLabel label, AbstractValidatedWidgetWithLabel contentWidget) { + super(label, new EntityModelDetachableWidget(contentWidget)); + } + + @Override + public void setDetachableIconVisible(boolean visible) { + ((HasDetachable) contentWidget).setDetachableIconVisible(visible); + } + + @Override + public void setAttached(boolean attached) { + ((HasDetachable) contentWidget).setAttached(attached); + } + + @Override + public void setEnabled(boolean enabled) { + ((HasEnabled) contentWidget).setEnabled(enabled); + } + + @Override + public boolean isEnabled() { + return ((HasEnabled) contentWidget).isEnabled(); + } + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/HasDetachable.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/HasDetachable.java new file mode 100644 index 0000000..1b376df --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/HasDetachable.java @@ -0,0 +1,19 @@ +package org.ovirt.engine.ui.common.widget; + +/** + * Widgets that implement this interface have a visual representation which shows this widget attached or detached to something + */ +public interface HasDetachable { + + /** + * This widget shows some icon which means if this widget is attached to something or not. + * This method hides/shows this icon + */ + void setDetachableIconVisible(boolean visible); + + /** + * Changes the icon to attached/detached + */ + void setAttached(boolean attached); + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/BaseEntityModelDetachableWidget.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/BaseEntityModelDetachableWidget.java new file mode 100644 index 0000000..16c59859 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/BaseEntityModelDetachableWidget.java @@ -0,0 +1,67 @@ +package org.ovirt.engine.ui.common.widget.editor.generic; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.Style.Display; +import com.google.gwt.resources.client.CssResource; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.UIObject; +import org.ovirt.engine.ui.common.CommonApplicationResources; +import org.ovirt.engine.ui.common.widget.HasDetachable; + +public abstract class BaseEntityModelDetachableWidget extends Composite implements HasDetachable { + + private static final CommonApplicationResources resource = GWT.create(CommonApplicationResources.class); + + private Image attachedSeparatedImage; + + interface BaseStyle extends CssResource { + String contentWidgetWithDetachable(); + + String contentWidgetWithoutDetachable(); + } + + private BaseStyle style; + + private UIObject decoratedWidget; + + // can not be as a constructor because needs to be called after the widgets get bind properly in children + protected void initialize(UIObject decoratedWidget, Image attachedSeparatedImage, BaseStyle style) { + this.decoratedWidget = decoratedWidget; + this.attachedSeparatedImage = attachedSeparatedImage; + this.style = style; + + setAttached(true); + + // by default it is a regular widget - needs to be made detachable explicitly + setDetachableIconVisible(false); + } + + @Override + public void setDetachableIconVisible(boolean visible) { + if (visible) { + attachedSeparatedImage.getElement().getStyle().setDisplay(Display.INLINE); + } else { + attachedSeparatedImage.getElement().getStyle().setDisplay(Display.NONE); + } + + changeWidgetStyle(decoratedWidget, visible); + } + + protected void changeWidgetStyle(UIObject widget, boolean detachableIconVisible) { + if (detachableIconVisible) { + widget.removeStyleName(style.contentWidgetWithoutDetachable()); + widget.addStyleName(style.contentWidgetWithDetachable()); + } else { + widget.removeStyleName(style.contentWidgetWithDetachable()); + widget.addStyleName(style.contentWidgetWithoutDetachable()); + } + } + + @Override + public void setAttached(boolean attached) { + attachedSeparatedImage.setResource(attached ? resource.joinedIcon() : resource.separatedIcon()); + } + + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.java new file mode 100644 index 0000000..b620c47 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.java @@ -0,0 +1,45 @@ +package org.ovirt.engine.ui.common.widget.editor.generic; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiChild; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.Label; +import com.google.gwt.user.client.ui.Widget; + +/** + * Takes a AbstractValidatedWidgetWithLabel, decorates it with the detachable icon but does not render it's label + */ +public class DetachableLabel extends BaseEntityModelDetachableWidget { + + interface WidgetUiBinder extends UiBinder<Widget, DetachableLabel> { + WidgetUiBinder uiBinder = GWT.create(WidgetUiBinder.class); + } + + interface Style extends BaseStyle { + } + + @UiField + Image attachedSeparatedImage; + + @UiField(provided = true) + Label decorated; + + @UiField + Style style; + + @UiChild(tagname = "decorated", limit = 1) + public void setHeader(Label decorated) { + this.decorated = decorated; + + initWidget(WidgetUiBinder.uiBinder.createAndBindUi(this)); + + initialize(decorated, attachedSeparatedImage, style); + } + + public void setContentWidgetStyleName(String contentWidgetStyleName) { + decorated.setStyleName(contentWidgetStyleName); + } + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.ui.xml new file mode 100644 index 0000000..9241a6c --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/DetachableLabel.ui.xml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";> +<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> + + <ui:with field='resources' type='org.ovirt.engine.ui.common.CommonApplicationResources'/> + + <ui:style type="org.ovirt.engine.ui.common.widget.editor.generic.DetachableLabel.Style"> + .image { + margin-top: 11px; + margin-left: 5px; + } + + .wrapper { + text-align: left; + } + + .contentWrapper { + float: left; + width: 100%; + } + + .contentWidgetWithoutDetachable, .contentWidgetWithDetachable { + float: left; + } + + </ui:style> + + <g:FlowPanel addStyleNames="{style.contentWrapper}"> + <g:Label ui:field="decorated"/> + <g:FlowPanel addStyleNames="{style.image}"> + <g:Image ui:field="attachedSeparatedImage" /> + </g:FlowPanel> + </g:FlowPanel> + +</ui:UiBinder> diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.java new file mode 100644 index 0000000..bbe4a22 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.java @@ -0,0 +1,76 @@ +package org.ovirt.engine.ui.common.widget.editor.generic; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.Style; +import com.google.gwt.dom.client.Style.Float; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.HasEnabled; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.SimplePanel; +import com.google.gwt.user.client.ui.Widget; +import org.ovirt.engine.ui.common.widget.AbstractValidatedWidgetWithLabel; +import org.ovirt.engine.ui.common.widget.Align; + +/** + * Takes a AbstractValidatedWidgetWithLabel, decorates it with the detachable icon but does not render it's label + */ +public class EntityModelDetachableWidget extends BaseEntityModelDetachableWidget implements HasEnabled { + + interface WidgetUiBinder extends UiBinder<Widget, EntityModelDetachableWidget> { + WidgetUiBinder uiBinder = GWT.create(WidgetUiBinder.class); + } + + interface Style extends BaseStyle { + String contentWrapperImageOnRight(); + String contentWrapper(); + } + + @UiField + Image attachedSeparatedImage; + + @UiField(provided = true) + SimplePanel contentWidgetContainer; + + private AbstractValidatedWidgetWithLabel decorated; + + @UiField + FlowPanel contentWrapper; + + @UiField + Style style; + + public EntityModelDetachableWidget(AbstractValidatedWidgetWithLabel decorated, Align attachedImageAlign) { + this.decorated = decorated; + this.contentWidgetContainer = decorated.getContentWidgetContainer(); + + initWidget(WidgetUiBinder.uiBinder.createAndBindUi(this)); + + if (attachedImageAlign == Align.LEFT) { + contentWidgetContainer.getElement().getStyle().setFloat(Float.RIGHT); + } else { + contentWidgetContainer.getElement().getStyle().setFloat(Float.LEFT); + contentWidgetContainer.getElement().getStyle().setWidth(230, com.google.gwt.dom.client.Style.Unit.PX); + contentWrapper.removeStyleName(style.contentWrapper()); + contentWrapper.addStyleName(style.contentWrapperImageOnRight()); + } + + initialize(contentWidgetContainer, attachedSeparatedImage, style); + } + + public EntityModelDetachableWidget(AbstractValidatedWidgetWithLabel decorated) { + this(decorated, Align.LEFT); + } + + @Override + public boolean isEnabled() { + return decorated.isEnabled(); + } + + @Override + public void setEnabled(boolean enabled) { + decorated.setEnabled(enabled); + } + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.ui.xml new file mode 100644 index 0000000..f8dec5d --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidget.ui.xml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";> +<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" + xmlns:w="urn:import:org.ovirt.engine.ui.common.widget"> + + <ui:with field='resources' type='org.ovirt.engine.ui.common.CommonApplicationResources' /> + + <ui:style type="org.ovirt.engine.ui.common.widget.editor.generic.EntityModelDetachableWidget.Style"> + .image { + margin-top: 7px; + float: left; + } + + .wrapper { + text-align: left; + clear: both; + } + + .contentWrapper { + float: right; + width: 230px; + padding: 0 5px; + } + + .contentWrapperImageOnRight { + padding: 0 5px; + } + + .contentWidgetWithoutDetachable, .contentWidgetWithDetachable { + float: right; + } + .contentWidgetWithoutDetachable { + padding: 0 5px; + width: 230px; + } + + .contentWidgetWithDetachable { + padding: 0 0px; + width: 200px; + } + + .contentWidgetContainer { + /*width: 230px;*/ + } + + </ui:style> + + <g:HTMLPanel ui:field="wrapperPanel" addStyleNames="{style.wrapper}"> + <g:FlowPanel ui:field="contentWrapper" addStyleNames="{style.contentWrapper}"> + <g:FlowPanel addStyleNames="{style.image}"> + <g:Image ui:field="attachedSeparatedImage" /> + </g:FlowPanel> + + <g:SimplePanel ui:field="contentWidgetContainer" addStyleNames="{style.contentWidgetContainer}" /> + </g:FlowPanel> + </g:HTMLPanel> + +</ui:UiBinder> diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.java new file mode 100644 index 0000000..38b49d7 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.java @@ -0,0 +1,75 @@ +package org.ovirt.engine.ui.common.widget.editor.generic; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.LabelElement; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.ui.HasEnabled; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.SimplePanel; +import com.google.gwt.user.client.ui.Widget; +import org.ovirt.engine.ui.common.widget.AbstractValidatedWidgetWithLabel; +import org.ovirt.engine.ui.common.widget.HasLabel; + +public class EntityModelDetachableWidgetWithLabel extends BaseEntityModelDetachableWidget implements HasLabel, HasEnabled { + + interface WidgetUiBinder extends UiBinder<Widget, EntityModelDetachableWidgetWithLabel> { + WidgetUiBinder uiBinder = GWT.create(WidgetUiBinder.class); + } + + interface Style extends BaseStyle { + + String labelEnabled(); + + String labelDisabled(); + } + + @UiField + LabelElement label; + + @UiField(provided = true) + SimplePanel contentWidgetContainer; + + @UiField + Image attachedSeparatedImage; + + @UiField + Style style; + + private AbstractValidatedWidgetWithLabel decorated; + + public EntityModelDetachableWidgetWithLabel(AbstractValidatedWidgetWithLabel decorated) { + this.decorated = decorated; + contentWidgetContainer = decorated.getContentWidgetContainer(); + + initWidget(WidgetUiBinder.uiBinder.createAndBindUi(this)); + + initialize(contentWidgetContainer, attachedSeparatedImage, style); + } + + @Override + public String getLabel() { + return label.getInnerText(); + } + + @Override + public void setLabel(String label) { + this.label.setInnerText(label); + } + + @Override + public boolean isEnabled() { + return decorated.isEnabled(); + } + + @Override + public void setEnabled(boolean enabled) { + decorated.setEnabled(enabled); + + if (enabled) { + label.replaceClassName(style.labelDisabled(), style.labelEnabled()); + } else { + label.replaceClassName(style.labelEnabled(), style.labelDisabled()); + } + } +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.ui.xml new file mode 100644 index 0000000..554fda9 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/generic/EntityModelDetachableWidgetWithLabel.ui.xml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";> +<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> + + <ui:with field='resources' type='org.ovirt.engine.ui.common.CommonApplicationResources' /> + + <ui:style type="org.ovirt.engine.ui.common.widget.editor.generic.EntityModelDetachableWidgetWithLabel.Style"> + .image { + margin-top: 7px; + float: left; + } + + .wrapper { + text-align: left; + } + + .contentWrapper { + float: right; + width: 230px; + padding: 0 5px; + } + + .contentWidgetWithoutDetachable, .contentWidgetWithDetachable { + float: right; + } + .contentWidgetWithoutDetachable { + padding: 0 5px; + width: 230px; + } + + .contentWidgetWithDetachable { + padding: 0 0px; + width: 200px; + } + + .label { + font-size: 13px; + padding: 0 5px; + font-family: Verdana,sans-serif; + line-height: 30px; + } + + .labelEnabled { + color: #333333; + } + + .labelDisabled { + color: gray; + } + </ui:style> + + <g:HTMLPanel ui:field="wrapperPanel" addStyleNames="{style.wrapper}"> + + <label ui:field="label" class="{style.label} {style.labelEnabled}" /> + + <g:FlowPanel addStyleNames="{style.contentWrapper}"> + <g:FlowPanel addStyleNames="{style.image}"> + <g:Image ui:field="attachedSeparatedImage" /> + </g:FlowPanel> + + <g:SimplePanel ui:field="contentWidgetContainer" /> + </g:FlowPanel> + </g:HTMLPanel> + +</ui:UiBinder> diff --git a/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/joined.png b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/joined.png new file mode 100644 index 0000000..44036e0 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/joined.png Binary files differ diff --git a/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/separated.png b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/separated.png new file mode 100644 index 0000000..68eaa71 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/separated.png Binary files differ -- To view, visit http://gerrit.ovirt.org/25023 To unsubscribe, visit http://gerrit.ovirt.org/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I1fcc24e753fad19273ba3b16fba0b8be70bc4395 Gerrit-PatchSet: 1 Gerrit-Project: ovirt-engine Gerrit-Branch: master Gerrit-Owner: Tomas Jelinek <[email protected]> _______________________________________________ Engine-patches mailing list [email protected] http://lists.ovirt.org/mailman/listinfo/engine-patches
