mirror of
https://github.com/moodle/moodle.git
synced 2025-04-20 16:04:25 +02:00
MDL-58251 block_myoverview: empty list image placeholders
Part of MDL-55611 epic.
This commit is contained in:
Ryan Wyllie
Damyon Wiese
parent
6ef2ceb715
commit
cbd3c4fee5
@ -66,7 +66,9 @@ class courses_view implements renderable, templatable {
|
||||
$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];
|
||||
|
||||
@ -59,10 +59,16 @@ class main implements renderable, templatable {
|
||||
|
||||
$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
|
||||
]
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,12 +26,17 @@ $string['future'] = 'Future';
|
||||
$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
blocks/myoverview/pix/activities.svg
Executable file
41
blocks/myoverview/pix/activities.svg
Executable file
@ -0,0 +1,41 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="157 -1509 148 125">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
clip-path: url(#clip-Activities);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #eee;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #c4c8cc;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
<clipPath id="clip-Activities">
|
||||
<rect x="157" y="-1509" width="148" height="125"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Activities" class="cls-1">
|
||||
<g id="Group_42" data-name="Group 42" transform="translate(-268 -1985)">
|
||||
<ellipse id="Ellipse_37" data-name="Ellipse 37" class="cls-2" cx="74" cy="14.785" rx="74" ry="14.785" transform="translate(425 571.43)"/>
|
||||
<rect id="Rectangle_80" data-name="Rectangle 80" class="cls-3" width="94.182" height="110.215" transform="translate(451.909 476)"/>
|
||||
<g id="Group_41" data-name="Group 41" transform="translate(467.043 493)">
|
||||
<rect id="Rectangle_81" data-name="Rectangle 81" class="cls-4" width="44.456" height="5.625" transform="translate(21.16 0.549)"/>
|
||||
<rect id="Rectangle_82" data-name="Rectangle 82" class="cls-4" width="33.342" height="5.625" transform="translate(21.16 11.652)"/>
|
||||
<rect id="Rectangle_83" data-name="Rectangle 83" class="cls-4" width="44.456" height="5.625" transform="translate(21.16 30.772)"/>
|
||||
<rect id="Rectangle_84" data-name="Rectangle 84" class="cls-4" width="33.342" height="5.625" transform="translate(21.16 41.875)"/>
|
||||
<rect id="Rectangle_85" data-name="Rectangle 85" class="cls-4" width="44.456" height="5.625" transform="translate(21.16 61.291)"/>
|
||||
<rect id="Rectangle_86" data-name="Rectangle 86" class="cls-4" width="33.342" height="5.625" transform="translate(21.16 72.393)"/>
|
||||
<ellipse id="Ellipse_38" data-name="Ellipse 38" class="cls-4" cx="7.007" cy="7" rx="7.007" ry="7" transform="translate(0 0)"/>
|
||||
<ellipse id="Ellipse_39" data-name="Ellipse 39" class="cls-4" cx="7.007" cy="7" rx="7.007" ry="7" transform="translate(0 31)"/>
|
||||
<ellipse id="Ellipse_40" data-name="Ellipse 40" class="cls-4" cx="7.007" cy="7" rx="7.007" ry="7" transform="translate(0 61)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
52
blocks/myoverview/pix/courses.svg
Executable file
52
blocks/myoverview/pix/courses.svg
Executable file
@ -0,0 +1,52 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="157 -1305 148 125">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
clip-path: url(#clip-Courses);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #eee;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #c4c8cc;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
<clipPath id="clip-Courses">
|
||||
<rect x="157" y="-1305" width="148" height="125"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Courses" class="cls-1">
|
||||
<g id="Group_44" data-name="Group 44" transform="translate(-268 -1781)">
|
||||
<ellipse id="Ellipse_41" data-name="Ellipse 41" class="cls-2" cx="74" cy="14.785" rx="74" ry="14.785" transform="translate(425 571.43)"/>
|
||||
<rect id="Rectangle_87" data-name="Rectangle 87" class="cls-3" width="95.097" height="110.215" transform="translate(451.909 476)"/>
|
||||
<g id="Group_43" data-name="Group 43" transform="translate(464.04 494)">
|
||||
<rect id="Rectangle_88" data-name="Rectangle 88" class="cls-4" width="31.043" height="34" transform="translate(0)"/>
|
||||
<rect id="Rectangle_89" data-name="Rectangle 89" class="cls-4" width="31.043" height="34" transform="translate(0 42)"/>
|
||||
<rect id="Rectangle_90" data-name="Rectangle 90" class="cls-4" width="31.067" height="34" transform="translate(39.005)"/>
|
||||
<rect id="Rectangle_91" data-name="Rectangle 91" class="cls-4" width="31.067" height="34" transform="translate(39.005 42)"/>
|
||||
<rect id="Rectangle_92" data-name="Rectangle 92" class="cls-3" width="23.023" height="3.18" transform="translate(3.081 16.549)"/>
|
||||
<rect id="Rectangle_93" data-name="Rectangle 93" class="cls-3" width="23.023" height="3.18" transform="translate(3.081 58.549)"/>
|
||||
<rect id="Rectangle_94" data-name="Rectangle 94" class="cls-3" width="23.023" height="3.18" transform="translate(43.122 16.549)"/>
|
||||
<rect id="Rectangle_95" data-name="Rectangle 95" class="cls-3" width="23.023" height="3.18" transform="translate(43.122 58.549)"/>
|
||||
<rect id="Rectangle_96" data-name="Rectangle 96" class="cls-3" width="14.014" height="3.18" transform="translate(3.081 21.825)"/>
|
||||
<rect id="Rectangle_97" data-name="Rectangle 97" class="cls-3" width="18.845" height="3.18" transform="translate(3.081 26.825)"/>
|
||||
<rect id="Rectangle_98" data-name="Rectangle 98" class="cls-3" width="14.014" height="3.18" transform="translate(3.081 63.825)"/>
|
||||
<rect id="Rectangle_99" data-name="Rectangle 99" class="cls-3" width="18.845" height="3.18" transform="translate(3.081 68.825)"/>
|
||||
<rect id="Rectangle_100" data-name="Rectangle 100" class="cls-3" width="14.014" height="3.18" transform="translate(43.122 21.825)"/>
|
||||
<rect id="Rectangle_101" data-name="Rectangle 101" class="cls-3" width="18.845" height="3.18" transform="translate(43.122 26.825)"/>
|
||||
<rect id="Rectangle_102" data-name="Rectangle 102" class="cls-3" width="14.014" height="3.18" transform="translate(43.122 63.825)"/>
|
||||
<rect id="Rectangle_103" data-name="Rectangle 103" class="cls-3" width="18.845" height="3.18" transform="translate(43.122 68.825)"/>
|
||||
<ellipse id="Ellipse_42" data-name="Ellipse 42" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(3.003 3.55)"/>
|
||||
<ellipse id="Ellipse_43" data-name="Ellipse 43" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(3.003 45.55)"/>
|
||||
<ellipse id="Ellipse_44" data-name="Ellipse 44" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(43.044 3.55)"/>
|
||||
<ellipse id="Ellipse_45" data-name="Ellipse 45" class="cls-3" cx="5.658" cy="5.652" rx="5.658" ry="5.652" transform="translate(43.044 45.55)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@ -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}}
|
||||
|
||||
@ -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">
|
||||
@ -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}}
|
||||
@ -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}}
|
||||
@ -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) {
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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}}"
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -352,4 +352,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-placeholder-image-sm {
|
||||
height: 70px;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.empty-placeholder-image-lg {
|
||||
height: 125px;
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user