Daniel Erez has uploaded a new change for review. Change subject: webadmin: introduce dropdown action button for tabs ......................................................................
webadmin: introduce dropdown action button for tabs * Created a dropdown action button for tabs. * Will be used for "Preview -> Custom..." button in snapshots sub-tab. * For illustration, see screenshot in [1]. [1] http://www.ovirt.org/Features/Single_Disk_Snapshot Change-Id: If3aab713e0ac40f5bf95d0df9a7e9eebbc61f678 Signed-off-by: Daniel Erez <[email protected]> --- A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.ui.xml A frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/css/DropdownButtonPanel.css 3 files changed, 233 insertions(+), 0 deletions(-) git pull ssh://gerrit.ovirt.org:29418/ovirt-engine refs/changes/77/22777/1 diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.java new file mode 100644 index 0000000..fdcacc1 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.java @@ -0,0 +1,142 @@ +package org.ovirt.engine.ui.common.widget.action; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; +import com.google.gwt.event.dom.client.MouseOutEvent; +import com.google.gwt.event.dom.client.MouseOutHandler; +import com.google.gwt.event.dom.client.MouseOverEvent; +import com.google.gwt.event.dom.client.MouseOverHandler; +import com.google.gwt.event.logical.shared.CloseEvent; +import com.google.gwt.event.logical.shared.CloseHandler; +import com.google.gwt.resources.client.CssResource; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.Command; +import com.google.gwt.user.client.ui.FocusPanel; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.MenuItem; +import com.google.gwt.user.client.ui.PopupPanel; +import com.google.gwt.user.client.ui.ToggleButton; +import org.ovirt.engine.ui.common.CommonApplicationResources; + +import java.util.List; + +public class DropdownActionButton<T> extends AbstractActionButton { + + interface WidgetUiBinder extends UiBinder<FocusPanel, DropdownActionButton> { + WidgetUiBinder uiBinder = GWT.create(WidgetUiBinder.class); + } + + @UiField + Style style; + + @UiField + FocusPanel container; + + @UiField(provided = true) + ToggleButton dropdownButton; + + MenuPanelPopup menuPopup; + + private final static CommonApplicationResources resources = GWT.create(CommonApplicationResources.class); + + public DropdownActionButton(List<ActionButtonDefinition<T>> actions, List selectedItems) { + initDropdownButton(); + initWidget(WidgetUiBinder.uiBinder.createAndBindUi(this)); + initMenuPopup(actions, selectedItems); + addMouseHandlers(); + } + + private void initDropdownButton() { + dropdownButton = new ToggleButton(new Image(resources.triangle_down())); + dropdownButton.addClickHandler(new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + if (dropdownButton.isDown()) { + menuPopup.asPopupPanel().showRelativeToAndFitToScreen(container); + } else { + menuPopup.asPopupPanel().hide(); + } + } + }); + } + + private void initMenuPopup(List<ActionButtonDefinition<T>> actions, final List selectedItems) { + menuPopup = new MenuPanelPopup(true); + + for (final ActionButtonDefinition<T> buttonDef : actions) { + MenuItem menuItem = new MenuItem(buttonDef.getTitle(), new Command() { + @Override + public void execute() { + menuPopup.asPopupPanel().hide(); + buttonDef.onClick(selectedItems); + } + }); + menuItem.addStyleName(style.menuItem()); + updateMenuItem(menuItem, buttonDef, selectedItems); + menuPopup.getMenuBar().addItem(menuItem); + } + + menuPopup.asPopupPanel().setAutoHideEnabled(true); + menuPopup.asPopupPanel().addAutoHidePartner(dropdownButton.getElement()); + menuPopup.asPopupPanel().addCloseHandler(new CloseHandler<PopupPanel>() { + @Override + public void onClose(CloseEvent<PopupPanel> event) { + dropdownButton.setDown(false); + } + }); + } + + /** + * Ensures that the specified action button is visible or hidden and enabled or disabled as it should. + */ + void updateMenuItem(MenuItem item, ActionButtonDefinition<T> buttonDef, List selectedItems) { + item.setVisible(buttonDef.isAccessible(selectedItems) && buttonDef.isVisible(selectedItems)); + item.setEnabled(buttonDef.isEnabled(selectedItems)); + item.setTitle(buttonDef.getButtonToolTip() != null ? buttonDef.getButtonToolTip() : null); + } + + private void addMouseHandlers() { + button.addClickHandler(new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + container.removeStyleName(style.buttonMouseOver()); + container.addStyleName(style.buttonMouseOut()); + } + }); + + container.addMouseOverHandler(new MouseOverHandler() { + @Override + public void onMouseOver(MouseOverEvent event) { + if (isEnabled()) { + container.removeStyleName(style.buttonMouseOut()); + container.addStyleName(style.buttonMouseOver()); + } + } + }); + + container.addMouseOutHandler(new MouseOutHandler() { + @Override + public void onMouseOut(MouseOutEvent event) { + container.removeStyleName(style.buttonMouseOver()); + container.addStyleName(style.buttonMouseOut()); + } + }); + } + + @Override + public void setEnabled(boolean enabled) { + button.setEnabled(enabled); + dropdownButton.setEnabled(enabled); + } + + interface Style extends CssResource { + String buttonMouseOver(); + + String buttonMouseOut(); + + String menuItem(); + } + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.ui.xml new file mode 100644 index 0000000..103eb80 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/action/DropdownActionButton.ui.xml @@ -0,0 +1,63 @@ +<?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='common_resources' type='org.ovirt.engine.ui.common.CommonApplicationResources' /> + + <ui:style type="org.ovirt.engine.ui.common.widget.action.DropdownActionButton.Style"> + .actionButton { + float: left; + font-size: 11px; + font-family: Arial, sans-serif; + color: #333333; + background: transparent; + padding: 0px; + border: 1px solid transparent; + } + + .buttonMouseOver { + border: 1px solid #AAAAAA !important; + cursor: pointer; + } + + .buttonMouseOut { + border: 1px solid transparent; + } + + .container { + float: left; + padding-right: 3px; + margin-right: -3px; + margin-left: 10px; + border: 1px solid transparent; + } + + .separator { + top: 12px; + margin-left: 1px; + } + + .dropdownImage { + float: right; + background: transparent; + padding: 0px; + border: 1px solid transparent; + margin-left: 2px; + line-height: 8px; + height: 12px; + } + + .menuItem { + font-size: 11px !important; + } + </ui:style> + + <g:FocusPanel ui:field="container" addStyleNames="{style.container}"> + <g:FlowPanel> + <g:ToggleButton ui:field="button" addStyleNames="{style.actionButton}"/> + <g:Image resource='{common_resources.separator}' addStyleNames="{style.separator}" /> + <g:ToggleButton ui:field="dropdownButton" addStyleNames="{style.dropdownImage}" /> + </g:FlowPanel> + </g:FocusPanel> + +</ui:UiBinder> \ No newline at end of file diff --git a/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/css/DropdownButtonPanel.css b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/css/DropdownButtonPanel.css new file mode 100644 index 0000000..80751db --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/css/DropdownButtonPanel.css @@ -0,0 +1,28 @@ +@external actionPanelPopupPanel; +.actionPanelPopupPanel { + background-color: white; +} + +@external actionPanelPopupMenuBar; +.actionPanelPopupMenuBar { + background-color: white; + border: 1px solid #96B7D6; +} + +@external menuItem; +.menuItem { + color: black; + background-color: white; + cursor: pointer; + border-bottom: 1px solid #E0E9F2; +} + +@external menuItem-selected; +.menuItem-selected { + background-color: #E1E8F2; +} + +@external menuItem-disabled; +.menuItem-disabled { + color: #C0C0C0 +} \ No newline at end of file -- To view, visit http://gerrit.ovirt.org/22777 To unsubscribe, visit http://gerrit.ovirt.org/settings Gerrit-MessageType: newchange Gerrit-Change-Id: If3aab713e0ac40f5bf95d0df9a7e9eebbc61f678 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
