seperate messages for different legends, bubble popup implemented

This commit is contained in:
Kai Boernert committed 2016-12-05 17:11:02 +01:00
1 parent 9a212e612a
commit 56cee73670
7 files changed
+75 -29

No files matched your search

@@ -38,9 +38,8 @@
}
</ui:style>
<g:HTMLPanel addStyleNames="{local_res.css.raceslistlive}">
<h3 ui:field="titleUi" class="{res.mediaCss.column} {res.mediaCss.medium12} {res.mediaCss.large5}"/>
<div ui:field="legend" class="{res.mediaCss.column} {res.mediaCss.medium12} {res.mediaCss.large7} {style.legend}">
<div class="{style.iconGPS}"><ui:text from='{i18n.eventRegattaRacesLegendGps}'/></div>
<h3 ui:field="titleUi" class="{res.mediaCss.column} {res.mediaCss.medium12} {res.mediaCss.large4}"/>
<div ui:field="legend" class="{res.mediaCss.column} {res.mediaCss.medium12} {res.mediaCss.large8} {style.legend}">
<div class="{style.iconWind}"><ui:text from='{i18n.eventRegattaRacesLegendWind}'/></div>
<div class="{style.iconVideo}"><ui:text from='{i18n.eventRegattaRacesLegendVideo}'/></div>
<div class="{style.iconAudio}"><ui:text from='{i18n.eventRegattaRacesLegendAudio}'/></div>
@@ -1,16 +1,16 @@
package com.sap.sailing.gwt.home.desktop.partials.regattaheader;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
import com.google.gwt.dom.client.AnchorElement;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.EventListener;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.PopupPanel.PositionCallback;
import com.google.gwt.user.client.ui.UIObject;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.gwt.home.communication.eventview.RegattaMetadataDTO;
@@ -56,16 +56,21 @@ public class RegattaHeader extends Composite {
Event.setEventListener(dataIndicatorsUi, new EventListener() {
@Override
public void onBrowserEvent(Event event) {
final RegattaHeaderLegendPopup pop = new RegattaHeaderLegendPopup(dataIndicatorsUi);
// place it right aligned in the header next to it, setPostion is left based so it cannot be used
// instead
pop.setPopupPositionAndShow(new PositionCallback() {
final RegattaHeaderLegendPopup pop = new RegattaHeaderLegendPopup();
pop.setVisible(false);
pop.show();
// Pausing until the event loop is clear appears to give the browser
// sufficient time to apply CSS styling. We use the popup's offset
// width and height to calculate the display position, but those
// dimensions are not accurate until styling has been applied.
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void setPosition(int offsetWidth, int offsetHeight) {
pop.getElement().getStyle().setTop(dataIndicatorsUi.getAbsoluteTop(), Unit.PX);
pop.getElement().getStyle().setRight(
dataIndicatorsUi.getAbsoluteLeft(), Unit.PX);
public void execute() {
// the arrow is ~16 pixels long
pop.setPopupPosition(dataIndicatorsUi.getAbsoluteLeft() - pop.getOffsetWidth() - 16,
RegattaHeader.this.getAbsoluteTop() + RegattaHeader.this.getOffsetHeight() / 2
- pop.getOffsetHeight() / 2);
pop.setVisible(true);
}
});
event.preventDefault();
@@ -1,7 +1,6 @@
package com.sap.sailing.gwt.home.desktop.partials.regattaheader;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.AnchorElement;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.Widget;
@@ -12,7 +11,8 @@ public class RegattaHeaderLegendPopup extends PopupPanel {
interface RegattaHeaderLegendPopupUiBinder extends UiBinder<Widget, RegattaHeaderLegendPopup> {
}
public RegattaHeaderLegendPopup(final AnchorElement parent) {
public RegattaHeaderLegendPopup() {
super(true);
setWidget(uiBinder.createAndBindUi(this));
}
@@ -6,41 +6,74 @@
<ui:style>
.iconGPS, .iconWind, .iconVideo, .iconAudio{
line-height: 1.5em;
position: relative;
display: inline-block;
margin-left: 0.666666666666667em;
padding-left: 2.333333333333333em;
background-size: 1.666666666666667rem 1.666666666666667rem;
background-position: left;
background-position: left bottom;
background-repeat: no-repeat;
}
.iconGPS {
background-image:url('images/home/raw_gps_fixes.png');
}
.iconWind {
margin-left: 0.666666666666667em;
background-image:url('images/home/icon-wind.png');
border-left: 1px solid #ccc;
}
.iconVideo {
background-image:url('images/home/icon-video.png');
border-left: 1px solid #ccc;
padding-top: 0.277777777777778em;
}
.iconAudio {
margin-left: 0.666666666666667em;
background-image:url('images/home/icon-audio.png');
border-left: 1px solid #ccc;
padding-top: 0.277777777777778em;
}
.legend{
padding: 0.5em;
border-radius: .277777777777778em;
width:100%;
height:2.375em;
background-color:white;
border: 2px solid #ccc;
}
.legend:after, .legend:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.legend:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 0.5em;
margin-top: -0.5em;
margin-left: -2px;
}
.legend:before {
border-color: rgba(204, 204, 204, 0);
border-left-color: #ccc;
border-width: 0.55em;
margin-top: -0.55em;
}
</ui:style>
<g:HTMLPanel styleName="{style.legend}">
<div class="{style.iconGPS}"><ui:text from='{i18n.eventRegattaRacesLegendGps}'/></div>
<div class="{style.iconWind}"><ui:text from='{i18n.eventRegattaRacesLegendWind}'/></div>
<div></div>
<div class="{style.iconVideo}"><ui:text from='{i18n.eventRegattaRacesLegendVideo}'/></div>
<div class="{style.iconAudio}"><ui:text from='{i18n.eventRegattaRacesLegendAudio}'/></div>
<table>
<tr>
<td><div class="{style.iconGPS}"><ui:text from='{i18n.eventRegattaHeaderLegendGps}'/></div></td>
<td><div class="{style.iconWind}"><ui:text from='{i18n.eventRegattaHeaderLegendWind}'/></div></td>
</tr>
<tr>
<td><div class="{style.iconVideo}"><ui:text from='{i18n.eventRegattaHeaderLegendVideo}'/></div></td>
<td><div class="{style.iconAudio}"><ui:text from='{i18n.eventRegattaHeaderLegendAudio}'/></div></td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
@@ -1747,8 +1747,11 @@ public interface StringMessages extends com.sap.sse.gwt.client.StringMessages,
String externalLinks();
String buoyZoneRadiusInHullLengths();
String incorrectValueForRegattaBuoyZoneRadiusInHullLengths();
String eventRegattaRacesLegendGps();
String eventRegattaRacesLegendWind();
String eventRegattaRacesLegendVideo();
String eventRegattaRacesLegendAudio();
String eventRegattaHeaderLegendGps();
String eventRegattaHeaderLegendWind();
String eventRegattaHeaderLegendVideo();
String eventRegattaHeaderLegendAudio();
}
@@ -1719,7 +1719,10 @@ filterDeviceMappings=Filter device mappings
raceStartAnalysis=Race Start Analysis
buoyZoneRadiusInHullLengths=Buoy zone radius in hull lengths (e.g., 2 or 3)
incorrectValueForRegattaBuoyZoneRadiusInHullLengths=Incorrect value for the buoy zone radius in hull lengths
eventRegattaRacesLegendGps=Tracking
eventRegattaRacesLegendWind=# Windsensors
eventRegattaRacesLegendVideo=# Video Streams
eventRegattaRacesLegendAudio=# Audio Streams
eventRegattaHeaderLegendGps=Has Trackingdata
eventRegattaHeaderLegendWind=Has Winddata
eventRegattaHeaderLegendVideo=Has Videostreams
eventRegattaHeaderLegendAudio=Has Audiostreams
@@ -1704,7 +1704,10 @@ filterDeviceMappings=Gerätezuordnungen filtern
raceStartAnalysis=Startanalyse
buoyZoneRadiusInHullLengths=Anzahl Bootslängen für Bahnmarkenkreis (z.B. 2 oder 3)
incorrectValueForRegattaBuoyZoneRadiusInHullLengths=Ungültiger WErt für den Bootslängen-Bahnmarkenkreis
eventRegattaRacesLegendGps=Tracking
eventRegattaRacesLegendWind=Nr. Windsensoren
eventRegattaRacesLegendVideo=Nr. Video Streams
eventRegattaRacesLegendAudio=Nr. Audio Streams
eventRegattaHeaderLegendGps=Hat Trackinginformationen
eventRegattaHeaderLegendWind=Hat Winddaten
eventRegattaHeaderLegendVideo=Hat Videostreams
eventRegattaHeaderLegendAudio=Hat Audiostreams