Merge branch 'MDL-54165-master' of git://github.com/ryanwyllie/moodle

mod/assign/amd/build/grading_actions.min.js

@@ -1 +1 @@
-define(["jquery"],function(a){var b=function(b){this._regionSelector=b,this._region=a(b),a(document).on("user-changed",this._showActionsForm.bind(this)),this._region.find('[name="savechanges"]').on("click",this._trigger.bind(this,"save-changes")),this._region.find('[name="resetbutton"]').on("click",this._trigger.bind(this,"reset")),this._region.find("form").on("submit",function(a){a.preventDefault()})};return b.prototype._regionSelector=null,b.prototype._lastUserId=0,b.prototype._region=null,b.prototype._showActionsForm=function(a,b){var c=this._region.find("[data-region=grading-actions-form]");b!=this._lastUserId&&b>0&&(this._lastUserId=b),b>0?c.removeClass("hide"):c.addClass("hide")},b.prototype._trigger=function(b){a(document).trigger(b)},b});
+define(["jquery","mod_assign/grading_events"],function(a,b){var c=function(b){this._regionSelector=b,this._region=a(b),this.registerEventListeners()};return c.prototype._regionSelector=null,c.prototype._lastUserId=0,c.prototype._region=null,c.prototype._showActionsForm=function(a,b){var c=this._region.find("[data-region=grading-actions-form]");b!=this._lastUserId&&b>0&&(this._lastUserId=b),b>0?c.removeClass("hide"):c.addClass("hide")},c.prototype._trigger=function(b){a(document).trigger(b)},c.prototype.getReviewPanelElement=function(){return a('[data-region="review-panel"]')},c.prototype.hasReviewPanelElement=function(){return this.getReviewPanelElement().length>0},c.prototype.getCollapseGradePanelButton=function(){return a('[data-region="grade-actions"] .collapse-grade-panel')},c.prototype.getCollapseReviewPanelButton=function(){return a('[data-region="grade-actions"] .collapse-review-panel')},c.prototype.getExpandAllPanelsButton=function(){return a('[data-region="grade-actions"] .collapse-none')},c.prototype.resetLayoutButtons=function(){this.getCollapseGradePanelButton().removeClass("active"),this.getCollapseReviewPanelButton().removeClass("active"),this.getExpandAllPanelsButton().removeClass("active")},c.prototype.collapseReviewPanel=function(){a(document).trigger(b.COLLAPSE_REVIEW_PANEL),a(document).trigger(b.EXPAND_GRADE_PANEL),this.resetLayoutButtons(),this.getCollapseReviewPanelButton().addClass("active")},c.prototype.collapseGradePanel=function(){a(document).trigger(b.COLLAPSE_GRADE_PANEL),a(document).trigger(b.EXPAND_REVIEW_PANEL),this.resetLayoutButtons(),this.getCollapseGradePanelButton().addClass("active")},c.prototype.expandAllPanels=function(){a(document).trigger(b.EXPAND_GRADE_PANEL),a(document).trigger(b.EXPAND_REVIEW_PANEL),this.resetLayoutButtons(),this.getExpandAllPanelsButton().addClass("active")},c.prototype.registerEventListeners=function(){if(this.hasReviewPanelElement()){var b=this.getCollapseReviewPanelButton();b.click(function(a){this.collapseReviewPanel(),a.preventDefault()}.bind(this)),b.keydown(function(a){a.metaKey||a.shiftKey||a.altKey||a.ctrlKey||(13===a.keyCode||32===a.keyCode)&&(this.collapseReviewPanel(),a.preventDefault())}.bind(this));var c=this.getCollapseGradePanelButton();c.click(function(a){this.collapseGradePanel(),a.preventDefault()}.bind(this)),c.keydown(function(a){a.metaKey||a.shiftKey||a.altKey||a.ctrlKey||(13===a.keyCode||32===a.keyCode)&&(this.collapseGradePanel(),a.preventDefault())}.bind(this));var d=this.getExpandAllPanelsButton();d.click(function(a){this.expandAllPanels(),a.preventDefault()}.bind(this)),d.keydown(function(a){a.metaKey||a.shiftKey||a.altKey||a.ctrlKey||(13===a.keyCode||32===a.keyCode)&&(this.expandAllPanels(),a.preventDefault())}.bind(this))}a(document).on("user-changed",this._showActionsForm.bind(this)),this._region.find('[name="savechanges"]').on("click",this._trigger.bind(this,"save-changes")),this._region.find('[name="resetbutton"]').on("click",this._trigger.bind(this,"reset")),this._region.find("form").on("submit",function(a){a.preventDefault()})},c});

