MDL-36449 usability: Normalising icons on course page
authorFrederic Massart <fred@moodle.com>
Thu, 8 Nov 2012 10:45:02 +0000 (18:45 +0800)
committerFrederic Massart <fred@moodle.com>
Wed, 14 Nov 2012 03:38:06 +0000 (11:38 +0800)
14 files changed:
course/format/topics/styles.css
course/format/weeks/styles.css
course/lib.php
course/yui/dragdrop/dragdrop.js
lib/javascript-static.js
lib/yui/dragdrop/dragdrop.js
mod/url/lib.php
mod/url/locallib.php
pix/i/dragdrop.png [new file with mode: 0644]
pix/i/dragdrop.svg [new file with mode: 0644]
theme/base/style/core.css
theme/base/style/course.css
theme/standard/style/course.css
theme/upgrade.txt

index 7f0426e..3460a0a 100644 (file)
@@ -1,6 +1,7 @@
 .course-content ul.topics {margin:0;}
 .course-content ul.topics li.section {list-style: none;margin:5px 0 0 0;padding:0;}
 .course-content ul.topics li.section .content {margin:0 40px;}
-.course-content ul.topics li.section .left {width:40px;float:left;text-align:center;}
+.course-content ul.topics li.section .left {width:40px;float:left;text-align:center;padding-top: 4px;}
 .course-content ul.topics li.section .right {width:40px;float:right;text-align:center;padding-top: 4px;}
-.jumpmenu {text-align:center;}
\ No newline at end of file
+.course-content ul.topics li.section .left .section-handle img.icon { padding:0; vertical-align: baseline; }
+.jumpmenu {text-align:center;}
index fc87f3c..17cf4cd 100644 (file)
@@ -1,6 +1,7 @@
 .course-content ul.weeks {margin:0;}
 .course-content ul.weeks li.section {list-style: none;margin:5px 0 0 0;padding:0;}
 .course-content ul.weeks li.section .content {margin:0 40px;}
-.course-content ul.weeks li.section .left {width:40px;float:left;text-align:center;}
+.course-content ul.weeks li.section .left {width:40px;float:left;text-align:center;padding-top: 4px;}
 .course-content ul.weeks li.section .right {width:40px;float:right;text-align:center;padding-top: 4px;}
+.course-content ul.weeks li.section .left .section-handle img.icon { padding:0; vertical-align: baseline; }
 .jumpmenu {text-align:center;}
\ No newline at end of file
index 2fc4b68..235ef21 100644 (file)
@@ -1489,9 +1489,9 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                     $accesstext = '';
                 }
                 if ($linkclasses) {
-                    $linkcss = 'class="' . trim($linkclasses) . '" ';
+                    $linkcss = 'class="activityinstance ' . trim($linkclasses) . '" ';
                 } else {
-                    $linkcss = '';
+                    $linkcss = 'class="activityinstance"';
                 }
                 if ($textclasses) {
                     $textcss = 'class="' . trim($textclasses) . '" ';
@@ -1509,7 +1509,7 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                     // Display link itself
                     echo '<a ' . $linkcss . $mod->extra . $onclick .
                             ' href="' . $url . '"><img src="' . $mod->get_icon_url() .
-                            '" class="activityicon" alt="' . $mod->modfullname . '" /> ' .
+                            '" class="iconlarge activityicon" alt="' . $mod->modfullname . '" /> ' .
                             $accesstext . '<span class="instancename">' .
                             $instancename . $altname . '</span></a>';
 
@@ -1577,7 +1577,6 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                 } else {
                     $mod->groupmode = false;
                 }
-                echo '&nbsp;&nbsp;';
                 echo make_editing_buttons($mod, $absolute, true, $mod->indent, $sectionreturn);
                 echo $mod->get_after_edit_icons();
             }
index 069dbcb..2b4cc39 100644 (file)
@@ -87,8 +87,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
 
                     if ((movedown || moveup) && cssleft) {
                         cssleft.setStyle('cursor', 'move');
-                        cssleft.appendChild(Y.Node.create('<br />'));
-                        cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE));
+                        cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
 
                         if (moveup) {
                             moveup.remove();
index 077693d..84a8709 100644 (file)
@@ -859,7 +859,8 @@ M.util.add_lightbox = function(Y, node) {
     })
     .setStyles({
         'position' : 'relative',
-        'top' : '50%'
+        'top' : '50%',
+        'left' : '50%'
     });
 
     var lightbox = Y.Node.create('<div></div>')
