diff --git a/java/com.sap.sailing.gwt.ui/RaceBoard.css b/java/com.sap.sailing.gwt.ui/RaceBoard.css index 1705e5230e9..b3ddbfe671a 100644 --- a/java/com.sap.sailing.gwt.ui/RaceBoard.css +++ b/java/com.sap.sailing.gwt.ui/RaceBoard.css @@ -200,8 +200,26 @@ input.magnifier { .collapsablePanel-closed { } -.collapsablePanel-header-toolbar { +.collapsablePanel-header-text{ + font-size: 14px; + font-weight: bold; + float:left; +} + +.collapsablePanel-header-image{ + float:left; +} + +.collapsablePanel-header-collapse{ + align:left; + float:left; + width:95%; + height:100%; +} + +.collapsablePanel-toolbar { align: right; + float: right; padding: 3px; } diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/CollapsableComponentViewer.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/CollapsableComponentViewer.java index ff14221ee5a..32fac3e2663 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/CollapsableComponentViewer.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/CollapsableComponentViewer.java @@ -49,7 +49,7 @@ public class CollapsableComponentViewer implements ComponentViewer private CollapsablePanel createCollapsablePanel(Panel contentPanel, String panelTitle, String defaultContentWidth, String defaultContentHeight) { - CollapsablePanel collapsablePanel = new CollapsablePanel (panelTitle); + CollapsablePanel collapsablePanel = new CollapsablePanel (panelTitle, hasHeaderToolbar); collapsablePanel.setSize("100%", "100%"); collapsablePanel.setOpen(true); diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanel.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanel.java index 04433c6064e..897e141698e 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanel.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanel.java @@ -53,6 +53,7 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI * Used to wrap widgets in the header to provide click support. Effectively wraps the widget in an * anchor to get automatic keyboard access. */ + /* private final class ClickableHeader extends SimplePanel { private ClickableHeader() { @@ -77,7 +78,7 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI } } } - +*/ /** * An {@link Animation} used to open the content. */ @@ -161,17 +162,15 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI */ private static final int ANIMATION_DURATION = 350; - // Stylename constants. + // style name constants. private static final String STYLENAME_DEFAULT = "collapsablePanel"; - private static final String STYLENAME_SUFFIX_OPEN = "collapsablePanel-open"; + private static final String STYLENAME_SUFFIX_OPEN = "open"; - private static final String STYLENAME_SUFFIX_CLOSED = "collapsablePanel-closed"; + private static final String STYLENAME_SUFFIX_CLOSED = "closed"; private static final String STYLENAME_HEADER = "collapsablePanel-header"; - private static final String STYLENAME_HEADER_TOOLBAR = "collapsablePanel-header-toolbar"; - private static final String STYLENAME_CONTENT = "collapsablePanel-content"; /** @@ -195,10 +194,8 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI */ private final SimplePanel headerWrapper = new SimplePanel(); - private final FlowPanel embeddedHeader = new FlowPanel(); + private CollapsablePanelHeader headerPanel; - private final ClickableHeader clickableHeader = new ClickableHeader(); - private boolean isAnimationEnabled = false; private boolean isOpen = false; @@ -228,9 +225,10 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI * @param headerText * the text to be displayed in the header */ - public CollapsablePanel(ImageResource openImage, ImageResource closedImage, String headerText) { + public CollapsablePanel(ImageResource openImage, ImageResource closedImage, String headerText, boolean hasToolbar) { this(); - setClickableHeader(new CollapsablePanelDefaultHeader(this, openImage, closedImage, headerText)); + headerPanel = new CollapsablePanelHeader(this, openImage, closedImage, headerText, hasToolbar); + setHeader(headerPanel); } /** @@ -239,22 +237,12 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI * @param headerText * the text to be displayed in the header */ - public CollapsablePanel(String headerText) { - this(resources.openIcon(), resources.closeIcon(), headerText); - } - - private void setClickableHeader(Widget widget) { - - clickableHeader.add(widget); - embeddedHeader.add(clickableHeader); - headerWrapper.setWidget(embeddedHeader); + public CollapsablePanel(String headerText, boolean hasToolbar) { + this(resources.openIcon(), resources.closeIcon(), headerText, hasToolbar); } public void setHeaderToolbar(Widget toolbar) { - - if (toolbar != null) { - embeddedHeader.add(toolbar); - } + headerPanel.setToolbar(toolbar); } public void add(Widget w) { @@ -355,6 +343,23 @@ public final class CollapsablePanel extends Composite implements HasWidgets.ForI isAnimationEnabled = enable; } + public void setHeader(Widget headerContent) { + final Widget currentHeaderContent = getHeader(); + + // Remove existing header content widget. + if (currentHeaderContent != null) { + headerWrapper.setWidget(null); + currentHeaderContent.removeStyleName(STYLENAME_HEADER); + } + + // Add new header content widget if != null. + if (headerContent != null) { + headerWrapper.setWidget(headerContent); + + headerContent.addStyleName(STYLENAME_HEADER); + } + } + /** * Sets the content widget which can be opened and closed by this panel. If there is a preexisting content widget, * it will be detached. diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanelDefaultHeader.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanelDefaultHeader.java deleted file mode 100644 index 41a1a73d730..00000000000 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanelDefaultHeader.java +++ /dev/null @@ -1,99 +0,0 @@ -package com.sap.sailing.gwt.ui.shared.components; - -import com.google.gwt.event.logical.shared.CloseEvent; -import com.google.gwt.event.logical.shared.CloseHandler; -import com.google.gwt.event.logical.shared.OpenEvent; -import com.google.gwt.event.logical.shared.OpenHandler; -import com.google.gwt.resources.client.ImageResource; -import com.google.gwt.user.client.DOM; -import com.google.gwt.user.client.Element; -import com.google.gwt.user.client.ui.HasText; -import com.google.gwt.user.client.ui.Image; -import com.google.gwt.user.client.ui.Widget; -import com.sap.sailing.gwt.ui.shared.components.CollapsablePanel.Imager; - -/** - * The default header widget used within a {@link CollapsablePanel}. - */ -public class CollapsablePanelDefaultHeader extends Widget implements HasText, OpenHandler, - CloseHandler { - - /** - * imageTD holds the image for the icon, not null. labelTD holds the text for the label. - */ - private final Element labelTD; - - private final Image iconImage; - private final Imager imager; - private final CollapsablePanel collapsablePanel; - - protected CollapsablePanelDefaultHeader(CollapsablePanel collapsablePanel, Imager imager, String text) { - this.imager = imager; - this.collapsablePanel = collapsablePanel; - iconImage = imager.makeImage(); - - // I do not need any Widgets here, just a DOM structure. - Element root = DOM.createTable(); - Element tbody = DOM.createTBody(); - Element tr = DOM.createTR(); - final Element imageTD = DOM.createTD(); - labelTD = DOM.createTD(); - - setElement(root); - - DOM.appendChild(root, tbody); - DOM.appendChild(tbody, tr); - DOM.appendChild(tr, imageTD); - DOM.appendChild(tr, labelTD); - - // set image TD to be same width as image. - DOM.setElementProperty(imageTD, "align", "center"); - DOM.setElementProperty(imageTD, "valign", "middle"); - DOM.setStyleAttribute(imageTD, "width", iconImage.getWidth() + "px"); - - DOM.appendChild(imageTD, iconImage.getElement()); - - setText(text); - - collapsablePanel.addOpenHandler(this); - collapsablePanel.addCloseHandler(this); - setStyle(); - } - - protected CollapsablePanelDefaultHeader(CollapsablePanel collapsablePanel, final ImageResource openImage, - final ImageResource closedImage, String text) { - this(collapsablePanel, new Imager() { - public Image makeImage() { - return new Image(closedImage); - } - - public void updateImage(boolean open, Image image) { - if (open) { - image.setResource(openImage); - } else { - image.setResource(closedImage); - } - } - }, text); - } - - public final String getText() { - return DOM.getInnerText(labelTD); - } - - public final void onClose(CloseEvent event) { - setStyle(); - } - - public final void onOpen(OpenEvent event) { - setStyle(); - } - - public final void setText(String text) { - DOM.setInnerText(labelTD, text); - } - - private void setStyle() { - imager.updateImage(collapsablePanel.isOpen(), iconImage); - } -} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanelHeader.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanelHeader.java new file mode 100644 index 00000000000..e6b856aeddf --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/components/CollapsablePanelHeader.java @@ -0,0 +1,146 @@ +package com.sap.sailing.gwt.ui.shared.components; + +import com.google.gwt.event.logical.shared.CloseEvent; +import com.google.gwt.event.logical.shared.CloseHandler; +import com.google.gwt.event.logical.shared.OpenEvent; +import com.google.gwt.event.logical.shared.OpenHandler; +import com.google.gwt.resources.client.ImageResource; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Element; +import com.google.gwt.user.client.Event; +import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.HasText; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.Label; +import com.google.gwt.user.client.ui.SimplePanel; +import com.google.gwt.user.client.ui.Widget; +import com.sap.sailing.gwt.ui.shared.components.CollapsablePanel.Imager; + +/** + * The default header widget used within a {@link CollapsablePanel}. + */ +public class CollapsablePanelHeader extends FlowPanel implements HasText, OpenHandler, + CloseHandler { + + private final Label textLabel; + private final Image iconImage; + private final Imager imager; + private final CollapsablePanel collapsablePanel; + private final boolean hasToolbar; + private final SimplePanel toolbarPanel; + + private static final String STYLENAME_TOOLBAR = "collapsablePanel-toolbar"; + + private static final String STYLENAME_HEADER_COLLAPSE_AREA = "collapsablePanel-header-collapse"; + + private static final String STYLENAME_HEADER_TEXT = "collapsablePanel-header-text"; + + private static final String STYLENAME_HEADER_IMAGE = "collapsablePanel-header-image"; + + protected CollapsablePanelHeader(CollapsablePanel collapsablePanel, Imager imager, String text, boolean hasToolbar) { + this.imager = imager; + this.hasToolbar = hasToolbar; + this.collapsablePanel = collapsablePanel; + iconImage = imager.makeImage(); + iconImage.addStyleName(STYLENAME_HEADER_IMAGE); + textLabel= new Label(text); + textLabel.addStyleName(STYLENAME_HEADER_TEXT); + + ClickableHeader clickableHeaderPanel = new ClickableHeader(collapsablePanel); + clickableHeaderPanel.setStyleName(STYLENAME_HEADER_COLLAPSE_AREA); + + add(clickableHeaderPanel); + + FlowPanel clickableInnerPanel = new FlowPanel(); + clickableHeaderPanel.setWidget(clickableInnerPanel); + + clickableInnerPanel.add(iconImage); + clickableInnerPanel.add(textLabel); + + if(hasToolbar) { + toolbarPanel = new SimplePanel(); + add(toolbarPanel); + } else { + toolbarPanel = null; + } + + collapsablePanel.addOpenHandler(this); + collapsablePanel.addCloseHandler(this); + setStyle(); + } + + protected CollapsablePanelHeader(CollapsablePanel collapsablePanel, final ImageResource openImage, + final ImageResource closedImage, String text, boolean hasToolbar) { + this(collapsablePanel, new Imager() { + public Image makeImage() { + return new Image(closedImage); + } + + public void updateImage(boolean open, Image image) { + if (open) { + image.setResource(openImage); + } else { + image.setResource(closedImage); + } + } + }, text, hasToolbar); + } + + public void setToolbar(Widget toolbar) { + if (hasToolbar && toolbarPanel != null) { + toolbarPanel.setWidget(toolbar); + toolbarPanel.setStyleName(STYLENAME_TOOLBAR); + } + } + + public final String getText() { + return textLabel.getText(); + } + + public final void onClose(CloseEvent event) { + setStyle(); + } + + public final void onOpen(OpenEvent event) { + setStyle(); + } + + public final void setText(String text) { + textLabel.setText(text); + } + + private void setStyle() { + imager.updateImage(collapsablePanel.isOpen(), iconImage); + } + + /** + * Used to wrap widgets in the header to provide click support. Effectively wraps the widget in an + * anchor to get automatic keyboard access. + */ + private final class ClickableHeader extends SimplePanel { + private final CollapsablePanel panel; + + private ClickableHeader(final CollapsablePanel panel) { + // Anchor is used to allow keyboard access. + super(DOM.createAnchor()); + this.panel = panel; + Element elem = getElement(); + DOM.setElementProperty(elem, "href", "javascript:void(0);"); + // Avoids layout problems from having blocks in inlines. + //DOM.setStyleAttribute(elem, "display", "block"); + sinkEvents(Event.ONCLICK); + } + + @Override + public void onBrowserEvent(Event event) { + // no need to call super. + switch (DOM.eventGetType(event)) { + case Event.ONCLICK: + // Prevent link default action. + DOM.eventPreventDefault(event); + panel.setOpen(!panel.isOpen()); + } + } + } + +} \ No newline at end of file