eclipse-sailing-analytics/sailing-analytics
1
0 Fork 0
mirror of https://github.com/eclipse-sailing-analytics/sailing-analytics.git synced 2026-10-28 14:57:12 +00:00
Code Activity

Updated slick slider, aligned with ubilabs design.

Browse Source
This commit is contained in:
Papick Garcia Taboada committed 2015-04-14 12:31:05 +02:00
1 parent 7bd3bd5621
commit d7c427a3d7
11 files changed
+481 -224
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

java/com.sap.sse.gwt/src/com/sap/sse/gwt/client/controls/carousel/ImageCarousel.java
+2 -1
View File
@@ -115,6 +115,8 @@ public class ImageCarousel extends Widget {
lazyLoad : (sliderReference.@com.sap.sse.gwt.client.controls.carousel.ImageCarousel::lazyload),
swipeToSlide : false,
arrows : true,
prevArrow : "<div class='slick-prev'/>",
nextArrow : "<div class='slick-next'/>",
responsive : true,
slidesToShow : 2
@@ -150,7 +152,6 @@ public class ImageCarousel extends Widget {
setInfiniteScrolling(false);
setShowDots(false);
}
}
/**
java/com.sap.sse.gwt/src/com/sap/sse/gwt/client/controls/carousel/ImageCarousel.ui.xml
+142 -69
View File
@@ -1,75 +1,148 @@
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:style>
@external slick-slide, slick-prev, slick-next, slick-track;
.slider {
width: 100%;
@external slick-slide, slick-prev, slick-next, slick-track, slick-dots,slick-active;
.slider {
width: 100%;
}
.slider .slick-track {
overflow-y: hidden;
}
.slider li {
width: 10px;
padding: 2px;
}
.slider .slick-dots {
position: absolute;
bottom: -45px;
display: inline-block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slider .slick-dots>li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slider .slick-dots>li>button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slider .slick-dots>li>button:hover, .slider .slick-dots>li>button:focus
{
outline: none;
}
.slider .slick-dots>li>button:hover:before, .slider .slick-dots>li>button:focus:before
{
opacity: 1;
}
.slider .slick-dots>li>button:before {
width: 10px;
}
.slider .slick-dots>li>button:before {
font-family: 'slick';
font-size: 35px;
line-height: 35px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "\2022";
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slider .slick-dots>li.slick-active>button:before {
opacity: .75;
color: black;
}
.slider .slick-slide {
margin-left: 15px;
margin-right: 15px;
background-color: #fcfcfc;
}
.slider .slick-prev, .slider .slick-next {
position: absolute;
background-position: 0 0;
background-repeat: no-repeat;
z-index: 10;
cursor: pointer;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 4em;
height: 4em;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNzkyQ0E2OUQ0MzgxMUUzQTM5MEI2NkI4RTRCODhEMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNzkyQ0E2QUQ0MzgxMUUzQTM5MEI2NkI4RTRCODhEMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3OTJDQTY3RDQzODExRTNBMzkwQjY2QjhFNEI4OEQzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3OTJDQTY4RDQzODExRTNBMzkwQjY2QjhFNEI4OEQzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8Qas9QAAA/9JREFUeNrs3T1LW1EYwHFzk2poS1sthSJipRrFRcEX0CWmgkMHv0YHd2dxlDsGAv0IfgIRlYIgWYpBF4cW0SjokFYL0oY0L80zZKlx8t5zntzz/4Mf4Dm/E5PDzb2JTU9Pf+6iyOaxBAATwAQwAUwAE8AEMMAEMAFMABPABDDpBk4kEjH5i8qiaprH07AYuVzuQzabzUQBWWaQWWQmDfN4GnCnpqZGJicnhyYmJl51OrDMILPITBqQ4/39/cu2cSuVyt+1tbWtg4ODUqcDX11dlYvF4nU6nX4/MDDwpjnfy62trbN6ve4OcDvcnZ2d66i8B5+ent5pQTYOHHVcbchGgV3B1YRsDNg1XC3IRoBdxX0Iufkp+8X29va5CeTQgVvnwpmZmZSLuO2QBwcHjSGHCtzCnZ2ddRrXJnJowODqQA4FGFw9yIEDg6sLOVBgcPUhB36xIR6Px6DTs3aBvoJl58khXg7zct6TnSk7VHYqfPdbWlp6u76+/rG7u/vJ4eHh95WVlS/VarWh+j0YZD24oX2KBlkHbqjnYJDt44YKDLJ93NCBQbaLawQYZHu4xoBdRraJaxTYRWTbuMaBXULWgGsF2AVkLbjWgB9CLhQK5/K94k7Gbc7T6/v+sgZcKWFzMWRwWYBcLtdVq9Uax8fHt53+6pUZjo6OzuTCgW1cKabhWZWt2ztsL0YU50loWJCowGqch/uDIx7AABPABDABTAATwAQwwAQwAUwAE8D0qORy4TTLwCuYACaACWACmAAmgAEmgAlgApgAJoAJYIAtJffSRukhpprm8TQshu/7QxsbG++igCwzyCwyk4Z5PA246XS6b25urnd0dLSn04FlBplFZtKALM/o+GQbt1wu11dXV78VCoXfnQ5cKpWqJycnd4uLi33Dw8NPx8bGenZ3d381Gg13gNvh5vP5yDxG6fLysqIF2Thw1HG1IRsFdgVXE7IxYNdwtSAbAXYV9yHkVCrVvbe3ZwQ5dODWuXBhYeG1i7jtkEdGRp6ZQg4VuIWbyWScxrWJHBowuDqQQwEGVw9y4MDg6kIOFBhcfciBX2zwPI/fLlS0doG+gmXnySFeDvNy3pOdKTtUdip895ufn3/u+34qmUx6+/v7P5v/8c7kudmq34NB1oMb2qdokHXghnoOBtk+bqjAINvHDR0YZLu4RoBBtodrDNhlZJu4RoFdRLaNaxzYJWQNuFaAXUDWgmsN+CHkfD5/K98r7mTc8fHxZDabHdOAaxX4f+SLi4s/m5ubP2x9QTyobm5uak3knmKxWLaNK8lvF361vSit2ztsL0YU51Hx24VRgdU4D/cHRzyAASaACWACmAAmgAlggAlgApgAJoDpUf0TYADnqrAanCLw9QAAAABJRU5ErkJggg==)
}
.slider slick-prev:hover, .slider slick-prev:focus, .slider slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
}
.slider .slick-prev {
left: 0px;
z-index: 1;
height: 60px;
width: 60px;
background-position: 0 0;
}
}
.slider .slick-prev {
left: 0;
background-position: 0 0;
}
.slider .slick-prev:hover {
background-position: 0 100%
}
.slider .slick-next {
right: 0;
background-position: 100% 0;
}
.slider .slick-next:hover {
background-position: 100% 100%;
}
</ui:style>
.slider .slick-track {
overflow-y:hidden;
}
.slider li {
width: 10px;
padding: 2px;
}
.slider .slick-dots li button:before {
width: 10px;
}
.slider ul {
position: absolute;
bottom: -90px;
font-size: 10px;
overflow: hidden;
height: 70px;
}
.slider .slick-dots li {
margin: 5px;
width: 10px;
}
.slider ul > li > button:before {
font-size: 10px;
width: 5spx;
padding: 0px;
}
.slider .slick-slide {
margin-left: 15px;
margin-right: 15px;
background-color: #fcfcfc;
}
.slider .slick-prev {
left: 20px;
z-index:1;
height: 60px;
width: 60px;
}
.slider .slick-prev:before {
color: #000000;
font-size: 60px;
left: -60px;
}
.slider .slick-next {
right: 20px;
z-index:1;
height: 60px;
width: 60px;
}
.slider .slick-next:before {
color: #000000;
font-size: 60px;
left: -60px;
}
</ui:style>
<div class="{style.slider}" ui:field="sliderMainUi" >
<div class="{style.slider}" ui:field="sliderMainUi">
</div>
</ui:UiBinder>
java/com.sap.sse.gwt/src/com/sap/sse/gwt/client/controls/carousel/WidgetCarousel.java
+44 -21
View File
@@ -10,6 +10,7 @@ import com.google.gwt.dom.client.Element;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
@@ -60,7 +61,7 @@ public class WidgetCarousel extends Composite {
/**
* slick slider property: infiniteScrolling
*/
private boolean infiniteScrolling = false;
private boolean infiniteScrolling = true;
private final String uniqueId;
@@ -74,6 +75,17 @@ public class WidgetCarousel extends Composite {
uniqueId = Document.get().createUniqueId();
sliderMainUi.addStyleName(uniqueId);
init();
}
@Override
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
if ("afterChange".equals(event.getType())) {
onAfterChange();
} else if ("init".equals(event.getType())) {
onAfterChange();
}
}
public void onAfterChange() {
@@ -103,27 +115,38 @@ public class WidgetCarousel extends Composite {
native void setupSlider(WidgetCarousel sliderReference) /*-{
$wnd
.$(document)
.ready(
.$(
'.'
+ (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::uniqueId))
.on(
'afterChange',
function() {
$wnd
.$(
'.'
+ (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::uniqueId))
.slick(
{
dots : (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::showDots),
infinite : (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::infiniteScrolling),
swipeToSlide : false,
arrows : true,
responsive : false,
onAfterChange : function() {
sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::onAfterChange()();
},
onInit : function() {
sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::onAfterChange()();
}
});
sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::onAfterChange()();
});
$wnd
.$(
'.'
+ (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::uniqueId))
.on(
'init',
function() {
sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::onAfterChange()();
});
$wnd
.$(
'.'
+ (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::uniqueId))
.slick(
{
dots : (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::showDots),
infinite : (sliderReference.@com.sap.sse.gwt.client.controls.carousel.WidgetCarousel::infiniteScrolling),
swipeToSlide : false,
responsive : false,
arrows : true,
prevArrow : "<div class='slick-prev'/>",
nextArrow : "<div class='slick-next'/>"
});
}-*/;
java/com.sap.sse.gwt/src/com/sap/sse/gwt/client/controls/carousel/WidgetCarousel.ui.xml
+65 -49
View File
@@ -1,58 +1,74 @@
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
@external slick-slide, slick-prev, slick-next, slick-track;
.slider {
width: 100%;
}
.slider .slick-track {
}
.slider ul li > button:before {
font-size: 15px;
}
@external slick-slide, slick-prev, slick-next, slick-track;
.slider {
width: 100%;
}
.slider .slick-track {
.slider .slick-slide {
margin: 0px;
background-color: #fcfcfc;
}
.slider .slick-prev {
left: 20px;
z-index:1;
height: 60px;
width: 60px;
}
.slider .slick-prev:before {
color: #000000;
font-size: 60px;
left: -60px;
top: 10px;
}
.slider .slick-next {
right: 20px;
z-index:1;
height: 60px;
width: 60px;
}
.slider .slick-next:before {
color: #000000;
font-size: 60px;
left: -60px;
}
</ui:style>
}
.slider ul li>button:before {
font-size: 15px;
}
.slider .slick-slide {
margin: 0px;
background-color: #fcfcfc;
}
.slider .slick-prev {
left: 0px;
z-index: 1;
height: 60px;
width: 60px;
}
.slick-prev, .slick-next {
position: absolute;
background-position: 0 0;
background-repeat: no-repeat;
z-index: 10;
cursor: pointer;
top: 40%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 4em;
height: 4em;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNzkyQ0E2OUQ0MzgxMUUzQTM5MEI2NkI4RTRCODhEMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNzkyQ0E2QUQ0MzgxMUUzQTM5MEI2NkI4RTRCODhEMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3OTJDQTY3RDQzODExRTNBMzkwQjY2QjhFNEI4OEQzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3OTJDQTY4RDQzODExRTNBMzkwQjY2QjhFNEI4OEQzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8Qas9QAAA/9JREFUeNrs3T1LW1EYwHFzk2poS1sthSJipRrFRcEX0CWmgkMHv0YHd2dxlDsGAv0IfgIRlYIgWYpBF4cW0SjokFYL0oY0L80zZKlx8t5zntzz/4Mf4Dm/E5PDzb2JTU9Pf+6iyOaxBAATwAQwAUwAE8AEMMAEMAFMABPABDDpBk4kEjH5i8qiaprH07AYuVzuQzabzUQBWWaQWWQmDfN4GnCnpqZGJicnhyYmJl51OrDMILPITBqQ4/39/cu2cSuVyt+1tbWtg4ODUqcDX11dlYvF4nU6nX4/MDDwpjnfy62trbN6ve4OcDvcnZ2d66i8B5+ent5pQTYOHHVcbchGgV3B1YRsDNg1XC3IRoBdxX0Iufkp+8X29va5CeTQgVvnwpmZmZSLuO2QBwcHjSGHCtzCnZ2ddRrXJnJowODqQA4FGFw9yIEDg6sLOVBgcPUhB36xIR6Px6DTs3aBvoJl58khXg7zct6TnSk7VHYqfPdbWlp6u76+/rG7u/vJ4eHh95WVlS/VarWh+j0YZD24oX2KBlkHbqjnYJDt44YKDLJ93NCBQbaLawQYZHu4xoBdRraJaxTYRWTbuMaBXULWgGsF2AVkLbjWgB9CLhQK5/K94k7Gbc7T6/v+sgZcKWFzMWRwWYBcLtdVq9Uax8fHt53+6pUZjo6OzuTCgW1cKabhWZWt2ztsL0YU50loWJCowGqch/uDIx7AABPABDABTAATwAQwwAQwAUwAE8D0qORy4TTLwCuYACaACWACmAAmgAEmgAlgApgAJoAJYIAtJffSRukhpprm8TQshu/7QxsbG++igCwzyCwyk4Z5PA246XS6b25urnd0dLSn04FlBplFZtKALM/o+GQbt1wu11dXV78VCoXfnQ5cKpWqJycnd4uLi33Dw8NPx8bGenZ3d381Gg13gNvh5vP5yDxG6fLysqIF2Thw1HG1IRsFdgVXE7IxYNdwtSAbAXYV9yHkVCrVvbe3ZwQ5dODWuXBhYeG1i7jtkEdGRp6ZQg4VuIWbyWScxrWJHBowuDqQQwEGVw9y4MDg6kIOFBhcfciBX2zwPI/fLlS0doG+gmXnySFeDvNy3pOdKTtUdip895ufn3/u+34qmUx6+/v7P5v/8c7kudmq34NB1oMb2qdokHXghnoOBtk+bqjAINvHDR0YZLu4RoBBtodrDNhlZJu4RoFdRLaNaxzYJWQNuFaAXUDWgmsN+CHkfD5/K98r7mTc8fHxZDabHdOAaxX4f+SLi4s/m5ubP2x9QTyobm5uak3knmKxWLaNK8lvF361vSit2ztsL0YU51Hx24VRgdU4D/cHRzyAASaACWACmAAmgAlggAlgApgAJoDpUf0TYADnqrAanCLw9QAAAABJRU5ErkJggg==)
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus
{
color: transparent;
outline: none;
}
.slick-prev {
left: 0;
background-position: 0 0;
}
.slick-prev:hover {
background-position: 0 100%
}
.slick-next {
right: 0;
background-position: 100% 0;
}
.slick-next:hover {
background-position: 100% 100%;
}
</ui:style>
<g:HTMLPanel styleName="{style.slider}" ui:field="sliderMainUi">
</g:HTMLPanel>
</ui:UiBinder>