Bug 4104: Added first version with collapsable panel for tags at the right side of RaceBoard.

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

@@ -594,7 +594,9 @@ img.openColumn {
 	background-position: 5% 50%, 95% 50%
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton-Open-leaderboard {
+.gwt-SplitLayoutPanel-EastToggleButton-Open-leaderboard,
+.gwt-SplitLayoutPanel-WestToggleButton-Open-leaderboard
+ {
 	background-color: white;
 	background-image:
 		url(images/viewicons/@1x/img/SAP_RV_Leaderboard_GHOSTED.png),
@@ -604,7 +606,8 @@ img.openColumn {
 	background-position: 5px center, calc(100% - 6px) center;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton-Closed-leaderboard {
+.gwt-SplitLayoutPanel-EastToggleButton-Closed-leaderboard,
+.gwt-SplitLayoutPanel-WestToggleButton-Closed-leaderboard {
 	background-color: white;
 	background-image:
 		url(images/viewicons/@1x/img/SAP_RV_Leaderboard_INACTIVE.png),
@@ -614,6 +617,26 @@ img.openColumn {
 	background-position: 5px center, calc(100% - 6px) center;
 }
 
+.gwt-SplitLayoutPanel-WestToggleButton-Open-tags {
+	background-color: white;
+    background-image:
+        url(images/viewicons/@1x/img/SAP_RV_Map_GHOSTED.png),
+        url(images/arrows_bottom_black_small.png);
+    background-repeat: no-repeat, no-repeat;
+    background-position: 4% 50%, 96% 50%;
+    background-position: 5px center, calc(100% - 6px) center;
+}
+
+.gwt-SplitLayoutPanel-WestToggleButton-Closed-tags {
+    background-color: white;
+    background-image:
+        url(images/viewicons/@1x/img/SAP_RV_Map_INACTIVE.png),
+        url(images/arrows_top_black_small.png);
+    background-repeat: no-repeat, no-repeat;
+    background-position: 4% 50%, 96% 50%;
+    background-position: 5px center, calc(100% - 6px) center;
+}
+
 .gwt-SplitLayoutPanel-NorthSouthToggleButton-Closed-media,
 	.gwt-SplitLayoutPanel-NorthSouthToggleButton-Open-media {
 	background-color: white;

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.java

@@ -2084,4 +2084,6 @@ public interface StringMessages extends com.sap.sse.gwt.client.StringMessages,
     String manage2SailEventIdBoxTooltip();
     String manage2SailPort();
     String windFinderSpotCollectionsList();
+    
+    String tagging();
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.properties

@@ -2077,4 +2077,5 @@ gender=Gender
 manage2SailEventIdBox=Manage2Sail Event ID
 manage2SailEventURLBox=Manage2Sail EventURL (json)
 manage2SailEventIdBoxTooltip=Event ID or a URL that contains the event ID from Manage2Sail
-manage2SailPort=Port
+manage2SailPort=Port
+tagging=Tags

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

@@ -145,7 +145,9 @@ public class RaceBoardPanel
     private MediaPlayerManagerComponent mediaPlayerManagerComponent;
     private EditMarkPassingsPanel editMarkPassingPanel;
     private EditMarkPositionPanel editMarkPositionPanel;
-
+    
+    private final TaggingPanel taggingPanel;
+    
     private final DockLayoutPanel dockPanel;
     private final ResizableFlowPanel timePanelWrapper;
     private final static int TIMEPANEL_COLLAPSED_HEIGHT = 67;
@@ -154,7 +156,7 @@ public class RaceBoardPanel
     /**
      * The component viewer
      */
-    private SideBySideComponentViewer leaderboardAndMapViewer;
+    private SideBySideComponentViewer mapViewer;
 
     private final AsyncActionsExecutor asyncActionsExecutor;
     
@@ -249,7 +251,8 @@ public class RaceBoardPanel
                     @Override
                     public void execute() {
                         // Show/hide the leaderboard panels toggle button text based on the race map height
-                        leaderboardAndMapViewer.setLeftComponentToggleButtonTextVisibilityAndDraggerPosition(raceMap.getOffsetHeight() > 400);
+                        mapViewer.setLeftComponentToggleButtonTextVisibilityAndDraggerPosition(raceMap.getOffsetHeight() > 400);
+                        mapViewer.setRightComponentToggleButtonTextVisibilityAndDraggerPosition(raceMap.getOffsetHeight() > 400);
                     }
                 });
             }
@@ -297,7 +300,13 @@ public class RaceBoardPanel
         raceMap.getRightHeaderPanel().add(regattaAndRaceTimeInformationHeader);
         raceMap.getRightHeaderPanel().add(userManagementMenuView);
         addChildComponent(raceMap);
-
+        
+        // add panel for tagging functionality, hidden by default
+        taggingPanel = new TaggingPanel(new Label("Hello World!"), stringMessages, parent, componentContext);
+        addChildComponent(taggingPanel);
+        taggingPanel.setVisible(true);
+        taggingPanel.setVisible(false);
+        
         // Determine if the screen is large enough to initially display the leaderboard panel on the left side of the
         // map based on the initial screen width. Afterwards, the leaderboard panel visibility can be toggled as usual.
         boolean isScreenLargeEnoughToInitiallyDisplayLeaderboard = Document.get().getClientWidth() >= 1024;
@@ -315,6 +324,7 @@ public class RaceBoardPanel
                 isScreenLargeEnoughToInitiallyDisplayLeaderboard,
                 raceMap, userService, showChartMarkEditMediaButtonsAndVideo); // initializes the raceMap field
         leaderboardPanel.addLeaderboardUpdateListener(this);
+        
         // in case the URL configuration contains the name of a competitors filter set we try to activate it
         // FIXME the competitorsFilterSets has now moved to CompetitorSearchTextBox (which should probably be renamed); pass on the parameters to the LeaderboardPanel and see what it does with it
         if (getPerspectiveSettings().getActiveCompetitorsFilterSetName() != null) {
@@ -418,7 +428,7 @@ public class RaceBoardPanel
         mediaPlayerManagerComponent = new MediaPlayerManagerComponent(this, getComponentContext(), mediaPlayerLifecycle,
                 selectedRaceIdentifier, raceTimesInfoProvider, timer, mediaService, userService, stringMessages,
                 errorReporter, userAgent, this, mediaPlayerSettings);
-        leaderboardAndMapViewer = new SideBySideComponentViewer(leaderboardPanel, raceMap, mediaPlayerManagerComponent,
+        mapViewer = new SideBySideComponentViewer(leaderboardPanel, raceMap, taggingPanel, mediaPlayerManagerComponent,
                 componentsForSideBySideViewer, stringMessages, userService, editMarkPassingPanel, editMarkPositionPanel, maneuverTablePanel);
         
         mediaPlayerManagerComponent.addPlayerChangeListener(new PlayerChangeListener() {
@@ -433,7 +443,7 @@ public class RaceBoardPanel
             addChildComponent(component);
         }
         this.setupUserManagementControlPanel(userService);
-        mainPanel.add(leaderboardAndMapViewer.getViewerWidget());
+        mainPanel.add(mapViewer.getViewerWidget());
         boolean showLeaderboard = getPerspectiveSettings().isShowLeaderboard() && isScreenLargeEnoughToInitiallyDisplayLeaderboard;
         setLeaderboardVisible(showLeaderboard);
         if (showChartMarkEditMediaButtonsAndVideo) {
@@ -546,7 +556,19 @@ public class RaceBoardPanel
      * @param visible <code>true</code> if the leaderboard shall be open/visible
      */
     public void setLeaderboardVisible(boolean visible) {
-        setComponentVisible(leaderboardAndMapViewer, leaderboardPanel, visible);
+        setComponentVisible(mapViewer, leaderboardPanel, visible);
+    }
+    
+    /**
+     * Sets the collapsable panel for the tagging open or close, if in <code>CASCADE</code> view mode.<br />
+     * Displays or hides the tagging panel, if in <code>ONESCREEN</code> view mode.<br /><br />
+     * 
+     * The race board should be completely rendered before this method is called, or a few exceptions could be thrown.
+     * 
+     * @param visible <code>true</code> if the leaderboard shall be open/visible
+     */
+    public void setTaggingPanelVisible(boolean visible) {
+        setComponentVisible(mapViewer, taggingPanel, visible);
     }
 
     /**
@@ -558,11 +580,11 @@ public class RaceBoardPanel
      * @param visible <code>true</code> if the wind chart shall be open/visible
      */
     public void setWindChartVisible(boolean visible) {
-        setComponentVisible(leaderboardAndMapViewer, windChart, visible);
+        setComponentVisible(mapViewer, windChart, visible);
     }
     
     public void showInWindChart(WindSource windprovider) {
-        setComponentVisible(leaderboardAndMapViewer, windChart, true);
+        setComponentVisible(mapViewer, windChart, true);
         windChart.showProvider(windprovider);
     }
 
@@ -575,7 +597,7 @@ public class RaceBoardPanel
      * @param visible <code>true</code> if the competitor chart shall be open/visible
      */
     public void setCompetitorChartVisible(boolean visible) {
-        setComponentVisible(leaderboardAndMapViewer, competitorChart, visible);
+        setComponentVisible(mapViewer, competitorChart, visible);
     }
     
     protected SailingServiceAsync getSailingService() {

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

@@ -47,6 +47,7 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
 
     private static final int DEFAULT_SOUTH_SPLIT_PANEL_HEIGHT = 200;
     private final int MIN_LEADERBOARD_WIDTH = Math.min(432, Window.getClientWidth() - 40); // fallback value "432" works well for 505 and ESS
+    private final int MIN_TAGGING_WIDTH = Math.min(300, Window.getClientWidth() - 40);
 
     /**
      * Absolute Panel that informs its children about a resize
@@ -63,9 +64,11 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
     }
 
     private Component<?> leftComponent;
+    private final Component<?> centerComponent;
     private final Component<?> rightComponent;
     private final List<Component<?>> components;
     private final ScrollPanel leftScrollPanel;
+    private final ScrollPanel rightScrollPanel;
     private final StringMessages stringMessages;
     private final Button mediaSelectionButton;
     private final Button mediaManagementButton;
@@ -77,13 +80,15 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
 
     private TouchSplitLayoutPanel splitLayoutPanel;
 
-    public SideBySideComponentViewer(final Component<?> leftComponentP, final Component<?> rightComponentP,
-            final MediaPlayerManagerComponent mediaPlayerManagerComponent, List<Component<?>> components,
-            final StringMessages stringMessages, UserService userService, EditMarkPassingsPanel markPassingsPanel,
-            EditMarkPositionPanel markPositionPanel, ManeuverTablePanel maneuverTablePanel) {
+    public SideBySideComponentViewer(final Component<?> leftComponentP, final Component<?> centerComponentP,
+            final Component<?> rightComponentP, final MediaPlayerManagerComponent mediaPlayerManagerComponent,
+            List<Component<?>> components, final StringMessages stringMessages, UserService userService,
+            EditMarkPassingsPanel markPassingsPanel, EditMarkPositionPanel markPositionPanel,
+            ManeuverTablePanel maneuverTablePanel) {
         this.mediaPlayerManagerComponent = mediaPlayerManagerComponent;
         this.stringMessages = stringMessages;
         this.leftComponent = leftComponentP;
+        this.centerComponent = centerComponentP;
         this.rightComponent = rightComponentP;
         this.components = components;
         this.mediaSelectionButton = createMediaSelectionButton(mediaPlayerManagerComponent);
@@ -130,6 +135,9 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
         this.leftScrollPanel = new ScrollPanel();
         this.leftScrollPanel.add(leftComponentP.getEntryWidget());
         this.leftScrollPanel.setTitle(leftComponentP.getEntryWidget().getTitle());
+        this.rightScrollPanel = new ScrollPanel();
+        this.rightScrollPanel.add(rightComponentP.getEntryWidget());
+        this.rightScrollPanel.setTitle(rightComponentP.getEntryWidget().getTitle());
         this.mainPanel = new LayoutPanel();
         this.mainPanel.setSize("100%", "100%");
         this.mainPanel.getElement().getStyle().setMarginTop(-12, Unit.PX);
@@ -142,11 +150,14 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
 
         // initialize the leaderboard component
         splitLayoutPanel.insert(leftScrollPanel, leftComponent, Direction.WEST, MIN_LEADERBOARD_WIDTH);
+        
+        // initialize the tagging component
+        splitLayoutPanel.insert(rightScrollPanel, rightComponent, Direction.EAST, MIN_TAGGING_WIDTH);
 
         // create a panel that will contain the horizontal toggle buttons
         ResizableAbsolutePanel panelForMapAndHorizontalToggleButtons = new ResizableAbsolutePanel();
-        panelForMapAndHorizontalToggleButtons.add(rightComponent.getEntryWidget());
-        splitLayoutPanel.insert(panelForMapAndHorizontalToggleButtons, rightComponent, Direction.CENTER, 0);
+        panelForMapAndHorizontalToggleButtons.add(centerComponent.getEntryWidget());
+        splitLayoutPanel.insert(panelForMapAndHorizontalToggleButtons, centerComponent, Direction.CENTER, 0);
 
         // add additional toggle buttons panel that currently only contains the video button
         List<Pair<Button, String>> additionalVerticalButtons = new ArrayList<Pair<Button, String>>();
@@ -239,16 +250,28 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
      * itself when it is not visible.
      */
     public void forceLayout() {
-        if (!leftComponent.isVisible() && rightComponent.isVisible()) {
+        if (!leftComponent.isVisible() && centerComponent.isVisible()) {
             // the leaderboard is not visible, but the map is
             if (isWidgetInSplitPanel(leftScrollPanel)) {
                 splitLayoutPanel.setWidgetVisibility(leftScrollPanel, leftComponent, /* hidden */true,
                         MIN_LEADERBOARD_WIDTH);
             }
-        } else if (leftComponent.isVisible() && rightComponent.isVisible()) {
+        } else if (leftComponent.isVisible() && centerComponent.isVisible()) {
             // the leaderboard and the map are visible
             splitLayoutPanel.setWidgetVisibility(leftScrollPanel, leftComponent, /* hidden */false, MIN_LEADERBOARD_WIDTH);
-        } else if (!leftComponent.isVisible() && !rightComponent.isVisible()) {
+        } else if (!leftComponent.isVisible() && !centerComponent.isVisible()) {
+        }
+        
+        if (!rightComponent.isVisible() && centerComponent.isVisible()) {
+            // the tagging is not visible, but the map is
+            if (isWidgetInSplitPanel(rightScrollPanel)) {
+                splitLayoutPanel.setWidgetVisibility(rightScrollPanel, rightComponent, /* hidden */true,
+                        MIN_TAGGING_WIDTH);
+            }
+        } else if (rightComponent.isVisible() && centerComponent.isVisible()) {
+            // the leaderboard and the map are visible
+            splitLayoutPanel.setWidgetVisibility(rightScrollPanel, rightComponent, /* hidden */false, MIN_TAGGING_WIDTH);
+        } else if (!rightComponent.isVisible() && !centerComponent.isVisible()) {
         }
 
         for (Component<?> component : components) {
@@ -331,6 +354,25 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
         }
     }
     
+    /**
+     * Shows/hides the text on right components toggle button by modifying CSS <code>font-size</code> property and adjust
+     * the dragger position by modifying CSS <code>margin-top</code> property. 
+     * 
+     * @param visible
+     *            <code>true</code> to show the button text, <code>false</code> to hide it
+     */
+    void setRightComponentToggleButtonTextVisibilityAndDraggerPosition(final boolean visible) {
+        Splitter rightScrollPanelSplitter = splitLayoutPanel.getAssociatedSplitter(rightScrollPanel);
+        if (rightScrollPanelSplitter != null) {
+            Style toggleButtonStyle = rightScrollPanelSplitter.getToggleButton().getElement().getStyle();
+            if (visible) toggleButtonStyle.clearFontSize();
+            else toggleButtonStyle.setFontSize(0, Unit.PX);
+            Style drapperStyle = rightScrollPanelSplitter.getDragger().getElement().getStyle();
+            if (visible) drapperStyle.clearMarginTop();
+            else drapperStyle.setMarginTop(-25, Unit.PX);
+        }
+    }
+    
     public void setLeftComponentToggleButtonVisible(boolean visible) {
         Splitter leftScrollPanelSplitter = splitLayoutPanel.getAssociatedSplitter(leftScrollPanel);
         if (leftScrollPanelSplitter != null) {
@@ -338,7 +380,18 @@ public class SideBySideComponentViewer implements UserStatusEventHandler {
         }
     }
     
+    public void setRightComponentToggleButtonVisible(boolean visible) {
+        Splitter rightScrollPanelSplitter = splitLayoutPanel.getAssociatedSplitter(rightScrollPanel);
+        if (rightScrollPanelSplitter != null) {
+            rightScrollPanelSplitter.getToggleButton().setVisible(visible);
+        }
+    }
+    
     public ScrollPanel getLeftScrollPanel() {
         return leftScrollPanel;
     }
+    
+    public ScrollPanel getRightScrollPanel() {
+        return rightScrollPanel;
+    }
 }

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

@@ -0,0 +1,54 @@
+package com.sap.sailing.gwt.ui.raceboard;
+
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.ui.client.StringMessages;
+import com.sap.sse.gwt.client.shared.components.Component;
+import com.sap.sse.gwt.client.shared.components.ComponentWithoutSettings;
+import com.sap.sse.gwt.client.shared.settings.ComponentContext;
+
+public class TaggingPanel extends ComponentWithoutSettings {
+    
+    private final Widget widget;
+    private final StringMessages stringMessages;
+    
+    public TaggingPanel(Widget widget, StringMessages stringMessages, Component<?> parent, ComponentContext<?> context) {
+        super(parent, context);
+        this.widget = widget;
+        this.stringMessages = stringMessages;
+        
+        widget.setTitle(stringMessages.tagging());
+        widget.getElement().getStyle().setMargin(6, Unit.PX);
+        widget.getElement().getStyle().setMarginTop(10, Unit.PX);
+    }
+
+    @Override
+    public String getId() {
+        return "TaggingPanel";
+    }
+
+    @Override
+    public String getLocalizedShortName() {
+        return stringMessages.tagging();
+    }
+
+    @Override
+    public Widget getEntryWidget() {
+        return widget;
+    }
+
+    @Override
+    public boolean isVisible() {
+        return widget.isVisible();
+    }
+
+    @Override
+    public void setVisible(boolean visibility) {
+        widget.setVisible(visibility);
+    }
+
+    @Override
+    public String getDependentCssClassName() {
+        return "tags";
+    }
+}

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

@@ -79,6 +79,7 @@ import com.sap.sse.gwt.client.shared.components.Component;
  * <ul class='css'>
  * <li>.gwt-SplitLayoutPanel { the panel itself }</li>
  * <li>.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger }</li>
+ * <li>.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger-Inverted { horizontal dragger }</li>
  * <li>.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger }</li>
  * </ul>
  * 
@@ -394,7 +395,11 @@ public class TouchSplitLayoutPanel extends DockLayoutPanel {
             super(target, associatedComponent, reverse);
             addStyleName("SplitLayoutPanel-Divider-Horizontal");
             getDragger().getElement().getStyle().setPropertyPx("width", horizontalSplitterSize);
-            getDragger().setStyleName("gwt-SplitLayoutPanel-HDragger");
+            if(!reverse) {                
+                getDragger().setStyleName("gwt-SplitLayoutPanel-HDragger");
+            } else {
+                getDragger().setStyleName("gwt-SplitLayoutPanel-HDragger-Inverted");
+            }
         }
 
         @Override
@@ -598,7 +603,8 @@ public class TouchSplitLayoutPanel extends DockLayoutPanel {
         HSplitter lastHorizontalSplitter = null;
         VSplitter lastVerticalSplitter = null;
         List<Splitter> allVerticalSplitters = new ArrayList<TouchSplitLayoutPanel.Splitter>();
-        List<Splitter> allHorizontalSplitters = new ArrayList<TouchSplitLayoutPanel.Splitter>();
+        List<Splitter> horizontalEastSplitters = new ArrayList<TouchSplitLayoutPanel.Splitter>();
+        List<Splitter> horizontalWestSplitters = new ArrayList<TouchSplitLayoutPanel.Splitter>();
         for (Widget widget : splitterChildren) {
             if (widget instanceof VSplitter) {
                 allVerticalSplitters.add((VSplitter) widget);
@@ -607,7 +613,12 @@ public class TouchSplitLayoutPanel extends DockLayoutPanel {
                 lastVerticalSplitter = (VSplitter)widget;
             } else if (widget instanceof HSplitter) {
                 lastHorizontalSplitter = (HSplitter) widget;
-                allHorizontalSplitters.add((HSplitter) widget);
+                LayoutData layoutData = (LayoutData) widget.getLayoutData();
+                if(layoutData.direction == Direction.EAST) {
+                    horizontalEastSplitters.add((HSplitter) widget);
+                } else if(layoutData.direction == Direction.WEST) {
+                    horizontalWestSplitters.add((HSplitter) widget);
+                }
             }
         }
         if (lastVerticalSplitter != null) {
@@ -620,9 +631,16 @@ public class TouchSplitLayoutPanel extends DockLayoutPanel {
         }
         ensureVerticalToggleButtonPosition();
         if (lastHorizontalSplitter != null) {
-            Panel horizontalButtonsPanel = createToggleButtonPanel(allHorizontalSplitters,
-                    "gwt-SplitLayoutPanel-EastToggleButton-Panel", "gwt-SplitLayoutPanel-EastToggleButton", cm, /* additional buttons and styles */ null);
-            panelForHorizontalButtons.add(horizontalButtonsPanel);
+            if(horizontalEastSplitters.size() > 0) {
+                Panel horizontalButtonsPanel = createToggleButtonPanel(horizontalEastSplitters,
+                        "gwt-SplitLayoutPanel-WestToggleButton-Panel", "gwt-SplitLayoutPanel-WestToggleButton", cm, /* additional buttons and styles */ null);                
+                panelForHorizontalButtons.add(horizontalButtonsPanel);
+            }
+            if(horizontalWestSplitters.size() > 0) {
+                Panel horizontalButtonsPanel = createToggleButtonPanel(horizontalWestSplitters,
+                        "gwt-SplitLayoutPanel-EastToggleButton-Panel", "gwt-SplitLayoutPanel-EastToggleButton", cm, /* additional buttons and styles */ null);                
+                panelForHorizontalButtons.add(horizontalButtonsPanel);
+            }
             lastHorizontalSplitter.setVisible(false);
             lastHorizontalSplitter.setDraggerVisible(false);
         }

java/com.sap.sse.gwt/src/com/sap/sse/gwt/resources/css/CommonControls.css

@@ -167,49 +167,83 @@ body ::-webkit-scrollbar-track {
 	top: 3px;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton-Panel {
+.gwt-SplitLayoutPanel-EastToggleButton-Panel,
+.gwt-SplitLayoutPanel-WestToggleButton-Panel {
 	position: absolute;
 	bottom: -10px;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton {
-	height: 40px;
-	background-color: white;
-	border: none;
-	-webkit-transform: rotate(-90deg);
-	-moz-transform: rotate(-90deg);
-	-o-transform: rotate(-90deg);
-	-ms-transform: rotate(-90deg);
-	transform: rotate(-90deg);
-	-webkit-transform-origin: 0 0;
-	-moz-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	-ms-transform-origin: 0 0;
-	transform-origin: 0 0;
-	padding-right: 25px;
-	padding-left: 30px;
-	border-bottom: 1px solid #cecece;
-	border-right: 1px solid #cecece;
-	border-left: 1px solid #cecece;
-	border-bottom-right-radius: 10px;
-	border-bottom-left-radius: 10px;
+.gwt-SplitLayoutPanel-WestToggleButton-Panel {
+	right: 0;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton-Open {
+.gwt-SplitLayoutPanel-EastToggleButton,
+.gwt-SplitLayoutPanel-WestToggleButton {
+	height: 40px;
+    background-color: white;
+    border: none;
+    border-right: 1px solid #cecece;
+    border-left: 1px solid #cecece;
+}
+
+.gwt-SplitLayoutPanel-EastToggleButton {
+	-webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    border-bottom: 1px solid #cecece;
+	border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+	padding-right: 25px;
+	padding-left: 30px;
+}
+
+.gwt-SplitLayoutPanel-WestToggleButton {
+	position: absolute;
+	right: -1px;
+	bottom: 0;
+	-webkit-transform-origin: 100% 0;
+    -moz-transform-origin: 100% 0;
+    -o-transform-origin: 100% 0;
+    -ms-transform-origin: 100% 0;
+    transform-origin: 100% 0;
+    -webkit-transform: rotate(-90deg) translate(100%, -100%);
+    -moz-transform: rotate(-90deg) translate(100%, -100%);
+    -o-transform: rotate(-90deg) translate(100%, -100%);
+    -ms-transform: rotate(-90deg) translate(100%, -100%);
+    transform: rotate(-90deg) translate(100%, -100%);
+    border-top: 1px solid #cecece;
+	border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    padding-right: 25px;
+    padding-left: 30px;
+}
+
+.gwt-SplitLayoutPanel-EastToggleButton-Open,
+.gwt-SplitLayoutPanel-WestToggleButton-Closed {
 	background: white url(images/arrows_top_black_small.png) 96% 50%
 		no-repeat;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton-Closed {
+.gwt-SplitLayoutPanel-EastToggleButton-Closed,
+.gwt-SplitLayoutPanel-WestToggleButton-Open {
 	background: white url(images/arrows_bottom_black_small.png) 96% 50%
 		no-repeat;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton:hover {
+.gwt-SplitLayoutPanel-EastToggleButton:hover,
+.gwt-SplitLayoutPanel-WestToggleButton:hover {
 	background-color: #ececec;
 }
 
-.gwt-SplitLayoutPanel-EastToggleButton:focus {
+.gwt-SplitLayoutPanel-EastToggleButton:focus,
+.gwt-SplitLayoutPanel-WestToggleButton:focus {
 	outline: 0 !important;
 }
 
@@ -244,19 +278,32 @@ body ::-webkit-scrollbar-track {
 	background-color: #ececec;
 }
 
-.gwt-SplitLayoutPanel-HDragger {
+.gwt-SplitLayoutPanel-HDragger,
+.gwt-SplitLayoutPanel-HDragger-Inverted {
 	position: absolute;
-	height: 60px !important;
-	width: 25px !important;
-	margin-left: 3px;
-	top: 40% !important;
-	background: #ffffff url(images/thumb_vertical.png) 70% 50% no-repeat;
-	border: 2px solid #cecece;
-	border-left: 0px;
-	cursor: col-resize;
+    height: 60px !important;
+    width: 25px !important;
+    margin-left: 3px;
+    top: 40% !important;
+    background: #ffffff url(images/thumb_vertical.png) 70% 50% no-repeat;
+    background-position: center;
+    border: 2px solid #cecece;
+    cursor: col-resize;
+    z-index: 1;
+}
+
+.gwt-SplitLayoutPanel-HDragger {
 	border-top-right-radius: 25px;
 	border-bottom-right-radius: 25px;
-	z-index: 1;
+	border-left: 0;
+}
+
+.gwt-SplitLayoutPanel-HDragger-Inverted {
+    border-top-left-radius: 25px;
+    border-bottom-left-radius: 25px;
+    border-right: 0;
+    /* margin-left needs to be (-1) * width */
+    margin-left: -25px;
 }
 
 .SplitLayoutPanel-Divider-Horizontal {