Commit 7ee4a287 authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-56551 calendar: Events list fixes for boost

The events list is now a list of cards with headers.
Spacing and layout is now done with bootstrap utility classes.
The existing classes were kept - and the styles for bootstrapbase are not changed much.
Also calendar colours can be overridden from a preset.
parent cd4a6b8b
......@@ -144,7 +144,8 @@ class core_calendar_renderer extends plugin_renderer_base {
$output .= html_writer::empty_tag('input', array('type'=>'hidden', 'name' => 'action', 'value' => 'new'));
$output .= html_writer::empty_tag('input', array('type'=>'hidden', 'name' => 'course', 'value' => $courseid));
$output .= html_writer::empty_tag('input', array('type'=>'hidden', 'name' => 'time', 'value' => $time));
$output .= html_writer::empty_tag('input', array('type'=>'submit', 'value' => get_string('newevent', 'calendar')));
$attributes = array('type'=>'submit', 'value' => get_string('newevent', 'calendar'), 'class' => 'btn btn-secondary');
$output .= html_writer::empty_tag('input', $attributes);
$output .= html_writer::end_tag('div');
$output .= html_writer::end_tag('form');
$output .= html_writer::end_tag('div');
......@@ -222,6 +223,36 @@ class core_calendar_renderer extends plugin_renderer_base {
$context = $event->context;
$output = '';
$output .= $this->output->box_start('card-header clearfix');
if (calendar_edit_event_allowed($event) && $showactions) {
if (empty($event->cmid)) {
$editlink = new moodle_url(CALENDAR_URL.'event.php', array('action'=>'edit', 'id'=>$event->id));
$deletelink = new moodle_url(CALENDAR_URL.'delete.php', array('id'=>$event->id));
if (!empty($event->calendarcourseid)) {
$editlink->param('course', $event->calendarcourseid);
$deletelink->param('course', $event->calendarcourseid);
}
} else {
$editlink = new moodle_url('/course/mod.php', array('update'=>$event->cmid, 'return'=>true, 'sesskey'=>sesskey()));
$deletelink = null;
}
$commands = html_writer::start_tag('div', array('class'=>'commands pull-xs-right'));
$commands .= html_writer::start_tag('a', array('href'=>$editlink));
$url = $this->output->pix_url('t/edit');
$str = get_string('tt_editevent', 'calendar');
$commands .= html_writer::empty_tag('img', array('src' => $url, 'alt' => $str, 'title' => $str, 'class' => 'icon'));
$commands .= html_writer::end_tag('a');
if ($deletelink != null) {
$commands .= html_writer::start_tag('a', array('href'=>$deletelink));
$url = $this->output->pix_url('t/delete');
$str = get_string('tt_deleteevent', 'calendar');
$commands .= html_writer::empty_tag('img', array('src' => $url, 'alt' => $str, 'title' => $str, 'class' => 'icon'));
$commands .= html_writer::end_tag('a');
}
$commands .= html_writer::end_tag('div');
$output .= $commands;
}
if (!empty($event->icon)) {
$output .= $event->icon;
} else {
......@@ -234,12 +265,9 @@ class core_calendar_renderer extends plugin_renderer_base {
$output .= $this->output->heading(
format_string($event->name, false, array('context' => $context)),
3,
array('class' => 'name')
array('class' => 'name d-inline-block')
);
}
if (!empty($event->courselink)) {
$output .= html_writer::tag('div', $event->courselink, array('class' => 'course'));
}
// Show subscription source if needed.
if (!empty($event->subscription) && $CFG->calendar_showicalsource) {
if (!empty($event->subscription->url)) {
......@@ -251,48 +279,30 @@ class core_calendar_renderer extends plugin_renderer_base {
$output .= html_writer::tag('div', $source, array('class' => 'subscription'));
}
if (!empty($event->time)) {
$output .= html_writer::tag('span', $event->time, array('class' => 'date'));
$output .= html_writer::tag('span', $event->time, array('class' => 'date pull-xs-right m-r-1'));
} else {
$output .= html_writer::tag('span', calendar_time_representation($event->timestart), array('class' => 'date'));
$output .= html_writer::tag('span', calendar_time_representation($event->timestart), array('class' => 'date pull-xs-right m-r-1'));
}
if (!empty($event->courselink)) {
$output .= html_writer::tag('div', $event->courselink, array('class' => 'course'));
}
$output .= $this->output->box_end();
$eventdetailshtml = '';
$eventdetailsclasses = '';
$eventdetailshtml .= format_text($event->description, $event->format, array('context' => $context));
$eventdetailsclasses .= 'description';
$eventdetailsclasses .= 'description card-block';
if (isset($event->cssclass)) {
$eventdetailsclasses .= ' '.$event->cssclass;
}
$output .= html_writer::tag('div', $eventdetailshtml, array('class' => $eventdetailsclasses));
if (calendar_edit_event_allowed($event) && $showactions) {
if (empty($event->cmid)) {
$editlink = new moodle_url(CALENDAR_URL.'event.php', array('action'=>'edit', 'id'=>$event->id));
$deletelink = new moodle_url(CALENDAR_URL.'delete.php', array('id'=>$event->id));
if (!empty($event->calendarcourseid)) {
$editlink->param('course', $event->calendarcourseid);
$deletelink->param('course', $event->calendarcourseid);
}
} else {
$editlink = new moodle_url('/course/mod.php', array('update'=>$event->cmid, 'return'=>true, 'sesskey'=>sesskey()));
$deletelink = null;
}
$commands = html_writer::start_tag('div', array('class'=>'commands'));
$commands .= html_writer::start_tag('a', array('href'=>$editlink));
$commands .= html_writer::empty_tag('img', array('src'=>$this->output->pix_url('t/edit'), 'alt'=>get_string('tt_editevent', 'calendar'), 'title'=>get_string('tt_editevent', 'calendar')));
$commands .= html_writer::end_tag('a');
if ($deletelink != null) {
$commands .= html_writer::start_tag('a', array('href'=>$deletelink));
$commands .= html_writer::empty_tag('img', array('src'=>$this->output->pix_url('t/delete'), 'alt'=>get_string('tt_deleteevent', 'calendar'), 'title'=>get_string('tt_deleteevent', 'calendar')));
$commands .= html_writer::end_tag('a');
}
$commands .= html_writer::end_tag('div');
$output .= $commands;
if (!empty($eventdetailshtml)) {
$output .= html_writer::tag('div', $eventdetailshtml, array('class' => $eventdetailsclasses));
}
return html_writer::tag('div', $output , array('class' => 'event', 'id' => 'event_' . $event->id));
$eventhtml = html_writer::tag('div', $output, array('class' => 'card'));
return html_writer::tag('div', $eventhtml, array('class' => 'event', 'id' => 'event_' . $event->id));
}
/**
......@@ -580,7 +590,7 @@ class core_calendar_renderer extends plugin_renderer_base {
$courseurl = new moodle_url($returnurl);
$courseurl->remove_params('course');
$select = new single_select($courseurl, 'course', $courseoptions, $selected, null);
$select->class = 'cal_courses_flt';
$select->class = 'cal_courses_flt m-r-1';
if ($label !== null) {
$select->set_label($label);
} else {
......
......@@ -168,7 +168,7 @@ if (!empty($CFG->enablecalendarexport)) {
array('preset_what'=>'all', 'preset_time' => 'recentupcoming', 'userid' => $USER->id, 'authtoken'=>$authtoken)
);
echo html_writer::tag('a', 'iCal',
array('href' => $link, 'title' => get_string('quickdownloadcalendar', 'calendar'), 'class' => 'ical-link'));
array('href' => $link, 'title' => get_string('quickdownloadcalendar', 'calendar'), 'class' => 'ical-link m-l-1'));
}
}
......
/* calendar.less */
// Calendar colour variables defined.
$calendarEventCourseColor: #ffd3bd; // Pale red.
$calendarEventGlobalColor: #d6f8cd; // Pale green.
$calendarEventGroupColor: #fee7ae; // Pale yellow.
$calendarEventUserColor: #dce7ec; // Pale blue.
$calendarEventCourseColor: #ffd3bd !default; // Pale red.
$calendarEventGlobalColor: #d6f8cd !default; // Pale green.
$calendarEventGroupColor: #fee7ae !default; // Pale yellow.
$calendarEventUserColor: #dce7ec !default; // Pale blue.
// Calendar event background colours defined.
.calendar_event_course {
......@@ -68,14 +68,6 @@ $calendarEventUserColor: #dce7ec; // Pale blue.
}
}
.cal_courses_flt {
float: left;
label {
margin-right: .45em;
}
}
.maincalendar {
vertical-align: top;
padding: 0;
......@@ -190,80 +182,10 @@ $calendarEventUserColor: #dce7ec; // Pale blue.
}
}
.eventlist {
margin: 0;
.event {
//width: 92%;
//border-spacing: 0;
//border-collapse: separate;
//position: relative;
//padding: 20px 4%;
//margin-bottom: 20px;
//background-color: lighten($wellBackground, 3%);
//border: 1px solid darken($wellBackground, 7%);
//@include border-radius($baseBorderRadius);
//@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
@extend .card;
list-style-type: none;
> img {
padding-top: 3px;
float: left;
}
.name {
//font-size: $fontSizeLarge;
//font-weight: 200;
//line-height: 24px;
@extend .h2;
float: left;
//margin: 0;
}
.name,
.course {
margin-bottom: 5px;
}
.date {
float: right;
}
.course,
.subscription {
float: left;
clear: left;
}
.side {
width: 22px;
}
.description {
background-color: $body-bg;
padding: 5px;
clear: both;
.commands {
position: absolute;
right: 0;
top: 0;
margin: 3px;
}
}
.commands {
position: absolute;
top: 2px;
right: 2px;
a {
margin: 0 3px;
}
}
}
.event .card-header img {
vertical-align: baseline;
}
}
}
......
......@@ -164,16 +164,10 @@
margin: 0;
.event {
width: 92%;
border-spacing: 0;
border-collapse: separate;
position: relative;
padding: 20px 4%;
margin-bottom: 20px;
background-color: lighten(@wellBackground, 3%);
border: 1px solid darken(@wellBackground, 7%);
.border-radius(@baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
list-style-type: none;
> img {
......@@ -186,6 +180,7 @@
line-height: 24px;
float: left;
margin: 0;
margin-right: 0.5rem;
}
.name,
.course {
......@@ -206,17 +201,8 @@
background-color: @white;
padding: 5px;
clear: both;
.commands {
position: absolute;
right: 0;
top: 0;
margin: 3px;
}
}
.commands {
position: absolute;
top: 2px;
right: 2px;
a {
margin: 0 3px;
}
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment