MDL-40975 Course: Make the completion tracking look the same as other icons when editing

course/renderer.php

@@ -647,7 +647,14 @@ class core_course_renderer extends plugin_renderer_base {
         if ($completionicon) {
             $formattedname = $mod->get_formatted_name();
             $imgalt = get_string('completion-alt-' . $completionicon, 'completion', $formattedname);
-            if ($completion == COMPLETION_TRACKING_MANUAL && !$this->page->user_is_editing()) {
+
+            if ($this->page->user_is_editing()) {
+                // When editing, the icon is just an image.
+                $completionpixicon = new pix_icon('i/completion-'.$completionicon, $imgalt, '',
+                        array('title' => $imgalt, 'class' => 'iconsmall'));
+                $output .= html_writer::tag('span', $this->output->render($completionpixicon),
+                        array('class' => 'autocompletion'));
+            } else if ($completion == COMPLETION_TRACKING_MANUAL) {
                 $imgtitle = get_string('completion-title-' . $completionicon, 'completion', $formattedname);
                 $newstate =
                     $completiondata->completionstate == COMPLETION_COMPLETE
@@ -683,7 +690,7 @@ class core_course_renderer extends plugin_renderer_base {
                 $output .= html_writer::end_tag('div');
                 $output .= html_writer::end_tag('form');
             } else {
-                // In auto mode, or when editing, the icon is just an image
+                // In auto mode, the icon is just an image.
                 $completionpixicon = new pix_icon('i/completion-'.$completionicon, $imgalt, '',
                         array('title' => $imgalt));
                 $output .= html_writer::tag('span', $this->output->render($completionpixicon),

theme/afterburner/style/afterburner_styles.css

@@ -486,3 +486,9 @@ body#page-course-view-topics.path-course div.moodle-dialogue-base div.yui3-widge
     color: #cc3300;
     text-decoration: underline;
 }
+
+/* Actionmenu
+-------------*/
+.jsenabled .moodle-actionmenu[data-enhance] .toggle-display.textmenu .iconsmall {
+    margin: 4px 4px 4px 2px;
+}

theme/base/style/core.css

@@ -1485,8 +1485,7 @@ img#persona_signin { cursor: pointer; }
     padding-left: 4px;
 }
 .jsenabled .moodle-actionmenu[data-enhance] .toggle-display.textmenu .iconsmall {
-    margin: 4px 8px 4px 0px;
-    padding: 4px;
+    margin: 8px 4px 0px 2px;
 }
 
 .jsenabled .moodle-actionmenu[data-enhanced] .toggle-display {opacity: 1;filter: alpha(opacity=100);}

theme/base/style/course.css

@@ -174,9 +174,7 @@
 
 .path-site li.activity > div,
 .path-course-view li.activity > div {position:relative;}
-.path-course-view li.activity form.togglecompletion {position: absolute; top: 0; right: .2em;}
-.path-course-view li.activity form.togglecompletion input {position:absolute; top: .25em; 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 .ajaxworking {position:absolute; right: 22px; width: 16px; height: 16px; background: url([[pix:i/ajaxloader]]) no-repeat;}
 .path-course-view li.activity form.togglecompletion div {display:inline;}
 .dir-rtl.path-course-view li.activity form.togglecompletion,
 .dir-rtl.path-course-view li.activity span.autocompletion {left:1.7em;right:auto;padding:0px;}

theme/bootstrapbase/less/moodle/course.less

@@ -354,24 +354,20 @@
     position: relative;
     padding: 0 0 0 16px;
 }
-.path-course-view li.activity span.autocompletion,
-.path-course-view li.activity form.togglecompletion {
-    float: right;
-    width: 0; /* Reduce the width of the control to 0 and rely on natural overflow */
+.path-course-view li.activity span.autocompletion img {
+    vertical-align: text-bottom;
 }
-.path-course-view li.activity span.autocompletion img,
 .path-course-view li.activity form.togglecompletion img {
     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 }
 .path-course-view li.activity form.togglecompletion .ajaxworking {
     width: 16px;
     height: 16px;
+    position: absolute;
+    right: 22px;
+    top: 3px;
     background: url([[pix:i/ajaxloader]]) no-repeat;
 }
-.dir-rtl.path-course-view li.activity form.togglecompletion,
-.dir-rtl.path-course-view li.activity span.autocompletion {
-    float: left;
-}
 .dir-rtl.path-course-view .completionprogress {
     float: none;
 }