MDL-31679 gradereport_grader: Add a horizontal scroll bar to the top …

…of the grader report

grade/report/grader/index.php

@@ -52,6 +52,7 @@
 }
 
 $PAGE->set_url(new moodle_url('/grade/report/grader/index.php', array('id'=>$courseid)));
+$PAGE->requires->yui_module('moodle-gradereport_grader-scrollview', 'M.gradereport_grader.scrollview.init');
 
 // basic access checks
 if (!$course = $DB->get_record('course', array('id' => $courseid))) {

grade/report/grader/styles.css

@@ -587,3 +587,10 @@ table#user-grades td.controls,
     margin-left: 0.5em;
 }
 
+.path-grade-report-grader .yui3-scrollview-scrollbar {
+    opacity: 1 !important;
+}
+
+.path-grade-report-grader .yui3-scrollview-scrollbar-horiz {
+    bottom: -2px;
+}

grade/report/grader/yui/build/moodle-gradereport_grader-scrollview/moodle-gradereport_grader-scrollview-debug.js

@@ -0,0 +1,81 @@
+YUI.add('moodle-gradereport_grader-scrollview', function (Y, NAME) {
+
+// 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/>.
+
+
+/**
+ * Scrollview for grader table.
+ *
+ * @package   gradereport_grader
+ * @copyright 2013 NetSpot Pty Ltd
+ * @author    Adam Olley <[email protected]>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+M.gradereport_grader = M.gradereport_grader || {};
+M.gradereport_grader.scrollview = {
+
+    /** Selectors. */
+    SELECTORS: {
+        CONTAINER: '.gradeparent',
+        STATIC:    '.gradeparent .right_scroller',
+        GRADETABLE: '#user-grades'
+    },
+
+    container : null,
+
+    /**
+     * Initialise the scrollview code.
+     */
+    init: function() {
+        this.container = Y.one(this.SELECTORS.CONTAINER);
+        if (!this.container) {
+            Y.log('No grade container found.');
+            return;
+        }
+
+        var topscroll = Y.Node.create('<div class="right_scroller topscroll"><div class="topscrollcontent"></div></div>');
+
+        var src = this.SELECTORS.CONTAINER;
+        if (Y.one(this.SELECTORS.STATIC)) {
+            src = this.SELECTORS.STATIC;
+        }
+
+        var node = Y.one(src).insert(topscroll, 'before');
+
+        if (!Y.one(this.SELECTORS.STATIC)) {
+            node = Y.one('.topscroll');
+        }
+
+        var _this = this;
+        Y.on('domready', function () {
+            var width = Y.one(_this.SELECTORS.GRADETABLE).get('offsetWidth');
+            Y.one('.topscrollcontent').setStyle('width', width + 'px');
+        });
+
+        Y.one(src).on('scroll', function() {
+            node.set('scrollLeft', Y.one(src).get('scrollLeft'));
+        });
+
+        node.on('scroll', function() {
+            Y.one(src).set('scrollLeft', node.get('scrollLeft'));
+        });
+
+    }
+};
+
+
+}, '@VERSION@', {"requires": ["base", "node"]});

grade/report/grader/yui/build/moodle-gradereport_grader-scrollview/moodle-gradereport_grader-scrollview.js

@@ -0,0 +1,80 @@
+YUI.add('moodle-gradereport_grader-scrollview', function (Y, NAME) {
+
+// 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/>.
+
+
+/**
+ * Scrollview for grader table.
+ *
+ * @package   gradereport_grader
+ * @copyright 2013 NetSpot Pty Ltd
+ * @author    Adam Olley <[email protected]>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+M.gradereport_grader = M.gradereport_grader || {};
+M.gradereport_grader.scrollview = {
+
+    /** Selectors. */
+    SELECTORS: {
+        CONTAINER: '.gradeparent',
+        STATIC:    '.gradeparent .right_scroller',
+        GRADETABLE: '#user-grades'
+    },
+
+    container : null,
+
+    /**
+     * Initialise the scrollview code.
+     */
+    init: function() {
+        this.container = Y.one(this.SELECTORS.CONTAINER);
+        if (!this.container) {
+            return;
+        }
+
+        var topscroll = Y.Node.create('<div class="right_scroller topscroll"><div class="topscrollcontent"></div></div>');
+
+        var src = this.SELECTORS.CONTAINER;
+        if (Y.one(this.SELECTORS.STATIC)) {
+            src = this.SELECTORS.STATIC;
+        }
+
+        var node = Y.one(src).insert(topscroll, 'before');
+
+        if (!Y.one(this.SELECTORS.STATIC)) {
+            node = Y.one('.topscroll');
+        }
+
+        var _this = this;
+        Y.on('domready', function () {
+            var width = Y.one(_this.SELECTORS.GRADETABLE).get('offsetWidth');
+            Y.one('.topscrollcontent').setStyle('width', width + 'px');
+        });
+
+        Y.one(src).on('scroll', function() {
+            node.set('scrollLeft', Y.one(src).get('scrollLeft'));
+        });
+
+        node.on('scroll', function() {
+            Y.one(src).set('scrollLeft', node.get('scrollLeft'));
+        });
+
+    }
+};
+
+
+}, '@VERSION@', {"requires": ["base", "node"]});

