diff --git a/java/com.sap.sailing.gwt.ui/Simulator.css b/java/com.sap.sailing.gwt.ui/Simulator.css index e7e173f5e83..ada77cd9fdf 100644 --- a/java/com.sap.sailing.gwt.ui/Simulator.css +++ b/java/com.sap.sailing.gwt.ui/Simulator.css @@ -396,3 +396,716 @@ input.magnifier { -moz-border-radius: 5px; border: 1px solid #177980;} -o-border-radius: 5px; border: 1px solid #177980;} -ms-border-radius: 5px; border: 1px solid #177980;} + + + + + + + + + + + + + + + + + + + /** Add css rules here for your application. */ +/* + body #calendar:after + content: " "; + display: block; + height: 0; + clear: both; + visibility: hidden; +*/ + + + * { + font-family: 'Open Sans', sans-serif; + font-size: 12px; +} + + +iframe { + display: block; + width: 100%; + height: 100%; + border: none; + overflow-y: auto; + overflow-x: hidden; +} + +.clear { + clear: both; + font-size: 1px; + height: 0px; + line-height: 0px; + margin: -1px 0 0; + width: 100%; +} + +.cover { + left: -1000px; + overflow: hidden; + position: absolute; + top: -1000px; +} + +body { + background: white; + font-family: 'Open Sans', Arial, Verdana, sans-serif; + line-height: 1; + font-size: 14px; + font-weight: 400; + margin: 0; + +} + +table td, select, button { + font-family: 'Open Sans', Arial, Verdana, sans-serif; + line-height: 1; + font-size: 14px; +} + +.contentOuterPanel { + background: #dddcdc; + margin: 0 12px 0 12px; + padding: 12px; +} + + + +/** Example rules used by the template application (remove for your app) */ +h1 { + font-size: 2em; + font-family: 'Open Sans', Arial, Verdana, sans-serif; + font-weight: 700; + color: #777777; + margin: 40px 0px 70px; + text-align: center; +} + +table { + border-collapse: separate; +} + +.CombinedWindPanelParentDiv { + padding-top: 34px; + padding-left: 10px; +} + +.TrueNorthIndicatorPanelParentDiv { + padding-top: 10px; + padding-left: 10px; +} + +.MapSimulationLegendParentDiv { + padding-bottom: 10px; + padding-right: 10px; + pointer-events: none; +} + +.MapSimulationLegend { + pointer-events: all; +} + +.RaceMap-HeaderPanel { + height: 60px; + width: 100%; + background-color: #333; + opacity: .5; +} + +.leaderboardLabel { + border-bottom: 2px solid #007dc0; + padding: 0 0 6px 0; + font-weight: 700; +} + +.refreshAndSettings { + background: #f2f2f2; + border-bottom: 2px solid #fff; + border-top: 2px solid #fff; + height: 30px; +} + +.refreshAndSettings table td { + padding: 0 10px 0 0; +} + +.refreshAndSettings table table td { + padding: 0 0 0 0; +} + +.race-name { + line-height: 1.0; +} + +.openColumn { + position: relative; + vertical-align: middle; +} + +img.openColumn { + display: block; + margin: 3px auto 3px auto !important; +} + +.breadcrumbPanel { + height: 30px; + margin: 0 12px 13px 12px; +} + +.mainPanel { + width: 100%; +} + +.raceBoardNavigation { + float: left; + margin: 9px 0 0 12px; + font-family: 'Open Sans', Arial, Verdana, sans-serif; + font-weight: 300; +} + +.raceBoardControls { + float: right; + margin: 9px 0 0 12px; + font-family: 'Open Sans', Arial, Verdana, sans-serif; + font-weight: 300; +} + +.raceBoardNavigation-navigationitem { + color: #dddcdc; + text-transform: uppercase; + font-weight: 500; + margin: 0 12px 0 0; + padding: 0 0 5px 0; +} + +.raceBoardNavigation-navigationitem:hover { + border-bottom: 4px solid #f0ab00; + color: #dddcdc; + text-decoration: none; +} + +.raceBoardNavigation-navigationitem:active { + border-bottom: 4px solid #f0ab00; + color: #dddcdc; + text-decoration: none; +} + +.competitorInfo-Canvas { + pointer-events: none; +} + +.gwt-DialogBox { + z-index: 20; +} + +.abstractChartPanel-importantMessageOfChart { + font-family: 'Open Sans', Arial, Verdana, sans-serif; + font-weight: 600; + font-size: 20px; + height: 70px; + margin: 0 auto; + padding: 49px 0 0 80px; + width: 300px; + color: #7c7c7c; + background: url(images/important-message.png) left center no-repeat; +} + +.breadcrumbPanel-NextArrow { + display: none; +} + +.errorLabel { + color: #FF0000; +} + +.raceBoardNavigation-settingsButtonPanel { + float: right; + margin: 9px 12px 0 0; +} + +.raceBoardNavigation-settingsButton { + background: url(images/settings_white.png), + url(images/btn-cta-orangeleft.png); + background-position: center, center 0; + background-repeat: no-repeat, repeat-x; + width: 27px; + height: 23px; + margin: 0 12px 0 1px; + -webkit-border-radius: 0px 3px 3px 0px; + -moz-border-radius: 0px 3px 3px 0px; + -o-border-radius: 0px 3px 3px 0px; + -ms-border-radius: 0px 3px 3px 0px; + border-radius: 0px 3px 3px 0px; +} + +.raceBoardNavigation-settingsButton:hover { + background-image: url(images/settings_white.png), + url(images/btn-cta-orangeleft.png); + background-position: center, center -30px; + background-repeat: no-repeat, repeat-x; + cursor: pointer; +} + +.raceBoardNavigation-filterButton:hover { + background-image: url(images/filter_white.png), + url(images/btn-cta-orangeleft.png); + background-position: center, center -30px; + background-repeat: no-repeat, repeat-x; + cursor: pointer; +} + +.raceBoardNavigation-innerElement { + background: url("images/btn-cta-orangeleft.png") repeat-x scroll center + 0 transparent; + color: #FFFFFF; + cursor: pointer; + font-family: 'Open Sans', Verdana, Arial, sans-serif; + font-weight: 600; + font-size: 14px; + margin: 0 0 0 0; + padding: 2px 7px 2px 3px; + height: 18px; + display: inline-block; + text-decoration: none; + border-radius: 5px 0 0 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(0, 0, 0, 0.25); +} + +.raceBoardNavigation-innerElement:active { + top: 1px; + position: relative; +} + +.raceBoardNavigation-innerElement:hover { + background: url("images/btn-cta-orangeleft.png") repeat-x scroll center + -30px transparent; + cursor: pointer; +} + +.raceBoardNavigation-innerElement label { + cursor: pointer; +} + +.raceBoardNavigation-standaloneElement { + background: url("images/btn-cta-orangeleft.png") repeat-x scroll center + 0 transparent; + color: #FFFFFF; + cursor: pointer; + font-family: 'Open Sans', Verdana, Arial, sans-serif; + font-weight: 600; + font-size: 14px; + margin: 0 0 0 0; + padding: 2px 7px 2px 3px; + height: 23px; + display: inline-block; + text-decoration: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 5px 5px 5px 5px; + +} + +.raceBoardNavigation-standaloneElement:active { + top: 1px; + position: relative; +} + +.raceBoardNavigation-standaloneElement:hover { + background: url("images/btn-cta-orangeleft.png") repeat-x scroll center + -30px transparent; + cursor: pointer; +} + +.raceBoardNavigation-standaloneElement label { + cursor: pointer; +} + +.timePanelButton { + float: left; + margin: 0 0 0 5px; +} + +.timePanelButton-SlowDown { + background-color: red !important; +} + +.timePanelButton-SpeedUp { + background-color: green !important; +} + +.playPauseButton { + padding: 0; + float: left; + width: 32px; + height: 28px; + background: url(images/viewicons/@1x/img/SAP_RV_Play_INACTIVE.png) + center no-repeat; + cursor: pointer; + border: 1px solid #cecece; + border-radius: 4px; + outline: 0; +} + +.playPauseButton:hover { + cursor: pointer; + background-color: #cecece; +} + +.playPauseButtonPause { + background: url(images/viewicons/@2x/img/SAP_RV_Pause_INACTIVE.png) 2px + 0 no-repeat; + outline: 0; + background-size: contain; +} + +.playPauseButtonPause:hover { + cursor: pointer; +} + +.backToLivePlayButton { + width: 42px; + height: 38px; + font-size: 8px; + white-space: normal; + border-radius: 4px; + border: none; + + margin-right: 23px; + margin-top: 5px; + margin-bottom: 5px; + z-index: 1; +} + +.backToLivePlayButton-Inactive { + color: #6dc021; + background-color: white; + font-weight: bold; +} + +.backToLivePlayButton-Active { + background-color: #6dc021; + color: white; + font-weight: normal; +} + +.backToLivePlayButton:hover { + border: 2px solid gray; +} + +.backToLivePlayButton:focus { + outline: 0 !important; +} + +.dockLayoutPanel div[style="position: absolute; overflow: hidden; left: 0px; right: 0px; bottom: 0px; height: 90px;"] + { + z-index: 10; +} + +.browserOptimizedMessage { + padding: 15px 0px; +} + +.trackingQuality-circle { + width: 8px; + height: 8px; + border-radius: 50%; + float: left; +} + +.circleYellow { + background: #fbba00; +} + +.circleGreen { + background: #8ab54e; +} + +.circleRed { + background: #f01010; +} + +.busyIndicator-Simple { + position: absolute; + top: 0.7em; + right: 7.4em; +} + +.busyIndicator-Circle { + +} + +.raceBoard-TitlePanel { + position: relative; + top: 10px; + z-index: 10; + color: #fff; + margin-left: auto; + margin-right: auto; +} + +.raceBoard-TitlePanel-RaceNameLabel { + font-size: 32px; + font-weight: bold; + padding: 7px; +} + +.raceBoard-Logo { + position: absolute; + top: 6px; + left: 10px; + z-index: 10; + cursor: pointer; +} + +.SideBySideComponentViewer-MainPanel { + top: 12px; +} + +.TimePanel-ShowExtended-Button { + width: 29px; + height: 28px; + float: left; + cursor: pointer; + border-radius: 4px; + border: 1px solid #ececec; +} + +.TimePanel-ShowExtended-Button-Open { + background: white url(images/arrows_bottom_black.png) center no-repeat; +} + +.TimePanel-ShowExtended-Button-Closed { + background: white url(images/arrows_top_black.png) center no-repeat; +} + +.TimePanel-ShowExtended-Button:hover { + background-color: #cecece; +} + +.TimePanel-ShowExtended-Button:focus { + outline: 0 !important; +} + +.RaceBoard-globalNavigation-Link { + display: inline; + margin-right: 3px; +} + +.RaceBoard-globalNavigation-Link a { + color: #fff; + cursor: pointer; +} + +.RaceBoard-globalNavigation-Link+.RaceBoard-globalNavigation-Link:before + { + content: ' \00bb\00a0'; +} + +.TimePanel-settingsButtonStyle { + position: absolute; + right: 0px; + z-index: 1; + border: none; +} + +.TimePanel-settingsButtonStyle:focus { + outline: 0 !important; +} + +.TimePanel-settingsButtonStyle:hover { + border: 1px solid gray; +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-Closed-multiCompetitorRaceChart + { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_CompetitorCharts_INACTIVE.png), + url(images/arrows_top_black_small.png); + background-repeat: no-repeat, no-repeat; + background-position: 5% 50%, 95% 50% +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-Open-multiCompetitorRaceChart + { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_CompetitorCharts_GHOSTED.png), + url(images/arrows_bottom_black_small.png); + background-repeat: no-repeat, no-repeat; + background-position: 5% 50%, 95% 50% +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-Closed-windChart { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_CompetitorCharts_INACTIVE.png), + url(images/arrows_top_black_small.png); + background-repeat: no-repeat, no-repeat; + background-position: 5% 50%, 95% 50% +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-Open-windChart { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_CompetitorCharts_GHOSTED.png), + url(images/arrows_bottom_black_small.png); + background-repeat: no-repeat, no-repeat; + background-position: 5% 50%, 95% 50% +} + +.gwt-SplitLayoutPanel-EastToggleButton-Open-leaderboard { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_Leaderboard_GHOSTED.png), + url(images/arrows_top_black_small.png); + background-repeat: no-repeat, no-repeat; + background-position: 4% 50%, 96% 50% +} + +.gwt-SplitLayoutPanel-EastToggleButton-Closed-leaderboard { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_Leaderboard_INACTIVE.png), + url(images/arrows_bottom_black_small.png); + background-repeat: no-repeat, no-repeat; + background-position: 4% 50%, 96% 50% +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-Closed-media, + .gwt-SplitLayoutPanel-NorthSouthToggleButton-Open-media { + background-color: white; + background-image: + url(images/viewicons/@1x/img/SAP_RV_AudioVideo_INACTIVE.png); + background-repeat: no-repeat, no-repeat; + background-position: 10% 50%, 90% 50% +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-mediaplaying { + background-image: + url(images/viewicons/@1x/img/SAP_RV_AudioVideo_GHOSTED.png); +} + +.gwt-SplitLayoutPanel-NorthSouthToggleButton-Small-media { + background-position: 5% 50%, 100% 50% !important; + margin-left: 0px !important; + padding: 2px 35px !important; +} + +@external gwt-ToggleButton-up, gwt-ToggleButton-down, gwt-ToggleButton-up-hovering, gwt-ToggleButton-down-hovering; +.gwt-ToggleButton-up, .gwt-ToggleButton-up-hovering { + background: url(images/unlock.png) center no-repeat; + margin-left: 5px; +} + +.gwt-ToggleButton-down, .gwt-ToggleButton-down-hovering { + background: url(images/lock.png) center no-repeat; + margin-left: 5px; +} + +.RegattaRaceInformation-Header { + font-family: 'Open Sans', Arial, Verdana, sans-serif; + position: relative; + left: 140px; + top: 11px; +} + +.RegattaRaceInformation-Header .RaceName-Label { + display: inline; + color: white; + margin-right: 10px; + font-size: 36px; +} + +.RegattaRaceInformation-Header .RaceSeriesAndFleet-Label { + display: inline; + color: white; + font-size: 15px; +} + +.RegattaAndRaceTime-Header { + position: absolute; + right: 10px; + top: 13px; + text-align: right; + color: white; +} + +.RegattaAndRaceTime-Header .RegattaName-Anchor { + font-size: 15px; + color: white; + text-decoration: none; + padding-left: 25px; + background-image: url(images/home.png); + background-repeat: no-repeat; + background-size: 17px; + background-position: 4px 1px; +} + +.RegattaAndRaceTime-Header .RegattaName-Anchor:hover { + text-decoration: underline; +} + +.RegattaAndRaceTime-Header .RaceTime-Label { + font-size: 15px; + margin-top: 5px; +} + +.VideoPopup-Close-Button { + border: none; +} + +.Media-Select-Button { + font-size: 15px; + font-size: 1rem; + display: inline-block; + font-weight: 400; + color: #111; + border: none; + padding: 0.5em 0.3em 0.5em 0.8em; + background-color: #fff; + -webkit-transition: background-color 0.2s; + -moz-transition: background-color 0.2s; + -o-transition: background-color 0.2s; + -ms-transition: background-color 0.2s; + transition: background-color 0.2s; + width: 100%; + max-width: 25em; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.Media-Select-Button:hover, .Media-Select-Button:focus { + background-color: #f0ab00; +} + +.Media-Select-Button-playing { + color: #999; +} + +.Media-Select-Button-playing:hover, .Media-Select-Button-playing:focus { + color: #fff; + background-color: #ccc; +} + +.Media-Select-Popup .dialogMiddleCenterInner { + padding: 0; +} + +.Media-Select-Popup .Caption { + padding: 4px 10px; +} \ No newline at end of file diff --git a/java/com.sap.sailing.gwt.ui/Simulator.html b/java/com.sap.sailing.gwt.ui/Simulator.html index 4af3bff6bf0..885b59b88fa 100644 --- a/java/com.sap.sailing.gwt.ui/Simulator.html +++ b/java/com.sap.sailing.gwt.ui/Simulator.html @@ -16,6 +16,7 @@ + diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/simulator/SimulatorMainPanel.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/simulator/SimulatorMainPanel.java index 5df963e9195..fbbc8749fa5 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/simulator/SimulatorMainPanel.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/simulator/SimulatorMainPanel.java @@ -310,25 +310,39 @@ public class SimulatorMainPanel extends SimplePanel { int secondsTimeStep = (int) windParams.getTimeStep().asSeconds(); timer.setPlaySpeedFactor(secondsTimeStep); timePanel = new TimePanel(timer, timeRangeProvider, stringMessages, false); - busyIndicator = new SimpleBusyIndicator(false, 0.8f); - - simulatorMap = new SimulatorMap(simulatorSvc, stringMessages, errorReporter, xRes, yRes, border, streamletPars, timer, timePanel, - windParams, busyIndicator, mode, this, showMapControls, new IdentityCoordinateSystem()); + simulatorMap = new SimulatorMap(simulatorSvc, stringMessages, errorReporter, xRes, yRes, border, streamletPars, + timer, timePanel, windParams, busyIndicator, mode, this, showMapControls, + new IdentityCoordinateSystem()); simulatorMap.setSize("100%", "100%"); - this.rightPanel.add(this.simulatorMap); - createOptionsPanelTop(); createOptionsPanel(); - fullTimePanel = this.createTimePanel(); + final Button toggleButton = timePanel.getAdvancedToggleButton(); + toggleButton.setVisible(false); // delete this line to enable/ diable time panel open/ close toggle + toggleButton.addClickHandler(new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + boolean advancedModeShown = timePanel.toggleAdvancedMode(); + if (advancedModeShown) { + mainPanel.setWidgetSize(fullTimePanel, 96); + toggleButton.removeStyleDependentName("Closed"); + toggleButton.addStyleDependentName("Open"); + } else { + mainPanel.setWidgetSize(fullTimePanel, 67); + toggleButton.addStyleDependentName("Closed"); + toggleButton.removeStyleDependentName("Open"); + } + } + }); + mainPanel = new DockLayoutPanel(Unit.PX); mainPanel.setSize("100%", "100%"); mainPanel.addWest(leftPanel, 470); - mainPanel.addSouth(fullTimePanel, 90); + mainPanel.addSouth(fullTimePanel, 67); mainPanel.setWidgetHidden(fullTimePanel, true); createMapOptionsPanel(); // add map-options to mainPanel-North @@ -340,21 +354,21 @@ public class SimulatorMainPanel extends SimplePanel { } public native void setMapInstance(Object mapInstance) /*-{ - $wnd.swarmMap = mapInstance; + $wnd.swarmMap = mapInstance; }-*/; public native void setCanvasProjectionInstance(Object instance) /*-{ - $wnd.swarmCanvasProjection = instance; - }-*/; + $wnd.swarmCanvasProjection = instance; + }-*/; public native void startStreamlets() /*-{ - if ($wnd.swarmAnimator) { - $wnd.swarmUpdData = true; - $wnd.updateStreamlets($wnd.swarmUpdData); - } else { - $wnd.initStreamlets($wnd.swarmMap); - } - }-*/; + if ($wnd.swarmAnimator) { + $wnd.swarmUpdData = true; + $wnd.updateStreamlets($wnd.swarmUpdData); + } else { + $wnd.initStreamlets($wnd.swarmMap); + } + }-*/; public void setDefaultTimeSettings() { Date defaultNow = new Date();