mod/assign/amd/build/grading_events.min.js

@@ -0,0 +1 @@
+define(function(){return{COLLAPSE_REVIEW_PANEL:"grading:collapse-review-panel",EXPAND_REVIEW_PANEL:"grading:expand-review-panel",COLLAPSE_GRADE_PANEL:"grading:collapse-grade-panel",EXPAND_GRADE_PANEL:"grading:expand-grade-panel"}});

mod/assign/amd/build/grading_review_panel.min.js

@@ -1 +1 @@
-define(["jquery"],function(a){var b=function(){this._region=a('[data-region="review-panel"]')};return b.prototype._region=null,b.prototype.getReviewPanel=function(a){var b=this._region.data("panel-owner");return"undefined"==typeof b&&this._region.data("review-panel-plugin",a),this._region.data("review-panel-plugin")==a?this._region[0]:!1},b});
+define(["jquery","mod_assign/grading_events"],function(a,b){var c=function(){this._region=a('[data-region="review-panel-content"]'),this.registerEventListeners()};return c.prototype._region=null,c.prototype.getReviewPanel=function(a){var b=this._region.data("panel-owner");return"undefined"==typeof b&&this._region.data("review-panel-plugin",a),this._region.data("review-panel-plugin")==a?this._region[0]:!1},c.prototype.getTogglePanelButton=function(){return this.getPanelElement().find('[data-region="review-panel-toggle"]')},c.prototype.getPanelElement=function(){return a('[data-region="review-panel"]')},c.prototype.getPanelContentElement=function(){return a('[data-region="review-panel-content"]')},c.prototype.togglePanel=function(){this.getPanelElement().hasClass("collapsed")?a(document).trigger(b.EXPAND_REVIEW_PANEL):a(document).trigger(b.COLLAPSE_REVIEW_PANEL)},c.prototype.collapsePanel=function(){this.getPanelElement().addClass("collapsed").removeClass("grade-panel-collapsed"),this.getPanelContentElement().attr("aria-hidden",!0)},c.prototype.expandPanel=function(){this.getPanelElement().removeClass("collapsed"),this.getPanelContentElement().removeAttr("aria-hidden")},c.prototype.registerEventListeners=function(){var c=this.getTogglePanelButton();c.click(function(a){this.togglePanel(),a.preventDefault()}.bind(this)),c.keydown(function(a){a.metaKey||a.shiftKey||a.altKey||a.ctrlKey||(13===a.keyCode||32===a.keyCode)&&(this.togglePanel(),a.preventDefault())}.bind(this));var d=a(document);d.on(b.COLLAPSE_REVIEW_PANEL,function(){this.collapsePanel()}.bind(this)),d.on(b.COLLAPSE_GRADE_PANEL,function(){this.expandPanel(),this.getPanelElement().addClass("grade-panel-collapsed")}.bind(this)),d.on(b.EXPAND_REVIEW_PANEL,function(){this.expandPanel()}.bind(this)),d.on(b.EXPAND_GRADE_PANEL,function(){this.getPanelElement().removeClass("grade-panel-collapsed")}.bind(this))},c});

mod/assign/amd/src/grading_actions.js

@@ -23,7 +23,7 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @since      3.1
  */
