From f9e76bcd71cd29048b7c4e76e1f3ff514f18ca5c Mon Sep 17 00:00:00 2001 From: Henri Kohlberg Date: Mon, 9 Jul 2018 17:07:08 +0200 Subject: [PATCH] Bug 4104: Added first version with collapsable panel for tags at the right side of RaceBoard. --- java/com.sap.sailing.gwt.ui/RaceBoard.css | 27 +++- .../sailing/gwt/ui/client/StringMessages.java | 2 + .../gwt/ui/client/StringMessages.properties | 3 +- .../gwt/ui/raceboard/RaceBoardPanel.java | 42 +++++-- .../raceboard/SideBySideComponentViewer.java | 71 +++++++++-- .../gwt/ui/raceboard/TaggingPanel.java | 54 ++++++++ .../ui/raceboard/TouchSplitLayoutPanel.java | 30 ++++- .../sse/gwt/resources/css/CommonControls.css | 119 ++++++++++++------ 8 files changed, 284 insertions(+), 64 deletions(-) create mode 100644 java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TaggingPanel.java diff --git a/java/com.sap.sailing.gwt.ui/RaceBoard.css b/java/com.sap.sailing.gwt.ui/RaceBoard.css index 38eecd7a2b7..7ee5fde83db 100755 --- a/java/com.sap.sailing.gwt.ui/RaceBoard.css +++ b/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; diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.java index 109d2206aa9..bb4a27c499f 100755 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.java +++ b/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(); } diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.properties b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.properties index 2f5df3eabda..1198f0ea8c5 100755 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.properties +++ b/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 \ No newline at end of file +manage2SailPort=Port +tagging=Tags \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/RaceBoardPanel.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/RaceBoardPanel.java index 8cd5dd24f94..f14ec7a6a5f 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/RaceBoardPanel.java +++ b/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 true 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 CASCADE view mode.
+ * Displays or hides the tagging panel, if in ONESCREEN view mode.

+ * + * The race board should be completely rendered before this method is called, or a few exceptions could be thrown. + * + * @param visible true 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 true 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 true if the competitor chart shall be open/visible */ public void setCompetitorChartVisible(boolean visible) { - setComponentVisible(leaderboardAndMapViewer, competitorChart, visible); + setComponentVisible(mapViewer, competitorChart, visible); } protected SailingServiceAsync getSailingService() { diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/SideBySideComponentViewer.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/SideBySideComponentViewer.java index 4872431ba0d..f1977626c1f 100755 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/SideBySideComponentViewer.java +++ b/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> 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> 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> 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> additionalVerticalButtons = new ArrayList>(); @@ -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 font-size property and adjust + * the dragger position by modifying CSS margin-top property. + * + * @param visible + * true to show the button text, false 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; + } } \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TaggingPanel.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TaggingPanel.java new file mode 100644 index 00000000000..626e76a6bc8 --- /dev/null +++ b/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"; + } +} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TouchSplitLayoutPanel.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TouchSplitLayoutPanel.java index c8d4cb11d3f..f9a04b7f713 100755 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/TouchSplitLayoutPanel.java +++ b/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; *
    *
  • .gwt-SplitLayoutPanel { the panel itself }
    • *
  • .gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger }
    • + *
  • .gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger-Inverted { horizontal dragger }
    • *
  • .gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger }
    • *
* @@ -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 allVerticalSplitters = new ArrayList(); - List allHorizontalSplitters = new ArrayList(); + List horizontalEastSplitters = new ArrayList(); + List horizontalWestSplitters = new ArrayList(); 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); } diff --git a/java/com.sap.sse.gwt/src/com/sap/sse/gwt/resources/css/CommonControls.css b/java/com.sap.sse.gwt/src/com/sap/sse/gwt/resources/css/CommonControls.css index ba62f6e3b00..ff51c8b8c97 100644 --- a/java/com.sap.sse.gwt/src/com/sap/sse/gwt/resources/css/CommonControls.css +++ b/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 {