MDL-36559 usability: Gradebook CSS styling for new icons

ramnar · Nov 21, 2012 · 0cddd85 · 0cddd85
1 parent 4cf69ee
commit 0cddd85
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 24 deletions.
diff --git a/grade/lib.php b/grade/lib.php
@@ -1182,7 +1182,7 @@ public function get_element_icon(&$element, $spacerifnone=false) {
                                 '" alt="'.s($stroutcome).'"/>';
                     } else {
                         $strmanual = get_string('manualitem', 'grades');
-                        return '<img src="'.$OUTPUT->pix_url('t/manual_item') . '" '.
+                        return '<img src="'.$OUTPUT->pix_url('i/manual_item') . '" '.
                                 'class="icon itemicon" title="'.s($strmanual).
                                 '" alt="'.s($strmanual).'"/>';
                     }
@@ -1191,7 +1191,7 @@ public function get_element_icon(&$element, $spacerifnone=false) {
 
             case 'category':
                 $strcat = get_string('category', 'grades');
-                return '<img src="'.$OUTPUT->pix_url(file_folder_icon()) . '" class="icon itemicon" ' .
+                return '<img src="'.$OUTPUT->pix_url('i/folder') . '" class="icon itemicon" ' .
                         'title="'.s($strcat).'" alt="'.s($strcat).'" />';
         }
 
@@ -1573,7 +1573,8 @@ public function get_locking_icon($element, $gpr) {
             $strparamobj->itemname = $element['object']->grade_item->itemname;
             $strnonunlockable = get_string('nonunlockableverbose', 'grades', $strparamobj);
 
-            $action = $OUTPUT->pix_icon('t/unlock_gray', $strnonunlockable);
+            $action = html_writer::tag('span', $OUTPUT->pix_icon('t/locked', $strnonunlockable),
+                    array('class' => 'action-icon'));
 
         } else if ($element['object']->is_locked()) {
             $type = 'unlock';
@@ -1639,7 +1640,7 @@ public function get_calculation_icon($element, $gpr) {
 
                 $url = new moodle_url('/grade/edit/tree/calculation.php', array('courseid' => $this->courseid, 'id' => $object->id));
                 $url = $gpr->add_url_params($url);
-                return $OUTPUT->action_icon($url, new pix_icon($icon, $streditcalculation)) . "\n";
+                return $OUTPUT->action_icon($url, new pix_icon($icon, $streditcalculation));
             }
         }
 

diff --git a/grade/report/grader/lib.php b/grade/report/grader/lib.php
@@ -1675,6 +1675,8 @@ public function get_sort_arrows(array $extrafields = array()) {
         $strsortdesc  = $this->get_lang_string('sortdesc', 'grades');
         $strfirstname = $this->get_lang_string('firstname');
         $strlastname  = $this->get_lang_string('lastname');
+        $iconasc = $OUTPUT->pix_icon('t/sort_asc', $strsortasc, '', array('class' => 'iconsmall sorticon'));
+        $icondesc = $OUTPUT->pix_icon('t/sort_desc', $strsortdesc, '', array('class' => 'iconsmall sorticon'));
 
         $firstlink = html_writer::link(new moodle_url($this->baseurl, array('sortitemid'=>'firstname')), $strfirstname);
         $lastlink = html_writer::link(new moodle_url($this->baseurl, array('sortitemid'=>'lastname')), $strlastname);
@@ -1683,19 +1685,19 @@ public function get_sort_arrows(array $extrafields = array()) {
 
         if ($this->sortitemid === 'lastname') {
             if ($this->sortorder == 'ASC') {
-                $arrows['studentname'] .= print_arrow('up', $strsortasc, true);
+                $arrows['studentname'] .= $iconasc;
             } else {
-                $arrows['studentname'] .= print_arrow('down', $strsortdesc, true);
+                $arrows['studentname'] .= $icondesc;
             }
         }
 
         $arrows['studentname'] .= ' ' . $firstlink;
 
         if ($this->sortitemid === 'firstname') {
             if ($this->sortorder == 'ASC') {
-                $arrows['studentname'] .= print_arrow('up', $strsortasc, true);
+                $arrows['studentname'] .= $iconasc;
             } else {
-                $arrows['studentname'] .= print_arrow('down', $strsortdesc, true);
+                $arrows['studentname'] .= $icondesc;
             }
         }
 
@@ -1706,9 +1708,9 @@ public function get_sort_arrows(array $extrafields = array()) {
 
             if ($field == $this->sortitemid) {
                 if ($this->sortorder == 'ASC') {
-                    $arrows[$field] .= print_arrow('up', $strsortasc, true);
+                    $arrows[$field] .= $iconasc;
                 } else {
-                    $arrows[$field] .= print_arrow('down', $strsortdesc, true);
+                    $arrows[$field] .= $icondesc;
                 }
             }
         }

diff --git a/grade/report/grader/styles.css b/grade/report/grader/styles.css
@@ -11,6 +11,14 @@ width:20px;
 height:20px;
 }
 
+.gradestable th img {
+    vertical-align: text-bottom;
+    padding-bottom: 0;
+}
+.gradestable th .grade_icons { margin-top: .3em; }
+.gradestable th img.sorticon { margin-left: .3em; }
+.dir-rtl .gradestable th img.sorticon { margin-left: 0; margin-right: .3em; }
+
 table#user-grades .catlevel2 {
 background-color:#f9f9f9;
 }