-define(['jquery'], function($) {
+define(['jquery', 'mod_assign/grading_events'], function($, GradingEvents) {
 
     /**
      * GradingActions class.
@@ -35,13 +35,7 @@ define(['jquery'], function($) {
         this._regionSelector = selector;
         this._region = $(selector);
 
-        $(document).on('user-changed', this._showActionsForm.bind(this));
-
-        this._region.find('[name="savechanges"]').on('click', this._trigger.bind(this, 'save-changes'));
-        this._region.find('[name="resetbutton"]').on('click', this._trigger.bind(this, 'reset'));
-        this._region.find('form').on('submit', function(e) {
-          e.preventDefault();
-        });
+        this.registerEventListeners();
     };
 
     /** @type {String} Selector for the page region containing the user navigation. */
@@ -86,5 +80,165 @@ define(['jquery'], function($) {
         $(document).trigger(action);
     };
 
+    /**
+     * Get the review panel element.
+     *
+     * @method getReviewPanelElement
+     * @return {jQuery}
+     */
+    GradingActions.prototype.getReviewPanelElement = function() {
+        return $('[data-region="review-panel"]');
+    };
+
+    /**
+     * Check if the page has a review panel.
+     *
+     * @method hasReviewPanelElement
+     * @return {bool}
+     */
+    GradingActions.prototype.hasReviewPanelElement = function() {
+        return this.getReviewPanelElement().length > 0;
+    };
+
+    /**
+     * Get the collapse grade panel button.
+     *
+     * @method getCollapseGradePanelButton
+     * @return {jQuery}
+     */
+    GradingActions.prototype.getCollapseGradePanelButton = function() {
+        return $('[data-region="grade-actions"] .collapse-grade-panel');
+    };
+
+    /**
+     * Get the collapse review panel button.
+     *
+     * @method getCollapseReviewPanelButton
+     * @return {jQuery}
+     */
+    GradingActions.prototype.getCollapseReviewPanelButton = function() {
+        return $('[data-region="grade-actions"] .collapse-review-panel');
+    };
+
+    /**
+     * Get the expand all panels button.
+     *
+     * @method getExpandAllPanelsButton
+     * @return {jQuery}
+     */
+    GradingActions.prototype.getExpandAllPanelsButton = function() {
+        return $('[data-region="grade-actions"] .collapse-none');
+    };
+
+    /**
+     * Remove the active state from all layout buttons.
+     *
+     * @method resetLayoutButtons
+     */
+    GradingActions.prototype.resetLayoutButtons = function() {
+        this.getCollapseGradePanelButton().removeClass('active');
+        this.getCollapseReviewPanelButton().removeClass('active');
+        this.getExpandAllPanelsButton().removeClass('active');
+    };
+
+    /**
+     * Hide the review panel.
+     *
+     * @method collapseReviewPanel
+     */
+    GradingActions.prototype.collapseReviewPanel = function() {
+        $(document).trigger(GradingEvents.COLLAPSE_REVIEW_PANEL);
+        $(document).trigger(GradingEvents.EXPAND_GRADE_PANEL);
+        this.resetLayoutButtons();
+        this.getCollapseReviewPanelButton().addClass('active');
+    };
+
+    /**
+     * Show/Hide the grade panel.
+     *
+     * @method collapseGradePanel
+     */
+    GradingActions.prototype.collapseGradePanel = function() {
+        $(document).trigger(GradingEvents.COLLAPSE_GRADE_PANEL);
+        $(document).trigger(GradingEvents.EXPAND_REVIEW_PANEL);
+        this.resetLayoutButtons();
+        this.getCollapseGradePanelButton().addClass('active');
+    };
+
+    /**
+     * Return the layout to default.
+     *
+     * @method expandAllPanels
+     */
+    GradingActions.prototype.expandAllPanels = function() {
+        $(document).trigger(GradingEvents.EXPAND_GRADE_PANEL);
+        $(document).trigger(GradingEvents.EXPAND_REVIEW_PANEL);
+        this.resetLayoutButtons();
+        this.getExpandAllPanelsButton().addClass('active');
+    };
+
+    /**
+     * Register event listeners for the grade panel.
+     *
+     * @method registerEventListeners
+     */
+    GradingActions.prototype.registerEventListeners = function() {
+        // Don't need layout controls if there is no review panel.
+        if (this.hasReviewPanelElement()) {
+            var collapseReviewPanelButton = this.getCollapseReviewPanelButton();
+            collapseReviewPanelButton.click(function(e) {
+                this.collapseReviewPanel();
+                e.preventDefault();
+            }.bind(this));
+
+            collapseReviewPanelButton.keydown(function(e) {
+                if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                        this.collapseReviewPanel();
+                        e.preventDefault();
+                    }
+                }
+            }.bind(this));
+
+            var collapseGradePanelButton = this.getCollapseGradePanelButton();
+            collapseGradePanelButton.click(function(e) {
+                this.collapseGradePanel();
+                e.preventDefault();
+            }.bind(this));
+
+            collapseGradePanelButton.keydown(function(e) {
+                if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                        this.collapseGradePanel();
+                        e.preventDefault();
+                    }
+                }
+            }.bind(this));
+
+            var expandAllPanelsButton = this.getExpandAllPanelsButton();
+            expandAllPanelsButton.click(function(e) {
+                this.expandAllPanels();
+                e.preventDefault();
+            }.bind(this));
+
+            expandAllPanelsButton.keydown(function(e) {
+                if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                        this.expandAllPanels();
+                        e.preventDefault();
+                    }
+                }
+            }.bind(this));
+        }
+
+        $(document).on('user-changed', this._showActionsForm.bind(this));
+
+        this._region.find('[name="savechanges"]').on('click', this._trigger.bind(this, 'save-changes'));
+        this._region.find('[name="resetbutton"]').on('click', this._trigger.bind(this, 'reset'));
+        this._region.find('form').on('submit', function(e) {
+            e.preventDefault();
+        });
+    };
+
     return GradingActions;
 });

