Optimize dynamic regatta progress text information sizing

This commit is contained in:
Benjamin Barth committed 2015-09-16 17:04:09 +02:00
1 parent ca67e9c32a
commit 6262dfde26
5 files changed
+82 -34

No files matched your search

@@ -198,28 +198,39 @@ img.race_item_windflag {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
overflow-x: visible;
}
.regattalistitem_steps_step_textwrapper {
display: inline-block;
white-space: nowrap;
}
.regattalistitem_steps_step_name {
font-weight: 600;
display: inline-block;
margin-right: 0.333333333333333em;
font-size: 0;
/* font-size: 0; */
font-size: 0.866666666666667em;
}
.regattalistitem_steps_step_name::first-letter {
font-size: 0.866666666666667rem;
margin-right: 0.333333333333333rem;
}
@media (min-width: 49.0625em) {
.regattalistitem_steps_step_name::first-letter {
margin-right: 0;
}
}
@media (min-width: 49.0625em) {
.regattalistitem_steps_step_name {
font-size: 0.866666666666667em;
}
.regattalistitem_steps_step_name_dummy {
font-weight: 600;
display: inline-block;
font-size: 0.866666666666667em;
position: absolute;
}
/* .regattalistitem_steps_step_name::first-letter { */
/* font-size: 0.866666666666667rem; */
/* margin-right: 0.333333333333333rem; */
/* } */
/* @media (min-width: 49.0625em) { */
/* .regattalistitem_steps_step_name::first-letter { */
/* margin-right: 0; */
/* } */
/* } */
/* @media (min-width: 49.0625em) { */
/* .regattalistitem_steps_step_name { */
/* font-size: 0.866666666666667em; */
/* } */
/* } */
.regattalistitem_steps_step_check {
display: inline-block;
vertical-align: middle;
@@ -49,7 +49,9 @@ public interface MultiRegattaListResources extends ClientBundle {
String regattalistitem_steps_step();
String regattalistitem_steps_stepinactive();
String regattalistitem_steps_step_infowrapper();
String regattalistitem_steps_step_textwrapper();
String regattalistitem_steps_step_name();
String regattalistitem_steps_step_name_dummy();
String regattalistitem_steps_step_check();
String regattalistitem_steps_step_progress();
String regattalistitem_steps_step_fleets();
@@ -65,6 +65,9 @@ public class MultiRegattaListSteps extends Composite {
@Override
protected void onLoad() {
for (MultiRegattaListStepsBody widget : allMultiregattaSteps) {
widget.init();
}
windowResizeHandlerRegistration = Window.addResizeHandler(new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
@@ -30,18 +30,24 @@ public class MultiRegattaListStepsBody extends UIObject implements RequiresResiz
interface MultiRegattaListStepsBodyUiBinder extends UiBinder<Element, MultiRegattaListStepsBody> {
}
@UiField DivElement longNameDummyUi;
@UiField DivElement mediumNameDummyUi;
@UiField DivElement nameUi;
@UiField DivElement checkUi;
@UiField DivElement progressUi;
@UiField DivElement fleetsContainerUi;
@UiField DivElement textContainerUi;
private final String seriesName;
private final String seriesName, seriesNameMedium, seriesNameShort;
private int seriesNameLength, seriesNameMediumLength;
public MultiRegattaListStepsBody(RegattaProgressSeriesDTO seriesProgress) {
setElement(uiBinder.createAndBindUi(this));
nameUi.getStyle().setVisibility(Visibility.HIDDEN);
seriesName = DEFAULT_SERIES_NAME.equals(seriesProgress.getName()) ? I18N.races() : seriesProgress.getName();
nameUi.setInnerText(seriesName);
textContainerUi.getStyle().setVisibility(Visibility.HIDDEN);
longNameDummyUi.setInnerText(seriesName = caculateSeriesName(seriesProgress));
mediumNameDummyUi.setInnerText(seriesNameMedium = caculateSeriesNameMedium());
seriesNameShort = caculateSeriesNameShort();
if (seriesProgress.isCompleted()) {
progressUi.setInnerText(String.valueOf(seriesProgress.getTotalRaceCount()));
} else {
@@ -51,9 +57,18 @@ public class MultiRegattaListStepsBody extends UIObject implements RequiresResiz
}
addFleetProgresses(seriesProgress.getFleetState(), seriesProgress.getTotalRaceCount());
setFleetsTooltip(seriesProgress.getFleetNames());
}
void init() {
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
int textContainerLength = textContainerUi.getOffsetWidth();
seriesNameLength = longNameDummyUi.getOffsetWidth() + textContainerLength;
seriesNameMediumLength= mediumNameDummyUi.getOffsetWidth() + textContainerLength;
longNameDummyUi.removeFromParent();
mediumNameDummyUi.removeFromParent();
textContainerUi.getStyle().clearVisibility();
renderNames();
}
});
@@ -78,20 +93,33 @@ public class MultiRegattaListStepsBody extends UIObject implements RequiresResiz
}
}
private void renderNames() {
if (getElement().getOffsetWidth() < nameUi.getOffsetWidth() + checkUi.getOffsetWidth()
+ progressUi.getOffsetWidth()) {
String[] tokens = seriesName.split(" ");
StringBuilder initials = new StringBuilder();
for (int i = 0; i < tokens.length; i++) {
initials.append(tokens[i].charAt(0));
}
nameUi.setInnerText(initials.toString());
}
nameUi.setTitle(seriesName);
nameUi.getStyle().setVisibility(Visibility.VISIBLE);
private String caculateSeriesName(RegattaProgressSeriesDTO seriesProgress) {
return DEFAULT_SERIES_NAME.equals(seriesProgress.getName()) ? I18N.races() : seriesProgress.getName();
}
private String caculateSeriesNameMedium() {
String[] tokens = seriesName.split(" ");
StringBuilder initials = new StringBuilder();
for (int i = 0; i < tokens.length; i++) {
initials.append(tokens[i].charAt(0));
}
return initials.toString();
}
private String caculateSeriesNameShort() {
return seriesName.substring(0, 1);
}
private void renderNames() {
if (fleetsContainerUi.getOffsetWidth() >= seriesNameLength) {
nameUi.setInnerText(seriesName);
} else if (fleetsContainerUi.getOffsetWidth() >= seriesNameMediumLength) {
nameUi.setInnerText(seriesNameMedium);
} else {
nameUi.setInnerText(seriesNameShort);
}
}
@Override
public void onResize() {
renderNames();
@@ -7,9 +7,13 @@
<ui:with field="local_res" type="com.sap.sailing.gwt.home.desktop.partials.multiregattalist.MultiRegattaListResources" />
<div class="{local_res.css.regattalistitem_steps_step}">
<div class="{local_res.css.regattalistitem_steps_step_infowrapper}">
<div class="{local_res.css.regattalistitem_steps_step_name}" ui:field="nameUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_check}" ui:field="checkUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_progress}" ui:field="progressUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_textwrapper}" ui:field="textContainerUi">
<div class="{local_res.css.regattalistitem_steps_step_name_dummy}" ui:field="longNameDummyUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_name_dummy}" ui:field="mediumNameDummyUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_name}" ui:field="nameUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_check}" ui:field="checkUi"></div>
<div class="{local_res.css.regattalistitem_steps_step_progress}" ui:field="progressUi"></div>
</div>
<div class="{local_res.css.regattalistitem_steps_step_fleets}" ui:field="fleetsContainerUi"></div>
</div>
</div>