Merge remote-tracking branch 'server/mak-timeslider-shadow'

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

@@ -1,3 +1,31 @@
+body ::-webkit-scrollbar {
+    width: 16px;
+    height: 10px;
+}
+
+body ::-webkit-scrollbar-thumb {
+    min-height: 28px;
+    padding-top: 100px;
+    border-left: 6px solid transparent;
+    border-right: 1px solid transparent;
+    border-top: 0 solid transparent;
+    border-bottom: 0 solid transparent;
+    background-clip: padding-box;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+}
+
+body ::-webkit-scrollbar-button {
+    height: 0;
+    width: 0;
+}
+
+body ::-webkit-scrollbar-track {
+    border-left: 6px solid transparent;
+    border-right: 1px solid transparent;
+    background-clip: padding-box;
+}
+
 .collapsablePanel {
 	background: #b6b6b6;
 	-webkit-border-radius: 5px;
@@ -238,12 +266,6 @@
 	-moz-box-shadow: 0 0 20px #858585;
 }
 
-.timeLineInnerPanel {
-	/*height: 100%;*/
-	margin-top: 5px;
-	/*padding: 38px 24px 0 24px;*/
-}
-
 .timeLineInnerBgPanel {
  
 }
@@ -321,6 +343,7 @@
 .timePanelSlider {
 	margin: 0 12px;
 	height: 49px;
+	padding-top: 5px;
 }
 
 .timePanelInnerWrapper {
@@ -328,6 +351,7 @@
     box-shadow: inset 0px -7px 13px 0px rgba(84, 84, 84, 1);
 }
 
+
 .LogoAndTitlePanel {
     height: 68px;
     font-family: Arial, Verdana, sans-serif;
@@ -400,20 +424,31 @@
 	border-bottom-left-radius: 5px;
 }
 	
-.gwt-Button {
-	background: url(images/btn-cta-orangeleft.png) center 0 repeat-x;
-	color: #fff;
+.gwt-Button, .gwt-Button:visited {	
 	font-family: UbuntuBold, Verdana, Arial, sans-serif;
-	font-size: 14px;
 	border: none;
-	padding: 5px 3px;
 	margin: 0 0 0 5px;
-	cursor: pointer;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;	
+    background: url(images/btn-cta-orangeleft.png) center top repeat-x;
+    display: inline-block;
+    padding: 5px 10px 6px;
+    color: #fff;
+    text-decoration: none;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    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);
+    cursor: pointer;
 }	
 
+.gwt-Button:active {
+    top: 1px;
+    position: relative;
+}
+
 .gwt-Button:hover {
     background: url(images/btn-cta-orangeleft.png) center -30px repeat-x;
     cursor: pointer;
@@ -424,6 +459,11 @@
   color: #888;
   background: #F1F1F1;
   border: 1px solid #919090;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: none;
+  text-shadow: none;
 }
 
 .gwt-Button[disabled]:hover {
@@ -433,6 +473,18 @@
   border: 1px solid #919090;
 }
 
+.gwt-Button[disabled]:active {
+  cursor: default;
+  color: #888;
+  background: #F1F1F1;
+  border: 1px solid #919090;
+  top: 0;
+}
+
+.gwt-ButtonLarge
+.gwt-ButtonMedium
+.gwt-ButtonSmall
+
 .gwt-DialogBox .boxPanel {
 	padding: 0 0 10px 0;
 }
@@ -464,12 +516,4 @@
 	line-height: 1.4;
 }
 
-.playPauseImage:hover{
-  background: url(images/playbutton-hover.png) 0 0 no-repeat !important;
-  cursor: pointer;
-}
 
-.playPauseImagePause:hover {
-  background: url(images/playbuttonPause-hover.png) 0 0 no-repeat !important;
-  cursor: pointer;
-}

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

@@ -116,57 +116,30 @@ img.openColumn {
     right:0;
 }
 