mod/assign/amd/src/grading_events.js

@@ -0,0 +1,32 @@
+// 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/>.
+
+/**
+ * Javascript controller for the "Actions" panel at the bottom of the page.
+ *
+ * @module     mod_assign/grading_events
+ * @package    mod_assign
+ * @copyright  2016 Ryan Wyllie <ryan@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.1
+ */
+define(function() {
+    return {
+        COLLAPSE_REVIEW_PANEL: 'grading:collapse-review-panel',
+        EXPAND_REVIEW_PANEL: 'grading:expand-review-panel',
+        COLLAPSE_GRADE_PANEL: 'grading:collapse-grade-panel',
+        EXPAND_GRADE_PANEL: 'grading:expand-grade-panel',
+    };
+});

mod/assign/amd/src/grading_panel.js

@@ -24,8 +24,9 @@
  * @since      3.1
  */
 define(['jquery', 'core/notification', 'core/templates', 'core/fragment',
-        'core/ajax', 'core/str', 'mod_assign/grading_form_change_checker'],
-       function($, notification, templates, fragment, ajax, str, checker) {
+        'core/ajax', 'core/str', 'mod_assign/grading_form_change_checker',
+        'mod_assign/grading_events'],
+       function($, notification, templates, fragment, ajax, str, checker, GradingEvents) {
 
     /**
      * GradingPanel class.
@@ -38,11 +39,7 @@ define(['jquery', 'core/notification', 'core/templates', 'core/fragment',
         this._region = $(selector);
         this._userCache = [];
 
-        $(document).on('user-changed', this._refreshGradingPanel.bind(this));
-        $(document).on('save-changes', this._submitForm.bind(this));
-        $(document).on('reset', this._resetForm.bind(this));
-
-        $(document).on('save-form-state', this._saveFormState.bind(this));
+        this.registerEventListeners();
     };
 
     /** @type {String} Selector for the page region containing the user navigation. */
@@ -307,5 +304,61 @@ define(['jquery', 'core/notification', 'core/templates', 'core/fragment',
         }.bind(this)).fail(notification.exception);
     };
 
+    /**
+     * Get the grade panel element.
+     *
+     * @method getPanelElement
+     * @return {jQuery}
+     */
+    GradingPanel.prototype.getPanelElement = function() {
+        return $('[data-region="grade-panel"]');
+    };
+
+    /**
+     * Hide the grade panel.
+     *
+     * @method collapsePanel
+     */
+    GradingPanel.prototype.collapsePanel = function() {
+        this.getPanelElement().addClass('collapsed');
+    };
+
+    /**
+     * Show the grade panel.
+     *
+     * @method expandPanel
+     */
+    GradingPanel.prototype.expandPanel = function() {
+        this.getPanelElement().removeClass('collapsed');
+    };
+
+    /**
+     * Register event listeners for the grade panel.
+     *
+     * @method registerEventListeners
+     */
+    GradingPanel.prototype.registerEventListeners = function() {
+        var docElement = $(document);
+
+        docElement.on('user-changed', this._refreshGradingPanel.bind(this));
+        docElement.on('save-changes', this._submitForm.bind(this));
+        docElement.on('reset', this._resetForm.bind(this));
+
+        docElement.on('save-form-state', this._saveFormState.bind(this));
+
+        docElement.on(GradingEvents.COLLAPSE_GRADE_PANEL, function() {
+            this.collapsePanel();
+        }.bind(this));
+
+        // We should expand if the review panel is collapsed.
+        docElement.on(GradingEvents.COLLAPSE_REVIEW_PANEL, function() {
+            this.expandPanel();
+        }.bind(this));
+
+        docElement.on(GradingEvents.EXPAND_GRADE_PANEL, function() {
+            this.expandPanel();
+        }.bind(this));
+    };
+
     return GradingPanel;
 });

mod/assign/amd/src/grading_review_panel.js

@@ -23,7 +23,7 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @since      3.1
  */
