EventsOverview improvements

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/events/CollapseAnimation.java

@@ -1,7 +1,10 @@
 package com.sap.sailing.gwt.home.client.place.events;
 
 import com.google.gwt.animation.client.Animation;
+import com.google.gwt.core.client.Scheduler;
+import com.google.gwt.core.client.Scheduler.ScheduledCommand;
 import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.dom.client.Style.Overflow;
 import com.google.gwt.dom.client.Style.Unit;
 
@@ -13,13 +16,28 @@ public class CollapseAnimation extends Animation {
     private int effectiveHeight;
 
     public CollapseAnimation(Element elementToAnimate) {
-        this.elementToAnimate = elementToAnimate;
+        this(elementToAnimate, true);
     }
     
     public CollapseAnimation(Element elementToAnimate, int effectiveHeight) {
-        this(elementToAnimate);
+        this(elementToAnimate, false);
         this.effectiveHeight = effectiveHeight;
-        show = false;
+    }
+    
+    public CollapseAnimation(Element elementToAnimate, boolean showInitial) {
+        this.elementToAnimate = elementToAnimate;
+        this.show = showInitial;
+        elementToAnimate.getStyle().setOverflow(Overflow.HIDDEN);
+        if(!showInitial) {
+            elementToAnimate.getStyle().setDisplay(Display.NONE);
+        }
+    }
+    
+    @Override
+    protected void onComplete() {
+        if(!show) {
+            elementToAnimate.getStyle().setDisplay(Display.NONE);
+        }
     }
 
     @Override
@@ -30,17 +48,17 @@ public class CollapseAnimation extends Animation {
         elementToAnimate.getStyle().setHeight(effectiveHeight * progress, Unit.PX);
     }
     
-    protected void onStart() {
-        super.onStart();
-        elementToAnimate.getStyle().setOverflow(Overflow.HIDDEN);
-    }
-    
     public void animate(boolean show) {
-        if(this.show && effectiveHeight == 0) {
+        if(show && effectiveHeight == 0) {
-            effectiveHeight = elementToAnimate.getOffsetHeight();
+            Scheduler.get().scheduleDeferred(new ScheduledCommand() {
+                @Override
+                public void execute() {
+                    effectiveHeight = elementToAnimate.getScrollHeight();
+                }
+            });
         }
+        elementToAnimate.getStyle().clearDisplay();
         this.show = show;
         run(500);
     }
-
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/events/recent/EventsOverviewRecent.java

@@ -35,15 +35,10 @@ public class EventsOverviewRecent extends Composite {
         
         boolean oneYearIsExpanded = false;
         for (EventListYearDTO yearDTO : years) {
-            EventsOverviewRecentYear recentEventsOfOneYear = new EventsOverviewRecentYear(yearDTO, navigator);
+            EventsOverviewRecentYear recentEventsOfOneYear = new EventsOverviewRecentYear(yearDTO, navigator, !oneYearIsExpanded);
             year.add(recentEventsOfOneYear);
             
-            if (oneYearIsExpanded == true) {
+            oneYearIsExpanded = true;
-                recentEventsOfOneYear.hideContent();
-            } else {
-                recentEventsOfOneYear.showContent();
-                oneYearIsExpanded = true;
-            }
         }
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/events/recent/EventsOverviewRecentYear.java

@@ -6,7 +6,6 @@ import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.DivElement;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.SpanElement;
-import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.uibinder.client.UiBinder;
@@ -18,6 +17,7 @@ import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.gwt.home.client.app.HomePlacesNavigator;
 import com.sap.sailing.gwt.home.client.app.PlaceNavigation;
 import com.sap.sailing.gwt.home.client.place.event2.EventDefaultPlace;
+import com.sap.sailing.gwt.home.client.place.events.CollapseAnimation;
 import com.sap.sailing.gwt.ui.shared.eventlist.EventListEventDTO;
 import com.sap.sailing.gwt.ui.shared.eventlist.EventListYearDTO;
 
@@ -42,11 +42,14 @@ public class EventsOverviewRecentYear extends Composite {
     
     private boolean isContentVisible;
     
-    public EventsOverviewRecentYear(EventListYearDTO yearDTO, HomePlacesNavigator navigator) {
+    private final CollapseAnimation animation;
+    
+    public EventsOverviewRecentYear(EventListYearDTO yearDTO, HomePlacesNavigator navigator, boolean showInitial) {
         List<EventListEventDTO> events = yearDTO.getEvents();
         
         EventsOverviewRecentResources.INSTANCE.css().ensureInjected();
         initWidget(uiBinder.createAndBindUi(this));
+        
         this.year.setInnerText(String.valueOf(yearDTO.getYear()));
         this.eventsCount.setInnerText(String.valueOf(events.size()));
         if(yearDTO.getSailorCount() > 0) {
@@ -72,13 +75,16 @@ public class EventsOverviewRecentYear extends Composite {
             RecentEventTeaser recentEvent = new RecentEventTeaser(eventNavigation, eventDTO);
             recentEventsTeaserPanel.add(recentEvent);
         }
-        isContentVisible = true;
         headerDiv.addDomHandler(new ClickHandler() {
             @Override
             public void onClick(ClickEvent event) {
                 onHeaderCicked();
             }
         }, ClickEvent.getType());
+
+        isContentVisible = showInitial;
+        animation = new CollapseAnimation(contentDiv, showInitial);
+        updateAccordionState();
     }
 
     private void onHeaderCicked() {
@@ -86,22 +92,15 @@ public class EventsOverviewRecentYear extends Composite {
         updateContentVisibility();
     }
     
-    public void hideContent() {
+    private void updateContentVisibility() {
-        isContentVisible = false;
+        animation.animate(isContentVisible);
-        updateContentVisibility();
+        updateAccordionState();
     }
 
-    public void showContent() {
+    private void updateAccordionState() {
-        isContentVisible = true;
-        updateContentVisibility();
-    }
-    
-    private void updateContentVisibility() {
         if(isContentVisible) {
-            contentDiv.getStyle().clearDisplay();
             getElement().removeClassName(EventsOverviewRecentResources.INSTANCE.css().accordioncollapsed());
         } else {
-            contentDiv.getStyle().setDisplay(Display.NONE);
             getElement().addClassName(EventsOverviewRecentResources.INSTANCE.css().accordioncollapsed());
         }
     }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/events/upcoming/EventsOverviewUpcoming.gss

@@ -54,6 +54,7 @@
   vertical-align: middle;
   text-overflow: ellipsis;
   width: 66%;
+  display: inline-block;
 }
 @media (min-width: 61em) {
   .eventsoverviewupcoming_header_ticker {

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/events/upcoming/EventsOverviewUpcoming.ui.xml

@@ -16,7 +16,7 @@
             <span>
               <h3 class="{local_res.css.eventsoverviewupcoming_header_title}">
                 <ui:text from="{i18n_ubi.seriesHeaderUpcoming}" /><span ui:field="colon" style="display: none;">:</span></h3>
-              <span ui:field="ticker" class="{local_res.css.eventsoverviewupcoming_header_ticker}" style="display: inline-block;" />
+              <span ui:field="ticker" class="{local_res.css.eventsoverviewupcoming_header_ticker}" />
             </span>
             <!-- IFEND upcomingEvents.events.length < 2 -->
           </div>