Skip to content

Commit

Permalink
MDL-58251 block_myoverview: empty list image placeholders
Browse files Browse the repository at this point in the history 
Part of MDL-55611 epic.
  • Loading branch information
@ryanwyllie
ryanwyllie authored and Damyon Wiese committed Apr 3, 2017
1 parent 6ef2ceb commit cbd3c4f
Show file tree
Hide file tree
Showing 15 changed files with 251 additions and 10 deletions.
4 changes: 3 additions & 1 deletion blocks/myoverview/classes/output/courses_view.php
View file
Expand Up @@ -66,7 +66,9 @@ public function export_for_template(renderer_base $output) {
$today = time();

// Build courses view data structure.
$coursesview = [];
$coursesview = [
'hascourses' => !empty($this->courses)
];

// How many courses we have per status?
$coursesbystatus = ['past' => 0, 'inprogress' => 0, 'future' => 0];
Expand Down
6 changes: 6 additions & 0 deletions blocks/myoverview/classes/output/main.php
View file
Expand Up @@ -59,10 +59,16 @@ public function export_for_template(renderer_base $output) {

$coursesummary = new course_summary($courses, $coursesprogress);
$coursesview = new courses_view($courses, $coursesprogress);
$nocoursesurl = $output->pix_url('courses', 'block_myoverview')->out();
$noeventsurl = $output->pix_url('activities', 'block_myoverview')->out();

return [
'courses' => $coursesummary->export_for_template($output),
'coursesview' => $coursesview->export_for_template($output),
'urls' => [
'nocourses' => $nocoursesurl,
'noevents' => $noeventsurl
]
];
}
}
7 changes: 6 additions & 1 deletion blocks/myoverview/lang/en/block_myoverview.php
View file
Expand Up @@ -26,12 +26,17 @@
$string['inprogress'] = 'In progress';
$string['myoverview:addinstance'] = 'Add a new my overview block';
$string['myoverview:myaddinstance'] = 'Add a new my overview block to Dashboard';
$string['nocourses'] = 'No courses';
$string['nocoursesinprogress'] = 'No in progress courses';
$string['nocoursesfuture'] = 'No future courses';
$string['nocoursespast'] = 'No past courses';
$string['noevents'] = 'No upcoming activities due';
$string['next30days'] = 'Next 30 days';
$string['next7days'] = 'Next 7 days';
$string['past'] = 'Past';
$string['pluginname'] = 'My overview';
$string['recentlyoverdue'] = 'Recently overdue';
$string['sortbycourses'] = 'Sort by courses';
$string['sortbydates'] = 'Sort by dates';
$string['timeline'] = 'Timeline';
$string['recentlyoverdue'] = 'Recently overdue';
$string['viewcourse'] = 'View course';
41 changes: 41 additions & 0 deletions blocks/myoverview/pix/activities.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions blocks/myoverview/pix/courses.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions blocks/myoverview/templates/course-event-list.mustache
View file
Expand Up @@ -86,8 +86,14 @@
</button>
</div>
</div>
<div class="hidden" data-region="empty-message">
<p class="text-muted">{{#str}} noevents, block_myoverview {{/str}}</p>
<div class="hidden text-xs-center text-center" data-region="empty-message">
<img class="empty-placeholder-image-sm"
src="{{urls.noevents}}"
alt="{{#str}} noevents, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} noevents, block_myoverview {{/str}}</p>
<a href="{{viewurl}}" class="btn btn-secondary text-primary">
{{#str}} viewcourse, block_myoverview {{/str}}
</a>
</div>
</div>
{{#js}}
Expand Down
34 changes: 34 additions & 0 deletions blocks/myoverview/templates/courses-view.mustache
View file
Expand Up @@ -23,6 +23,7 @@
{}
}}
<div id="courses-view-{{uniqid}}" data-region="courses-view">
{{#hascourses}}
<div class="text-xs-center text-center">
<div class="btn-group m-y-2" role="group" data-toggle="btns">
<a class="btn btn-default active" href="#myoverview_courses_view_in_progress" data-toggle="tab">
Expand All @@ -46,6 +47,14 @@
{{$pagingcontentid}}pc-for-in-progress{{/pagingcontentid}}
{{/ block_myoverview/courses-view-by-status }}
{{/inprogress}}
{{^inprogress}}
<div class="text-xs-center text-center m-t-3">
<img class="empty-placeholder-image-lg"
src="{{urls.nocourses}}"
alt="{{#str}} nocoursesinprogress, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} nocoursesinprogress, block_myoverview {{/str}}</p>
</div>
{{/inprogress}}
</div>
<div class="tab-pane fade" id="myoverview_courses_view_future">
{{#future}}
Expand All @@ -56,6 +65,14 @@
{{$pagingcontentid}}pc-for-in-progress{{/pagingcontentid}}
{{/ block_myoverview/courses-view-by-status }}
{{/future}}
{{^future}}
<div class="text-xs-center text-center m-t-3">
<img class="empty-placeholder-image-lg"
src="{{urls.nocourses}}"
alt="{{#str}} nocoursesfuture, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} nocoursesfuture, block_myoverview {{/str}}</p>
</div>
{{/future}}
</div>
<div class="tab-pane fade" id="myoverview_courses_view_past">
{{#past}}
Expand All @@ -66,8 +83,25 @@
{{$pagingcontentid}}pc-for-in-progress{{/pagingcontentid}}
{{/ block_myoverview/courses-view-by-status }}
{{/past}}
{{^past}}
<div class="text-xs-center text-center m-t-3">
<img class="empty-placeholder-image-lg"
src="{{urls.nocourses}}"
alt="{{#str}} nocoursespast, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} nocoursespast, block_myoverview {{/str}}</p>
</div>
{{/past}}
</div>
</div>
{{/hascourses}}
{{^hascourses}}
<div class="text-xs-center text-center m-t-3">
<img class="empty-placeholder-image-lg"
src="{{urls.nocourses}}"
alt="{{#str}} nocourses, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} nocourses, block_myoverview {{/str}}</p>
</div>
{{/hascourses}}
</div>
{{#js}}
require(['jquery', 'core/custom_interaction_events'], function($, customEvents) {
Expand Down
7 changes: 5 additions & 2 deletions blocks/myoverview/templates/event-list.mustache
View file
Expand Up @@ -70,8 +70,11 @@
</button>
</div>
</div>
<div class="hidden" data-region="empty-message">
<p class="text-muted">{{#str}} noevents, block_myoverview {{/str}}</p>
<div class="hidden text-xs-center text-center m-t-3" data-region="empty-message">
<img class="empty-placeholder-image-lg"
src="{{urls.noevents}}"
alt="{{#str}} noevents, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} noevents, block_myoverview {{/str}}</p>
</div>
</div>
{{#js}}
Expand Down
6 changes: 5 additions & 1 deletion blocks/myoverview/templates/paging-bar-item.mustache
View file
Expand Up @@ -17,10 +17,14 @@
{{!
@template block_myoverview/paging-bar-item
This template renders the each course block containing a summary and calendar events.
This template renders a single item in the paging bar.
Example context (json):
{
"url": "#",
"number": 1,
"page": "1",
"active": true
}
}}
<li class="page-item {{#active}}active{{/active}} {{#disabled}}disabled{{/disabled}}"
Expand Down
28 changes: 27 additions & 1 deletion blocks/myoverview/templates/paging-bar.mustache
View file
Expand Up @@ -17,10 +17,36 @@
{{!
@template block_myoverview/paging-bar
This template renders the each course block containing a summary and calendar events.
This template renders the bootstrap style paging bar.
Example context (json):
{
"pagingbar": {
"pagecount": 2,
"previous": {},
"next": {},
"first": {
"url": "#",
"page": "first"
},
"last": {
"url": "#",
"page": "last"
},
"pages": [
{
"url": "#",
"number": 1,
"page": "1",
"active": true
},
{
"url": "#",
"number": 2,
"page": "2"
}
]
}
}
}}
{{#pagingbar}}
Expand Down
10 changes: 9 additions & 1 deletion blocks/myoverview/templates/timeline-view-courses.mustache
View file
Expand Up @@ -24,10 +24,18 @@
}}
<ul class="list-group unstyled" id="timeline-view-courses-{{uniqid}}">
{{#courses}} {{> block_myoverview/course-item }} {{/courses}}
{{^courses}}
<div class="text-xs-center text-center m-t-3">
<img class="empty-placeholder-image-lg"
src="{{urls.noevents}}"
alt="{{#str}} nocoursesinprogress, block_myoverview {{/str}}">
<p class="text-muted m-t-1">{{#str}} nocoursesinprogress, block_myoverview {{/str}}</p>
</div>
{{/courses}}
</ul>
{{#js}}
require(['jquery', 'block_myoverview/event_list_by_course'], function($, EventListByCourse) {
var root = $("#timeline-view-courses-{{uniqid}}");
EventListByCourse.init(root);
});
{{/js}}
{{/js}}
10 changes: 10 additions & 0 deletions theme/boost/scss/moodle/blocks.scss
View file
Expand Up @@ -177,4 +177,14 @@ $doughnut-fill-colour: $brand-warning;
}
}
}

.empty-placeholder-image-sm {
height: 70px;
width: 85px;
}

.empty-placeholder-image-lg {
height: 125px;
width: 145px;
}
}
10 changes: 10 additions & 0 deletions theme/bootstrapbase/less/moodle/blocks.less
View file
Expand Up @@ -352,4 +352,14 @@
}
}
}

.empty-placeholder-image-sm {
height: 70px;
width: 85px;
}

.empty-placeholder-image-lg {
height: 125px;
width: 145px;
}
}
8 changes: 8 additions & 0 deletions theme/bootstrapbase/style/moodle.css
View file
Expand Up @@ -16336,6 +16336,14 @@ body {
.block_myoverview .event-list-item .event-name-container .event-name {
display: block;
}
.block_myoverview .empty-placeholder-image-sm {
height: 70px;
width: 85px;
}
.block_myoverview .empty-placeholder-image-lg {
height: 125px;
width: 145px;
}
/**
* Moodle forms HTML isn't changeable via renderers (yet?) so this
* .less file imports styles from the bootstrap @variables file and
Expand Down
28 changes: 27 additions & 1 deletion theme/bootstrapbase/templates/block_myoverview/paging-bar.mustache
View file
Expand Up @@ -17,10 +17,36 @@
{{!
@template block_myoverview/paging-bar
This template renders the each course block containing a summary and calendar events.
This template renders the bootstrap style paging bar.
Example context (json):
{
"pagingbar": {
"pagecount": 2,
"previous": {},
"next": {},
"first": {
"url": "#",
"page": "first"
},
"last": {
"url": "#",
"page": "last"
},
"pages": [
{
"url": "#",
"number": 1,
"page": "1",
"active": true
},
{
"url": "#",
"number": 2,
"page": "2"
}
]
}
}
}}
{{#pagingbar}}
Expand Down

0 comments on commit cbd3c4f

Please sign in to comment.