mirror of
https://github.com/eclipse-sailing-analytics/sailing-analytics.git
synced 2026-10-27 22:37:15 +00:00
Added partials for mobile video gallery
This commit is contained in:
Benjamin Barth committed
1 parent
8cdc000972
commit
e12c78adc7
6 files changed
+243
No files matched your search
+90
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* A video gallery
|
||||
*/
|
||||
.videoitem {
|
||||
font-size: inherit;
|
||||
}
|
||||
.videoitem .playbutton {
|
||||
font-size: inherit;
|
||||
}
|
||||
.videoitem .info {
|
||||
font-size: inherit;
|
||||
}
|
||||
.videoitem .playicon {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../images/home/play-icon.svg") no-repeat;
|
||||
background-size: 2.333333333333333em 2.333333333333333em;
|
||||
background-position: center;
|
||||
}
|
||||
.videoitem .videoplaceholder {
|
||||
height: 100%;
|
||||
}
|
||||
.videoitem .videoplaceholder_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.videoitem iframe {
|
||||
width: 100%;
|
||||
}
|
||||
.video {
|
||||
font-size: 1rem;
|
||||
height: 13.333333333333334em;
|
||||
position: relative;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0;
|
||||
}
|
||||
.videohideinfo .video_info {
|
||||
display: none;
|
||||
}
|
||||
.video_play {
|
||||
font-size: inherit;
|
||||
}
|
||||
.video_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #f6f9fc;
|
||||
padding: 1em;
|
||||
background: rgba(0,0,0,0.6);
|
||||
}
|
||||
.video_info_text {
|
||||
display: inline-block;
|
||||
}
|
||||
.video_info_text h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.066666666666667em;
|
||||
}
|
||||
.videogallery {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.videogallery_video {
|
||||
padding: 0;
|
||||
margin-bottom: 1.333333333333333em;
|
||||
}
|
||||
.videogallery_video .grid {
|
||||
margin: 0;
|
||||
}
|
||||
.videogallery_video_info {
|
||||
padding: 0;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.videogallery_video_info_title {
|
||||
padding: 0 40% 0 0.9375em;
|
||||
font-size: 1.066666666666667em;
|
||||
line-height: 1.125em;
|
||||
font-weight: 700;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.videogallery_video_info_subtitle {
|
||||
padding: 0 40% 0 1.153846153846154em;
|
||||
font-size: 0.866666666666667em;
|
||||
line-height: 1.384615384615385em;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
package com.sap.sailing.gwt.home.mobile.partials.videogallery;
|
||||
|
||||
import java.util.Collection;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.dom.client.Style.FontStyle;
|
||||
import com.google.gwt.dom.client.Style.FontWeight;
|
||||
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.ui.Composite;
|
||||
import com.google.gwt.user.client.ui.Label;
|
||||
import com.google.gwt.user.client.ui.Widget;
|
||||
import com.sap.sailing.gwt.home.mobile.partials.section.MobileSection;
|
||||
import com.sap.sailing.gwt.home.mobile.partials.sectionHeader.SectionHeaderContent;
|
||||
import com.sap.sailing.gwt.ui.client.StringMessages;
|
||||
import com.sap.sse.gwt.client.media.VideoDTO;
|
||||
|
||||
public class VideoGallery extends Composite {
|
||||
|
||||
private static VideoGalleryUiBinder uiBinder = GWT.create(VideoGalleryUiBinder.class);
|
||||
|
||||
interface VideoGalleryUiBinder extends UiBinder<MobileSection, VideoGallery> {
|
||||
}
|
||||
|
||||
@UiField SectionHeaderContent sectionHeaderUi;
|
||||
private final MobileSection mobileSection;
|
||||
|
||||
public VideoGallery() {
|
||||
VideoGalleryResources.INSTANCE.css().ensureInjected();
|
||||
initWidget(mobileSection = uiBinder.createAndBindUi(this));
|
||||
sectionHeaderUi.setSectionTitle(StringMessages.INSTANCE.videos());
|
||||
}
|
||||
|
||||
public void setVideos(Collection<VideoDTO> videos) {
|
||||
sectionHeaderUi.setInfoText(StringMessages.INSTANCE.videosCount(videos.size()));
|
||||
mobileSection.clearContent();
|
||||
if (videos.isEmpty()) {
|
||||
mobileSection.addContent(getNoVideosInfoWidget());
|
||||
} else {
|
||||
for (VideoDTO video : videos) {
|
||||
mobileSection.addContent(new VideoGalleryVideo(video));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private Widget getNoVideosInfoWidget() {
|
||||
Label label = new Label(StringMessages.INSTANCE.noVideos());
|
||||
label.getElement().getStyle().setPadding(1, Unit.EM);
|
||||
label.getElement().getStyle().setFontWeight(FontWeight.BOLD);
|
||||
label.getElement().getStyle().setFontStyle(FontStyle.ITALIC);
|
||||
return label;
|
||||
}
|
||||
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<!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:mp="urn:import:com.sap.sailing.gwt.home.mobile.partials" xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
|
||||
<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.videogallery.VideoGalleryResources" />
|
||||
<mp:section.MobileSection addStyleNames="{local_res.css.videogallery}">
|
||||
<mp:header>
|
||||
<mp:sectionHeader.SectionHeaderContent ui:field="sectionHeaderUi"/>
|
||||
</mp:header>
|
||||
</mp:section.MobileSection>
|
||||
</ui:UiBinder>
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
package com.sap.sailing.gwt.home.mobile.partials.videogallery;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.resources.client.ClientBundle;
|
||||
import com.google.gwt.resources.client.CssResource;
|
||||
|
||||
public interface VideoGalleryResources extends ClientBundle {
|
||||
public static final VideoGalleryResources INSTANCE = GWT.create(VideoGalleryResources.class);
|
||||
|
||||
@Source("VideoGallery.gss")
|
||||
LocalCss css();
|
||||
|
||||
public interface LocalCss extends CssResource {
|
||||
String videoitem();
|
||||
String playbutton();
|
||||
String info();
|
||||
String playicon();
|
||||
String videoplaceholder();
|
||||
String videoplaceholder_image();
|
||||
String video();
|
||||
String videohideinfo();
|
||||
String video_info();
|
||||
String video_play();
|
||||
String video_info_text();
|
||||
String videogallery();
|
||||
String videogallery_video();
|
||||
String grid();
|
||||
String videogallery_video_info();
|
||||
String videogallery_video_info_title();
|
||||
String videogallery_video_info_subtitle();
|
||||
}
|
||||
}
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
package com.sap.sailing.gwt.home.mobile.partials.videogallery;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.dom.client.DivElement;
|
||||
import com.google.gwt.uibinder.client.UiBinder;
|
||||
import com.google.gwt.uibinder.client.UiField;
|
||||
import com.google.gwt.user.client.ui.Composite;
|
||||
import com.google.gwt.user.client.ui.Widget;
|
||||
import com.sap.sailing.gwt.home.client.shared.videoPlayer.VideoPlayer;
|
||||
import com.sap.sailing.gwt.ui.common.client.DateAndTimeFormatterUtil;
|
||||
import com.sap.sse.gwt.client.media.VideoDTO;
|
||||
|
||||
public class VideoGalleryVideo extends Composite {
|
||||
|
||||
private static VideoGalleryVideoUiBinder uiBinder = GWT.create(VideoGalleryVideoUiBinder.class);
|
||||
|
||||
interface VideoGalleryVideoUiBinder extends UiBinder<Widget, VideoGalleryVideo> {
|
||||
}
|
||||
|
||||
@UiField(provided = true) VideoPlayer videoPlayerUi = new VideoPlayer(false, false);
|
||||
@UiField DivElement videoTitleUi;
|
||||
@UiField DivElement videoCreateDateUi;
|
||||
|
||||
public VideoGalleryVideo(VideoDTO video) {
|
||||
initWidget(uiBinder.createAndBindUi(this));
|
||||
videoPlayerUi.setVideo(video);
|
||||
setTextOrRemove(videoTitleUi, video.getTitle());
|
||||
setTextOrRemove(videoCreateDateUi, DateAndTimeFormatterUtil.formatDateAndTime(video.getCreatedAtDate()));
|
||||
}
|
||||
|
||||
private void setTextOrRemove(DivElement element, String text) {
|
||||
if (text == null || text.isEmpty()) {
|
||||
element.removeFromParent();
|
||||
} else {
|
||||
element.setInnerText(text);
|
||||
}
|
||||
}
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<!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:mp="urn:import:com.sap.sailing.gwt.home.mobile.partials" xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
|
||||
<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.videogallery.VideoGalleryResources" />
|
||||
<g:HTMLPanel>
|
||||
<div class="{res.mediaCss.small12} {res.mediaCss.columns} {local_res.css.videogallery_video}">
|
||||
<s:videoPlayer.VideoPlayer ui:field="videoPlayerUi"/>
|
||||
<div class="{local_res.css.videogallery_video_info}">
|
||||
<div class="{local_res.css.videogallery_video_info_title}" ui:field="videoTitleUi"></div>
|
||||
<div class="{local_res.css.videogallery_video_info_subtitle}" ui:field="videoCreateDateUi"></div>
|
||||
</div>
|
||||
</div>
|
||||
</g:HTMLPanel>
|
||||
</ui:UiBinder>
|
||||
Reference in new issue
Block a user