Skip to content

Commit

Permalink
MDL-57585 block_myoverview: add styling for timeline view in boost
Browse files Browse the repository at this point in the history
Part of MDL-55611 epic.
  • Loading branch information
ryanwyllie authored and Damyon Wiese committed Apr 3, 2017
1 parent 4cc0d2d commit 0eb8556
Show file tree
Hide file tree
Showing 13 changed files with 306 additions and 50 deletions.
2 changes: 1 addition & 1 deletion blocks/myoverview/amd/build/event_list.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 14 additions & 3 deletions blocks/myoverview/amd/src/event_list.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ define(['jquery', 'core/notification', 'core/templates',
VIEW_MORE_BUTTON: '[data-action="view-more"]'
};

var TEMPLATES = {
EVENT_LIST_ITEMS: 'block_myoverview/event-list-items',
COURSE_EVENT_LIST_ITEMS: 'block_myoverview/course-event-list-items'
};

/**
* Set a flag on the element to indicate that it has completed
* loading all event data.
Expand Down Expand Up @@ -178,11 +183,12 @@ define(['jquery', 'core/notification', 'core/templates',
* @param {array} calendarEvents The list of calendar events
* @return {promise} Resolved when the elements are attached to the DOM
*/
var renderGroup = function(group, calendarEvents) {
var renderGroup = function(group, calendarEvents, templateName) {

group.removeClass('hidden');

return Templates.render(
'block_myoverview/event-list-items',
templateName,
{events: calendarEvents}
).done(function(html, js) {
Templates.appendNodeContents(group.find(SELECTORS.EVENT_LIST), html, js);
Expand Down Expand Up @@ -260,6 +266,11 @@ define(['jquery', 'core/notification', 'core/templates',
*/
var render = function(root, calendarEvents) {
var renderCount = 0;
var templateName = TEMPLATES.EVENT_LIST_ITEMS;

if (root.attr('data-course-id')) {
templateName = TEMPLATES.COURSE_EVENT_LIST_ITEMS;
}

// Loop over each of the element list groups and find the set of calendar events
// that belong to that group (as defined by the group's day range). The matching
Expand All @@ -269,7 +280,7 @@ define(['jquery', 'core/notification', 'core/templates',

if (events.length) {
renderCount += events.length;
return renderGroup($(container), events);
return renderGroup($(container), events, templateName);
} else {
return null;
}
Expand Down
65 changes: 65 additions & 0 deletions blocks/myoverview/templates/course-event-list-item.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
{{!
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 block_myoverview/course-event-list-item
This template renders an event list item for the myoverview block
in the courses view.
Example context (json):
{
"enddate": "Nov 4th, 10am",
"name": "Assignment due 1",
"url": "https://www.google.com",
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1
},
"icon": {
"key": "icon",
"component": "mod_assign",
"alttext": "Assignment icon"
}
}
}}
<li class="list-group-item event-list-item" data-region="event-list-item">
<div class="row">
<div class="col-xs-12 col-lg-7">
<div class="d-inline-block icon-large event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{name}}</a>
<p class="text-muted text-truncate m-b-0">
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
</p>
</div>
</div>
<div class="hidden-md-down col-lg-5 text-truncate">
{{#action.actionable}}
<a class="m-r-1" href="{{{action.url}}}">{{action.name}}</a>
{{#action.itemcount}}
<span class="tag tag-pill tag-default">{{.}}</span>
{{/action.itemcount}}
{{/action.actionable}}
{{^action.actionable}}
<div class="text-muted">{{action.name}}</div>
{{/action.actionable}}
</div>
</div>
</li>
61 changes: 61 additions & 0 deletions blocks/myoverview/templates/course-event-list-items.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{{!
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 block_myoverview/course-event-list-items
This template renders a group of event list items for the myoverview block
sort by courses view.
Example context (json):
{
"events": [
{
"enddate": "Nov 4th, 10am",
"name": "Assignment due 1",
"url": "https://www.google.com",
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1
},
"icon": {
"key": "icon",
"component": "mod_assign",
"alttext": "Assignment icon"
}
},
{
"enddate": "Nov 4th, 10am",
"name": "Assignment due 2",
"url": "https://www.google.com",
"action": {
"name": "Submit assignment",
"url": "https://www.google.com",
"itemcount": 1
},
"icon": {
"key": "icon",
"component": "mod_assign",
"alttext": "Assignment icon"
}
}
]
}
}}
{{#events}}
{{> block_myoverview/course-event-list-item }}
{{/events}}
85 changes: 85 additions & 0 deletions blocks/myoverview/templates/course-event-list.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{{!
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 block_myoverview/course-event-list
This template renders a list of events for the myoverview block
sort by courses view.
Example context (json):
{
}
}}
<div data-region="event-list-container"
data-limit="{{$limit}}20{{/limit}}"
data-course-id="{{$courseid}}{{/courseid}}"
data-last-id="{{$lastid}}{{/lastid}}"
id="event-list-container-{{$courseid}}{{/courseid}}">

<div data-region="event-list-content">
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} today {{/str}}{{/title}}
{{$startday}}0{{/startday}}
{{$endday}}1{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} next7days, block_myoverview {{/str}}{{/title}}
{{$startday}}1{{/startday}}
{{$endday}}7{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} next30days, block_myoverview {{/str}}{{/title}}
{{$startday}}7{{/startday}}
{{$endday}}30{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}
{{< block_myoverview/event-list-group }}
{{$title}}{{#str}} future, block_myoverview {{/str}}{{/title}}
{{$startday}}30{{/startday}}
{{$endday}}0{{/endday}}
{{$eventlistitems}}
{{> block_myoverview/course-event-list-items }}
{{/eventlistitems}}
{{/ block_myoverview/event-list-group }}

<div class="text-xs-center text-center m-y-2">
<button type="button" class="btn btn-secondary" data-action="view-more">
{{#str}} viewmore {{/str}}
<span class="hidden" data-region="loading-icon-container">
{{> core/loading }}
</span>
</button>
</div>
</div>
<div class="hidden" data-region="empty-message">
<p class="text-muted">{{#str}} noevents, block_myoverview {{/str}}</p>
</div>
</div>
{{#js}}
require(['jquery', 'block_myoverview/event_list'], function($, EventList) {
var root = $("#event-list-container-{{$courseid}}{{/courseid}}");
EventList.registerEventListeners(root);
});
{{/js}}
4 changes: 2 additions & 2 deletions blocks/myoverview/templates/course-item.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@
{{> block_myoverview/course-summary }}
</div>
<div class="col-md-9">
{{< block_myoverview/event-list }}
{{< block_myoverview/course-event-list }}
{{$limit}}10{{/limit}}
{{$offset}}0{{/offset}}
{{$courseid}}{{id}}{{/courseid}}
{{/ block_myoverview/event-list }}
{{/ block_myoverview/course-event-list }}
</div>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion blocks/myoverview/templates/event-list-group.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@

<h5 class="m-t-2" id="event-list-title-{{uniqid}}">{{$title}}{{/title}}</h5>
<ul class="list-group unstyled" data-region="event-list" aria-describedby="event-list-title-{{uniqid}}">
{{> block_myoverview/event-list-items }}
{{$eventlistitems}}
{{> block_myoverview/event-list-items }}
{{/eventlistitems}}
</ul>
</div>
57 changes: 28 additions & 29 deletions blocks/myoverview/templates/event-list-item.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -39,39 +39,38 @@
}
}
}}
<li class="list-group-item" data-region="event-list-item">
<div class="container-fluid">
<div class="row">
{{#action.itemcount}}
{{#action.showitemcount}}
<div class="pull-xs-right hidden-sm-down m-l-1">
<span class="tag tag-pill tag-default">{{.}}</span>
</div>
{{/action.showitemcount}}
{{/action.itemcount}}
<div class="d-inline-block pull-xs-right hidden-sm-down m-l-1">
{{#action.actionable}}
<a href="{{{action.url}}}">{{action.name}}</a>
{{/action.actionable}}
{{^action.actionable}}
<div class="text-muted">{{action.name}}</div>
{{/action.actionable}}
</div>
<div class="d-inline-block pull-xs-right hidden-sm-down">{{enddate}}</div>
<div class="d-inline-block">
<li class="list-group-item event-list-item" data-region="event-list-item">
<div class="row">
<div class="col-xs-12 col-sm-6 col-xl-7">
<div class="d-inline-block icon-large event-icon">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
</div>
<div class="d-inline-block m-l-1">
<div class="container">
<div class="row">
<a href="{{{url}}}">{{name}}</a>
</div>
<div class="row text-muted">
{{course.fullname}}
</div>
<div class="d-inline-block event-name-container">
<a class="event-name text-truncate" href="{{{url}}}">{{name}}</a>
<p class="text-muted text-truncate m-b-0">{{course.fullnamedisplay}}</p>
</div>
</div>
<div class="hidden-sm-down col-md-6 col-xl-5">
<div class="row">
<div class="col-xs-5 text-truncate">
{{#userdate}} {{timesort}}, {{#str}} strftimerecent {{/str}} {{/userdate}}
</div>
<div class="col-xs-7 text-truncate">
{{#action.actionable}}
<a class="m-r-1" href="{{{action.url}}}">{{action.name}}</a>
{{#action.itemcount}}
<span class="tag tag-pill tag-default pull-xs-right">{{.}}</span>
{{/action.itemcount}}
{{/action.actionable}}
{{^action.actionable}}
<div class="text-muted">{{action.name}}</div>
{{/action.actionable}}
</div>
</div>
<div class="d-block text-xs-right hidden-md-up">{{enddate}}</div>
</div>
<div class="hidden-xs-down hidden-md-up col-sm-6">
<div class="text-xs-right text-truncate">{{enddate}}</div>
</div>
</div>
<div class="text-xs-right hidden-sm-up text-truncate">{{enddate}}</div>
</li>
Loading

0 comments on commit 0eb8556

Please sign in to comment.