grade/report/grader/yui/src/scrollview/build.json

@@ -0,0 +1,10 @@
+{
+    "name": "moodle-gradereport_grader-scrollview",
+    "builds": {
+        "moodle-gradereport_grader-scrollview": {
+            "jsfiles": [
+                "scrollview.js"
+            ]
+        }
+    }
+}

grade/report/grader/yui/src/scrollview/js/scrollview.js

@@ -0,0 +1,76 @@
+// 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/>.
+
+
+/**
+ * Scrollview for grader table.
+ *
+ * @package   gradereport_grader
+ * @copyright 2013 NetSpot Pty Ltd
+ * @author    Adam Olley <[email protected]>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+M.gradereport_grader = M.gradereport_grader || {};
+M.gradereport_grader.scrollview = {
+
+    /** Selectors. */
+    SELECTORS: {
+        CONTAINER: '.gradeparent',
+        STATIC:    '.gradeparent .right_scroller',
+        GRADETABLE: '#user-grades'
+    },
+
+    container : null,
+
+    /**
+     * Initialise the scrollview code.
+     */
+    init: function() {
+        this.container = Y.one(this.SELECTORS.CONTAINER);
+        if (!this.container) {
+            Y.log('No grade container found.');
+            return;
+        }
+
+        var topscroll = Y.Node.create('<div class="right_scroller topscroll"><div class="topscrollcontent"></div></div>');
+
+        var src = this.SELECTORS.CONTAINER;
+        if (Y.one(this.SELECTORS.STATIC)) {
+            src = this.SELECTORS.STATIC;
+        }
+
+        var node = Y.one(src).insert(topscroll, 'before');
+
+        if (!Y.one(this.SELECTORS.STATIC)) {
+            node = Y.one('.topscroll');
+        }
+
+        var _this = this;
+        Y.on('domready', function () {
+            var width = Y.one(_this.SELECTORS.GRADETABLE).get('offsetWidth');
+            Y.one('.topscrollcontent').setStyle('width', width + 'px');
+        });
+
+        Y.one(src).on('scroll', function() {
+            node.set('scrollLeft', Y.one(src).get('scrollLeft'));
+        });
+
+        node.on('scroll', function() {
+            Y.one(src).set('scrollLeft', node.get('scrollLeft'));
+        });
+
+    }
+};

grade/report/grader/yui/src/scrollview/meta/scrollview.json

@@ -0,0 +1,8 @@
+{
+    "moodle-gradereport_grader-scrollview": {
+        "requires": [
+            "base",
+            "node"
+        ]
+    }
+}

theme/base/style/grade.css

@@ -76,3 +76,11 @@
 #page-grade-edit-outcome-course .courseoutcomes td {
     text-align:center;
 }
+
+#page-grade-report-grader-index .topscrollcontent {
+    height: 1px;
+}
+
+#page-grade-report-grader-index #user-grades {
+    margin-top: 4px;
+}

theme/bootstrapbase/less/moodle/grade.less

@@ -15,4 +15,14 @@
         // Remove the bottom margin to gain height.
         margin-bottom: 0;
     }
-}
+}
+
+#page-grade-report-grader-index {
+    .topscrollcontent {
+        height: 1px;
+    }
+
+    #user-grades {
+        margin-top: 4px;
+    }
+}