Merge branch 'MDL-59884-master' of git://github.com/lameze/moodle

mvaraujo · Aug 30, 2017 · 9e22016 · 9e22016
2 parents a85c077 + b31a169
commit 9e22016
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 8 deletions.
diff --git a/calendar/amd/build/calendar.min.js b/calendar/amd/build/calendar.min.js
diff --git a/calendar/amd/build/view_manager.min.js b/calendar/amd/build/view_manager.min.js
diff --git a/calendar/amd/src/calendar.js b/calendar/amd/src/calendar.js
@@ -249,13 +249,13 @@ define([
         var body = $('body');
 
         body.on(CalendarEvents.created, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.deleted, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.updated, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.editActionEvent, function(e, url) {
             // Action events needs to be edit directly on the course module.

diff --git a/calendar/amd/src/view_manager.js b/calendar/amd/src/view_manager.js
@@ -28,6 +28,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
             ROOT: "[data-region='calendar']",
             CALENDAR_NAV_LINK: "span.calendarwrapper .arrow_link",
             CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
+            LOADING_ICON_CONTAINER: '[data-region="overlay-icon-container"]'
         };
 
         /**
@@ -55,13 +56,20 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          * @return {promise}
          */
         var refreshMonthContent = function(time, courseid) {
+            var root = $(SELECTORS.ROOT);
+
+            startLoading(root);
+
             return CalendarRepository.getCalendarMonthData(time, courseid)
                 .then(function(context) {
                     return Templates.render('core_calendar/month_detailed', context);
                 })
                 .then(function(html, js) {
                     return Templates.replaceNode(SELECTORS.CALENDAR_MONTH_WRAPPER, html, js);
                 })
+                .always(function() {
+                    return stopLoading(root);
+                })
                 .fail(Notification.exception);
         };
 
@@ -90,14 +98,37 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          *
          * @return {promise}
          */
-        var reloadCurrentMonth = function() {
-            var root = $(SELECTORS.ROOT),
-                courseid = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid'),
+        var reloadCurrentMonth = function(root) {
+            var courseid = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid'),
                 time = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('current-time');
 
             return refreshMonthContent(time, courseid);
         };
 
+        /**
+         * Set the element state to loading.
+         *
+         * @param {object} root The container element
+         * @method startLoading
+         */
+        var startLoading = function(root) {
+            var loadingIconContainer = root.find(SELECTORS.LOADING_ICON_CONTAINER);
+
+            loadingIconContainer.removeClass('hidden');
+        };
+
+        /**
+         * Remove the loading state from the element.
+         *
+         * @param {object} root The container element
+         * @method stopLoading
+         */
+        var stopLoading = function(root) {
+            var loadingIconContainer = root.find(SELECTORS.LOADING_ICON_CONTAINER);
+
+            loadingIconContainer.addClass('hidden');
+        };
+
         return {
             init: function() {
                 registerEventListeners(SELECTORS.ROOT);

diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache
@@ -34,6 +34,7 @@
 <div id="month-detailed-{{uniqid}}" class="calendarwrapper" data-courseid="{{courseid}}" data-current-time="{{time}}">
     {{> core_calendar/month_header }}
     {{> core_calendar/month_navigation }}
+    {{> core/overlay_loading}}
     <table class="calendarmonth calendartable card-deck m-b-0">
         <thead>
             <tr>

diff --git a/lib/templates/overlay_loading.mustache b/lib/templates/overlay_loading.mustache
@@ -0,0 +1,38 @@
+{{!
+    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 core/overlay_loading
+
+    Moodle overlay loading template.
+
+    The purpose of this template is to render a loading animation using a overlay effect.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    *
+
+    Example context (json):
+    {}
+}}
+<span class="overlay-icon-container hidden" data-region="overlay-icon-container">
+    {{> core/loading }}
+</span>
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -2159,3 +2159,25 @@ $footer-link-color: $bg-inverse-link-color !default;
 .clickable {
     cursor: pointer;
 }
+
+.overlay-icon-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .loading-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .icon {
+            height: 40px;
+            width: 40px;
+
+        }
+    }
+}
diff --git a/theme/bootstrapbase/less/moodle/core.less b/theme/bootstrapbase/less/moodle/core.less
@@ -2385,3 +2385,25 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
     cursor: pointer;
 }
+
+.overlay-icon-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .loading-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .icon {
+            height: 40px;
+            width: 40px;
+
+        }
+    }
+}
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
@@ -4777,6 +4777,24 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
   cursor: pointer;
 }
+.overlay-icon-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+.overlay-icon-container .loading-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.overlay-icon-container .loading-icon .icon {
+  height: 40px;
+  width: 40px;
+}
 /* admin.less */
 .formtable tbody th {
   font-weight: normal;