From 8d90aec2aa2c0c46137ca4979cc893adbbf8ae0e Mon Sep 17 00:00:00 2001
From: Andrew Nicols <andrew@nicols.co.uk>
Date: Wed, 30 Oct 2013 16:37:29 +0800
Subject: [PATCH] MDL-40975 Course: Make the completion tracking look the same
 as other icons when editing

---
 course/renderer.php                            | 11 +++++++++--
 theme/afterburner/style/afterburner_styles.css |  6 ++++++
 theme/base/style/core.css                      |  3 +--
 theme/base/style/course.css                    |  4 +---
 theme/bootstrapbase/less/moodle/course.less    | 14 +++++---------
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/course/renderer.php b/course/renderer.php
index 781b7767490..d5a93f6ab47 100644
--- a/course/renderer.php
+++ b/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),
diff --git a/theme/afterburner/style/afterburner_styles.css b/theme/afterburner/style/afterburner_styles.css
index eab5c62169b..9453b84d6b2 100644
--- a/theme/afterburner/style/afterburner_styles.css
+++ b/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;
+}
diff --git a/theme/base/style/core.css b/theme/base/style/core.css
index a2f3c42da33..f014e552626 100644
--- a/theme/base/style/core.css
+++ b/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);}
diff --git a/theme/base/style/course.css b/theme/base/style/course.css
index b897e9c47ab..a24bcd59204 100644
--- a/theme/base/style/course.css
+++ b/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;}
diff --git a/theme/bootstrapbase/less/moodle/course.less b/theme/bootstrapbase/less/moodle/course.less
index 30a1311be03..b2b1b271647 100644
--- a/theme/bootstrapbase/less/moodle/course.less
+++ b/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;
 }