PR

done/done.py

@@ -113,6 +113,7 @@ class DoneXBlock(XBlock):
              """<vertical_demo>
                   <done align="left"> </done>
                   <done align="right"> </done>
+                  <done align="center"> </done>
                 </vertical_demo>
              """),
         ]

done/static/css/done.css

@@ -78,4 +78,20 @@
 
 .done_onoffswitch-checkbox:checked + .done_onoffswitch-label .done_onoffswitch-switch {
     right: 0px; 
+}
+
+.done-checked {
+    background-color: #018801;
+}
+
+.done-unchecked {
+    background-color: #FFFFFF;
+}
+
+.done_grow {
+    flex-grow: 1;
+}
+
+.done_nogrow {
+    flex-grow: 0;
 }
\ No newline at end of file

done/static/js/src/done.js

@@ -3,7 +3,7 @@
 if (typeof Logger === 'undefined') {
     var Logger = {
         log: function(a, b) { return; }
-    }
+    };
 }
 
 function update_knob(element, data) {
@@ -19,19 +19,13 @@ function update_knob(element, data) {
 function DoneXBlock(runtime, element, data) {
     $('.done_onoffswitch-checkbox', element).prop("checked", data.state);
 
-    var grow_left = 1;
-    var grow_right = 1;
-
-    if (data.align == "left") {
-	grow_left = 0;
+    if (data.align != "right") {
+	$('.done_right_spacer', element).addClass("done_grow");
     }
-    if (data.align == "right") {
-	grow_right = 0;
+    if (data.align != "left") {
+	$('.done_left_spacer', element).addClass("done_grow");
     }
 
-    $('.done_left_spacer', element).css("flex-grow", grow_left.toString());
-    $('.done_right_spacer', element).css("flex-grow", grow_right.toString());
-
     update_knob(element, data);
     var handlerUrl = runtime.handlerUrl(element, 'toggle_button');
 
@@ -42,7 +36,7 @@ function DoneXBlock(runtime, element, data) {
 	    $.ajax({
 		type: "POST",
 		url: handlerUrl,
-		data: JSON.stringify({'done':checked}),
+		data: JSON.stringify({'done':checked})
 	    });
 	    Logger.log("edx.done.toggle", {'done': checked});
 	    update_knob(element, data);