properly lay out event detail view, a first step
Jan-Christoph Borchardt
parent
1926fc45ea
commit
5f99f4456d
|
|
@ -135,19 +135,72 @@ button.category{margin:0 3px;}
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* bigger event title in detail view */
|
||||
#event-title {
|
||||
/* input fields take whole width */
|
||||
#event-title,
|
||||
#event-location,
|
||||
#category,
|
||||
#event-description {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 3px 0;
|
||||
}
|
||||
/* bigger event title in detail view */
|
||||
#event-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
/* group from and to date fields */
|
||||
#event-time {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
#event-time-from {
|
||||
float: left;
|
||||
}
|
||||
#event-time-to {
|
||||
float: right;
|
||||
}
|
||||
#from, #to {
|
||||
width: 65px;
|
||||
margin: 0;
|
||||
}
|
||||
#fromtime, #totime {
|
||||
margin: 0;
|
||||
}
|
||||
#event-allday {
|
||||
display: inline-block;
|
||||
margin: 7px 0;
|
||||
}
|
||||
/* category input field leaves room for edit button */
|
||||
#category {
|
||||
width: 90%;
|
||||
}
|
||||
#editCategories {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
/* whole line for buttons of 'Advanced' and 'Export' */
|
||||
#advanced_options_button,
|
||||
#editEvent-export {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
/* normal font weight for secondary buttons for less obtrusiveness */
|
||||
#advanced_options_button,
|
||||
#editEvent-export,
|
||||
#editEvent-delete {
|
||||
font-weight: normal;
|
||||
}
|
||||
/* more space for action buttons below */
|
||||
#actions {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
|
||||
/* make popups scrollable in smaller viewports */
|
||||
.ui-dialog {
|
||||
height: 94% !important;
|
||||
top: 4% !important;
|
||||
max-height: 80% !important;
|
||||
top: 10% !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
|
@ -156,7 +209,7 @@ button.category{margin:0 3px;}
|
|||
overflow: initial;
|
||||
}
|
||||
#appsettings_popup {
|
||||
height: 70%;
|
||||
max-height: 70%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<div id="event" title="<?php p($l->t("Edit an event"));?>">
|
||||
<div id="event" title="<?php p($l->t("Edit event"));?>">
|
||||
<form id="event_form">
|
||||
<input type="hidden" name="id" value="<?php p($_['eventid']) ?>">
|
||||
<input type="hidden" name="lastmodified" value="<?php p($_['lastmodified']) ?>">
|
||||
<?php print_unescaped($this->inc("part.eventform")); ?>
|
||||
<div style="width: 100%;text-align: center;color: #FF1D1D;" id="errorbox"></div>
|
||||
<div id="actions">
|
||||
<input type="button" class="submit actionsfloatleft" id="editEvent-submit" value="<?php p($l->t("Submit"));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/edit.php')) ?>">
|
||||
<input type="button" class="submit actionsfloatleft" id="editEvent-delete" name="delete" value="<?php p($l->t("Delete"));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/delete.php')) ?>">
|
||||
<input type="button" class="submit actionsfloatright" id="editEvent-export" name="export" value="<?php p($l->t("Export"));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'export.php')) ?>?eventid=<?php p($_['eventid']) ?>">
|
||||
<input type="button" class="submit actionsfloatright primary" id="editEvent-submit" value="<?php p($l->t('Save event'));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/edit.php')) ?>">
|
||||
<input type="button" class="submit actionsfloatleft" id="editEvent-delete" name="delete" value="<?php p($l->t('Delete event'));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/delete.php')) ?>">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,97 +11,59 @@
|
|||
<?php } ?>
|
||||
</ul>
|
||||
<div id="tabs-1">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th width="75px"><?php p($l->t("Title"));?>:</th>
|
||||
<td>
|
||||
<input type="text" style="width:350px;" size="100" placeholder="<?php p($l->t("Title of the Event"));?>" value="<?php p(isset($_['title']) ? $_['title'] : '') ?>" maxlength="100" name="title" autofocus="autofocus"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th width="75px"><?php p($l->t("Category"));?>:</th>
|
||||
<td>
|
||||
<input id="category" name="categories" type="text" placeholder="<?php p($l->t('Separate categories with commas')); ?>" value="<?php p(isset($_['categories']) ? $_['categories'] : '') ?>">
|
||||
<a class="action edit" id="editCategories" title="<?php p($l->t('Edit categories')); ?>"><img alt="<?php p($l->t('Edit categories')); ?>" src="<?php print_unescaped(OCP\image_path('core','actions/rename.svg'))?>" class="svg action" style="width: 16px; height: 16px;"></a>
|
||||
</td>
|
||||
<?php if(count($_['calendar_options']) > 1) { ?>
|
||||
<th width="75px"> <?php p($l->t("Calendar"));?>:</th>
|
||||
<td>
|
||||
<select style="width:140px;" name="calendar">
|
||||
<?php
|
||||
if (!isset($_['calendar'])) {$_['calendar'] = false;}
|
||||
print_unescaped(OCP\html_select_options($_['calendar_options'], $_['calendar'], array('value'=>'id', 'label'=>'displayname')));
|
||||
?>
|
||||
</select>
|
||||
</td>
|
||||
<?php } else { ?>
|
||||
<th width="75px"> </th>
|
||||
<td>
|
||||
<input type="hidden" name="calendar" value="<?php p($_['calendar_options'][0]['id']); ?>">
|
||||
</td>
|
||||
<?php } ?>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="75px"><?php p($l->t("Access Class"));?>:</th>
|
||||
<td>
|
||||
<select style="width:140px;" name="accessclass">
|
||||
<?php
|
||||
if (!isset($_['calendar'])) {$_['calendar'] = false;}
|
||||
print_unescaped(OCP\html_select_options($_['access_class_options'], $_['accessclass']));
|
||||
?>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th width="75px"></th>
|
||||
<td>
|
||||
<input type="checkbox"<?php if($_['allday']) {print_unescaped('checked="checked"');} ?> id="allday_checkbox" name="allday">
|
||||
<label for="allday_checkbox"><?php p($l->t("All Day Event"));?></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="75px"><?php p($l->t("From"));?>:</th>
|
||||
<td>
|
||||
<input type="text" value="<?php p($_['startdate']);?>" name="from" id="from">
|
||||
|
||||
<input type="time" value="<?php p($_['starttime']);?>" name="fromtime" id="fromtime">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="75px"><?php p($l->t("To"));?>:</th>
|
||||
<td>
|
||||
<input type="text" value="<?php p($_['enddate']);?>" name="to" id="to">
|
||||
|
||||
<input type="time" value="<?php p($_['endtime']);?>" name="totime" id="totime">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<input type="button" class="submit" value="<?php p($l->t("Advanced options")); ?>" id="advanced_options_button">
|
||||
<input id="event-title" type="text" size="100"
|
||||
placeholder="<?php p($l->t('Title of the Event'));?>"
|
||||
value="<?php p(isset($_['title']) ? $_['title'] : '') ?>"
|
||||
maxlength="100" name="title" autofocus="autofocus"/>
|
||||
|
||||
<?php if(count($_['calendar_options']) > 1) { ?>
|
||||
<?php p($l->t("Calendar"));?>
|
||||
<select style="width:140px;" name="calendar">
|
||||
<?php if (!isset($_['calendar'])) {$_['calendar'] = false;}
|
||||
print_unescaped(OCP\html_select_options($_['calendar_options'], $_['calendar'], array('value'=>'id', 'label'=>'displayname'))); ?>
|
||||
</select>
|
||||
<?php } else { ?>
|
||||
<input style="display:none;" type="hidden" name="calendar" value="<?php p($_['calendar_options'][0]['id']); ?>">
|
||||
<?php } ?>
|
||||
|
||||
<div id="event-time">
|
||||
<div id="event-time-from">
|
||||
<?php p($l->t('from'));?>
|
||||
<input type="text" value="<?php p($_['startdate']);?>" name="from" id="from">
|
||||
<input type="time" value="<?php p($_['starttime']);?>" name="fromtime" id="fromtime">
|
||||
</div>
|
||||
<div id="event-time-to">
|
||||
<?php p($l->t('to'));?>
|
||||
<input type="text" value="<?php p($_['enddate']);?>" name="to" id="to">
|
||||
<input type="time" value="<?php p($_['endtime']);?>" name="totime" id="totime">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label id="event-allday">
|
||||
<input id="allday_checkbox" type="checkbox"<?php if($_['allday']) {print_unescaped('checked="checked"');} ?> name="allday">
|
||||
<?php p($l->t("All Day Event"));?>
|
||||
</label>
|
||||
|
||||
<input id="advanced_options_button" type="button" class="submit" value="<?php p($l->t('Advanced options')); ?>">
|
||||
|
||||
<div id="advanced_options" style="display: none;">
|
||||
<hr>
|
||||
<table>
|
||||
<tr>
|
||||
<th width="85px"><?php p($l->t("Location"));?>:</th>
|
||||
<td>
|
||||
<input type="text" style="width:350px;" size="100" placeholder="<?php p($l->t("Location of the Event"));?>" value="<?php p(isset($_['location']) ? $_['location'] : '') ?>" maxlength="100" name="location" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr>
|
||||
<th width="85px" style="vertical-align: top;"><?php p($l->t("Description"));?>:</th>
|
||||
<td>
|
||||
<textarea style="width:350px;height: 150px;" placeholder="<?php p($l->t("Description of the Event"));?>" name="description"><?php p(isset($_['description']) ? $_['description'] : '') ?></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<input id="event-location" type="text" size="100"
|
||||
placeholder="<?php p($l->t('Location'));?>"
|
||||
value="<?php p(isset($_['location']) ? $_['location'] : '') ?>"
|
||||
maxlength="100" name="location" />
|
||||
|
||||
<input id="category" name="categories" type="text"
|
||||
placeholder="<?php p($l->t('Categories (separate by comma)')); ?>"
|
||||
value="<?php p(isset($_['categories']) ? $_['categories'] : '') ?>">
|
||||
<a class="action edit" id="editCategories" title="<?php p($l->t('Edit categories')); ?>">
|
||||
<img alt="<?php p($l->t('Edit categories')); ?>" src="<?php print_unescaped(OCP\image_path('core','actions/rename.svg'))?>" class="svg action" style="width: 16px; height: 16px;"></a>
|
||||
|
||||
<textarea id="event-description" placeholder="<?php p($l->t('Description'));?>" name="description"><?php p(isset($_['description']) ? $_['description'] : '') ?></textarea>
|
||||
|
||||
<input type="button" class="submit" id="editEvent-export" name="export" value="<?php p($l->t('Export event'));?>" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'export.php')) ?>?eventid=<?php p($_['eventid']) ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabs-2">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
|
|
@ -255,5 +217,12 @@
|
|||
<?php if($_['eventid'] != 'new' && $_['permissions'] & OCP\PERMISSION_SHARE) { ?>
|
||||
<div id="tabs-5">
|
||||
<?php if($_['eventid'] != 'new') { print_unescaped($this->inc('part.share')); } ?>
|
||||
|
||||
<br>
|
||||
<?php p($l->t('Visibility to people shared with'));?>
|
||||
<select style="width:140px;" name="accessclass">
|
||||
<?php if (!isset($_['calendar'])) {$_['calendar'] = false;}
|
||||
print_unescaped(OCP\html_select_options($_['access_class_options'], $_['accessclass'])); ?>
|
||||
</select>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<?php print_unescaped($this->inc("part.eventform")); ?>
|
||||
<div style="width: 100%;text-align: center;color: #FF1D1D;" id="errorbox"></div>
|
||||
<div id="actions">
|
||||
<input type="button" id="submitNewEvent" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/new.php')); ?>" class="submit actionsfloatleft" value="<?php p($l->t("Submit"));?>">
|
||||
<input type="button" id="submitNewEvent" data-link="<?php print_unescaped(OCP\Util::linkTo('calendar', 'ajax/event/new.php')); ?>" class="submit actionsfloatleft" value="<?php p($l->t('Create event'));?>">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue