cas_lib.php

@@ -1426,7 +1426,10 @@ class CommentSeverity {
     const WARN = "WARN";
     const INFO = "INFO";
 
-    const COLORS = array(CommentSeverity::ERROR => 'Red', CommentSeverity::WARN => 'Yellow', CommentSeverity::INFO => 'LimeGreen');
+    /** @var array The array has to be in order of Severity (most severe first), the coloring of the linenumbers depends on it.*/
+    const COLORS = array(CommentSeverity::ERROR => '#FF6B69', CommentSeverity::WARN => '#FFDF4D', CommentSeverity::INFO => '#55D23F');
+
+    const ICONS = array(self::ERROR => 'error_symbol.svg', self::WARN => 'warn_symbol.svg', self::INFO => 'info_symbol.svg');
 
     static function values() {
         return array(
@@ -1440,6 +1443,10 @@ class CommentSeverity {
         return CommentSeverity::COLORS[$sev];
     }
 
+    static function getIcon($sev) {
+        return CommentSeverity::ICONS[$sev];
+    }
+
 }
 
 class CommentType {

js/subm_grading.js

@@ -35,7 +35,7 @@ M.mod_cas_grading = {
     iconcollapsed: null,
     iconexpanded: null,
 
-    init: function (Y, sid, cas, url, cmid, jsfid, iconcollapsed, iconexpanded) {
+    init: function(Y, sid, cas, url, cmid, jsfid, iconcollapsed, iconexpanded) {
 
         this.Y = Y;
         this.sid = sid;
@@ -46,80 +46,78 @@ M.mod_cas_grading = {
         this.iconcollapsed = iconcollapsed;
         this.iconexpanded = iconexpanded;
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function() {
 
             this.preevaluate();
 
         }, '#preevalbut', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function() {
 
             this.addcomment();
 
         }, '#savebut', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function(e) {
             this.delcomment(e);
 
         }, '.delcommentbut', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function() {
 
             this.Y.one('#savediv').hide();
 
         }, '#closebut', this);
 
-        this.Y.on('click', function (e) {
-
+        this.Y.on('click', function() {
             this.grade();
 
         }, '#gradebut', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function() {
 
             this.grade();
 
         }, '#close', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function() {
 
             this.recalc();
 
         }, '#recalcbut', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function() {
             Y.one('#savediv').show();
 
         }, '#newbut', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function(e) {
 
-            var cla = e.target.get('id')
+            var cla = e.target.get('id');
 
-            if(Y.one('.'+cla).getStyle('display') == 'none'){
-                Y.all('.'+cla).show();
+            if (Y.one('.' + cla).getStyle('display') === 'none') {
+                Y.all('.' + cla).show();
                 e.target.set('src', this.iconexpanded);
-            } else{
-                Y.all('.'+cla).hide();
+            } else {
+                Y.all('.' + cla).hide();
                 e.target.set('src', this.iconcollapsed);
             }
 
         }, '.toggledetails', this);
 
-        this.Y.on('click', function (e) {
+        this.Y.on('click', function(e) {
 
-            var fid = e.target.get('id').match("arrow_(.*)")
+            var fid = e.target.get('id').match("arrow_(.*)");
             fid = parseInt(fid[1]);
-            if(Y.one('#frame_'+fid).getStyle('display') == 'none'){
-                Y.one('#frame_'+fid).show();
+            if (Y.one('#frame_' + fid).getStyle('display') === 'none') {
+                Y.one('#frame_' + fid).show();
                 e.target.set('src', this.iconexpanded);
-                if(this.fids[fid]){
-                    Y.one('#frame_'+fid).set('src', this.fids[fid]);
+                if (this.fids[fid]) {
+                    Y.one('#frame_' + fid).set('src', this.fids[fid]);
                     this.fids[fid] = null;
                 }
-            }
-            else{
-                Y.one('#frame_'+fid).hide();
+            } else {
+                Y.one('#frame_' + fid).hide();
                 e.target.set('src', this.iconcollapsed);
             }
 
@@ -128,78 +126,78 @@ M.mod_cas_grading = {
 
     },
 
-    addcomment: function () {
+    addcomment: function() {
 
         var index = this.Y.one("#saveseverity").get('selectedIndex');
         var value = this.Y.one("#saveseverity").get("options").item(index).getAttribute('value');
 
         var data = {
             'action': 'addcomment',
-            'sid' : this.sid,
+            'sid': this.sid,
             'cm': this.cmid,
             'text': this.Y.one('#savetext').get('value'),
             'severity': value,
-            'points' : this.Y.one('#savepoints').get('value')
-        }
+            'points': this.Y.one('#savepoints').get('value')
+        };
 
         this.request(data, null, 'add', true);
 
     },
 
-    delcomment: function (e) {
+    delcomment: function(e) {
 
-        var cid = e.target.get('id').match("com_(.*)")
+        var cid = e.target.get('id').match("com_(.*)");
         cid = parseInt(cid[1]);
 
         var data = {
             'action': 'delcomment',
-            'sid' : this.sid,
+            'sid': this.sid,
             'cm': this.cmid,
             'id': cid
-        }
+        };
 
-        this.request(data, 'comment'+cid, 'del', true);
+        this.request(data, 'comment' + cid, 'del', true);
 
     },
 
-    preevaluate: function () {
+    preevaluate: function() {
 
         var data = {
             'action': 'preevaluatesubmission',
             'cm': this.cmid,
             'sid': this.sid,
             'cas': this.cas
-        }
+        };
 
         this.request(data, null, false, false);
 
     },
 
-    grade: function () {
+    grade: function() {
 
         var data = {
             'action': 'gradesubmission',
             'cm': this.cmid,
             'sid': this.sid
-        }
+        };
 
         this.request(data, this.url, false, false);
 
     },
 
-    recalc: function () {
+    recalc: function() {
 
         var data = {
             'action': 'recalcsubmission',
             'cm': this.cmid,
             'sid': this.sid
-        }
+        };
 
         this.request(data, null, true, false);
 
     },
 
-    request: function (data, url, recalc, comment) {
+    request: function(data, url, recalc, comment) {
 
         var cfg;
         var uri = "./ajax_helper.php";
@@ -223,22 +221,24 @@ M.mod_cas_grading = {
 
     },
 
-    request_complete: function (id, response, args) {
+    request_complete: function(id, response, args) {
 
         var url = args.complete[0];
         var recalc = args.complete[1];
 
         this.show_buttons();
-        console.log(response.responseText);
-        if (response.responseText == '-1') {
+        if (response.responseText === '-1') {
             alert('Fehler!');
-        } else if (recalc && parseFloat(response.responseText) != NaN) {
+        } else if (recalc && parseFloat(response.responseText) !== NaN) {
             this.Y.one('#recalcbut').show();
             this.Y.all('.points').set('innerText', parseFloat(response.responseText));
-        } else if (response.responseText == '1') {
+        } else if (response.responseText === '1') {
 
-            if (url) window.location.href = url;
-            else window.location.reload();
+            if (url) {
+                window.location.href = url;
+            } else {
+                window.location.reload();
+            }
 
         } else {
             alert('Server nicht verfügbar!');
@@ -246,19 +246,18 @@ M.mod_cas_grading = {
 
     },
 
-    request_comment_complete: function (id, response, args) {
+    request_comment_complete: function(id, response, args) {
 
         var cid = args.complete[0];
         var action = args.complete[1];
 
-        this.show_buttons()
-        console.log(response.responseText);
-        if (response.responseText == '-1') {
-        //nichts weil fehler
-        } else if (action == 'add' && response.responseText) {
+        this.show_buttons();
+        if (response.responseText === '-1') {
+            //nichts weil fehler
+        } else if (action === 'add' && response.responseText) {
             window.location.reload(); //das kann man besser machen^^
-        } else if (action == 'del' && response.responseText) {
-            this.Y.one('#'+cid).hide();
+        } else if (action === 'del' && response.responseText) {
+            this.Y.one('#' + cid).hide();
             var old = parseFloat(this.Y.one('.points').get('innerText'));
             var neu = parseFloat(response.responseText);
             var userpoints = parseFloat(this.Y.one('#userpoints').get('innerText'));
@@ -270,35 +269,43 @@ M.mod_cas_grading = {
 
     },
 
-    show_buttons: function(){
-        if(this.Y.one('#recalcbut'))
+    show_buttons: function() {
+        if (this.Y.one('#recalcbut')) {
             this.Y.one('#recalcbut').show();
-        if(this.Y.one('#newbut'))
+        }
+        if (this.Y.one('#newbut')) {
             this.Y.one('#newbut').show();
-        if(this.Y.one('#gradebut'))
+        }
+        if (this.Y.one('#gradebut')) {
             this.Y.one('#gradebut').show();
-        if(this.Y.one('#preevalbut'))
+        }
+        if (this.Y.one('#preevalbut')) {
             this.Y.one('#preevalbut').show();
+        }
 
         this.Y.one('#loader').hide();
     },
 
-    hide_buttons: function(){
-        if(this.Y.one('#recalcbut'))
+    hide_buttons: function() {
+        if (this.Y.one('#recalcbut')) {
             this.Y.one('#recalcbut').hide();
-        if(this.Y.one('#newbut'))
+        }
+        if (this.Y.one('#newbut')) {
             this.Y.one('#newbut').hide();
-        if(this.Y.one('#gradebut'))
+        }
+        if (this.Y.one('#gradebut')) {
             this.Y.one('#gradebut').hide();
-        if(this.Y.one('#preevalbut'))
+        }
+        if (this.Y.one('#preevalbut')) {
             this.Y.one('#preevalbut').hide();
-        if(this.Y.one('#savediv'))
+        }
+        if (this.Y.one('#savediv')) {
             this.Y.one('#savediv').hide();
+        }
 
         this.Y.one('#loader').show();
 
     }
 
 
-
 }
\ No newline at end of file

locallib.php

@@ -1379,7 +1379,7 @@ class cas {
                 )), $file->getFileName(), array(
                     'title' => get_string('opennewwindow', 'cas'),
                     'target' => '_blank'
-                )) . '<br /><iframe style="display: none" width="785" height="500" id="frame_' . $file->getId() . '" src=""></iframe><br />';
+                )) . '<br /><iframe class="view-code" style="display: none" id="frame_' . $file->getId() . '" src=""></iframe><br />';
             }
         } else {
             echo 'keine';

pix/error_symbol.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16cm" height="16cm" viewBox="0 0 160 160"><g transform="translate(0 -137)"><path d="M160 295H0l80-148z" fill="#c40000"/><circle cx="80" cy="277" r="12" fill="#fff"/><path d="M70 251.699h20v-66.403H70z" fill="#fff"/></g></svg>
\ No newline at end of file

pix/info_symbol.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16cm" height="16cm" viewBox="0 0 160 160"><circle cx="80" cy="83.175" r="73.224" fill="#2caf00"/><g transform="translate(0 -137)" fill="#fff"><rect width="22.882" height="73.774" x="68.559" y="201.318" ry="0"/><circle cx="80" cy="175.326" r="13.729"/></g></svg>
\ No newline at end of file

pix/warn_symbol.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16cm" height="16cm" viewBox="0 0 160 160"><g transform="translate(0 -137)"><path d="M160 295H0l80-148z" fill="#f6a800"/><circle cx="80" cy="277" r="12" fill="#fff"/><path d="M70 251.699h20v-66.403H70z" fill="#fff"/></g></svg>
\ No newline at end of file

styles.css

@@ -42,6 +42,35 @@ div.mod_cas-view-code-footer {
     overflow: visible !important;
 }
 
+.mod_cas-content {
+    height: calc(100vh - 1px);
+    overflow: hidden;
+}iframe.view-code {
+    height: 500px;
+    min-width: 785px;
+    width: 100%;
+}
+
+div.mod_cas-view-code-footer {
+    height: 6em;
+    border-top: 1px solid gray;
+}
+
+.mod_cas-helptext {
+    font-size: 10px;
+    float: left;
+}
+
+#codenode {
+    overflow: auto;
+    height: calc(100vh - 6em);
+}
+
+#codenode > .syntaxhighlighter {
+    /* Allows codenode to be the scroll-container */
+    overflow: visible !important;
+}
+
 .mod_cas-content {
     height: calc(100vh - 1px);
     overflow: hidden;
@@ -83,6 +112,66 @@ div.mod_cas-view-code-footer {
 
 /* Ace editor edits */
 
+.ace_editor * {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+}
+
+/* Overwriting essential_theme */
+.mod_cas-helptext {
+    line-height:1.4em;
+}
+
+.mod_cas-content .container:before {
+    content: none;
+}
+
+html.mod_cas-review #page {
+    padding-top: 0;
+}
+
+html.mod_cas-review #page #page-content {
+    margin-top: 0;
+}
+
+html.mod_cas-review #page #page-content div[role="main"] {
+    padding: 0;
+    border: none;
+}.mod_cas-content #savediv,
+.mod_cas-content #editdiv {
+    z-index: 99;
+    width: 290px;
+    position: absolute;
+    background: white;
+    border: 1px solid silver;
+    padding: 3px;
+    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px -2px;
+}
+
+.mod_cas-content textarea#savetext,
+.mod_cas-content textarea#edittext {
+    width: 100%;
+    resize: none;
+}
+
+.mod_cas-small-button {
+    width: 37px !important;
+    margin-left: 3px;
+}
+
+.mod_cas-comment-icon {
+    height: 16px;
+    width: 16px;
+    vertical-align: bottom;
+    margin: -1px 0 1px 3px;
+}
+
+.padding-x-4 {
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+/* Ace editor edits */
+
 .ace_editor * {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
 }
\ No newline at end of file

view_code.php

@@ -51,6 +51,8 @@ class CodeViewer {
 
         $id = required_param('id', PARAM_INT); // Course Module ID
 
+        $PAGE->set_url(new moodle_url('/mod/cas/view_code.php', array('id' => $id, 'fid' => $this->fid, 'sid' => $this->sid)));
+
         $cm = get_coursemodule_from_id('cas', $id, 0, false, MUST_EXIST);
         $cmid = $cm->id;
         $course = $DB->get_record('course', array(
@@ -117,63 +119,94 @@ class CodeViewer {
             $this->fid,
             $editable,
             $cmid,
-            CommentSeverity::COLORS
+            CommentSeverity::COLORS,
+            CommentSeverity::ICONS
         ), true, $code_review);
-        $PAGE->set_pagelayout('popup');
+        $PAGE->set_pagelayout('embedded');
 
         echo $OUTPUT->header();
-
+        echo "<div class='mod_cas-content'>";
         echo '<pre id="codenode" class="brush: ' . strtolower($lang) . '">';
         echo htmlentities($myfile->getCode());
         echo '</pre>';
 
-        echo 'Download: ' . html_writer::link(new moodle_url('view.php', array(
+        echo "<div class='mod_cas-view-code-footer p-2'>";
+
+        if ($access->canGradeSubmission()) {
+            echo '<div class="mod_cas-helptext">'.get_string('helptext', 'cas').'</div>';
+        }
+
+        echo '<div class="float-right">Download: ' . html_writer::link(new moodle_url('view.php', array(
             'id' => $id,
             'fid' => $this->fid,
             'type' => 'subm',
             'action' => 'dlfile'
         )), $myfile->getFileName(), array(
             'title' => 'dl'
-        )) . '<br /><br /><br /><br />';
+        )) . '</div>';
+
+        echo "</div>";
+
+
         //Save
-        echo '<div id="savediv" style="z-index : 99; width:290px; display: none; position: absolute; background: white;
-        border: 5px solid silver;">
-        <textarea id="savetext" rows="2" style="width:288px;">text</textarea>
-        <select id="saveseverity" size="1" style="width:80px;">';
+        echo '<div id="savediv" style="display: none">
+        <textarea id="savetext" rows="2" style="">text</textarea>
+        <div class="form-row m-0">
+        <select id="saveseverity" size="1" style="width:138px;" class="custom-select custom-select-sm padding-x-4">';
         foreach (CommentSeverity::values() as $sev)
             echo '<option value="' . $sev . '">' . $sev . '</option>';
 
         echo ' </select>
-        <input type="text" id="savepoints" style="width:50px;" value="-0.00">
+        <input type="text" id="savepoints" style="width:60px;margin-left: 3px" value="-0.00" class="form-control form-control-sm padding-x-4">
         <input type="hidden" id="startline" value="">
         <input type="hidden" id="endline" value="">
         <input type="hidden" id="startchar" value="">
-        <input type="hidden" id="endchar" value=""><br>
+        <input type="hidden" id="endchar" value="">
+        <button id="savebut" class="mod_cas-small-button form-control form-control-sm">' .
+                $OUTPUT->pix_icon('e/save', get_string('save')) .
+                '</button>' .
+        '<button id="closebut1" class="mod_cas-small-button form-control form-control-sm">' .
+                $OUTPUT->pix_icon('e/cancel', get_string('cancel')) .
+                '</button>';
+        //echo $OUTPUT->pix_icon('e/cancel', get_string('cancel'), null, array('id' => 'closebut1'));
+        echo '</div></div>';
+
+        /*<button class="btn btn-sm" id="savebut">Speichern</button>
+        <button class="btn btn-sm" id="closebut1">Schließen</button>
         <input type="submit" value="'.get_string('save', 'cas').'" id="savebut">
-        <input type="submit" value="' . get_string('close', 'cas') . '" id="closebut1"></div>';
+        <input type="submit" value="a' . get_string('close', 'cas') . '" class="form-control" id="closebut1"></div>';*/
 
         //Edit
-        echo '<div id="editdiv" style="z-index : 99; width:290px; display: none; position: absolute; background: white;
-        border: 5px solid silver;">
-        <textarea id="edittext" rows="2" style="width:288px;">text</textarea>
-        <select id="editseverity" size="1" style="width:80px;">';
+        echo '<div id="editdiv" style="display: none">
+        <textarea id="edittext" rows="2">text</textarea>
+        <div class="form-row m-0">
+        <select id="editseverity" size="1" style="width:99px" class="custom-select custom-select-sm padding-x-4">';
         foreach (CommentSeverity::values() as $sev)
             echo '<option value="' . $sev . '">' . $sev . '</option>';
 
         echo ' </select>
-        <input type="text" id="editpoints" style="width:50px;" value="-0.00">
-        <input type="hidden" id="editid" value=""><br>
-        <input type="submit" value="'.get_string('save', 'cas').'" id="editbut">
+        <input type="text" id="editpoints" style="width:60px;margin-left: 3px" class="form-control form-control-sm padding-x-4" value="-0.00">
+        <input type="hidden" id="editid" value=""> 
+                <button id="editbut" class="mod_cas-small-button form-control form-control-sm">' .
+                $OUTPUT->pix_icon('e/save', get_string('save')) .
+                '</button>' .
+                '<button id="delbut" class="mod_cas-small-button form-control form-control-sm">' .
+                $OUTPUT->pix_icon('i/delete', get_string('delete')) .
+                '</button>' .
+                '<button id="closebut2" class="mod_cas-small-button form-control form-control-sm">' .
+                $OUTPUT->pix_icon('e/cancel', get_string('cancel')) .
+                '</button></div></div>';
+
+        /*<input type="submit" value="'.get_string('save', 'cas').'" id="editbut">
         <input type="submit" value="'.get_string('delete', 'cas').'" id="delbut">
-        <input type="submit" value="' . get_string('close', 'cas') . '" id="closebut2"></div>';
+        <input type="submit" value="' . get_string('close', 'cas') . '" id="closebut2"></div>*/
 
         //Comment Tooltip
         echo '<div id="tooldiv" style="z-index : 99; width:150px; display: none; position: absolute; background: #FFFF99; white-space: pre-wrap;"></div>';
         echo '<div id="loader" style="display: none; position: absolute; left:50%; top:50%;"><img src="'.$OUTPUT->image_url('i/loading')->out(true).'"></div>';
 
-        if ($access->canGradeSubmission()) {
-            echo '<div style="font-size:10px">'.get_string('helptext', 'cas').'</div>';
-        }
+        echo "</div>";
+
         echo $OUTPUT->footer();
     }