Fullscreen Leaderboard - Adjusted layout of fullscreen viewer

This commit is contained in:
Benjamin Barth committed 2015-08-04 18:02:52 +02:00
1 parent 680e4f1657
commit a7f3f26763
4 files changed
+79 -70

No files matched your search

@@ -15,7 +15,6 @@ import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
@@ -164,9 +163,6 @@ public class OldLeaderboard extends Composite {
boolean hasLiveRace = leaderboardPanel.hasLiveRace();
if (leaderboard != null) {
String comment = leaderboard.getComment() != null ? leaderboard.getComment() : "";
if (Random.nextBoolean()) comment += "asdk jkjsad sakdj sakasjdksaj sjd kjskdj ksajd ksd kskaj dkjsad jsd"
+ " asdlak lsds klksadl sad nsands lnd salkdnsalkdnlksandlksndlknsklnk lksandl nkal snd lak sklak"
+ "alds sdsadhvsdovcwebadlbcv bcq qsn sand sna qennnsa nsnd asdnsdna ndsadsn sdnsa ndsadn adlns s";
String scoringScheme = leaderboard.scoringScheme != null ? ScoringSchemeTypeFormatter.getDescription(leaderboard.scoringScheme, StringMessages.INSTANCE) : "";
lastScoringCommentDiv.setInnerText(comment);
hasLiveRaceDiv.setInnerText(leaderboardPanel.getLiveRacesText());
@@ -119,10 +119,10 @@ public class RegattaLeaderboardTabView extends SharedLeaderboardRegattaTabView<R
private final Label hasLiveRace = new Label();
private FullscreenViewerLeaderBoardDelegate() {
addToolbarAction(settingsControl);
setHeaderWidget(createPanel(lastScoringComment, hasLiveRace, scoringScheme));
addToolbarInfo(createPanel(lastScoringUpdateText, lastScoringUpdateTime));
addToolbarAction(autoRefreshControl);
addToolbarInfoText(createPanel(lastScoringUpdateText, lastScoringUpdateTime), false);
addToolbarInfoText(createPanel(lastScoringComment, hasLiveRace, scoringScheme), true);
addToolbarAction(settingsControl);
}
private Widget createPanel(Widget... contentWidgets) {
@@ -4,7 +4,6 @@ import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Overflow;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.logical.shared.CloseEvent;
import com.google.gwt.event.logical.shared.CloseHandler;
@@ -14,15 +13,16 @@ import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HeaderPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
public class FullscreenViewer {
@@ -34,15 +34,13 @@ public class FullscreenViewer {
interface Style extends CssResource {
String popup();
String background();
String toolbar();
String toolbarInfoTextLeft();
String toolbarInfoTextRight();
String toolbarInfo();
String toolbarAction();
String content();
}
@UiField Style style;
@UiField SimplePanel headerContentUi;
@UiField FlowPanel toolbarUi;
@UiField(provided=true) SimpleLayoutPanel contentUi = new FullscreenViewerContentPanel();
@@ -52,14 +50,11 @@ public class FullscreenViewer {
public FullscreenViewer() {
popup.setWidget(mainPanel = uiBinder.createAndBindUi(this));
popup.addStyleName(style.popup());
Image closeControl = new Image("images/home/close.svg");
closeControl.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
popup.hide();
}
});
addToolbarAction(closeControl);
}
@UiHandler("closeActionUi")
void onCloseActionClicked(ClickEvent event) {
popup.hide();
}
public HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler) {
@@ -71,11 +66,15 @@ public class FullscreenViewer {
toolbarUi.add(widget);
}
public void addToolbarInfoText(Widget widget, boolean left) {
widget.addStyleName(left ? style.toolbarInfoTextLeft() : style.toolbarInfoTextRight());
public void addToolbarInfo(Widget widget) {
widget.addStyleName(style.toolbarInfo());
toolbarUi.add(widget);
}
public void setHeaderWidget(Widget widget) {
headerContentUi.setWidget(widget);
}
public void showContent(Widget content) {
contentUi.setWidget(content);
contentUi.getWidget().getElement().addClassName(style.content());
@@ -1,54 +1,68 @@
<!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:style gss="true" type="com.sap.sailing.gwt.home.shared.partials.fullscreen.FullscreenViewer.Style">
.popup {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.background {
background-color: rgba(0,0,0,0.9);
}
.toolbar {
padding: 0 5px;
}
.toolbarAction, .toolbarInfoTextRight {
float: right;
}
.toolbarInfoTextLeft, .toolbarInfoTextRight {
padding: 6px 10px;
color: white;
}
.toolbarInfoTextLeft {
padding-right: 25px;
}
.toolbarInfoTextRight {
text-align: right;
}
.toolbarAction {
height: 50px;
width: auto;
cursor: pointer;
padding: 10px;
}
.toolbarAction:hover {
background-color: #d79900;
}
.container {
width: 100%;
height: 100%;
}
.content {
background-color: white;
overflow: auto !important;
border-color: rgba(0,0,0,0.9);
border-width: 0 5px 5px;
border-style: solid;
}
.popup {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.9);
}
.popupContent {
border-color: rgba(0,0,0,0.9);
border-width: 0 5px 5px;
border-style: solid;
}
.header {
color: white
}
.header:after {
clear: both;
}
.headerContent {
padding: 9px 10px;
}
.toolbar {
float: right;
padding-left: 30px;
white-space: nowrap;
}
.toolbarContent {
display: inline-block;
}
.toolbarInfo {
display: inline-block;
padding: 9px 10px;
vertical-align: top;
}
.toolbarAction {
display: inline-block;
height: 50px;
width: auto;
cursor: pointer;
padding: 10px;
}
.toolbarAction:hover {
background-color: #d79900;
}
.container {
width: 100%;
height: 100%;
}
.content {
background-color: white;
overflow: auto !important;
}
</ui:style>
<g:HeaderPanel styleName="{style.background}">
<g:FlowPanel styleName="{style.toolbar}" ui:field="toolbarUi" />
<g:HeaderPanel styleName="{style.popupContent}">
<g:HTMLPanel styleName="{style.header}">
<div class="{style.toolbar}">
<g:FlowPanel styleName="{style.toolbarContent}" ui:field="toolbarUi"/>
<g:Image url="images/home/close.svg" styleName="{style.toolbarAction}" ui:field="closeActionUi"/>
</div>
<g:SimplePanel styleName="{style.headerContent}" ui:field="headerContentUi"/>
</g:HTMLPanel>
<g:SimpleLayoutPanel styleName="{style.container}" ui:field="contentUi" />
</g:HeaderPanel>
</ui:UiBinder>