Commit a7ed05e7 authored by Andrew Nicols's avatar Andrew Nicols
Browse files

MDL-60090 calendar: Add eventtype icon and truncate

parent d8e9a23c
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -257,10 +257,12 @@ define([
var target = $(e.target);
var eventId = null;
if (target.is(SELECTORS.EVENT_LINK)) {
eventId = target.attr('data-event-id');
var eventLink = target.closest(SELECTORS.EVENT_LINK);
if (eventLink.length) {
eventId = eventLink.data('eventId');
} else {
eventId = target.find(SELECTORS.EVENT_LINK).attr('data-event-id');
eventId = target.find(SELECTORS.EVENT_LINK).data('eventId');
}
renderEventSummaryModal(eventId);
......
......@@ -64,7 +64,7 @@ function(
// Toggle the hidden. We need to render the template before we change the value.
data.hidden = !data.hidden;
return Str.get_string('eventtype' + data.type, 'calendar')
return Str.get_string('eventtype' + data.eventtype, 'calendar')
.then(function(nameStr) {
data.name = nameStr;
......@@ -90,7 +90,7 @@ function(
var fireFilterChangedEvent = function(data) {
M.util.js_pending("month-mini-filterChanged");
$('body').trigger(CalendarEvents.filterChanged, {
type: data.type,
type: data.eventtype,
hidden: data.hidden,
});
M.util.js_complete("month-mini-filterChanged");
......@@ -104,7 +104,7 @@ function(
*/
var getFilterData = function(target) {
return {
type: target.data('eventtype'),
eventtype: target.data('eventtype'),
hidden: target.data('eventtype-hidden'),
};
};
......
......@@ -3408,7 +3408,7 @@ function calendar_get_filter_types() {
return array_map(function($type) {
return [
'type' => $type,
'eventtype' => $type,
'name' => get_string("eventtype{$type}", "calendar"),
];
}, $types);
......
......@@ -29,17 +29,20 @@
{
}
}}
<a href="#" data-action="filter-event-type" data-eventtype="{{type}}" data-eventtype-hidden="{{hidden}}">
<a href="#" data-action="filter-event-type" data-eventtype="{{eventtype}}" data-eventtype-hidden="{{hidden}}">
{{^hidden}}
<span class="calendar_event_{{type}}">
<span class="calendar_event_{{eventtype}}">
{{#pix}}i/hide, core, {{#str}}hideeventtype, calendar, {{name}}{{/str}}{{/pix}}
</span>
{{> core_calendar/event_icon}}
<span class="eventname">{{#str}}hideeventtype, calendar, {{name}}{{/str}}</span>
{{/hidden}}
{{#hidden}}
<span class="calendar_event_{{type}}">
<span class="calendar_event_{{eventtype}}">
{{#pix}}i/show, core, {{#str}}showeventtype, calendar, {{name}}{{/str}}{{/pix}}
</span>
{{> core_calendar/event_icon}}
<span class="eventname">{{#str}}showeventtype, calendar, {{name}}{{/str}}</span>
{{/hidden}}
</a>
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template calendar/event_icon
Event icon display.
The purpose of this template is to provide a common location for the
rendering of event icons.
Classes required for JS:
* none
Data attributes required for JS:
* none
Example context (json):
{
"modulename": "assign"
}
}}
{{#modulename}}
{{#pix}} icon, {{modulename}} {{/pix}}
{{/modulename}}
{{^modulename}}
{{#pix}} i/{{eventtype}}event, core {{/pix}}
{{/modulename}}
......@@ -85,15 +85,20 @@
<li class="events-underway">[{{name}}]</li>
{{/underway}}
{{^underway}}
<li class="calendar_event_{{calendareventtype}}"
data-region="event-item"
<li data-region="event-item"
data-eventtype-{{calendareventtype}}="1"
{{#canedit}}
draggable="true"
data-drag-type="move"
{{/canedit}}>
<a data-action="view-event" data-event-id="{{id}}" href="{{url}}">{{name}}</a>
<a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
<span class="badge badge-circle calendar_event_{{calendareventtype}}">
&nbsp;
</span>
{{> core_calendar/event_icon}}
{{name}}
</a>
</li>
{{/underway}}
{{/events}}
......
......@@ -101,10 +101,50 @@ $calendarEventUserColor: #dce7ec !default; // Pale blue.
.calendarmonth {
ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
margin-top: 4px;
> a {
@include text-truncate;
max-width: 100%;
display: inline-block;
}
.icon {
margin-left: 0.25em;
margin-right: 0.25em;
vertical-align: initial;
}
.badge {
&.badge-circle {
width: 12px;
height: 12px;
border-radius: 6px;
vertical-align: middle;
&.calendar_event_category {
background-color: $calendarEventCategoryColor;
}
&.calendar_event_course {
background-color: $calendarEventCourseColor;
}
&.calendar_event_site {
background-color: $calendarEventGlobalColor;
}
&.calendar_event_group {
background-color: $calendarEventGroupColor;
}
&.calendar_event_user {
background-color: $calendarEventUserColor;
}
}
}
}
}
......@@ -149,6 +189,7 @@ $calendarEventUserColor: #dce7ec !default; // Pale blue.
.calendar_event_category {
border-color: $calendarEventCategoryColor;
}
.calendar_event_course {
border-color: $calendarEventCourseColor;
}
......@@ -174,11 +215,10 @@ $calendarEventUserColor: #dce7ec !default; // Pale blue.
.calendartable {
td,
li {
padding: 5px;
padding: 0 4px 4px 4px;
}
li {
padding-left: 10px;
text-align: left;
}
}
......@@ -324,10 +364,9 @@ $calendarEventUserColor: #dce7ec !default; // Pale blue.
margin: 0;
}
}
}
.eventname {
padding-left: 0.2em;
.icon {
vertical-align: initial;
}
}
}
......
......@@ -28,6 +28,7 @@
.path-calendar {
.calendartable {
width: 100%;
table-layout: fixed;
th,
td {
width: 14%;
......@@ -88,9 +89,52 @@
.calendarmonth {
ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
margin-top: 4px;
> a {
.text-truncate;
max-width: 100%;
display: inline-block;
}
.icon {
margin-left: 0.25em;
margin-right: 0.25em;
padding: 0;
vertical-align: initial;
}
.badge {
&.badge-circle {
width: 12px;
height: 12px;
padding: 0;
border-radius: 6px;
vertical-align: middle;
&.calendar_event_category {
background-color: @calendarEventCategoryColor;
}
&.calendar_event_course {
background-color: @calendarEventCourseColor;
}
&.calendar_event_site {
background-color: @calendarEventGlobalColor;
}
&.calendar_event_group {
background-color: @calendarEventGroupColor;
}
&.calendar_event_user {
background-color: @calendarEventUserColor;
}
}
}
}
}
td {
......@@ -153,10 +197,9 @@
.calendartable {
td,
li {
padding: 5px;
padding: 0 4px 4px 4px;
}
li {
padding-left: 10px;
text-align: left;
}
}
......@@ -317,12 +360,16 @@
margin-bottom: 0.2em;
span {
img {
margin: 0 0.25em;
}
.icon {
padding: 0 0.2em;
}
}
}
.eventname {
padding-left: 0.2em;
.icon {
padding: 0;
margin-left: 0.25em;
}
}
}
.content {
......@@ -361,7 +408,6 @@
}
}
.calendarwrapper {
position: relative;
}
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