@@ -133,9 +141,8 @@ border-width:0 0 1px 1px;
 }
 
 table#user-grades th.categoryitem,
-table#user-grades th.courseitem,
 table#user-grades td.topleft {
-vertical-align:top;
+vertical-align: bottom;
 border-style:solid;
 border-width:0 1px;
 }
@@ -160,10 +167,10 @@ border-width:0 1px 0 0;
 }
 
 table#user-grades th.item ,
-table#user-grades th.categoryitem ,
+table#user-grades th.categoryitem,
 table#user-grades th.courseitem {
 border-bottom-color:#000;
-vertical-align:top;
+vertical-align:bottom;
 border-style:solid;
 border-width:1px;
 }
@@ -186,7 +193,9 @@ margin-right:10px;
 
 table#user-grades .quickfeedback {
 border:1px dashed #000;
+margin-left: 10px;
 }
+.dir-rtl table#user-grades .quickfeedback { margin-left: 0; margin-right: 10px;}
 
 .path-grade-report-grader #siteconfiglink {
 text-align:right;
@@ -214,7 +223,7 @@ border-color:#cecece;
 }
 
 .path-grade-report-grader th {
-padding:2px 10px 0;
+padding:2px 10px;
 }
 
 .path-grade-report-grader span.inclusion-links {
@@ -255,7 +264,7 @@ padding:0;
 table#user-grades th.categoryitem,
 table#user-grades th.courseitem,
 .path-grade-report-grader table td.topleft {
-vertical-align:top;
+vertical-align:bottom;
 border-color:#cecece #cecece #000;
 border-style:solid;
 border-width:0 1px 1px;
@@ -269,7 +278,7 @@ table#user-grades td.topleft {
 background-color:#fff;
 }
 
-.path-grade-report-grader th.user img {
+.path-grade-report-grader th.user img.userpicture {
 border:3px double #cecece;
 vertical-align:top;
 width:2.7em;
@@ -316,8 +325,6 @@ padding:0;
 
 .path-grade-report-grader td input.text {
 border:1px solid #666;
-margin-left:10px;
-margin-right:10px;
 }
 
 .path-grade-report-grader td input.submit {
@@ -463,8 +470,6 @@ width:2000px;
 float:right;
 }
 
-.path-grade-report-grader .action-icon {margin-left:0.3em;}
-
 .path-grade-report-grader .gradestable th.user,
 .path-grade-report-grader .gradestable th.range,
 .path-grade-report-grader .flexible th,
@@ -573,9 +578,12 @@ background-color:#f3ead8;
 }
 
 .path-grade-report-grader table th.usersuspended img.usersuspendedicon {
-    vertical-align:middle;
+    vertical-align: text-bottom;
+    margin-left: .45em;
 }
 
+.path-grade-report-grader .grade_icons { margin-bottom: .3em;}
+
 .path-grade-report-grader .yui-overlay {
     background-color: #FFEE69;
     border-color: #D4C237 #A6982B #A6982B;

diff --git a/grade/report/lib.php b/grade/report/lib.php
@@ -333,10 +333,11 @@ protected function setup_groups() {
      */
     protected function get_sort_arrow($direction='move', $sortlink=null) {
         global $OUTPUT;
+        $pix = array('up' => 't/sort_desc', 'down' => 't/sort_asc', 'move' => 't/sort');
         $matrix = array('up' => 'desc', 'down' => 'asc', 'move' => 'desc');
         $strsort = $this->get_lang_string('sort' . $matrix[$direction]);
 
-        $arrow = print_arrow($direction, $strsort, true);
+        $arrow = $OUTPUT->pix_icon($pix[$direction], $strsort, '', array('class' => 'sorticon'));
         return html_writer::link($sortlink, $arrow, array('title'=>$strsort));
     }
 

diff --git a/theme/base/style/grade.css b/theme/base/style/grade.css
@@ -19,7 +19,7 @@
 .gradetreebox table {font-size: 0.8em;width: 100%;}
 .gradetreebox td.colspan,
 .gradetreebox tr.category .cell {background-color: #DDD;}
-.gradetreebox th.actions {white-space: nowrap;width: 80px;}
+.gradetreebox th.actions {white-space: nowrap;width: 105px;}
 .gradetreebox td.name {white-space: nowrap;}
 .gradetreebox td.name h4 {display: inline;}
 .gradetreebox td.range {white-space: nowrap;}

diff --git a/theme/upgrade.txt b/theme/upgrade.txt
@@ -8,6 +8,8 @@ required changes:
 
 deprecation:
 * i/roles: Use t/assignroles instead
+* t/manual_item: Use i/manual_item instead
+* t/unlock_gray: Use t/locked instead
 
 optional changes:
 * new optional boolean parameter $withlinks for public function login_info() in lib/outputrenderers.php (MDL-31365)
@@ -21,6 +23,7 @@ optional changes:
 * new icons t/sort_asc, t/sort_desc to use for ordering in table headers.
 * new class 'iconsort' for icons used for ordering in table headers.
 * new icons t/locked and t/unlocked (12x12) which should be used when there is no action associated to the icon.
+* new icons i/folder (16x16), monochrome equivalent to f/folder.
 
 === 2.3 ===