Set the events/tasks list collapsable

UI/Scheduler/UIxCalMainView.m

@@ -214,8 +214,6 @@
 
 - (BOOL) showCompletedTasks
 {
-  BOOL show;
-
   [self _setupContext];
 
   return [[us objectForKey: @"ShowCompletedTasks"] boolValue];
@@ -237,6 +235,32 @@
   return [self responseWithStatus: 204];
 }
 
+- (WOResponse *) saveListStateAction
+{
+  WORequest *request;
+  NSString *state;
+
+  [self _setupContext];
+  request = [context request];
+
+  state = [request formValueForKey: @"state"];
+  [moduleSettings setObject: state
+                     forKey: @"ListState"];
+  [us synchronize];
+
+  return [self responseWithStatus: 204];
+}
+
+- (NSString *) listStateStyle
+{
+  NSString *state;
+
+  [self _setupContext];
+  state = [moduleSettings objectForKey: @"ListState"];
+
+  return (state && [state compare: @"collapse"] == NSOrderedSame)? @"display: none;" : @"";
+}
+
 - (unsigned int) firstDayOfWeek
 {
   SOGoUserDefaults *ud;

UI/Scheduler/UIxCalView.m

@@ -343,6 +343,26 @@
     }
 }
 
+- (NSString *) collapseBtnClass
+{
+  NSString *module, *state;
+  NSMutableDictionary *moduleSettings;
+  SOGoUser *activeUser;
+  SOGoAppointmentFolders *clientObject;
+  SOGoUserSettings *us;
+
+  activeUser = [context activeUser];
+  clientObject = [self clientObject];
+
+  module = [clientObject nameInContainer];
+
+  us = [activeUser userSettings];
+  moduleSettings = [us objectForKey: module];
+  state = [moduleSettings objectForKey: @"ListState"];
+
+  return (state && [state compare: @"collapse"] == NSOrderedSame)? @"rise" : @"collapse";
+}
+
 /* current day related */
 
 - (void) setCurrentDay:(NSCalendarDate *) _day

UI/Scheduler/product.plist

@@ -55,6 +55,11 @@
           pageName    = "UIxCalMainView";
           actionName  = "saveSelectedList";
         };          