index c46205b..6d7fd45 100644 (file)
@@ -1,5 +1,9 @@
 YUI.add('moodle-core-dragdrop', function(Y) {
-    var MOVEICON = {'pix':"i/move_2d",'component':'moodle'};
+    var MOVEICON = {
+        pix: "i/move_2d",
+        largepix: "i/dragdrop",
+        component: 'moodle'
+    };
 
    /*
     * General DRAGDROP class, this should not be used directly,
@@ -31,11 +35,15 @@ YUI.add('moodle-core-dragdrop', function(Y) {
             Y.DD.DDM.on('drag:dropmiss', this.global_drag_dropmiss, this);
         },
 
-        get_drag_handle: function(title, classname, iconclass) {
+        get_drag_handle: function(title, classname, iconclass, large) {
+            var iconname = MOVEICON.pix;
+            if (large) {
+                iconname = MOVEICON.largepix;
+            }
             var dragicon = Y.Node.create('<img />')
                 .setStyle('cursor', 'move')
                 .setAttrs({
-                    'src' : M.util.image_url(MOVEICON.pix, MOVEICON.component),
+                    'src' : M.util.image_url(iconname, MOVEICON.component),
                     'alt' : title
                 });
             if (iconclass) {
index 1c79e47..012847d 100644 (file)
@@ -258,7 +258,7 @@ function url_get_coursemodule_info($coursemodule) {
     $info->name = $url->name;
 
     //note: there should be a way to differentiate links from normal resources
-    $info->icon = url_guess_icon($url->externalurl);
+    $info->icon = url_guess_icon($url->externalurl, 24);
 
     $display = url_get_final_display_type($url);
 
index c3a00c9..bc01678 100644 (file)
@@ -540,21 +540,22 @@ function url_get_encrypted_parameter($url, $config) {
 /**
  * Optimised mimetype detection from general URL
  * @param $fullurl
+ * @param int $size of the icon.
  * @return string mimetype
  */
-function url_guess_icon($fullurl) {
+function url_guess_icon($fullurl, $size = null) {
     global $CFG;
     require_once("$CFG->libdir/filelib.php");
 
     if (substr_count($fullurl, '/') < 3 or substr($fullurl, -1) === '/') {
         // most probably default directory - index.php, index.html, etc.
-        return file_extension_icon('.htm');
+        return file_extension_icon('.htm', $size);
     }
 
-    $icon = file_extension_icon($fullurl);
+    $icon = file_extension_icon($fullurl, $size);
 
     if ($icon === file_extension_icon('')) {
-        return file_extension_icon('.htm');
+        return file_extension_icon('.htm', $size);
     }
 
     return $icon;
diff --git a/pix/i/dragdrop.png b/pix/i/dragdrop.png
new file mode 100644 (file)
index 0000000..04c8c5c
Binary files /dev/null and b/pix/i/dragdrop.png differ
diff --git a/pix/i/dragdrop.svg b/pix/i/dragdrop.svg
new file mode 100644 (file)
index 0000000..b56eba3
--- /dev/null
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [\r
+       <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">\r
+]>\r
+<svg version="1.1"\r
+        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"\r
+        x="0px" y="0px" width="12px" height="12px" viewBox="-0.1 -0.1 12 12"\r
+        style="overflow:visible;enable-background:new -0.1 -0.1 12 12;" xml:space="preserve">\r
+<defs>\r
+</defs>\r
+<path style="fill:#999999;" d="M11.6,5.2L9.8,3.5C9.4,3.1,8.9,3.3,8.9,3.8v1.1h-2v-2h1.1c0.5,0,0.7-0.5,0.3-0.9L6.6,0.3\r
+       c-0.4-0.4-1-0.4-1.4,0L3.5,2.1C3.1,2.5,3.3,2.9,3.8,2.9h1.1v2h-2V3.8c0-0.5-0.5-0.7-0.9-0.3L0.3,5.2c-0.4,0.4-0.4,1,0,1.4l1.8,1.7\r
+       c0.4,0.4,0.8,0.3,0.8-0.3V6.9h2v2H3.8c-0.5,0-0.7,0.5-0.3,0.9l1.7,1.8c0.4,0.4,1,0.4,1.4,0l1.7-1.8c0.4-0.4,0.3-0.8-0.3-0.8H6.9v-2\r
+       h2v1.1c0,0.5,0.5,0.7,0.9,0.3l1.8-1.7C12,6.3,12,5.6,11.6,5.2z"/>\r
+</svg>\r
index 731b6c3..d3947fb 100644 (file)
@@ -91,7 +91,8 @@ img.resize {height: 1em;width: 1em;}
 .breadcrumb img.resize {height: 0.9em;width: 0.8em;}
 img.icon {height:16px;vertical-align:middle;width:16px;padding-right:4px;padding-top:2px;padding-bottom:2px;}
 img.iconsmall {height:12px;margin-right:3px;vertical-align:middle;width:12px;}
-img.iconhelp, .helplink img {height:17px;padding:0 3px;vertical-align:middle;width:17px;}
+img.iconhelp, .helplink img {height:16px; padding-left:3px;vertical-align:middle;width:16px;}
+img.iconlarge {height: 24px; width: 24px; vertical-align:middle;}
 img.icontoggle {height:17px;vertical-align:middle;width:50px;}
 img.iconkbhelp {height:17px;width:49px;}
 .categorybox .category {font-size:1.2em;font-weight:bold;}
@@ -642,7 +643,7 @@ body.tag .managelink {padding: 5px;}
 .restore-course-category .rcs-results .paging {text-align:left;margin:0;background-color:#eee;padding:3px;}
 
 .corelightbox {background-color:#CCC;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;}
-.corelightbox img {position:fixed;top:50%;}
+.corelightbox img {position:fixed;top:50%; left: 50%;}
 
 /**
  * IE - Overide for RTL layout
@@ -947,6 +948,12 @@ sup {vertical-align: super;}
 .choosercontainer #chooseform .nonoption span.modicon img.icon {
     padding: 0 0 0 0.5em;
 }
+.dir-rtl .choosercontainer #chooseform .option .typename,
+.dir-rtl .choosercontainer #chooseform .option span.modicon img.icon,
+.dir-rtl .choosercontainer #chooseform .nonoption .typename,
+.dir-rtl .choosercontainer #chooseform .nonoption span.modicon img.icon {
+    padding: 0 0.5em 0 0;
+}
 
 .choosercontainer #chooseform .option span.modicon img.icon,
 .choosercontainer #chooseform .nonoption span.modicon img.icon {
@@ -970,18 +977,25 @@ sup {vertical-align: super;}
     padding-top: 0.3em;
     padding-bottom: 0.1em;
 }
+.dir-rtl .choosercontainer #chooseform .nonoption {
+    padding-right: 2.7em;
+    padding-left: 0;
+}
 
 .choosercontainer #chooseform .subtype {
     margin-bottom: 0;
     padding: 0 1.6em 0 3.2em;
 }
 .dir-rtl .choosercontainer #chooseform .subtype {
-    padding: 0 2.6em 0 3.2em;
+    padding: 0 3.2em 0 1.6em;
 }
 
 .choosercontainer #chooseform .subtype .typename {
     margin: 0 0 0 0.2em;
 }
+.dir-rtl .choosercontainer #chooseform .subtype .typename {
+    margin: 0 0.2em 0 0;
+}
 
 /* The instruction/help area */
 .jsenabled .choosercontainer #chooseform .instruction,
@@ -1021,6 +1035,7 @@ sup {vertical-align: super;}
     -moz-box-shadow: 0px 0px 10px 0px #CCCCCC;
 }
 .section-modchooser-link img.smallicon { padding-right: 3px; }
+.dir-rtl .section-modchooser-link img.smallicon { padding-left: 3px; padding-right: 0;}
 
 /* Install Process' text fields Forms, should always be justified to the left */
 form#installform #id_wwwroot,form#installform #id_dirroot ,form#installform #id_dataroot,
index 97dab30..e137efe 100644 (file)
@@ -5,10 +5,25 @@
 .section_add_menus .horizontal div,
 .section_add_menus .horizontal form {display:inline;}
 .section_add_menus optgroup {font-weight:normal;font-style: italic;}
-
-.course-content .section .activity img.activityicon {vertical-align:text-bottom;height:24px;width:24px;margin-right: 3px;}
-.course-content .section .activity .commands img.iconsmall {vertical-align: baseline;}
-.course-content .section .activity .commands img {padding: 0 2px;}
+.section_add_menus .urlselect { margin-left: .4em;}
+.dir-rtl .section_add_menus .urlselect { margin-right: .4em; margin-left: 0;}
+.section_add_menus .urlselect select { margin-left: .2em;}
+.dir-rtl .section_add_menus .urlselect select { margin-right: .2em; margin-left: 0;}
+.section_add_menus .urlselect img.iconhelp { padding: 0; margin: 0; vertical-align: text-bottom;}
+
+.sitetopic .section .activity img.activityicon,
+.course-content .section .activity img.activityicon {vertical-align:text-bottom;margin-right: 3px;}
+.dir-rtl .sitetopic .section .activity img.activityicon,
+.dir-rtl .course-content .section .activity img.activityicon {margin-left: 3px; margin-right: 0;}
+.sitetopic .section .activity .activityinstance,
+.course-content .section .activity .activityinstance { padding-right: 3em;}
+.dir-rtl .sitetopic .section .activity .activityinstance,
+.dir-rtl .course-content .section .activity .activityinstance { padding-right: 0; padding-left: 3em;}
+.sitetopic .section .activity .commands img,
+.course-content .section .activity .commands img { vertical-align: baseline; padding: 0 2px; }
+.sitetopic .section li.activity,
+.course-content .section li.activity {padding: .2em;}
+.sitetopic .section .activity:hover,
 .course-content .section .activity:hover { background-color: #EEE; }
 .course-content .section-summary { border: 1px solid #DDD; margin-top: 5px; list-style: none; }
 .course-content .section-summary .section-title  { margin: 2px 5px 2px 5px; }
 .path-course-view .single-section .completionprogress {margin-right: -3.5em; padding-left: 1.5em; padding-right: 0em;}
 .path-course-view .section .summary {line-height:normal;}
 
-.path-course-view li.activity {margin-right:20px; position:relative;}
+.path-course-view li.activity {position:relative;}
 .path-course-view li.activity span.autocompletion,
-.path-course-view li.activity form.togglecompletion {display:inline;position:absolute;right:-20px;top:0;padding:0.2em 0;}
+.path-course-view li.activity form.togglecompletion {position: absolute; top: .2em; right: .2em;}
+.path-course-view li.activity span.autocompletion img,
+.path-course-view li.activity form.togglecompletion input {position:absolute; top: 4px; right: 0px;}
+.path-course-view li.activity form.togglecompletion .ajaxworking {position:absolute; right: 22px; top: 5px; width: 16px; height: 16px; background: url([[pix:i/ajaxloader]]) no-repeat;}
 .path-course-view li.activity form.togglecompletion div {display:inline;}
-.path-course-view li.activity form.togglecompletion .ajaxworking {position:absolute;top:0; left:20px;width: 20px; height: 20px;background: url([[pix:i/ajaxloader]]) no-repeat;}
-.dir-rtl.path-course-view li.activity {margin-right:20px;margin-left:20px;}
 .dir-rtl.path-course-view li.activity form.togglecompletion,
-.dir-rtl.path-course-view li.activity span.autocompletion {right:-20px;left:auto;padding:0px;}
+.dir-rtl.path-course-view li.activity span.autocompletion {left:1.7em;right:auto;padding:0px;}
 .dir-rtl.path-course-view .completionprogress {float: none;}
+.dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {right: -22px;}
 
 .section img.movetarget {height:16px;width:80px;}
 
index 1b756ee..d05bf78 100644 (file)
@@ -23,8 +23,6 @@
 .path-course-view .availabilityinfo strong {font-weight:normal;color:black;}
 .path-course-view .dimmed_text img {opacity:0.3;filter: alpha(opacity='30');}
 .path-course-view .section {font-size:1em;line-height:1.2em;}
-.path-course-view .section .activity {padding:0.2em 0;line-height: 2em;}
-.path-course-view .section .activity a {line-height:1em;}
 .path-course-view .section .weekdates {margin: 0;font-weight: normal;font-size: 1em;}
 .path-course-view .section .groupinglabel {color: #666666;}
 .path-course-view .section .left {font-weight:bold;}
index da07064..9dec36e 100644 (file)
@@ -9,6 +9,7 @@ required changes:
 optional changes:
 * new optional boolean parameter $withlinks for public function login_info() in lib/outputrenderers.php (MDL-31365)
 * new layout option "nologinlinks" and new page layout "secure" e.g. for safebrowser and securewindow (MDL-31365)
+* new class 'iconlarge' for 24x24 icons.
 
 === 2.3 ===