Advanced event editing (just design, not working yet).

diff --git a/kronolith/js/kronolith.js b/kronolith/js/kronolith.js
index 1231eed..b1c7c68 100644 (file)
--- a/kronolith/js/kronolith.js
+++ b/kronolith/js/kronolith.js
@@ -1899,21 +1899,11 @@ KronolithCore = {
                 e.stop();
                 return;
 
-            case 'id_fullday':
-                this.eventForm.select('.edit_at').each(Element.toggle);
-                e.stop();
-                return;
-
             case 'kronolithNewEvent':
                 this.go('event');
                 e.stop();
                 return;
 
-            case 'kronolithEventSave':
-                this.saveEvent();
-                e.stop();
-                return;
-
             case 'kronolithQuickEvent':
                 this.updateCalendarDropDown('kronolithQuickinsertCalendars');
                 $('kronolithQuickinsert').appear({
@@ -1936,6 +1926,42 @@ KronolithCore = {
                 e.stop();
                 return;
 
+            case 'kronolithEventAllday':
+                $('kronolithEventStartTimeLabel').setStyle({ 'visibility': $('kronolithEventStartTimeLabel').getStyle('visibility') == 'visible' ? 'hidden' : 'visible' });
+                $('kronolithEventEndTimeLabel').setStyle({ 'visibility': $('kronolithEventEndTimeLabel').getStyle('visibility') == 'visible' ? 'hidden' : 'visible' });
+                return;
+
+            case 'kronolithEventLinkDescription':
+            case 'kronolithEventLinkReminder':
+            case 'kronolithEventLinkRecur':
+            case 'kronolithEventLinkUrl':
+            case 'kronolithEventLinkAttendees':
+            case 'kronolithEventLinkTags':
+                $('kronolithEventDialog').select('.kronolithTabsOption').invoke('hide');
+                $(id.replace(/Link/, 'Tab')).show();
+                $('kronolithEventDialog').select('.kronolithTabs li').invoke('removeClassName', 'selected');
+                elt.parentNode.addClassName('selected');
+                e.stop();
+                return;
+
+            case 'kronolithEventLinkNone':
+            case 'kronolithEventLinkDaily':
+            case 'kronolithEventLinkWeekly':
+            case 'kronolithEventLinkMonthly':
+            case 'kronolithEventLinkYearly':
+            case 'kronolithEventLinkLength':
+                $('kronolithEventTabRecur').select('DIV').invoke('hide');
+                if (id != 'kronolithEventLinkNone') {
+                    $(id.replace(/Link/, 'Repeat')).show();
+                    $('kronolithEventRepeatLength').show();
+                }
+                return;
+
+            case 'kronolithEventSave':
+                this.saveEvent();
+                e.stop();
+                return;
+
             case 'kronolithEventDelete':
                 var cal = $F('kronolithEventCalendar'),
                     eventid = $F('kronolithEventId');
@@ -2024,13 +2050,6 @@ KronolithCore = {
                         e.stop();
                         return;
                     }
-                } else if (orig.hasClassName('kronolithDay')) {
-                    var date = orig.retrieve('date');
-                    if (date) {
-                        this.go('day:' + date);
-                        e.stop();
-                        return;
-                    }
                 }
                 e.stop();
                 return;
@@ -2126,6 +2145,14 @@ KronolithCore = {
                 e.stop();
                 return;
             } else if (elt.hasClassName('kronolithMonthDay')) {
+                if (orig.hasClassName('kronolithDay')) {
+                    var date = orig.retrieve('date');
+                    if (date) {
+                        this.go('day:' + date);
+                        e.stop();
+                        return;
+                    }
+                }
                 this.go('event:' + elt.retrieve('date'));
                 e.stop();
                 return;
@@ -2219,6 +2246,7 @@ KronolithCore = {
             RedBox.onDisplay = null;
         };
 
+        this.updateCalendarDropDown('kronolithEventCalendars');
         $('kronolithEventTags').autocompleter.init();
         $('kronolithEventForm').enable();
         $('kronolithEventForm').reset();

diff --git a/kronolith/templates/index/edit.inc b/kronolith/templates/index/edit.inc
index 3470cab..9c4ffe8 100644 (file)
--- a/kronolith/templates/index/edit.inc
+++ b/kronolith/templates/index/edit.inc
@@ -4,71 +4,184 @@
 <input id="kronolithEventId" type="hidden" name="id" />
 
 <div>
-  <label for="kronolithEventTitle"><?php echo _("Title") ?>:</label><br />
+  <label for="kronolithEventTitle"><?php echo _("Event title") ?>:</label><br />
   <input type="text" name="title" id="kronolithEventTitle" class="kronolithLongField" />
 </div>
 
-<div>
-  <label for="kronolithEventLocation"><?php echo _("Location") ?>:</label><br />
-  <input type="text" name="location" id="kronolithEventLocation" size="35" />
-  &middot; <span class="kronolithEventGeo"><a href="#"><?php echo _("Find in Maps") ?></a></span>
-</div>
+<table cellspacing="0" cellpadding="0" border="0"><tbody><tr>
+  <td>
+    <label for="kronolithEventCalendars"><?php echo _("Calendar") ?>:</label><br />
+    <select name="targetcalendar" id="kronolithEventCalendars">
+    </select>
+  </td>
+  <td>
+    <label for="kronolithEventLocation"><?php echo _("Location") ?>:</label><br />
+    <input type="text" name="location" id="kronolithEventLocation" size="40" />
+    &middot; <span class="kronolithEventGeo"><a href="#"><?php echo _("Find in Maps") ?></a></span>
+  </td>
+</tr></tbody></table>
 
-<table cellspacing="2" cellpadding="0" border="0">
-<tbody>
+<table cellspacing="0" cellpadding="0" border="0"><tbody>
   <tr>
-    <td class="rightAlign"><label for="kronolithEventAllday"><?php echo _("All-day") ?>:</label></td>
-    <td><label><input type="checkbox" name="whole_day" id="kronolithEventAllday" /> <?php echo _("all-day event") ?></label></td>
+    <td><label for="kronolithEventStartDate"><?php echo _("From") ?>:</label></td>
+    <td><label for="kronolithEventEndDate"><?php echo _("To") ?>:</label></td>
+    <td>&nbsp;</td>
   </tr>
-
   <tr>
-    <td class="rightAlign"><label for="kronolithEventStartDate"><?php echo _("From") ?>:</label></td>
     <td>
       <input type="text" name="start_date" id="kronolithEventStartDate" size="10" class="kronolithDatePicker" />
-      <label><?php echo _("at") ?> <input type="text" name="start_time" id="kronolithEventStartTime" size="8" /></label>
+      <label id="kronolithEventStartTimeLabel"><?php echo _("at") ?> <input type="text" name="start_time" id="kronolithEventStartTime" size="8" /></label>
     </td>
-  </tr>
-
-  <tr>
-    <td class="rightAlign"><label for="kronolithEventEndDate"><?php echo _("To") ?>:</label></td>
     <td>
       <input type="text" name="end_date" id="kronolithEventEndDate" size="10" class="kronolithDatePicker" />
-      <label><?php echo _("at") ?> <input type="text" name="end_time" id="kronolithEventEndTime" size="8" /></label>
+      <label id="kronolithEventEndTimeLabel"><?php echo _("at") ?> <input type="text" name="end_time" id="kronolithEventEndTime" size="8" /></label>
     </td>
-  </tr>
-
-  <tr>
-    <td class="rightAlign"><label for="kronolithEventRecurrence"><?php echo _("Repeat") ?>:</label></td>
-    <td><select name="recur" id="kronolithEventRecurrence" class="kronolithLongField">
-      <option value="0"><?php echo _("no repeat") ?></option>
-      <option value="1"><?php echo _("Every day") ?></option>
-      <option value="2"><?php echo _("Every week") ?></option>
-      <option value=""><?php echo _("Every 14 days") ?></option>
-      <option value="3"><?php echo _("Every month") ?></option>
-      <option value="5"><?php echo _("Every year") ?></option>
-      <option value="-1"><?php echo _("Custom...") ?></option>
-    </select></td>
+    <td><label><input type="checkbox" name="whole_day" id="kronolithEventAllday"  /> <?php echo _("all-day event") ?></label></td>
   </tr>
 </tbody></table>
 
-<div>
-  <label for="kronolithEventUrl"><?php echo _("URL") ?>:</label><br />
-  <input type="text" name="url" id="kronolithEventUrl" class="kronolithLongField" />
+<ul class="kronolithTabs">
+  <li class="selected"><a href="#" id="kronolithEventLinkDescription"><?php echo _("Description") ?></a></li>
+  <li><a href="#" id="kronolithEventLinkReminder"><?php echo _("Reminder") ?></a></li>
+  <li><a href="#" id="kronolithEventLinkRecur"><?php echo _("Repeat") ?></a></li>
+  <li><a href="#" id="kronolithEventLinkUrl"><?php echo _("URL") ?></a></li>
+  <li><a href="#" id="kronolithEventLinkAttendees"><?php echo _("Attendees") ?></a></li>
+  <li><a href="#" id="kronolithEventLinkTags"><?php echo _("Tags and Keywords") ?></a></li>
+</ul>
+<div class="clear"></div>
+
+<div id="kronolithEventTabDescription" class="kronolithTabsOption">
+  <textarea name="description" id="kronolithEventDescription" rows="5" cols="40" class="kronolithLongField"></textarea>
 </div>
 
-<div>
-  <label for="kronolithEventTags"><?php echo _("Tags and Keywords") ?>:</label><br />
+<div id="kronolithEventTabReminder" class="kronolithTabsOption" style="display:none">
+  <label><input type="radio" name="alarm" value="0" checked="checked" /> <?php echo _("don't set") ?></label>
+  <?php echo _("or") ?>
+  <label><input type="radio" name="alarm" value="1" /> <?php echo _("set") ?></label>
+  <label>
+    <input type="text" name="alarm_value" size="2" value="15" class="kronolithEventValue" />
+    <select name="alarm_unit">
+      <option value="1"><?php echo _("minutes") ?></option>
+      <option value="60"><?php echo _("hours") ?></option>
+      <option value="1440"><?php echo _("days") ?></option>
+      <option value="10080"><?php echo _("weeks") ?></option>
+    </select> <?php echo _("before the event begins") ?>
+  </label>
+  <?php echo _("and alert me") ?>
+  <label><?php echo _("via") ?>
+    <select name="event_alarms">
+      <option value=""><?php echo _("E-mail") ?></option>
+      <option value=""><?php echo _("SAPO Messenger") ?></option>
+      <option value="" disabled="disabled"><?php echo _("SMS") ?></option>
+    </select>
+  </label>
+</div>
+
+<div id="kronolithEventTabRecur" class="kronolithTabsOption" style="display:none">
+  <label><input type="radio" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_NONE ?>" checked="checked" id="kronolithEventLinkNone" /> <?php echo _("Don't repeat") ?></label>
+  <?php echo _("or repeat") ?>
+  <label><input type="radio" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_DAILY ?>" id="kronolithEventLinkDaily" /> <?php echo _("Daily") ?></label>,
+  <label><input type="radio" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_WEEKLY ?>" id="kronolithEventLinkWeekly" /> <?php echo _("Weekly") ?></label>,
+  <label><input type="radio" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_MONTHLY_DATE ?>" id="kronolithEventLinkMonthly" /> <?php echo _("Monthly") ?></label>
+  <?php echo _("or") ?>
+  <label><input type="radio" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_DATE ?>" id="kronolithEventLinkYearly" /> <?php echo _("Yearly") ?></label><br />
+
+  <div id="kronolithEventRepeatDaily" style="display:none">
+    <?php echo _("Repeat") ?>
+    <label><input type="radio" name="recur_daily" value="1" checked="checked" /> <?php echo _("every day") ?></label>
+    <?php echo _("or") ?>
+    <label><input type="radio" name="recur_daily" value="0" /> <?php echo _("every") ?></label>
+    <label><input type="text" size="3" name="recur_daily_interval" value="" class="kronolithEventValue" /> <?php echo _("days") ?></label>
+  </div>
+  <div id="kronolithEventRepeatWeekly" style="display:none">
+    <?php echo _("Repeat") ?>
+    <label><input type="radio" name="recur_weekly" value="1" checked="checked" /> <?php echo _("every week") ?></label>
+    <?php echo _("or") ?>
+    <label><input type="radio" name="recur_weekly" value="0" /> <?php echo _("every") ?></label>
+    <label><input type="text" size="3" name="recur_weekly_interval" value="" class="kronolithEventValue" /> <?php echo _("weeks") ?></label><br />
+    <?php echo _("On") ?>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_MONDAY ?>" /> <?php echo substr(_("Monday"),0,3) ?></label>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_TUESDAY ?>" /> <?php echo substr(_("Tuesday"),0,3) ?></label>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_WEDNESDAY ?>" /> <?php echo substr(_("Wednesday"),0,3) ?></label>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_THURSDAY ?>" /> <?php echo substr(_("Thursday"),0,3) ?></label>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_FRIDAY ?>" /> <?php echo substr(_("Friday"),0,3) ?></label>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_SATURDAY ?>" /> <?php echo substr(_("Saturday"),0,3) ?></label>
+    <label><input type="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_SUNDAY ?>" /> <?php echo substr(_("Sunday"),0,3) ?></label>
+  </div>
+  <div id="kronolithEventRepeatMonthly" style="display:none">
+    <?php echo _("Repeat") ?>
+    <label><input type="radio" name="recur_monthly" value="1" checked="checked" /> <?php echo _("every month") ?></label>
+    <?php echo _("or") ?>
+    <label><input type="radio" name="recur_monthly" value="1" /> <?php echo _("every") ?></label>
+    <label><input type="text" size="3" name="recur_monthly_interval" value="" class="kronolithEventValue" /> <?php echo _("months") ?></label>,
+    <?php echo _("on the same") ?>
+    <label><input type="radio" name="recur_monthly_weekday" value="0" /> <?php echo _("date") ?></label>
+    <label><input type="radio" name="recur_monthly_weekday" value="1" /> <?php echo _("weekday") ?></label>
+  </div>
+  <div id="kronolithEventRepeatYearly" style="display:none">
+    <?php echo _("Repeat") ?>
+    <label><input type="radio" name="recur_yearly" value="1" checked="checked" /> <?php echo _("every year") ?></label>
+    <?php echo _("or") ?>
+    <label><input type="radio" name="recur_yearly" value="1" /> <?php echo _("every") ?></label>
+    <label><input type="text" size="3" name="recur_yearly_interval" value="" class="kronolithEventValue" /> <?php echo _("years") ?></label>
+    <?php echo _("on the same") ?>
+    <label><input type="radio" name="recur_yearly_weekday" value="0" /> <?php echo _("day of the year") ?></label>
+    <label><input type="radio" name="recur_yearly_weekday" value="1" /> <?php echo _("month and weekday") ?></label>
+  </div>
+  <div id="kronolithEventRepeatLength" style="display:none">
+    <?php echo _("Stop") ?>
+    <label><input type="radio" name="recur_enddate_type" value="none" checked="checked" /> <?php echo _("never") ?></label>,
+    <?php echo _("or") ?>
+    <label><input type="radio" name="recur_enddate_type" value="date" /> <?php echo _("at") ?></label>
+    <input type="text" name="recur_end_date" id="kronolithEventRecurDate" size="10" class="kronolithDatePicker" />
+    <?php echo _(", or") ?>
+    <label><input type="radio" name="recur_enddate_type" value="count" /> <?php echo _("after") ?></label>
+    <label><input type="text" name="recur_count" value="" size="2" class="kronolithEventValue" /> <?php echo _("recurrences") ?></label>
+    <br />
+  </div>
+</div>
+
+<div id="kronolithEventTabUrl" class="kronolithTabsOption" style="display:none">
+  <input type="text" name="url" id="kronolithEventUrl" class="kronolithLongField" value="http://" />
+</div>
+
+<?php $part = array('john@exmple.com', 'jane@example.com'); ?>
+<div id="kronolithEventTabAttendees" class="kronolithTabsOption" style="display:none">
+  <input type="text" name="participants" id="eventParticipants" class="kronolithLongField" value="<?php echo implode(', ', $part) ?>" /><br />
+  <label><input type="checkbox" name="" value="" /> <?php echo _("send invites") ?></label> <?php echo _("to all attendees") ?><br />
+  <table width="100%" cellspacing="0" cellpadding="0" border="0">
+    <thead>
+      <tr>
+        <th><?php echo _("Availability") ?></th>
+        <?php for ($i = 0; $i < 24; $i++): ?>
+        <th<?php if ($i < 8 || $i > 19) echo ' class="night"' ?>><?php echo $i ?>h</th>
+        <?php endfor; ?>
+      </tr>
+    </thead>
+    <tbody>
+      <?php for ($p = 0; $p < count($part); $p++): ?>
+      <tr>
+        <td><?php echo strlen($part[$p]) > 15 ? substr($part[$p], 0, 13) . '...' : $part[$p] ?></td>
+        <?php for ($i = 0; $i < 24; $i++): ?>
+        <td></td>
+        <?php endfor; ?>
+      </tr>
+      <?php endfor; ?>
+    </tbody>
+  </table>
+</div>
+
+<div id="kronolithEventTabTags" class="kronolithTabsOption" style="display:none">
   <input id="kronolithEventTags" name="tags" />
   <span id="kronolithEventTags_loading_img" style="display:none;"><?php echo Horde::img('loading.gif', _("Loading...")) ?></span>
+  <div id="kronolithEventTopTags"></div>
 </div>
 
-<div id="kronolithEventTopTags"></div>
-
 <div id="kronolithEventActions">
   <input id="kronolithEventSave" type="button" value="<?php echo _("Save") ?>" class="button ok" />
   <input id="kronolithEventDelete" type="button" value="<?php echo _("Delete") ?>" class="button ko" />
-  <input id="kronolithEventCancel" type="button" value="<?php echo _("Cancel") ?>" class="button cancel" />
-  <span id="kronolithEventAdvancedLink">| <a href="#"><?php echo _("Advanced") ?></a></span><br />
+  <span class="kronolithSep"><?php echo _("or") ?></span> <a id="kronolithEventCancel" class="kronolithFormCancel"><?php echo _("Cancel") ?></a>
 </div>
 
-</form></div>
+</form>
+</div>

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 4050ba5..3b74110 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -514,6 +514,12 @@ span#kronolithQuickEvent {
     padding:  5px;
     margin: 5px 5px 5px 15px;
 }
+#kronolithQuickinsert label {
+    font-weight: bold;
+}
+.kronolithFormInfo {
+    font-style: italic;
+}
 
 /* Navigation bar */
 #kronolithBar {
@@ -599,7 +605,7 @@ span#kronolithQuickEvent {
 
 /* Event form dialog */
 #kronolithEventDialog {
-    width: 400px;
+    width: 700px;
     padding: 10px 20px;
     background: #efefef;
     border: 1px #c0c0c0 solid;
@@ -607,6 +613,10 @@ span#kronolithQuickEvent {
 #kronolithEventDialog div {
     margin-bottom: 5px;
 }
+#kronolithEventDialog td {
+    padding-right: 10px;
+    vertical-align: top;
+}
 #kronolithEventForm label {
     font-weight: bold;
 }