+        saveListState = {
+          protectedBy = "View";
+          pageName    = "UIxCalMainView";
+          actionName  = "saveListState";
+        };
         dateselector = {
           protectedBy = "View";
           pageName    = "UIxCalDateSelector"; 

UI/Templates/SchedulerUI/UIxCalDayView.wox

@@ -1,63 +1,43 @@
 <?xml version="1.0" standalone="yes"?>
-<!DOCTYPE container>
+  <container
-<container
+      xmlns="http://www.w3.org/1999/xhtml"
-  xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:var="http://www.skyrix.com/od/binding"
-  xmlns:var="http://www.skyrix.com/od/binding"
+      xmlns:const="http://www.skyrix.com/od/constant"
-  xmlns:const="http://www.skyrix.com/od/constant"
+      xmlns:rsrc="OGo:url"
-  xmlns:rsrc="OGo:url"
+      xmlns:label="OGo:label">
-  xmlns:label="OGo:label">
 
-  <div class="menu" id="currentViewMenu">
+    <div class="menu" id="currentViewMenu">
-    <ul>
+      <ul>
-      <li><var:string label:value="New Event..."/></li>
+        <li><var:string label:value="New Event..."/></li>
-      <li><var:string label:value="New Task..."/></li>
+        <li><var:string label:value="New Task..."/></li>
-      <li><!-- separator --></li>
+        <li><!-- separator --></li>
-      <li><var:string label:value="Previous Day"/></li>
+        <li><var:string label:value="Previous Day"/></li>
-      <li><var:string label:value="Next Day"/></li>
+        <li><var:string label:value="Next Day"/></li>
-      <li><!-- separator --></li>
+        <li><!-- separator --></li>
-      <li><var:string label:value="Delete Event"/></li>
+        <li><var:string label:value="Delete Event"/></li>
-      <li><var:string label:value="Copy event to my calendar"/></li>
+        <li><var:string label:value="Copy event to my calendar"/></li>
-      <li><var:string label:value="View Raw Source"/></li>
+        <li><var:string label:value="View Raw Source"/></li>
-    </ul>
+      </ul>
-  </div>
+    </div>
-  <a href="#"
+    <span class="daysHeader">
-    class="leftNavigationArrow"
+      <span class="day1">
-    var:date="prevDayQueryParameters.day"
+        <a href="#"
-    onclick="return onCalendarGotoDay(this);"
+           var:date="prevDayQueryParameters.day"
-    ><img rsrc:src="arrow-left.png"/></a>
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-left.png"/></a>
-  <span class="daysHeader">
+      </span>
-    <span class="day2"><a href="#"
+      <span class="day0"><var:string value="currentDayName"/></span>
-	var:date="dayBeforePrevDayQueryParameters.day"
+      <span class="day1">
-	onclick="return onCalendarGotoDay(this);"
+        <a href="#"
-	><var:string value="dayBeforeYesterdayName"
+           var:date="nextDayQueryParameters.day"
-	  /></a></span
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-right.png"/></a>
-      ><span class="day1"><a href="#"
+      </span>
-	var:date="prevDayQueryParameters.day"
+      <a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
-	onclick="return onCalendarGotoDay(this);"
+    </span>
-	><var:string value="yesterdayName"
+    <div id="calendarContent">
-	  /></a></span
+      <var:component
-      ><span class="day0"><var:string value="currentDayName" /></span
+          className="UIxCalDayTable"
-      ><span class="day1"><a href="#"
+          startDate="startDate"
-	var:date="nextDayQueryParameters.day"
+          const:CSSClass="dayOverview"
-	onclick="return onCalendarGotoDay(this);"
+          const:numberOfDays="1" />
-	><var:string value="tomorrowName"
+    </div>
-	  /></a></span
+  </container>
-      ><span class="day2"><a href="#"
-	var:date="dayAfterNextDayQueryParameters.day"
-	onclick="return onCalendarGotoDay(this);"
-	><var:string value="dayAfterTomorrowName"
-	  /></a></span
-      ></span>
-  <a href="#"
-    class="rightNavigationArrow"
-    var:date="nextDayQueryParameters.day"
-    onclick="return onCalendarGotoDay(this);"
-    ><img rsrc:src="arrow-right.png"/></a>
-  <div id="calendarContent">
-    <var:component
-      className="UIxCalDayTable"
-      startDate="startDate"
-      const:CSSClass="dayOverview"
-      const:numberOfDays="1" />
-  </div>
-</container>

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -147,7 +147,7 @@
   <div id="verticalDragHandle" class="dragHandle"><!-- space --></div>
 
   <div id="rightPanel">
-    <div class="tabsContainer" id="schedulerTabs">
+    <div class="tabsContainer" id="schedulerTabs" var:style="listStateStyle">
       <ul>
         <li target="eventsListView" var:class="eventsTabClass"
           ><span><var:string label:value="Events" /></span></li>
@@ -202,7 +202,7 @@
         </div>
       </div>
     </div>
-    <div id="rightDragHandle" class="dragHandle"><!-- space --></div>
+    <div id="rightDragHandle" class="dragHandle" var:style="listStateStyle"><!-- space --></div>
-    <div id="calendarView"><!-- space --></div>
+    <div id="calendarView" var:style="listStateStyle"><!-- space --></div>
   </div>
 </var:component>

UI/Templates/SchedulerUI/UIxCalMonthView.wox

@@ -1,77 +1,58 @@
 <?xml version="1.0" standalone="yes"?>
 <!DOCTYPE container>
-<container
+  <container
-  xmlns="http://www.w3.org/1999/xhtml"
+      xmlns="http://www.w3.org/1999/xhtml"
-  xmlns:var="http://www.skyrix.com/od/binding"
+      xmlns:var="http://www.skyrix.com/od/binding"
-  xmlns:const="http://www.skyrix.com/od/constant"
+      xmlns:const="http://www.skyrix.com/od/constant"
-  xmlns:rsrc="OGo:url"
+      xmlns:rsrc="OGo:url"
-  xmlns:label="OGo:label">
+      xmlns:label="OGo:label">
 
-  <div class="menu" id="currentViewMenu">
+    <div class="menu" id="currentViewMenu">
-    <ul>
+      <ul>
-      <li><var:string label:value="New Event..."/></li>
+        <li><var:string label:value="New Event..."/></li>
-      <li><var:string label:value="New Task..."/></li>
+        <li><var:string label:value="New Task..."/></li>
-      <li><!-- separator --></li>
+        <li><!-- separator --></li>
-      <li><var:string label:value="Previous Month"/></li>
+        <li><var:string label:value="Previous Month"/></li>
-      <li><var:string label:value="Next Month"/></li>
+        <li><var:string label:value="Next Month"/></li>
-      <li><!-- separator --></li>
+        <li><!-- separator --></li>
-      <li><var:string label:value="Delete Event"/></li>
+        <li><var:string label:value="Delete Event"/></li>
-      <li><var:string label:value="Copy event to my calendar"/></li>
+        <li><var:string label:value="Copy event to my calendar"/></li>
-      <li><var:string label:value="View Raw Source"/></li>
+        <li><var:string label:value="View Raw Source"/></li>
-    </ul>
+      </ul>
-  </div>
+    </div>
-  <a href="#"
+    <span class="monthsHeader">
-    class="leftNavigationArrow"
+      <span class="month1">
-    var:date="prevMonthQueryParameters.month"
+        <a href="#"
-    onclick="return onCalendarGotoDay(this);"
+           var:date="prevMonthQueryParameters.month"
-    ><img rsrc:src="arrow-left.png"/></a>
+           onclick="return onCalendarGotoDay(this);"
-  <span class="monthsHeader">
+           ><img rsrc:src="arrow-left.png"/></a>
-    <span class="month2"><a href="#"
+      </span>
-        var:date="monthBeforePrevMonthQueryParameters.month"
+      <span class="month0"><var:string value="monthNameOfThisMonth" /></span>
-        onclick="return onCalendarGotoDay(this);"
+      <span class="month1">
-        ><var:string value="monthNameOfTwoMonthAgo"
+        <a href="#"
-          /></a></span
+           var:date="nextMonthQueryParameters.month"
-      ><span class="month1"><a href="#"
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-right.png"/></a>
-        var:date="prevMonthQueryParameters.month"
+      </span>
-        onclick="return onCalendarGotoDay(this);"
+      <a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
-        ><var:string value="monthNameOfOneMonthAgo"
+    </span>
-          /></a></span
+    <div id="calendarContent">
-      ><span class="month0"><var:string value="monthNameOfThisMonth" /></span
+      <div class="monthView">
-      ><span class="month1"><a href="#"
+        <var:foreach list="headerDaysToDisplay" item="currentTableDay"
-        var:date="nextMonthQueryParameters.month"
+                     ><div var:class="headerDayCellClasses"
-        onclick="return onCalendarGotoDay(this);"
+                           ><var:string value="labelForCurrentDayToDisplay"
-        ><var:string value="monthNameOfNextMonth"
+                           /></div></var:foreach>
-          /></a></span
+        <div class="days" const:id="monthDaysView"
-      ><span class="month2"><a href="#"
+          ><var:foreach list="weeksToDisplay" item="currentWeek"
-        var:date="monthAfterNextMonthQueryParameters.month"
+            ><var:foreach list="currentWeek" item="currentTableDay"
-        onclick="return onCalendarGotoDay(this);"
+              ><div var:class="dayCellClasses"
-        ><var:string value="monthNameOfTheMonthAfterNextMonth"
+                    var:day="currentTableDay.shortDateString"
-          /></a></span
+                    var:day-number="currentDayNumber"
-      ></span>
+                    var:id="currentDayId"
-  <a href="#"
-    class="rightNavigationArrow"
-    var:date="nextMonthQueryParameters.month"
-    onclick="return onCalendarGotoDay(this);"
-    ><img rsrc:src="arrow-right.png"/></a>
-
-  <div id="calendarContent">
-    <div class="monthView">
-      <var:foreach list="headerDaysToDisplay" item="currentTableDay"
-        ><div var:class="headerDayCellClasses"
-          ><var:string value="labelForCurrentDayToDisplay"
-            /></div></var:foreach>
-      <div class="days" const:id="monthDaysView"
-        ><var:foreach list="weeksToDisplay" item="currentWeek"
-          ><var:foreach list="currentWeek" item="currentTableDay"
-            ><div var:class="dayCellClasses"
-              var:day="currentTableDay.shortDateString"
-              var:day-number="currentDayNumber"
-              var:id="currentDayId"
               ><div class="dayHeader"><var:string value="dayHeaderNumber"/></div
-		></div>
+              ></div>
+            </var:foreach>
           </var:foreach>
-        </var:foreach>
+        </div>
       </div>
     </div>
-  </div>
+  </container>
-</container>

UI/Templates/SchedulerUI/UIxCalWeekView.wox

@@ -1,63 +1,43 @@
 <?xml version="1.0" standalone="yes"?>
   <container
-    xmlns="http://www.w3.org/1999/xhtml"
+      xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:var="http://www.skyrix.com/od/binding"
+      xmlns:var="http://www.skyrix.com/od/binding"
-    xmlns:const="http://www.skyrix.com/od/constant"
+      xmlns:const="http://www.skyrix.com/od/constant"
-    xmlns:rsrc="OGo:url"
+      xmlns:rsrc="OGo:url"
-    xmlns:label="OGo:label">
+      xmlns:label="OGo:label">
 
-  <div class="menu" id="currentViewMenu">
+    <div class="menu" id="currentViewMenu">
-    <ul>
+      <ul>
-      <li><var:string label:value="New Event..."/></li>
+        <li><var:string label:value="New Event..."/></li>
-      <li><var:string label:value="New Task..."/></li>
+        <li><var:string label:value="New Task..."/></li>
-      <li><!-- separator --></li>
+        <li><!-- separator --></li>
-      <li><var:string label:value="Previous Week"/></li>
+        <li><var:string label:value="Previous Week"/></li>
-      <li><var:string label:value="Next Week"/></li>
+        <li><var:string label:value="Next Week"/></li>
-      <li><!-- separator --></li>
+        <li><!-- separator --></li>
-      <li><var:string label:value="Delete Event"/></li>
+        <li><var:string label:value="Delete Event"/></li>
-      <li><var:string label:value="Copy event to my calendar"/></li>
+        <li><var:string label:value="Copy event to my calendar"/></li>
-      <li><var:string label:value="View Raw Source"/></li>
+        <li><var:string label:value="View Raw Source"/></li>
-    </ul>
+      </ul>
-  </div>
+    </div>
-    <a href="#"
-      class="leftNavigationArrow"
-      var:date="prevWeekQueryParameters.day"
-      onclick="return onCalendarGotoDay(this);"
-      ><img rsrc:src="arrow-left.png"/></a>
     <span class="weeksHeader">
-      <span class="week2"><a href="#"
+      <span class="week1">
-          var:date="weekBeforePrevWeekQueryParameters.day"
+        <a href="#"
-          onclick="return onCalendarGotoDay(this);"
+           var:date="prevWeekQueryParameters.day"
-          ><var:string value="weekBeforeLastWeekName"
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-left.png"/></a>
-            /></a></span
+      </span>
-        ><span class="week1"><a href="#"
+      <span class="week0"><var:string value="currentWeekName" /></span>
-          var:date="prevWeekQueryParameters.day"
+      <span class="week1">
-          onclick="return onCalendarGotoDay(this);"
+        <a href="#"
-          ><var:string value="lastWeekName"
+           var:date="nextWeekQueryParameters.day"
-            /></a></span
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-right.png"/></a>
-        ><span class="week0"><var:string value="currentWeekName" /></span
+      </span>
-        ><span class="week1"><a href="#"
+      <a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
-          var:date="nextWeekQueryParameters.day"
+    </span>
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="nextWeekName"
-            /></a></span
-        ><span class="week2"><a href="#"
-          var:date="weekAfterNextWeekQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="weekAfterNextWeekName"
-            /></a></span
-        ></span>
-    <a href="#"
-      class="rightNavigationArrow"
-      var:date="nextWeekQueryParameters.day"
-      onclick="return onCalendarGotoDay(this);"
-      ><img rsrc:src="arrow-right.png"/></a>
-
     <div id="calendarContent">
       <var:component
-        className="UIxCalDayTable"
+          className="UIxCalDayTable"
-        startDate="startDate"
+          startDate="startDate"
-        const:CSSClass="weekOverview"
+          const:CSSClass="weekOverview"
-        const:numberOfDays="7" />
+          const:numberOfDays="7" />
     </div>
   </container>

UI/WebServerResources/SOGoTabsController.js

@@ -67,6 +67,7 @@ SOGoTabsController.prototype = {
 
     attachToTabsContainer: function STC_attachToTabsContainer(container) {
         this.container = container;
+        container.controller = this;
         this.onTabMouseDownBound
         = this.onTabMouseDown.bindAsEventListener(this);
         this.onTabClickBound

UI/WebServerResources/SchedulerUI.css

@@ -319,23 +319,23 @@ SPAN.weeksHeader,
 SPAN.monthsHeader
 { display: block;
   white-space: nowrap;
+  text-align: center;
   background-color: #DFDFDF;
   overflow: hidden;
   width: 100%;
   margin: 0px;
   height: 3em;
-  padding: 2px 1.5em;
+  padding: 2px 0px;
   border-bottom: 1px solid #ccc; }
 
 SPAN.daysHeader SPAN,
 SPAN.weeksHeader SPAN,
 SPAN.monthsHeader SPAN
-{ display: block;
+{ font-size: large;
   margin: .1em;
-  float: left;
+  padding: 6px 12px;
-  width: 18%;
-  padding: 0px;
   text-align: center;
+  line-height: 1.5em;
   border: 1px solid transparent;
   vertical-align: top; }
 
@@ -343,67 +343,51 @@ SPAN.daysHeader A,
 SPAN.weeksHeader A,
 SPAN.monthsHeader A
 { border: 1px solid transparent;
-  color: #000;
   line-height: 1.5em;
-  padding: 0px .5em; }
+  padding: 0px 0.7em; }
 
-A.leftNavigationArrow,
+.day1 A:hover,
-A.rightNavigationArrow
+.week1 A:hover,
-{ border: 1px solid transparent;
+.month1 A:hover
-  padding: .5em;
-  text-align: center;
-  vertical-align: bottom; }
-
-A.leftNavigationArrow:hover,
-A.rightNavigationArrow:hover,
-SPAN.daysHeader A:hover,
-SPAN.weeksHeader A:hover,
-SPAN.monthsHeader A:hover
 { border-top: 1px solid #fff;
   border-left: 1px solid #fff;
   border-bottom: 1px solid #828482;
   border-right: 1px solid #828482; }
 
-A.leftNavigationArrow:active,
+.day1 A:active,
-A.rightNavigationArrow:active,
+.week1 A:active,
-SPAN.daysHeader A:active,
+.month1 A:active
-SPAN.weeksHeader A:active,
-SPAN.monthsHeader A:active
 { border-top: 1px solid #828482;
   border-left: 1px solid #828482;
   border-bottom: 1px solid #fff;
   border-right: 1px solid #fff; }
 
-SPAN.week2, SPAN.month2
+#listCollapse
-{ font-size: small; }
-
-SPAN.day2, SPAN.week1, SPAN.month1
-{ font-size: medium; }
-
-SPAN.day1, SPAN.week0, SPAN.month0
-{ font-size: large; }
-
-SPAN.day0
-{ font-size: x-large; }
-
-SPAN.day0, SPAN.week0, SPAN.month0
-{ border-top: 1px solid #909090 !important;
-  border-left: 1px solid #909090 !important;
-  border-bottom: 1px solid #FFFFFF !important;
-  border-right: 1px solid #FFFFFF !important;
-  background-color: #ddd; }
-
-A.leftNavigationArrow
 { position: absolute;
-  display: block;
+  top: .2em;
-  top: .5em;
+  right: 0;
-  left: .5em; }
+  margin: 0.5em 1em; }
 
-A.rightNavigationArrow
+#listCollapse img
-{ position: absolute;
+{ position: absolute; }
-  display: block;
+
-  top: .5em;
+#listCollapse img.collapse
-  right: .5em; }
+{ clip: rect(0 18px 18px 0);
+  left: 0;
+  top: 0; }
+
+#listCollapse img.collapse:hover
+{ clip: rect(0 36px 18px 18px);
+  left: -18px; }
+
+#listCollapse img.rise
+{ clip: rect(18px 18px 36px 0);
+  left: 0;
+  top: -18px; }
+
+#listCollapse img.rise:hover
+{ clip: rect(18px 36px 36px 18px);
+  left: -18px; }
 
 DIV#calendarHeader,
 DIV#daysView

UI/WebServerResources/SchedulerUI.js

@@ -3205,6 +3205,11 @@ function deletePersonalCalendarCallback(http) {
 }
 
 function configureLists() {
+    // Move calendar view if lists are collapsed
+    if (!$("schedulerTabs").visible()) {
+        $('calendarView').setStyle({ top: '0' }).show();
+    }
+
     // TASK LIST
     var list = $("tasksList");
     list.multiselect = true;
@@ -3292,6 +3297,37 @@ function drawNowLine() {
   }
 }
 
+function onListCollapse(event, element) {
+    var img = element.select('img').first();
+    var tabs = $("schedulerTabs");
+    var handle = $("rightDragHandle");
+    var view = jQuery("#calendarView");
+    var state = 'collapse';
+
+    if (tabs.visible()) {
+        img.removeClassName('collapse').addClassName('rise');
+        handle.hide();
+        view.animate({ top: '0' }, 200, function() {
+            tabs.hide();
+        });
+    }
+    else {
+        state = 'rise';
+        img.removeClassName('rise').addClassName('collapse');
+        tabs.show();
+        tabs.controller.onWindowResize();
+        view.animate({ top: handle.getStyle('top') }, 200, function() {
+            handle.show();
+        });
+    }
+
+    var url =  ApplicationBaseURL + "saveListState";
+    var params = "state=" + state;
+    triggerAjaxRequest(url, null, null, params,
+                       { "Content-type": "application/x-www-form-urlencoded" });
+
+}
+
 function onDocumentKeydown(event) {
     var target = Event.element(event);
     if (target.tagName != "INPUT") {
@@ -3367,7 +3403,7 @@ function initScheduler() {
         // Calendar import form
         $("uploadCancel").observe("click", hideCalendarImport);
         $("uploadOK").observe("click", hideImportResults);
-
+        $("calendarView").on("click", "#listCollapse", onListCollapse);
         Event.observe(document, "keydown", onDocumentKeydown);
     }