-define(['jquery'], function($) {
+define(['jquery', 'mod_assign/grading_events'], function($, GradingEvents) {
 
     /**
      * GradingReviewPanel class.
@@ -32,7 +32,8 @@ define(['jquery'], function($) {
      * @param {String} selector The selector for the page region containing the user navigation.
      */
     var GradingReviewPanel = function() {
-        this._region = $('[data-region="review-panel"]');
+        this._region = $('[data-region="review-panel-content"]');
+        this.registerEventListeners();
     };
 
     /** @type {JQuery} JQuery node for the page region containing the user navigation. */
@@ -58,5 +59,109 @@ define(['jquery'], function($) {
         return false;
     };
 
+    /**
+     * Get the toggle review panel button.
+     *
+     * @method getTogglePanelButton
+     * @return {jQuery}
+     */
+    GradingReviewPanel.prototype.getTogglePanelButton = function() {
+        return this.getPanelElement().find('[data-region="review-panel-toggle"]');
+    };
+
+    /**
+     * Get the review panel element.
+     *
+     * @method getPanelElement
+     * @return {jQuery}
+     */
+    GradingReviewPanel.prototype.getPanelElement = function() {
+        return $('[data-region="review-panel"]');
+    };
+
+    /**
+     * Get the review panel content element.
+     *
+     * @method getPanelContentElement
+     * @return {jQuery}
+     */
+    GradingReviewPanel.prototype.getPanelContentElement = function() {
+        return $('[data-region="review-panel-content"]');
+    };
+
+    /**
+     * Show/Hide the review panel.
+     *
+     * @method togglePanel
+     */
+    GradingReviewPanel.prototype.togglePanel = function() {
+        if (this.getPanelElement().hasClass('collapsed')) {
+            $(document).trigger(GradingEvents.EXPAND_REVIEW_PANEL);
+        } else {
+            $(document).trigger(GradingEvents.COLLAPSE_REVIEW_PANEL);
+        }
+    };
+
+    /**
+     * Hide the review panel.
+     *
+     * @method collapsePanel
+     */
+    GradingReviewPanel.prototype.collapsePanel = function() {
+        this.getPanelElement().addClass('collapsed').removeClass('grade-panel-collapsed');
+        this.getPanelContentElement().attr('aria-hidden', true);
+    };
+
+    /**
+     * Show the review panel.
+     *
+     * @method expandPanel
+     */
+    GradingReviewPanel.prototype.expandPanel = function() {
+        this.getPanelElement().removeClass('collapsed');
+        this.getPanelContentElement().removeAttr('aria-hidden');
+    };
+
+    /**
+     * Register event listeners for the review panel.
+     *
+     * @method registerEventListeners
+     */
+    GradingReviewPanel.prototype.registerEventListeners = function() {
+        var toggleReviewPanelButton = this.getTogglePanelButton();
+        toggleReviewPanelButton.click(function(e) {
+            this.togglePanel();
+            e.preventDefault();
+        }.bind(this));
+
+        toggleReviewPanelButton.keydown(function(e) {
+            if (!e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey) {
+                if (e.keyCode === 13 || e.keyCode === 32) {
+                    this.togglePanel();
+                    e.preventDefault();
+                }
+            }
+        }.bind(this));
+
+        var docElement = $(document);
+        docElement.on(GradingEvents.COLLAPSE_REVIEW_PANEL, function() {
+            this.collapsePanel();
+        }.bind(this));
+
+        // Need special styling when grade panel is collapsed.
+        docElement.on(GradingEvents.COLLAPSE_GRADE_PANEL, function() {
+            this.expandPanel();
+            this.getPanelElement().addClass('grade-panel-collapsed');
+        }.bind(this));
+
+        docElement.on(GradingEvents.EXPAND_REVIEW_PANEL, function() {
+            this.expandPanel();
+        }.bind(this));
+
+        docElement.on(GradingEvents.EXPAND_GRADE_PANEL, function() {
+            this.getPanelElement().removeClass('grade-panel-collapsed');
+        }.bind(this));
+    };
+
     return GradingReviewPanel;
 });

mod/assign/lang/en/assign.php

@@ -108,6 +108,9 @@ $string['changegradewarning'] = 'This assignment has graded submissions and chan
 $string['choosegradingaction'] = 'Grading action';
 $string['choosemarker'] = 'Choose...';
 $string['chooseoperation'] = 'Choose operation';
+$string['clickexpandreviewpanel'] = 'Click to expand review panel';
+$string['collapsegradepanel'] = 'Collapse grade panel';
+$string['collapsereviewpanel'] = 'Collapse review panel';
 $string['comment'] = 'Comment';
 $string['completionsubmit'] = 'Student must submit to this activity to complete it';
 $string['conversionexception'] = 'Could not convert assignment. Exception was: {$a}.';
@@ -127,6 +130,7 @@ $string['cutoffdatecolon'] = 'Cut-off date: {$a}';
 $string['cutoffdate_help'] = 'If set, the assignment will not accept submissions after this date without an extension.';
 $string['cutoffdatevalidation'] = 'The cut-off date cannot be earlier than the due date.';
 $string['cutoffdatefromdatevalidation'] = 'Cut-off date must be after the allow submissions from date.';
+$string['defaultlayout'] = 'Restore default layout';
 $string['defaultsettings'] = 'Default assignment settings';
 $string['defaultsettings_help'] = 'These settings define the defaults for all new assignments.';
 $string['defaultteam'] = 'Default group';
@@ -176,6 +180,7 @@ $string['eventsubmissionunlocked'] = 'The submissions have been unlocked for a u
 $string['eventsubmissionupdated'] = 'Submission updated.';
 $string['eventsubmissionviewed'] = 'Submission viewed.';
 $string['eventworkflowstateupdated'] = 'The state of the workflow has been updated.';
+$string['expandreviewpanel'] = 'Expand review panel';
 $string['extensionduedate'] = 'Extension due date';
 $string['extensionnotafterduedate'] = 'Extension date must be after the due date';
 $string['extensionnotafterfromdate'] = 'Extension date must be after the allow submissions from date';

mod/assign/pix/layout-default.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="overflow:visible;enable-background:new 0 0 16 16;"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path style="fill:#999999;" d="M0,0v16h16V0H0z M2,14V2h6v12H2z M14,14h-4V2h4V14z"/>
+</svg>

mod/assign/pix/layout-expand-left.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="overflow:visible;enable-background:new 0 0 16 16;"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path style="fill:#999999;" d="M0,0v16h16V0H0z M2,14V2h8v12H2z M14,14h-2V2h2V14z"/>
+</svg>

mod/assign/pix/layout-expand-right.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="overflow:visible;enable-background:new 0 0 16 16;"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path style="fill:#999999;" d="M0,0v16h16V0H0z M2,14V2h2v12H2z M14,14H6V2h8V14z"/>
+</svg>

mod/assign/styles.css

@@ -457,13 +457,78 @@
     top: 85px;
     bottom: 60px;
     left: 0;
-    width: 70%;
+    right: 30%;
+    width: auto;
     box-sizing: border-box;
+    -webkit-transition: right 0.5s, left 0.5s;
+       -moz-transition: right 0.5s, left 0.5s;
+            transition: right 0.5s, left 0.5s;
+}
+
+.path-mod-assign [data-region="review-panel"].grade-panel-collapsed {
+    right: 30px;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
+    display: none;
+    height: 30px;
+    width: 30px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: auto;
+    box-sizing: border-box;
+    border-radius: 0 0 0 4px;
+    border: 1px solid #cccccc;
+    border-top: none;
+    background-color: #fff;
+    z-index: 99999;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon,
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 30px;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .toggle-text,
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon .toggle-text {
+    visibility: hidden;
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] img {
+    height: 100%;
+    float: right;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon {
+    display: none;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
+    display: block;
+}
+
+.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon.full-width {
+    display: none;
 }
 
 .path-mod-assign [data-region="review-panel"] .pageheader {
     border-right: 1px solid #ddd;
 }
+.path-mod-assign [data-region="review-panel"] + [data-region="grade-panel"] [data-region="grade"] {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    -webkit-transition: max-width 0.5s;
+       -moz-transition: max-width 0.5s;
+            transition: max-width 0.5s;
+}
 
 .path-mod-assign [data-region="review-panel"] .drawingregion {
     left: 0;
@@ -471,16 +536,41 @@
     border-color: #ddd;
 }
 
-.path-mod-assign [data-region="grade-panel"].fullwidth {
-    position: absolute;
-    top: 7em;
-    left: 0;
-    right: 0;
-    width: 99%;
-    overflow: auto;
-    bottom: 7em;
+.path-mod-assign [data-region="review-panel"].collapsed {
+    left: calc(30px - 70%);
+    right: calc(100% - 30px);
+    -webkit-transition: right 0.5s, left 0.5s;
+       -moz-transition: right 0.5s, left 0.5s;
+            transition: right 0.5s, left 0.5s;
 }
 
+.path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-content"] {
+    visibility: hidden;
+    -webkit-transition: visibility 0s 0.5s;
+       -moz-transition: visibility 0s 0.5s;
+            transition: visibility 0s 0.5s;
+}
+
+.path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .expand-icon {
+    display: block;
+}
+
+.path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
+    display: none;
+}
+
+.path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"] {
+    position: absolute;
+    left: 30px;
+    right: 0;
+    width: calc(100% - 30px);
+    overflow: auto;
+    -webkit-transition: width 0.5s, right 0.5s, left 0.5s;
+       -moz-transition: width 0.5s, right 0.5s, left 0.5s;
+            transition: width 0.5s, right 0.5s, left 0.5s;
+}
+
+.path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"] [data-region="grade"],
 .path-mod-assign [data-region="grade-panel"].fullwidth [data-region="grade"] {
     max-width: 800px;
     margin-left: auto;
@@ -492,12 +582,31 @@
     top: 85px;
     bottom: 60px;
     right: 0;
+    left: 70%;
     width: 30%;
     overflow: auto;
     box-sizing: border-box;
     background-color: #f5f5f5;
     padding: 15px;
     padding-top: 0px;
+    -webkit-transition: width 0.5s, right 0.5s, left 0.5s;
+       -moz-transition: width 0.5s, right 0.5s, left 0.5s;
+            transition: width 0.5s, right 0.5s, left 0.5s;
+}
+
+.path-mod-assign [data-region="grade-panel"].collapsed {
+    left: calc(100% - 30px);
+    right: calc(30px - 100%);
+    visibility: hidden;
+    -webkit-transition: right 0.5s, left 0.5s, visibility 0s 0.5s;
+       -moz-transition: right 0.5s, left 0.5s, visibility 0s 0.5s;
+            transition: right 0.5s, left 0.5s, visibility 0s 0.5s;
+}
+
+.path-mod-assign [data-region="grade-panel"].fullwidth {
+    left: 0;
+    width: 100%;
+    overflow: auto;
 }
 
 .path-mod-assign [data-region="grade-panel"] h3 {
@@ -853,6 +962,17 @@
     height: 60px;
 }
 
+.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
+    position: absolute;
+    top: 0;
+    left: auto;
+    right: 15px;
+    margin: 0;
+    height: 100%;
+    line-height: 60px;
+    direction: ltr;
+}
+
 .path-mod-assign [data-region="grade-actions"] {
     padding: 1em;
     text-align: center;
@@ -890,18 +1010,26 @@
     .path-mod-assign .page-context-header .page-header-headings {
         margin-top: 13px;
     }
+    .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
+        display: none;
+    }
     .path-mod-assign [data-region="grading-navigation-panel"],
     .path-mod-assign [data-region="review-panel"],
     .path-mod-assign [data-region="grade-panel"],
+    .path-mod-assign [data-region="review-panel"].collapsed + [data-region="grade-panel"],
     .path-mod-assign [data-region="grade-actions-panel"] {
         position: inherit;
         width: 100%;
         top: 0;
         left: 0;
+        right: auto;
         overflow: auto;
         height: auto;
         margin-bottom: 1em;
     }
+    .path-mod-assign [data-region="grade-panel"].collapsed {
+        visibility: visible;
+    }
     .path-mod-assign [data-region="grading-navigation"] {
         padding: 0;
         text-align: center;
@@ -912,8 +1040,86 @@
     .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
         display: none;
     }
+    .path-mod-assign [data-region="review-panel"] {
+        position: relative;
+        max-height: 2000px;
+        -webkit-transition: max-height 0.25s linear;
+           -moz-transition: max-height 0.25s linear;
+                transition: max-height 0.25s linear;
+    }
     .path-mod-assign [data-region="review-panel"] .pageheader {
         border-right: none;
+        padding-right: 20px;
+        padding-left: 40px;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
+        display: block;
+        height: 20px;
+        width: 20px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: auto;
+        box-sizing: border-box;
+        border: 1px solid #cccccc;
+        border-radius: 0 0 4px 0;
+        background-color: #fff;
+        z-index: 99999;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon,
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        line-height: 30px;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .ltr-icon,
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .rtl-icon {
+        height: 100%;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .ltr-icon {
+        float: left;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .rtl-icon {
+        float: right;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .toggle-text,
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon .toggle-text {
+        line-height: 20px;
+        visibility: visible;
+        opacity: 1;
+        height: auto;
+        -webkit-transition: visibility 0s 0.25s, opacity 0s 0.25s;
+           -moz-transition: visibility 0s 0.25s, opacity 0s 0.25s;
+                transition: visibility 0s 0.25s, opacity 0s 0.25s;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .rtl-icon {
+        display: none;
+    }
+    .path-mod-assign [data-region="review-panel"].collapsed {
+        max-height: 20px;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        -webkit-transition: max-height 0.25s linear;
+           -moz-transition: max-height 0.25s linear;
+                transition: max-height 0.25s linear;
+    }
+    .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] {
+        width: 100%;
+        border-radius: 0 0 0 0;
+        -webkit-transition: all 0s 0.25s;
+           -moz-transition: all 0s 0.25s;
+                transition: all 0s 0.25s;
+    }
+    .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] img {
+        height: 100%;
+    }
+    .path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .collapse-icon {
+        display: block;
+    }
+    .path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
+        display: none;
     }
     .path-mod-assign.pagelayout-popup {
         overflow: inherit;
@@ -928,6 +1134,31 @@
         float: none;
         margin: 0 auto 10px;
     }
+    .dir-rtl.path-mod-assign [data-region="review-panel"] .pageheader {
+        padding-right: 40px;
+        padding-left: 20px;
+    }
+    .dir-rtl.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] {
+        left: auto;
+        right: 0;
+        border-radius: 0 0 0 4px;
+    }
+    .dir-rtl.path-mod-assign [data-region="review-panel"].collapsed {
+        right: 0;
+        left: auto;
+    }
+    .dir-rtl.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .ltr-icon {
+        display: none;
+    }
+    .dir-rtl.path-mod-assign [data-region="review-panel"] [data-region="review-panel-toggle"] .expand-icon .rtl-icon {
+        display: block;
+    }
+    .dir-rtl.path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .collapse-icon {
+        display: none;
+    }
+    .dir-rtl.path-mod-assign [data-region="review-panel"].collapsed [data-region="review-panel-toggle"] .expand-icon {
+        display: block;
+    }
 }
 
 /** Start of CSS to make forms vertical in the grading panel (taken from theme/bootstrapbase/less/moodle/forms.less). */

mod/assign/templates/grading_actions.mustache

@@ -39,6 +39,15 @@
     <button type="submit" class="btn btn-primary" name="savechanges">{{#str}}savechanges{{/str}}</button>
     <button type="submit" class="btn" name="resetbutton">{{#str}}reset{{/str}}</button>
 </form>
+{{#showreview}}
+<div class="btn-toolbar collapse-buttons">
+    <div class="btn-group">
+        <button class="btn collapse-review-panel">{{#pix}} layout-expand-right, mod_assign, {{#str}} collapsereviewpanel, mod_assign {{/str}} {{/pix}}</button>
+        <button class="btn collapse-none active">{{#pix}} layout-default, mod_assign, {{#str}} defaultlayout, mod_assign {{/str}} {{/pix}}</button>
+        <button class="btn collapse-grade-panel">{{#pix}} layout-expand-left, mod_assign, {{#str}} collapsegradepanel, mod_assign {{/str}} {{/pix}}</button>
+    </div>
+</div>
+{{/showreview}}
 {{#js}}
 require(['mod_assign/grading_actions'], function(GradingActions) {
     new GradingActions('[data-region="grade-actions"]');

mod/assign/templates/grading_app.mustache

@@ -34,18 +34,28 @@
 <div data-region="grading-navigation-panel" data-first-userid="{{userid}}" data-courseid="{{courseid}}" data-showuseridentity="{{showuseridentity}}">
 {{> mod_assign/grading_navigation }}
 </div>
+{{#showreview}}
+<div data-region="review-panel">
+    <a href="#" data-region="review-panel-toggle">
+        <div class="collapse-icon">{{#pix}} t/expanded, core, {{#str}} collapsereviewpanel, mod_assign {{/str}} {{/pix}}</div>
+        <div class="expand-icon">
+            <div class="ltr-icon">{{#pix}} t/collapsed, core, {{#str}} expandreviewpanel, mod_assign {{/str}} {{/pix}}</div>
+            <div class="rtl-icon">{{#pix}} t/collapsed_rtl, core, {{#str}} expandreviewpanel, mod_assign {{/str}} {{/pix}}</div>
+            <div class="toggle-text">{{#str}} clickexpandreviewpanel, mod_assign {{/str}}</div>
+        </div>
+    </a>
+    <div data-region="review-panel-content">
+        <div data-region="review">
+            {{> mod_assign/review_panel }}
+        </div>
+    </div>
+</div>
+{{/showreview}}
 <div data-region="grade-panel" {{^showreview}}class="fullwidth"{{/showreview}}>
 <div data-region="grade" data-contextid="{{contextid}}" data-assignmentid="{{assignmentid}}">
 {{> mod_assign/grading_panel }}
 </div>
 </div>
-{{#showreview}}
-<div data-region="review-panel">
-<div data-region="review">
-{{> mod_assign/review_panel }}
-</div>
-</div>
-{{/showreview}}
 <div data-region="grade-actions-panel">
 <div data-region="grade-actions">
 {{> mod_assign/grading_actions }}