header popup initial

This commit is contained in:
Kai Boernert committed 2016-12-05 14:41:58 +01:00
1 parent 021c447080
commit 9a212e612a
4 files changed
+82 -5

No files matched your search

@@ -38,9 +38,9 @@
}
</ui:style>
<g:HTMLPanel addStyleNames="{local_res.css.raceslistlive}">
<h3 ui:field="titleUi" class="{res.mediaCss.column} {res.mediaCss.small12} {res.mediaCss.medium5}"/>
<div ui:field="legend" class="{res.mediaCss.column} {res.mediaCss.small12} {res.mediaCss.medium7} {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.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>
<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>
@@ -3,13 +3,14 @@ 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.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.Window;
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;
@@ -55,7 +56,18 @@ public class RegattaHeader extends Composite {
Event.setEventListener(dataIndicatorsUi, new EventListener() {
@Override
public void onBrowserEvent(Event event) {
Window.alert("legend bubble required");
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() {
@Override
public void setPosition(int offsetWidth, int offsetHeight) {
pop.getElement().getStyle().setTop(dataIndicatorsUi.getAbsoluteTop(), Unit.PX);
pop.getElement().getStyle().setRight(
dataIndicatorsUi.getAbsoluteLeft(), Unit.PX);
}
});
event.preventDefault();
event.stopPropagation();
}
@@ -0,0 +1,19 @@
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;
public class RegattaHeaderLegendPopup extends PopupPanel {
private static RegattaHeaderLegendPopupUiBinder uiBinder = GWT.create(RegattaHeaderLegendPopupUiBinder.class);
interface RegattaHeaderLegendPopupUiBinder extends UiBinder<Widget, RegattaHeaderLegendPopup> {
}
public RegattaHeaderLegendPopup(final AnchorElement parent) {
super(true);
setWidget(uiBinder.createAndBindUi(this));
}
}
@@ -0,0 +1,46 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
<ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
<ui:style>
.iconGPS, .iconWind, .iconVideo, .iconAudio{
position: relative;
display: inline-block;
margin-left: 0.666666666666667em;
padding-left: 2.333333333333333em;
background-size: 1.666666666666667rem 1.666666666666667rem;
background-position: left;
background-repeat: no-repeat;
}
.iconGPS {
background-image:url('images/home/raw_gps_fixes.png');
}
.iconWind {
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;
}
.iconAudio {
background-image:url('images/home/icon-audio.png');
border-left: 1px solid #ccc;
}
.legend{
width:100%;
height:2.375em;
background-color:white;
}
</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>
</g:HTMLPanel>
</ui:UiBinder>