mirror of
https://github.com/eclipse-sailing-analytics/sailing-analytics.git
synced 2026-10-25 05:23:51 +00:00
Optimize dynamic regatta progress text information sizing
This commit is contained in:
1 parent
ca67e9c32a
commit
6262dfde26
5 files changed
+82
-34
No files matched your search
+25
-14
@@ -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;
|
||||
|
||||
+2
@@ -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();
|
||||
|
||||
+3
@@ -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) {
|
||||
|
||||
+45
-17
@@ -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
-3
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user