From bb128107e3f31e695d9581a2ef3b492a2c1f79a3 Mon Sep 17 00:00:00 2001 From: Frederic Massart Date: Thu, 8 Nov 2012 18:45:02 +0800 Subject: [PATCH] MDL-36449 usability: Normalising icons on course page --- course/format/topics/styles.css | 5 +++-- course/format/weeks/styles.css | 3 ++- course/lib.php | 7 +++---- course/yui/dragdrop/dragdrop.js | 3 +-- lib/javascript-static.js | 3 ++- lib/yui/dragdrop/dragdrop.js | 14 +++++++++++--- mod/url/lib.php | 2 +- mod/url/locallib.php | 9 +++++---- pix/i/dragdrop.png | Bin 0 -> 240 bytes pix/i/dragdrop.svg | 16 ++++++++++++++++ theme/base/style/core.css | 21 +++++++++++++++++--- theme/base/style/course.css | 33 ++++++++++++++++++++++++-------- theme/standard/style/course.css | 2 -- theme/upgrade.txt | 1 + 14 files changed, 88 insertions(+), 31 deletions(-) create mode 100644 pix/i/dragdrop.png create mode 100644 pix/i/dragdrop.svg diff --git a/course/format/topics/styles.css b/course/format/topics/styles.css index 7f0426e22ac..3460a0a2d3f 100644 --- a/course/format/topics/styles.css +++ b/course/format/topics/styles.css @@ -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;} diff --git a/course/format/weeks/styles.css b/course/format/weeks/styles.css index fc87f3c29ba..17cf4cd107e 100644 --- a/course/format/weeks/styles.css +++ b/course/format/weeks/styles.css @@ -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 diff --git a/course/lib.php b/course/lib.php index 2fc4b681c2f..235ef21f1fe 100644 --- a/course/lib.php +++ b/course/lib.php @@ -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 'extra . $onclick . ' href="' . $url . '">' . $mod->modfullname . ' ' . + '" class="iconlarge activityicon" alt="' . $mod->modfullname . '" /> ' . $accesstext . '' . $instancename . $altname . ''; @@ -1577,7 +1577,6 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false, } else { $mod->groupmode = false; } - echo '  '; echo make_editing_buttons($mod, $absolute, true, $mod->indent, $sectionreturn); echo $mod->get_after_edit_icons(); } diff --git a/course/yui/dragdrop/dragdrop.js b/course/yui/dragdrop/dragdrop.js index 069dbcb6c16..2b4cc39072d 100644 --- a/course/yui/dragdrop/dragdrop.js +++ b/course/yui/dragdrop/dragdrop.js @@ -87,8 +87,7 @@ YUI.add('moodle-course-dragdrop', function(Y) { if ((movedown || moveup) && cssleft) { cssleft.setStyle('cursor', 'move'); - cssleft.appendChild(Y.Node.create('
')); - cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE)); + cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true)); if (moveup) { moveup.remove(); diff --git a/lib/javascript-static.js b/lib/javascript-static.js index 077693d7a31..84a8709d072 100644 --- a/lib/javascript-static.js +++ b/lib/javascript-static.js @@ -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('
') diff --git a/lib/yui/dragdrop/dragdrop.js b/lib/yui/dragdrop/dragdrop.js index c46205b7c1b..6d7fd45f1c4 100644 --- a/lib/yui/dragdrop/dragdrop.js +++ b/lib/yui/dragdrop/dragdrop.js @@ -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('') .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) { diff --git a/mod/url/lib.php b/mod/url/lib.php index 1c79e47132f..012847d50b4 100644 --- a/mod/url/lib.php +++ b/mod/url/lib.php @@ -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); diff --git a/mod/url/locallib.php b/mod/url/locallib.php index c3a00c948d2..bc01678b0e7 100644 --- a/mod/url/locallib.php +++ b/mod/url/locallib.php @@ -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 index 0000000000000000000000000000000000000000..04c8c5cb661b904887bec95c4fbde2832b2468a2 GIT binary patch literal 240 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWw1GlRRA}1r8qDfr=K%n2>QJ+=J=N{U${?v>ah^vc4)O* zke%eTd4Zg#A@h{j^9^Su9rnm|{+Dl=_~Z4$ZN>(QmdXu`<_ss_vad{K5qf`dP9uL! zLXv`DgNcQcb2FoaRF4ABWS7Uy&OMw`DGI*QA0+lLitTyvaf4j + + +]> + + + + + diff --git a/theme/base/style/core.css b/theme/base/style/core.css index 731b6c341ed..d3947fb792c 100644 --- a/theme/base/style/core.css +++ b/theme/base/style/core.css @@ -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, diff --git a/theme/base/style/course.css b/theme/base/style/course.css index 97dab30c18d..e137efe54c1 100644 --- a/theme/base/style/course.css +++ b/theme/base/style/course.css @@ -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;} +.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;} -.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;} +.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; } @@ -40,15 +55,17 @@ .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;} diff --git a/theme/standard/style/course.css b/theme/standard/style/course.css index 1b756eecb5e..d05bf7810dd 100644 --- a/theme/standard/style/course.css +++ b/theme/standard/style/course.css @@ -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;} diff --git a/theme/upgrade.txt b/theme/upgrade.txt index da07064e821..9dec36e942d 100644 --- a/theme/upgrade.txt +++ b/theme/upgrade.txt @@ -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 ===