Settings and close buttons are now in place, settings button still to be activated

java/com.sap.sailing.gwt.ui/CommonControls.css

@@ -218,6 +218,19 @@ body ::-webkit-scrollbar-track {
     text-align: center;
 }
 
+.gwt-SplitLayoutPanel-CloseButton {
+	position: absolute;
+	left: 90%;
+	margin-left: 10px;
+	z-index: 200;
+}
+
+.gwt-SplitLayoutPanel-SettingsButton {
+	position: absolute;
+	left: 85%;
+	z-index: 200;
+}
+
 .gwt-ToggleButton-up-hovering, .gwt-ToggleButton-down-hovering {
   background: url(images/btn-cta-orangeleft-down.png) center top repeat-x;
   color: #fff;

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/SideBySideComponentViewer.java

@@ -1,13 +1,16 @@
 package com.sap.sailing.gwt.ui.raceboard;
 
 import java.util.Date;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.ui.AbsolutePanel;
 import com.google.gwt.user.client.ui.Button;
 import com.google.gwt.user.client.ui.DockLayoutPanel.Direction;
+import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.LayoutPanel;
 import com.google.gwt.user.client.ui.Panel;
 import com.google.gwt.user.client.ui.ScrollPanel;
@@ -19,31 +22,85 @@ import com.sap.sse.gwt.client.player.TimeListener;
 
 public class SideBySideComponentViewer implements ComponentViewer {
     
+    abstract class PanelWithCloseAndSettingsButton extends AbsolutePanel {
+        final Widget containedPanel;
+        public PanelWithCloseAndSettingsButton(Widget containedPanel) {
+            this.containedPanel = containedPanel;
+            HorizontalPanel panelForCloseAndSettingsButton = new HorizontalPanel();
+            Button closeButton = new Button("X");
+            closeButton.setStyleName("gwt-SplitLayoutPanel-CloseButton");
+            closeButton.addStyleName("gwt-Button");
+            closeButton.addClickHandler(new ClickHandler() {
+                @Override
+                public void onClick(ClickEvent event) {
+                    closeClicked();
+                }
+            });
+            panelForCloseAndSettingsButton.add(closeButton);
+            Button settingsButton = new Button("S");
+            settingsButton.setStyleName("gwt-SplitLayoutPanel-SettingsButton");
+            settingsButton.addStyleName("gwt-Button");
+            settingsButton.addClickHandler(new ClickHandler() {
+                @Override
+                public void onClick(ClickEvent event) {
+                    settingsClicked();
+                }
+            });
+            panelForCloseAndSettingsButton.add(settingsButton);
+            add(panelForCloseAndSettingsButton);
+            add(this.containedPanel);
+            setTitle(this.containedPanel.getTitle());
+            setVisible(this.containedPanel.isVisible());
+        }
+        
+        public abstract void closeClicked();
+        public abstract void settingsClicked();
+    }
+    
     /** there is no easy replacement for the HorizontalSplitPanel available */ 
     private final Component<?> leftComponent;
     private final Component<?> rightComponent;
     private final List<Component<?>> components;
-    private final ScrollPanel leftScrollPanel;
+    private final Map<Component<?>, Panel> componentPanels;
+    private final Panel leftPanel;
     
     private LayoutPanel mainPanel;
     
     private TouchSplitLayoutPanelWithBetterDraggers splitLayoutPanel; 
     private int savedSplitPosition = -1;
     
-    public SideBySideComponentViewer(Component<?> leftComponent, Component<?> rightComponent, List<Component<?>> components) {
-        this.leftComponent = leftComponent;
-        this.rightComponent = rightComponent;
+    public SideBySideComponentViewer(Component<?> leftComponentP, Component<?> rightComponentP, List<Component<?>> components) {
+        this.leftComponent = leftComponentP;
+        this.rightComponent = rightComponentP;
         this.components = components;
-        leftScrollPanel = new ScrollPanel();
-        leftScrollPanel.add(leftComponent.getEntryWidget());
-        leftScrollPanel.setTitle(leftComponent.getEntryWidget().getTitle());
+        this.componentPanels = new HashMap<Component<?>, Panel>();
+        ScrollPanel leftScrollPanel = new ScrollPanel();
+        leftScrollPanel.add(leftComponentP.getEntryWidget());
+        leftScrollPanel.setTitle(leftComponentP.getEntryWidget().getTitle());
         mainPanel = new LayoutPanel();
         mainPanel.setSize("100%", "100%");
         splitLayoutPanel = new TouchSplitLayoutPanelWithBetterDraggers(/* splitter width */ 3);
         mainPanel.add(splitLayoutPanel);
-        savedSplitPosition = 500;
-        splitLayoutPanel.insert(leftScrollPanel, leftComponent, Direction.WEST, savedSplitPosition, null);
         
+        // add a panel for close and settings buttons in leaderboard
+        leftPanel = new PanelWithCloseAndSettingsButton(leftScrollPanel) {
+            @Override
+            public void closeClicked() {
+            }
+            @Override
+            public void settingsClicked() {
+                splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(this, leftComponent, true, 500);
+            }
+        };
+        
+        savedSplitPosition = 500;
+        splitLayoutPanel.insert(leftPanel, leftComponentP, Direction.WEST, savedSplitPosition, null);
+
+        initializeComponents();
+    }
+    
+    private void initializeComponents() {
+        // add a panel for split pane toggle buttons
         AbsolutePanel absoluteMapAndToggleButtonsPanel = new AbsolutePanel();
         VerticalPanel panelForTogglingLayoutPanelComponents = new VerticalPanel();
         panelForTogglingLayoutPanelComponents.setStyleName("gwt-SplitLayoutPanel-NorthSouthToggleButton-Panel");
@@ -51,22 +108,32 @@ public class SideBySideComponentViewer implements ComponentViewer {
         absoluteMapAndToggleButtonsPanel.add(panelForTogglingLayoutPanelComponents);
 
         for (final Component<?> component : components) {
-            // adding components regardless of their visibility as we want to control visibility
-            // in the layout panel
-            splitLayoutPanel.insert(component.getEntryWidget(), component, Direction.SOUTH, 200, null);
-            Button togglerButton = new Button(component.getEntryWidget().getTitle());
+            final Button togglerButton = new Button(component.getEntryWidget().getTitle());
             togglerButton.addClickHandler(new ClickHandler() {
               @Override
               public void onClick(ClickEvent event) {
-                  splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(component.getEntryWidget(), component, component.isVisible(), 200);
+                  component.setVisible(!component.isVisible());
                   forceLayout();
                   if (component.isVisible() && component instanceof TimeListener) {
                       ((TimeListener)component).timeChanged(new Date(), null);
                   }
+                  togglerButton.setVisible(false);
               }
             });
             togglerButton.setStyleName("gwt-SplitLayoutPanel-NorthSouthToggleButton");
             panelForTogglingLayoutPanelComponents.add(togglerButton);
+            final Panel componentPanel = new PanelWithCloseAndSettingsButton(component.getEntryWidget()) {
+                @Override
+                public void settingsClicked() {
+                }
+                @Override
+                public void closeClicked() {
+                    splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(this, component, true, 200);
+                    togglerButton.setVisible(true);
+                }
+            };
+            componentPanels.put(component, componentPanel);
+            splitLayoutPanel.insert(componentPanel, component, Direction.SOUTH, 200, null);
         }
         splitLayoutPanel.insert(absoluteMapAndToggleButtonsPanel, rightComponent, Direction.CENTER, 0, null);
     }
@@ -79,21 +146,18 @@ public class SideBySideComponentViewer implements ComponentViewer {
             }
         } else if (!leftComponent.isVisible() && rightComponent.isVisible()) {
             // the leaderboard is not visible, but the map is
-            if (isWidgetInSplitPanel(leftScrollPanel)) {
-                splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(leftScrollPanel, leftComponent, /*hidden*/true, savedSplitPosition);
+            if (isWidgetInSplitPanel(leftPanel)) {
+                splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(leftPanel, leftComponent, /*hidden*/true, savedSplitPosition);
             }
         } else if (leftComponent.isVisible() && rightComponent.isVisible()) {
             // the leaderboard and the map are visible
-            splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(leftScrollPanel, leftComponent, /*hidden*/false, savedSplitPosition);
+            splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(leftPanel, leftComponent, /*hidden*/false, savedSplitPosition);
         } else if (!leftComponent.isVisible() && !rightComponent.isVisible()) {
         }
 
         for (Component<?> component : components) {
-            boolean isComponentInSplitPanel = isWidgetInSplitPanel(component.getEntryWidget());
-            if (isComponentInSplitPanel) {
-                boolean isComponentVisible = component.isVisible();
-                splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(component.getEntryWidget(), component, !isComponentVisible, 200);
-            }
+            final boolean isComponentVisible = component.isVisible();
+            splitLayoutPanel.setWidgetVisibilityAndPossiblyShowSplitter(componentPanels.get(component), component, !isComponentVisible, 200);
         }
         splitLayoutPanel.forceLayout();
     }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TouchSplitLayoutPanelWithBetterDraggers.java

@@ -20,6 +20,7 @@ import java.util.HashMap;
 import java.util.List;
 
 import com.google.gwt.core.client.Duration;
+import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JsArray;
 import com.google.gwt.core.client.Scheduler;
 import com.google.gwt.core.client.Scheduler.ScheduledCommand;
@@ -83,6 +84,7 @@ public class TouchSplitLayoutPanelWithBetterDraggers extends DockLayoutPanel {
 
     private boolean toggleDisplayAllowed = false;
     private double lastClick = 0;
+    private double lastTouchEnd = 0;
     
     private final Component<?> associatedComponent;
     protected Button togglerButton;
@@ -105,6 +107,7 @@ public class TouchSplitLayoutPanelWithBetterDraggers extends DockLayoutPanel {
 
     @Override
     public void onBrowserEvent(Event event) {
+      GWT.log(event.getType());
       switch (event.getTypeInt()) {
         case Event.ONCLICK:
             if (supportsClick()) {
@@ -113,7 +116,10 @@ public class TouchSplitLayoutPanelWithBetterDraggers extends DockLayoutPanel {
                   // Restore the old size.
                   setWidgetVisibilityAndPossiblyShowSplitter(target, getAssociatedComponent(), /*hidden*/false, (int)layoutData.oldSize);
                 } else {
-                  setWidgetVisibilityAndPossiblyShowSplitter(target, getAssociatedComponent(), /*hidden*/true, (int)layoutData.oldSize);
+                    double now = Duration.currentTimeMillis();
+                    if (now - this.lastTouchEnd > DOUBLE_CLICK_TIMEOUT) {
+                        setWidgetVisibilityAndPossiblyShowSplitter(target, getAssociatedComponent(), /*hidden*/true, (int)layoutData.oldSize);
+                    }
                 }
                 event.preventDefault();
             }
@@ -168,6 +174,7 @@ public class TouchSplitLayoutPanelWithBetterDraggers extends DockLayoutPanel {
             this.lastClick = now;
           }
 
+          this.lastTouchEnd = Duration.currentTimeMillis();
           Event.releaseCapture(getElement());
           event.preventDefault();
           break;
@@ -503,17 +510,17 @@ public class TouchSplitLayoutPanelWithBetterDraggers extends DockLayoutPanel {
           LayoutData layoutData = (LayoutData) widget.getLayoutData();
           if (hidden) {
               layoutData.oldSize = size;
-              splitter.setAssociatedWidgetSize(0);
               widget.setVisible(false);
               if (associatedComponentToWidget != null) {
                   associatedComponentToWidget.setVisible(false);
               }
+              splitter.setAssociatedWidgetSize(0);
           } else {
-              splitter.setAssociatedWidgetSize(size);
               widget.setVisible(true);
               if (associatedComponentToWidget != null) {
                   associatedComponentToWidget.setVisible(true);
               }
+              splitter.setAssociatedWidgetSize(size);
           }
           if (splitter instanceof VSplitter) {
               splitter.setVisible(!hidden);