-.globalNavigation-home {    	
-    border-radius: 0px 0px 4px 4px; 
-    -moz-border-radius: 0px 0px 4px 4px; 
-    -webkit-border-radius: 0px 0px 4px 4px;
-    margin: 0 10px 0 0;
-    float: left;
-}
-
-.globalNavigation-home a{
-    color: #fff;
-    text-decoration: none;
-    display: block;
-    background: url(images/globalNavigation-home_bg.png) 5px center no-repeat #7c7b7c;
-    padding: 5px 6px 5px 25px;
-    border-radius: 0px 0px 4px 4px; 
-    -moz-border-radius: 0px 0px 4px 4px; 
-    -webkit-border-radius: 0px 0px 4px 4px;
-}  
-
-.globalNavigation-leaderBoard {
-    border-radius: 0px 0px 4px 4px; 
-    -moz-border-radius: 0px 0px 4px 4px; 
-    -webkit-border-radius: 0px 0px 4px 4px;
-    margin: 0 5px 0 0;
-    float: left;
+.globalNavigation-leaderBoardGroup a {
+    background: url(images/globalNavigation-home_bg.png) 11px 8px no-repeat;
 }
 
 .globalNavigation-leaderBoard a {
-    color: #fff;
-    text-decoration: none;
-    display: block;
-    background: url(images/globalNavigation-leaderBoard_bg.png) 5px center no-repeat #7c7b7c;   
-    border-radius: 0px 0px 4px 4px; 
-    -moz-border-radius: 0px 0px 4px 4px; 
-    -webkit-border-radius: 0px 0px 4px 4px;
-    padding: 5px 6px 5px 25px;
+	background: url(images/globalNavigation-leaderBoard_bg.png) 11px 8px no-repeat;
 }
 
-.globalNavigation-leaderBoardGroup {
-	background: url(images/globalNavigation-home_bg.png) 5px center no-repeat #7c7b7c;	
-  border-radius: 0px 0px 4px 4px; 
-  -moz-border-radius: 0px 0px 4px 4px; 
-  -webkit-border-radius: 0px 0px 4px 4px;
-  margin: 0 10px 0 0;
-  padding: 5px 6px 5px 25px;
-  float: left;
+.globalNavigation-leaderBoardGroup, .globalNavigation-leaderBoard {
+    margin: -4px 10px 0 0;
+    padding: 0;
+    float: left;
+    background: #7c7b7c url(images/alert-overlay.png) repeat-x;
 }
 
-.globalNavigation-leaderBoardGroup a {
+.globalNavigation-leaderBoard {
+	margin-right: 5px;
+}
+
+.globalNavigation-leaderBoardGroup a, .globalNavigation-leaderBoard a {
 	color: #fff;
 	text-decoration: none;
+    display: block;
+    padding: 8px 13px 6px 36px;
 }
 
 .raceBoardNavigation {
@@ -229,7 +202,7 @@ img.openColumn {
 	background-repeat: no-repeat, repeat-x;
 	width: 27px;
 	height: 23px;	
-    margin: 0 5px 0 1px;
+    margin: 0 12px 0 1px;
 	-webkit-border-radius: 0px 3px 3px 0px;
 	border-radius: 0px 3px 3px 0px; 
 }
@@ -251,9 +224,67 @@ img.openColumn {
     font-size: 14px;
     margin: 0 0 0 0;
     padding: 2px 7px 2px 3px;
-    height: 19px;   
+    height: 18px; 
+    display: inline-block;
+    text-decoration: none;
+    -moz-border-radius: 5px 0 0 5px;
+    -webkit-border-radius: 5px 0 0 5px;
+    border-radius: 5px 0 0 5px;
+    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    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;
+}
+
+.timePanelButton {
+	float: left;
+	padding: 3px 10px 4px;
+}
+
+.playPauseButton {
+	padding: 0;
+	width: 28px;
+	height: 24px;
+	background: url(images/timeslider-play-active-icon.png) 0 0 no-repeat;
+    cursor: pointer;
+}
+
+.playPauseButton:hover{
+  background: url(images/playbutton-hover.png) 0 0 no-repeat !important;
+  cursor: pointer;
+}
+
+.playPauseButtonPause {
+	background: url(images/timeslider-pause-icon.png) 0 0 no-repeat;
+}
+
+.playPauseButtonPause:hover {
+  background: url(images/playbuttonPause-hover.png) 0 0 no-repeat !important;
+  cursor: pointer;
+}
+
+
+.backToLivePlayButton {
+    float: left;
+    padding: 3px 10px 4px;
+}
+
+.dockLayoutPanel div[style="position: absolute; overflow: hidden; left: 0px; right: 0px; bottom: 0px; height: 90px;"] {
+	box-shadow: 0 0 8px #424242;
+	z-index: 10;
+}

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

@@ -235,7 +235,6 @@ input.magnifier {
 	background: url("images/btn-cta-orangeleft.png") repeat-x -10px 0 #e7e7e7;
 	text-decoration: none;
 	color: #fff;
-  	/*border: 1px solid #a6a6a6;*/
   	font-family: 'UbuntuBold', Arial, Verdana, sans-serif;
 }
 

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

@@ -65,11 +65,11 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
     private final ImageResource playModeLiveActiveImg;
     private final ImageResource playModeReplayActiveImg;
     private final ImageResource playModeInactiveImg;
-    private final Image playPauseImage;
+    private final Button playPauseButton;
     private final Image playModeImage;
     protected Date lastReceivedDataTimepoint;
     private final Button slowDownButton;
-    private final Button speedUpButton;
+	private final Button speedUpButton;
 
     /**
      * The live delay may be adjusted automatically if the server decides so. However, if the user explicitly sets a live delay,
@@ -105,19 +105,19 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
         timer.addTimeListener(this);
         timer.addPlayStateListener(this);
         userExplicitlyChangedLivePlayDelay = false;
-        FlowPanel vp = new FlowPanel();
-        vp.setStyleName("timePanelInnerWrapper");
-        vp.setSize("100%", "100%");
+        FlowPanel timePanelInnerWrapper = new FlowPanel();
+        timePanelInnerWrapper.setStyleName("timePanelInnerWrapper");
+        timePanelInnerWrapper.setSize("100%", "100%");
         
-        SimplePanel s = new SimplePanel();
-        s.setStyleName("timePanelSlider");
-        s.getElement().getStyle().setPaddingLeft(66, Unit.PX);
-        s.getElement().getStyle().setPaddingRight(66, Unit.PX);
+        SimplePanel timePanelSlider = new SimplePanel();
+        timePanelSlider.setStyleName("timePanelSlider");
+        timePanelSlider.getElement().getStyle().setPaddingLeft(66, Unit.PX);
+        timePanelSlider.getElement().getStyle().setPaddingRight(66, Unit.PX);
 
         playButtonImg = resources.timesliderPlayActiveIcon();
         pauseButtonImg = resources.timesliderPauseIcon();
         playSpeedImg = resources.timesliderPlaySpeedIcon();
-        playPauseImage = new Image(playButtonImg);
+        playPauseButton = new Button("");
 
         playModeLiveActiveImg = resources.timesliderPlayStateLiveActiveIcon();
         playModeReplayActiveImg = resources.timesliderPlayStateReplayActiveIcon();
@@ -148,20 +148,20 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
             }
         });
         
-        vp.add(s);
-        s.add(timeSlider);
+        timePanelInnerWrapper.add(timePanelSlider);
+        timePanelSlider.add(timeSlider);
 
         FlowPanel controlsPanel = new FlowPanel();
         
         controlsPanel.setStyleName("timePanel-controls");
-        vp.add(controlsPanel);
+        timePanelInnerWrapper.add(controlsPanel);
         
         // play button control
         FlowPanel playControlPanel = new FlowPanel();
         playControlPanel.setStyleName("timePanel-controls-play");
         controlsPanel.add(playControlPanel);
         
-        playPauseImage.addClickHandler(new ClickHandler() {
+        playPauseButton.addClickHandler(new ClickHandler() {
             @Override
             public void onClick(ClickEvent event) {
                 switch(TimePanel.this.timer.getPlayState()) {
@@ -177,11 +177,9 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
                 }
             }
         });
-        playPauseImage.getElement().getStyle().setFloat(Style.Float.LEFT);
-        playPauseImage.getElement().getStyle().setPadding(3, Style.Unit.PX);
-        playPauseImage.setTitle(stringMessages.startStopPlaying());
-        playPauseImage.getElement().addClassName("playPauseImage");
-        playControlPanel.add(playPauseImage);
+        playPauseButton.setTitle(stringMessages.startStopPlaying());
+        playPauseButton.getElement().addClassName("playPauseButton");
+        playControlPanel.add(playPauseButton);
 
         backToLivePlayButton = new Button(stringMessages.playModeLive());
         backToLivePlayButton.addClickHandler(new ClickHandler() {
@@ -191,8 +189,7 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
                 TimePanel.this.timer.play();
             }
         });
-        backToLivePlayButton.getElement().getStyle().setFloat(Style.Float.LEFT);
-        backToLivePlayButton.getElement().getStyle().setPadding(3, Style.Unit.PX);
+        backToLivePlayButton.addStyleName("backToLivePlayButton");
         backToLivePlayButton.setTitle(stringMessages.backToLive());
         playControlPanel.add(backToLivePlayButton);
 
@@ -207,7 +204,6 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
         dateLabel.getElement().getStyle().setFloat(Style.Float.LEFT);
         dateLabel.getElement().setClassName("dateLabel");
         timeLabel.getElement().getStyle().setFloat(Style.Float.LEFT);
-        timeLabel.getElement().getStyle().setFontWeight(Style.FontWeight.BOLD);
         timeLabel.getElement().setClassName("timeLabel");
         
         FlowPanel playModeControlPanel = new FlowPanel();
@@ -270,11 +266,10 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
         playSpeedImage.getElement().getStyle().setPadding(3, Style.Unit.PX);
        
         playSpeedBox.getElement().getStyle().setFloat(Style.Float.LEFT);
-        playSpeedBox.getElement().getStyle().setPadding(3, Style.Unit.PX);
-        speedUpButton.getElement().getStyle().setFloat(Style.Float.LEFT);
-        speedUpButton.getElement().getStyle().setPadding(3, Style.Unit.PX);
-        slowDownButton.getElement().getStyle().setFloat(Style.Float.LEFT);
-        slowDownButton.getElement().getStyle().setPadding(3, Style.Unit.PX);
+        playSpeedBox.getElement().getStyle().setPadding(2, Style.Unit.PX);
+
+        speedUpButton.addStyleName("timePanelButton");
+        slowDownButton.addStyleName("timePanelButton");
 
         // time delay
         FlowPanel timeDelayPanel = new FlowPanel();
@@ -293,7 +288,7 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
         settingsAnchor.setStyleName("timePanelSettings");
         settingsAnchor.addClickHandler(new SettingsClickHandler(stringMessages));
         controlsPanel.add(settingsAnchor);
-        setWidget(vp);
+        setWidget(timePanelInnerWrapper);
         playStateChanged(timer.getPlayState(), timer.getPlayMode());
         
         
@@ -379,8 +374,7 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
         setJumpToLiveEnablement(liveModeToBeMadePossible && playMode != PlayModes.Live);
         switch (playState) {
         case Playing:
-            playPauseImage.setResource(pauseButtonImg);
-            playPauseImage.getElement().addClassName("playPauseImagePause");
+            playPauseButton.getElement().addClassName("playPauseButtonPause");
             if (playMode == PlayModes.Live) {
                 playModeImage.setResource(playModeLiveActiveImg);
             } else {
@@ -388,9 +382,8 @@ public class TimePanel<T extends TimePanelSettings> extends FormPanel implements
             }
             break;
         case Paused:
-        	playPauseImage.getElement().removeClassName("playPauseImagePause");
+        	playPauseButton.getElement().removeClassName("playPauseButtonPause");
         case Stopped:
-            playPauseImage.setResource(playButtonImg);
             playModeImage.setResource(playModeInactiveImg);
             break;
         }

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

@@ -60,6 +60,8 @@ public class GlobalNavigationPanel extends FlowPanel {
         }
         
         HTML linkHtml = new HTML(ANCHORTEMPLATE.anchor(URLFactory.INSTANCE.encode(url), linkName));
+        linkHtml.addStyleName("gwt-Button");
+        linkHtml.addStyleName("globalNavigationLink");
         linkHtml.addStyleName(STYLE_NAME_PREFIX + styleNameExtension);
         linkHtml.setTitle(setHtmlTitle);
         add(linkHtml);

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

@@ -194,5 +194,6 @@ public class RaceBoardEntryPoint extends AbstractEntryPoint {
         p.addNorth(toolbarPanel, 40);
         p.addSouth(timePanel, 90);                     
         p.add(raceBoardPanel);
+        p.addStyleName("dockLayoutPanel");
     }    
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/controls/slider/SliderBar.css

@@ -21,6 +21,7 @@
   height: 21px;
   z-index: 1;
   cursor: pointer;
+  top: 7px;
 }
 
 .gwt-SliderBar-shell .gwt-SliderBar-tick {