Improvements to the component/event/task editor

Monotone-Parent: 075f98c3d837af89c8856cd35c6327138dfb5eea
Monotone-Revision: b187467dece23f6eb8bf6fef314b1cf1ca22eaec

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2009-08-07T16:01:14
Monotone-Branch: ca.inverse.sogo

UI/Templates/SchedulerUI/UIxAppointmentEditor.wox

@@ -13,10 +13,6 @@
   var:component="event"
   var:saveURL="saveURL">
 
-      <label id="attendeesLabel"><var:string label:value="Attendees:"
-	  /><span class="content"
-	  ><a href="#" id="attendeesHref"><!-- space --></a></span></label>
-      <hr />
   <var:if condition="eventIsReadOnly" const:negate="YES">
   <div class="menu" id="attendeesMenu">
     <ul>
@@ -27,6 +23,10 @@
       <li class="separator"><!-- separator --></li>
     </ul>
   </div>
+      <label id="attendeesLabel"><var:string label:value="Attendees:"
+	  /><span class="content"
+	  ><a href="#" id="attendeesHref"><!-- space --></a></span></label>
+      <hr />
   <label><span class="content">
     <span id="allDay"><input id="isAllDay" name="isAllDay" class="checkBox"
         type="checkbox" var:selection="isAllDay"

UI/Templates/SchedulerUI/UIxComponentEditor.wox

@@ -17,6 +17,8 @@
   <script type="text/javascript">
     var activeCalendar = '<var:string value="clientObject.container.nameInContainer"/>';
     var activeComponent = '<var:string value="clientObject.nameInContainer"/>';
+    var readOnly = <var:if condition="eventIsReadOnly">true</var:if><var:if condition="eventIsReadOnly"
+    const:negate="YES">false</var:if>;
   </script>
 
   <var:if condition="eventIsReadOnly" const:negate="YES">
@@ -164,13 +166,12 @@
   </form>
   </var:if>
   <var:if condition="eventIsReadOnly">
+        <label class="calendarName"><var:string var:value="componentCalendarName" />
+        </label>
     <div id="eventView">
       <div id="generalDiv">
-        <label class="content calendarName"><var:string var:value="componentCalendarName" />
-        </label>
     <label class="title titleNoSpace"><var:string label:value="General:" />
-      <span class="content headerContent">
-      </span>
+      <span class="content headerContent"><!-- line --></span>
     </label>
   <label><var:string label:value="Title:" />
     <span class="content"><var:string var:value="title"/></span>
@@ -230,8 +231,7 @@
     <var:if condition="hasAttendees">
     <div id="attendeesDiv">
       <label class="title"><var:string label:value="Attendees:" />
-        <span class="content headerContent">
-        </span>
+        <span class="content headerContent"><!-- line --></span>
       </label>
       <label id="attendeesLabel">
         <span class="content"><div id="attendeesMenu" class="fakeTextArea">
@@ -242,10 +242,9 @@
     <var:if condition="hasComment">
       <div id="descriptionDiv">
         <label class="title"><var:string label:value="Description:" />
-          <span class="content headerContent">
-          </span>
+          <span class="content headerContent"><!-- line --></span>
         </label>
-        <label><span class="content fixedHeight">
+        <label><span class="content">
             <div class="fakeTextArea"><var:string var:value="comment" /></div>
           </span>
         </label>

UI/WebServerResources/UIxAppointmentEditor.js

@@ -461,16 +461,18 @@ function getMenus() {
 }
 
 function onAppointmentEditorLoad() {
-    assignCalendar('startTime_date');
-    assignCalendar('endTime_date');
-    
-    var widgets = {'start': {'date': $("startTime_date"),
-                             'hour': $("startTime_time_hour"),
-                             'minute': $("startTime_time_minute")},
-                   'end': {'date': $("endTime_date"),
-                           'hour': $("endTime_time_hour"),
-                           'minute': $("endTime_time_minute")}};
-    initTimeWidgets(widgets);
+    if (readOnly == false) {
+        assignCalendar('startTime_date');
+        assignCalendar('endTime_date');
+        
+        var widgets = {'start': {'date': $("startTime_date"),
+                                 'hour': $("startTime_time_hour"),
+                                 'minute': $("startTime_time_minute")},
+                       'end': {'date': $("endTime_date"),
+                               'hour': $("endTime_time_hour"),
+                               'minute': $("endTime_time_minute")}};
+        initTimeWidgets(widgets);
+    }
     initializeAttendeesHref();
 }
 

UI/WebServerResources/UIxComponentEditor.css

@@ -22,7 +22,7 @@ SPAN.content
 
 SPAN.content > INPUT.textField,
 LABEL#commentArea textarea
-{ width: 380px; }
+{ max-width: 380px; }
 
 LABEL, SPAN.checkBoxList
 { display: block;
@@ -34,12 +34,13 @@ LABEL, SPAN.checkBoxList
   width: 100%; }
 
 LABEL#commentArea textarea
-{ padding-bottom: 0em;
-  top: 0px;
+{ position: absolute;
+  top: 0;
+  width: 100%;
   left: 8em;
-  position: absolute;
-  padding: 0px;
+  right: 1em;
   margin: 0px;
+  margin: auto;
   margin-left: 1px; }
 
 SPAN.headerContent
@@ -51,7 +52,7 @@ SPAN.headerContent
 }
 LABEL.title
 {
-  margin-top: 20px;
+  margin-top: 1em;
   font-weight: bold;
 }
 LABEL.titleNoSpace
@@ -66,10 +67,13 @@ DIV#windowButtons
   right: 2em; }
 
 LABEL.calendarName
