Implemented partials for mobile search results

This commit is contained in:
Benjamin Barth committed 2015-10-19 10:36:32 +02:00
1 parent 8fb846abd4
commit f8ed315e2d
8 files changed
+338

No files matched your search

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.8 19.8"><path fill="#F0AB00" d="M19.5 18.3l-5.1-5.1c1.1-1.4 1.8-3.1 1.8-5.1 0-4.5-3.6-8.1-8.1-8.1S0 3.6 0 8.1s3.6 8.1 8.1 8.1c1.9 0 3.7-.7 5.1-1.8l5.1 5.1c.2.2.4.3.6.3.2 0 .5-.1.6-.3.4-.3.4-.9 0-1.2zM8.1 14.4c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3z"/></svg>

After

Width:  |  Height:  |  Size: 345 B

@@ -0,0 +1,79 @@
.searchresult {
font-size: 1rem;
}
.searchresult_header {
background: #f2f2f2;
margin: 0;
padding: 0;
}
.searchresult_header_form {
height: 100%;
}
.searchresult_header_form_label {
display: block;
font-size: 1.2em;
padding: 0 0.833333333333333em;
margin: 1.111111111111111em 0;
font-weight: 700;
color: #0a0a0a;
}
.searchresult_header_form_inputwrapper {
padding: 0.333333333333333em;
}
.searchresult_header_form_input {
float: left;
display: block;
font-weight: 600;
padding: 0 2.333333333333333em 0 0.666666666666667em;
width: 100%;
height: 2.666666666666667em;
border: none;
vertical-align: middle;
}
.searchresult_header_form_button {
float: left;
width: 2.333333333333333em;
height: 2.666666666666667em;
margin-left: -2.333333333333333em;
border: none;
vertical-align: middle;
background: url("images/mobile/search-icon-yellow.svg") no-repeat;
background-size: 1.333333333333333em 1.333333333333333em;
background-position: center;
}
.searchresult_amount {
font-size: 0.866666666666667em;
font-weight: 600;
color: #0a0a0a;
padding: 1.153846153846154em;
border-bottom: 1px solid #ccc;
}
.searchresult_item {
padding: 1.333333333333333em 1em;
border-bottom: 1px solid #ccc;
}
.searchresult_item_headline {
font-size: 1.066666666666667em;
font-weight: 700;
}
.searchresult_item_event {
font-size: 0.866666666666667em;
color: #0a0a0a;
}
.searchresult_item_event_link {
color: #0a0a0a;
}
.searchresult_item_event_link:visited,
.searchresult_item_event_link:active {
color: #0a0a0a;
}
.searchresult_item_event > *:after {
content: "|";
margin: 0 0.384615384615385em;
color: #ccc;
text-decoration: none;
}
.searchresult_item_event > *:last-child:after {
content: "";
margin: 0;
}
@@ -0,0 +1,64 @@
package com.sap.sailing.gwt.home.mobile.partials.searchresult;
import java.util.Collection;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.SpanElement;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
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.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.gwt.home.mobile.places.searchresult.SearchResultView.Presenter;
import com.sap.sailing.gwt.ui.shared.dispatch.search.SearchResultDTO;
public class SearchResult extends Composite {
private static SearchResultUiBinder uiBinder = GWT.create(SearchResultUiBinder.class);
interface SearchResultUiBinder extends UiBinder<Widget, SearchResult> {
}
@UiField TextBox searchInputUi;
@UiField Button searchButtonUi;
@UiField SpanElement searchResultCountUi;
@UiField SpanElement searchResultForUi;
@UiField FlowPanel searchResultContainerUi;
private final Presenter presenter;
public SearchResult(Presenter presenter) {
SearchResultResources.INSTANCE.css().ensureInjected();
this.presenter = presenter;
initWidget(uiBinder.createAndBindUi(this));
}
public void updateSearchResult(String searchText, Collection<SearchResultDTO> searchResultItems) {
searchResultContainerUi.clear();
searchInputUi.setValue(searchText);
searchResultCountUi.setInnerText(String.valueOf(searchResultItems.size()));
searchResultForUi.setInnerText(searchText);
for (SearchResultDTO searchResult : searchResultItems) {
searchResultContainerUi.add(new SearchResultItem(presenter.getNavigator(), searchResult));
}
}
@UiHandler("searchInputUi")
void onSearchInputEnter(KeyPressEvent event) {
if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ENTER) {
presenter.doSearch(searchInputUi.getValue());
}
}
@UiHandler("searchButtonUi")
void onSearchButtonClicked(ClickEvent event) {
presenter.doSearch(searchInputUi.getValue());
}
}
@@ -0,0 +1,29 @@
<!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"
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared" xmlns:mp="urn:import:com.sap.sailing.gwt.home.mobile.partials">
<ui:with field="i18n" type="com.sap.sailing.gwt.common.client.i18n.TextMessages" />
<ui:with field="res" type="com.sap.sailing.gwt.home.mobile.resources.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.mobile.partials.searchresult.SearchResultResources" />
<g:HTMLPanel>
<div class="{res.mediaCss.grid}">
<div class="{local_res.css.searchresult}">
<div class="{local_res.css.searchresult_header} {res.mediaCss.small12} {res.mediaCss.columns}">
<div class="{local_res.css.searchresult_header_form}">
<label for="searchfor" class="{local_res.css.searchresult_header_form_label}">
<ui:text from='{i18n.searchResultHeaderLabel}' />
</label>
<div class="{local_res.css.searchresult_header_form_inputwrapper} {res.mediaCss.small12} {res.mediaCss.columns}">
<g:TextBox addStyleNames="{local_res.css.searchresult_header_form_input}" ui:field="searchInputUi"/>
<!-- placeholder="{i18n.searchResultHeaderPlaceholder}" -->
<g:Button addStyleNames="{local_res.css.searchresult_header_form_button}" ui:field="searchButtonUi"/>
</div>
</div>
</div>
<div class="{local_res.css.searchresult_amount} {res.mediaCss.small12} {res.mediaCss.columns}">
<span ui:field="searchResultCountUi" />&nbsp;<ui:text from='{i18n.searchResultsFound}'/> '<span ui:field="searchResultForUi" />'.
</div>
<g:FlowPanel ui:field="searchResultContainerUi" />
</div>
</div>
</g:HTMLPanel>
</ui:UiBinder>
@@ -0,0 +1,43 @@
package com.sap.sailing.gwt.home.mobile.partials.searchresult;
import static com.sap.sailing.gwt.home.shared.utils.EventDatesFormatterUtil.formatDateRangeWithYear;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.AnchorElement;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.SpanElement;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.gwt.home.mobile.app.MobilePlacesNavigator;
import com.sap.sailing.gwt.home.shared.app.PlaceNavigation;
import com.sap.sailing.gwt.ui.shared.dispatch.search.SearchResultDTO;
public class SearchResultItem extends Widget {
private static SearchResultItemUiBinder uiBinder = GWT.create(SearchResultItemUiBinder.class);
interface SearchResultItemUiBinder extends UiBinder<Element, SearchResultItem> {
}
@UiField AnchorElement resultLinkUi;
@UiField AnchorElement eventLinkUi;
@UiField SpanElement eventVenueUi;
@UiField SpanElement eventDateUi;
public SearchResultItem(MobilePlacesNavigator navigator, SearchResultDTO result) {
setElement(uiBinder.createAndBindUi(this));
resultLinkUi.setInnerText(result.getDisplayName());
String eventId = result.getEventId().toString(), baseUrl = result.getBaseUrl();
PlaceNavigation<?> regattaNavigation = navigator.getRegattaOverviewNavigation(eventId, result.getLeaderboardName(), baseUrl, result.isOnRemoteServer());
regattaNavigation.configureAnchorElement(resultLinkUi);
eventLinkUi.setInnerText(result.getEventName());
PlaceNavigation<?> eventNavigation = navigator.getEventNavigation(eventId, baseUrl, result.isOnRemoteServer());
eventNavigation.configureAnchorElement(eventLinkUi);
eventVenueUi.setInnerText(result.getEventVenueName());
if (result.getEventStartDate() != null) {
eventDateUi.setInnerText(formatDateRangeWithYear(result.getEventStartDate(), result.getEventEndDate()));
}
}
}
@@ -0,0 +1,15 @@
<!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"
xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared" xmlns:mp="urn:import:com.sap.sailing.gwt.home.mobile.partials">
<ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
<ui:with field="res" type="com.sap.sailing.gwt.home.mobile.resources.SharedResources" />
<ui:with field="local_res" type="com.sap.sailing.gwt.home.mobile.partials.searchresult.SearchResultResources" />
<div class="{local_res.css.searchresult_item} {res.mediaCss.small12} {res.mediaCss.columns}">
<a class="{local_res.css.searchresult_item_headline}" ui:field="resultLinkUi"> </a>
<div class="{local_res.css.searchresult_item_event}" ui:field="itemEventContainerUi">
<a class="{local_res.css.searchresult_item_event_link}" ui:field="eventLinkUi"> </a>
<span ui:field="eventVenueUi"></span>
<span ui:field="eventDateUi"></span>
</div>
</div>
</ui:UiBinder>
@@ -0,0 +1,27 @@
package com.sap.sailing.gwt.home.mobile.partials.searchresult;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
public interface SearchResultResources extends ClientBundle {
public static final SearchResultResources INSTANCE = GWT.create(SearchResultResources.class);
@Source("SearchResult.gss")
LocalCss css();
public interface LocalCss extends CssResource {
String searchresult();
String searchresult_header();
String searchresult_header_form();
String searchresult_header_form_label();
String searchresult_header_form_inputwrapper();
String searchresult_header_form_input();
String searchresult_header_form_button();
String searchresult_amount();
String searchresult_item();
String searchresult_item_headline();
String searchresult_item_event();
String searchresult_item_event_link();
}
}
@@ -0,0 +1,80 @@
package com.sap.sailing.gwt.ui.shared.dispatch.search;
import java.net.URL;
import java.util.Date;
import java.util.UUID;
import com.google.gwt.core.shared.GwtIncompatible;
import com.sap.sailing.domain.base.EventBase;
import com.sap.sailing.domain.base.LeaderboardSearchResultBase;
import com.sap.sailing.gwt.ui.shared.dispatch.DTO;
public class SearchResultDTO implements DTO {
private String displayName;
private UUID eventId;
private String eventName;
private String eventVenueName;
private Date eventStartDate;
private Date eventEndDate;
private String leaderboardName;
private String baseUrl;
private boolean isOnRemoteServer;
protected SearchResultDTO() {
}
@GwtIncompatible
public SearchResultDTO(LeaderboardSearchResultBase hit, URL baseUrl, boolean isOnRemoteServer) {
this.leaderboardName = hit.getLeaderboard().getName();
this.displayName = hit.getLeaderboard().getDisplayName() != null ? hit.getLeaderboard().getDisplayName() :
(hit.getRegattaName() != null ? hit.getRegattaName() : leaderboardName);
EventBase event = hit.getEvent();
this.eventId = (UUID) event.getId();
this.eventName = event.getName();
this.eventVenueName = event.getVenue() != null ? event.getVenue().getName() : null;
this.eventStartDate = event.getStartDate() != null ? event.getStartDate().asDate() : null;
this.eventEndDate = event.getEndDate() != null ? event.getEndDate().asDate() : null;
this.baseUrl = baseUrl.toString();
this.isOnRemoteServer = isOnRemoteServer;
}
public String getDisplayName() {
return displayName;
}
public UUID getEventId() {
return eventId;
}
public String getEventName() {
return eventName;
}
public String getEventVenueName() {
return eventVenueName;
}
public Date getEventStartDate() {
return eventStartDate;
}
public Date getEventEndDate() {
return eventEndDate;
}
public String getLeaderboardName() {
return leaderboardName;
}
public String getBaseUrl() {
return baseUrl;
}
public boolean isOnRemoteServer() {
return isOnRemoteServer;
}
}