@@ -629,6 +639,12 @@ div#kronolithEventActions #kronolithEventAdvancedLink a {
     color: inherit;
 }
 
+#kronolithEventStartTime, #kronolithEventEndTime, .kronolithEventValue {
+    text-align: center;
+}
+#kronolithEventLocation {
+    width: 300px;
+}
 div#kronolithEventTopTags {
     max-height: 75px;
     overflow: auto;
@@ -647,6 +663,42 @@ div#kronolithEventTopTags span:hover {
     cursor: pointer;
 }
 
+.kronolithTabs {
+    margin: 15px 0;
+    list-style: none;
+}
+.kronolithTabs li {
+    border: 1px solid #c0c0c0;
+    float: left;
+    height: 25px;
+    line-height: 25px;
+}
+.kronolithTabs a {
+    padding: 0 14px;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.kronolithTabsOption {
+    line-height: 250%;
+}
+#kronolithEventTabAttendees td, #kronolithEventTabAttendees th {
+    padding: 1px;
+    width: 24px;
+    font-size: 85%;
+    line-height: 140%;
+}
+#kronolithEventTabAttendees th {
+    background-color: #fff;
+    text-align: center;
+}
+#kronolithEventTabAttendees th:first-child {
+    text-align: left;
+}
+#kronolithEventTabAttendees th.night {
+    background-color: #c0c0c0;
+}
+
 /* Mini calendar */
 .kronolithMinical {
     position: relative;
@@ -1204,6 +1256,11 @@ div.kronolithView div.kronolithViewBody div.kronolithRow div .kronolithEvent.kro
     overflow: hidden;
 }
 
+/* Redbox styles. */
+#RB_window {
+    top: 50px !important;
+}
+
 /* Tags */
 .panel-tags {
     margin-left: 10px;