-{ text-align: right;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 97%;
+{ background-color: #fff;
+  border-bottom: 1px solid #555;
+  font-weight: bold;
+  text-align: right;
+  margin: 0;
+  padding: 10px;
+  width: auto;
 }
 
 DIV#attendeesMenu
@@ -81,13 +85,9 @@ DIV.fakeTextArea
   border-width: 2px;
   border-style: inset; 
   padding: 2px;
-  height: 100%;
-  white-space: pre-wrap;
-}
+  height: 100px;
+  white-space: pre-wrap; }
 
-DIV#descriptionDiv {
-  height: 80px;
-}
-SPAN.fixedHeight {
-  height: 60px;
-}
+DIV#descriptionDiv,
+DIV#attendeesDiv
+{ height: 120px; }

UI/WebServerResources/UIxComponentEditor.js

@@ -43,8 +43,8 @@ function onPopupAttachWindow(event) {
     }
     attachInput.value = newAttach;
   }
-	onWindowResize(event);
-
+  onWindowResize(event);
+  
   return false;
 }
 
@@ -183,27 +183,31 @@ function onSummaryChange (e) {
 }
 
 function onWindowResize(event) {
-    var document = $("documentLabel");
     var comment = $("commentArea");
     if (comment) {
-  	var area = comment.select("textarea").first();
-  	var offset = 6;
+        // Resize comment area of read-write component
+        var document = $("documentLabel");
+        var area = comment.select("textarea").first();
+        var offset = 6;
         var height;
         
-  	height = window.height() - comment.cumulativeOffset().top - offset;
+        height = window.height() - comment.cumulativeOffset().top - offset;
         
-  	if (document.visible()) {
+        if (document.visible()) {
+            // Component has an attachment
             if ($("changeAttachButton"))
-  	  	height -= $("changeAttachButton").getHeight();
+                height -= $("changeAttachButton").getHeight();
             else
                 height -= $("documentHref").getHeight();
         }
-	
+        
         if (area)
             area.setStyle({ height: (height - offset*2) + "px" });
-  	comment.setStyle({ height: (height - offset) + "px" });
+
+        comment.setStyle({ height: (height - offset) + "px" });
     }
     else {
+        // Resize attendees area of a read-only component
         $("eventView").style.height = window.height () + "px";
         var height = window.height() - 120;
         var tmp = $("generalDiv");
@@ -213,8 +217,11 @@ function onWindowResize(event) {
         if (tmp)
             height -= tmp.offsetHeight;
         
-        $("attendeesDiv").style.height = height + "px";
-        $("attendeesMenu").style.height = (height - 20) + "px";
+        tmp = $("attendeesDiv");
+        if (tmp) {
+            tmp.style.height = height + "px";
+            $("attendeesMenu").style.height = (height - 20) + "px";
+        }
     }
     
     return true;

UI/WebServerResources/UIxTaskEditor.js

@@ -156,16 +156,18 @@ function addContact(tag, fullContactName, contactId, contactName, contactEmail)
 }
 
 function onTimeControlCheck(checkBox) {
-  var inputs = checkBox.parentNode.getElementsByTagName("input");
-  var selects = checkBox.parentNode.getElementsByTagName("select");
-  for (var i = 0; i < inputs.length; i++)
-    if (inputs[i] != checkBox)
-      inputs[i].disabled = !checkBox.checked;
-  for (var i = 0; i < selects.length; i++)
-    if (selects[i] != checkBox)
-      selects[i].disabled = !checkBox.checked;
+    if (checkBox) {
+        var inputs = checkBox.parentNode.getElementsByTagName("input");
+        var selects = checkBox.parentNode.getElementsByTagName("select");
+        for (var i = 0; i < inputs.length; i++)
+            if (inputs[i] != checkBox)
+                inputs[i].disabled = !checkBox.checked;
+        for (var i = 0; i < selects.length; i++)
+            if (selects[i] != checkBox)
+                selects[i].disabled = !checkBox.checked;
 	if (checkBox.id == "dueDateCB")
-		$("reminderList").disabled = !checkBox.checked;
+            $("reminderList").disabled = !checkBox.checked;
+    }
 }
 
 function saveEvent(sender) {
@@ -294,26 +296,29 @@ function onStatusListChange(event) {
 
 function initializeStatusLine() {
   var statusList = $("statusList");
-  statusList.observe("mouseup", onStatusListChange, false);
+  if (statusList)
+      statusList.observe("mouseup", onStatusListChange, false);
 }
 
 function onTaskEditorLoad() {
-	assignCalendar('startTime_date');
-	assignCalendar('dueTime_date');
-	assignCalendar('statusTime_date');
+    assignCalendar('startTime_date');
+    assignCalendar('dueTime_date');
+    assignCalendar('statusTime_date');
+    
+    if (readOnly == false) {
+        var widgets = {'start': {'date': $("startTime_date"),
+                                 'hour': $("startTime_time_hour"),
+                                 'minute': $("startTime_time_minute")},
+                       'due':   {'date': $("dueTime_date"),
+                                 'hour': $("dueTime_time_hour"),
+                                 'minute': $("dueTime_time_minute")}};
+        initTimeWidgets(widgets);
+    }
 
-	var widgets = {'start': {'date': $("startTime_date"),
-													 'hour': $("startTime_time_hour"),
-													 'minute': $("startTime_time_minute")},
-								 'due':   {'date': $("dueTime_date"),
-													 'hour': $("dueTime_time_hour"),
-													 'minute': $("dueTime_time_minute")}};
-	initTimeWidgets(widgets);
-	
-	// Enable or disable the reminder list
-	onTimeControlCheck($("dueDateCB"));
+    // Enable or disable the reminder list
+    onTimeControlCheck($("dueDateCB"));
 
-  initializeStatusLine();
+    initializeStatusLine();
 }
 
 document.observe("dom:loaded", onTaskEditorLoad);