Address review comments.

tests/integration/test_vectordraw.py

@@ -105,20 +105,33 @@ class TestVectorDraw(StudioEditableBaseTest):
 
     def check_vector_properties(
             self, menu, is_present=False, expected_label="Vector Properties",
-            expected_name=None, expected_tail=None, expected_length=None, expected_angle=None
+            expected_name=None, expected_tail=None, expected_length=None, expected_angle=None,
+            input_fields_disabled=True
     ):
         if is_present:
             vector_properties = menu.find_element_by_css_selector(".vector-properties")
             vector_properties_label = vector_properties.find_element_by_css_selector("h3")
             self.assertEquals(vector_properties_label.text, expected_label)
             # Name
-            self.check_vector_property(vector_properties, "name", "select", "name:", expected_name or "-")
+            self.check_vector_property(
+                vector_properties, "name", "select", "name:", expected_name or "-",
+                field_disabled=input_fields_disabled
+            )
             # Tail
-            self.check_vector_property(vector_properties, "tail", "input", "tail position:", expected_tail or "-")
+            self.check_vector_property(
+                vector_properties, "tail", "input", "tail position:", expected_tail or "",
+                field_disabled=input_fields_disabled
+            )
             # Length
-            self.check_vector_property(vector_properties, "length", "input", "length:", expected_length or "-")
+            self.check_vector_property(
+                vector_properties, "length", "input", "length:", expected_length or "",
+                field_disabled=input_fields_disabled
+            )
             # Angle
-            self.check_vector_property(vector_properties, "angle", "input", "angle:", expected_angle or "-")
+            self.check_vector_property(
+                vector_properties, "angle", "input", "angle:", expected_angle or "",
+                field_disabled=input_fields_disabled
+            )
             # Slope
             vector_slope = vector_properties.find_element_by_css_selector(".vector-prop-slope")
             self.assertFalse(vector_slope.is_displayed())
@@ -130,7 +143,8 @@ class TestVectorDraw(StudioEditableBaseTest):
             )
 
     def check_vector_property(
-            self, vector_properties, property_name, input_type, expected_label, expected_value=None
+            self, vector_properties, property_name, input_type, expected_label, expected_value=None,
+            field_disabled=False
     ):
         vector_property = vector_properties.find_element_by_css_selector(
             ".vector-prop-{}".format(property_name)
@@ -145,6 +159,8 @@ class TestVectorDraw(StudioEditableBaseTest):
         )
         if input_type == "input":
             self.assertEquals(vector_property_input.get_attribute("value"), expected_value)
+            disabled = vector_property_input.get_attribute("disabled")
+            self.assertEquals(bool(disabled), field_disabled)
         else:
             selected_option = vector_property_input.find_element_by_css_selector('option[selected="selected"]')
             self.assertEquals(selected_option.text, expected_value)
@@ -297,7 +313,8 @@ class TestVectorDraw(StudioEditableBaseTest):
         # "Vector Properties" should display correct info
         self.check_vector_properties(
             menu, is_present=True, expected_label="Custom properties label",
-            expected_name="N", expected_tail="2.00, 2.00", expected_length="4.00", expected_angle="45.00"
+            expected_name="N", expected_tail="2.00, 2.00", expected_length="4.00", expected_angle="45.00",
+            input_fields_disabled=False
         )
         self.check_edit_dropdown(menu, vectors)
 
@@ -330,7 +347,8 @@ class TestVectorDraw(StudioEditableBaseTest):
         # "Vector Properties" should display correct info
         self.check_vector_properties(
             menu, is_present=True, expected_label="Custom properties label",
-            expected_name="N", expected_tail="2.00, 2.00", expected_length="4.00", expected_angle="45.00"
+            expected_name="N", expected_tail="2.00, 2.00", expected_length="4.00", expected_angle="45.00",
+            input_fields_disabled=False
         )
 
     def reset(self, board, vectors, points):
@@ -552,7 +570,8 @@ class TestVectorDraw(StudioEditableBaseTest):
         menu = self.exercise.find_element_by_css_selector(".menu")
         self.check_vector_properties(
             menu, is_present=True, expected_label="Custom properties label",
-            expected_name="N", expected_tail="2.00, 2.00", expected_length="4.00", expected_angle="45.00"
+            expected_name="N", expected_tail="2.00, 2.00", expected_length="4.00", expected_angle="45.00",
+            input_fields_disabled=False
         )
 
     @data(

vectordraw/public/css/vectordraw.css

@@ -123,7 +123,7 @@
 }
 
 .vectordraw_block .menu .vector-properties .vector-prop-list .row .vector-prop-update .update-error {
-    visibility: hidden;
+    display: none;
     color: #ff0000;
 }
 

vectordraw/public/css/vectordraw_edit.css

@@ -14,6 +14,10 @@
     margin-bottom: 1em;
 }
 
+.vectordraw_edit_block #wysiwyg-description {
+    display: none;
+}
+
 .vectordraw_edit_block p {
     margin-bottom: 1em;
     font-size: 0.9em;
@@ -59,6 +63,11 @@
     float: right;
 }
 
+.vectordraw_block .menu .vector-properties .vector-prop-list .row .vector-prop-update .update-pending {
+    display: none;
+    color: #ffa500;
+}
+
 .vectordraw_edit_block h3 {
     margin-top: 5px;
     margin-bottom: 5px;
@@ -83,11 +92,16 @@
 }
 
 .vectordraw_edit_block .checks .check span,
-.vectordraw_edit_block .checks .check input[type="text"] {
+.vectordraw_edit_block .checks .check input[type="number"] {
     height: 1.5em;
+    min-width: 0px;
     margin-right: 12px;
 }
 
+.vectordraw_edit_block .checks .check input[type="number"] {
+    padding: 0 0 0 5px;
+}
+
 .vectordraw_edit_block .checks .check input[type="checkbox"] {
     height: 1.2em;
     width: 20%;

vectordraw/public/js/vectordraw.js

@@ -367,6 +367,10 @@ function VectorDrawXBlock(runtime, element, init_args) {
                 $('.vector-prop-slope input', this.element).val(slope.toFixed(2));
             }
         }
+        // Enable input fields
+        $('.vector-properties input').prop('disabled', false);
+        // Hide error message
+        $('.vector-prop-update .update-error', element).hide();
     };
 
     VectorDraw.prototype.resetVectorProperties = function(vector) {
@@ -374,8 +378,8 @@ function VectorDrawXBlock(runtime, element, init_args) {
         this.element.find('.menu .element-list-edit option').attr('selected', false);
         // Select default value
         $('.menu .element-list-edit option[value="-"]', element).attr('selected', true);
-        // Reset input fields to default values
-        $('.menu .vector-prop-list input', element).val('-');
+        // Reset input fields to default values and disable them
+        $('.menu .vector-prop-list input', element).prop('disabled', true).val('');
     };
 
     VectorDraw.prototype.isVectorTailDraggable = function(vector) {
@@ -478,7 +482,7 @@ function VectorDrawXBlock(runtime, element, init_args) {
         var values = [newTail[0], newTail[1], newLength, newAngle];
         // Validate values
         if (!_.some(values, Number.isNaN)) {
-            $('.vector-prop-update .update-error', element).css('visibility', 'hidden');
+            $('.vector-prop-update .update-error', element).hide();
             // Use coordinates of new tail, new length, new angle to calculate new position of tip
             var radians = newAngle * Math.PI / 180;
             var newTip = [
@@ -491,7 +495,7 @@ function VectorDrawXBlock(runtime, element, init_args) {
             board_object.point2.setPosition(JXG.COORDS_BY_USER, newTip);
             this.board.update();
         } else {
-            $('.vector-prop-update .update-error', element).css('visibility', 'visible');
+            $('.vector-prop-update .update-error', element).show();
         }
     };
 

vectordraw/templates/html/vectordraw.html

@@ -74,13 +74,13 @@
               <span id="vector-prop-tail-label">
                 {% trans "tail position" %}:
               </span>
-              <input type="text" value="-" aria-labelledby="vector-prop-tail-label">
+              <input type="text" disabled="disabled" placeholder="-" aria-labelledby="vector-prop-tail-label">
             </div>
             <div class="vector-prop vector-prop-length">
               <span id="vector-prop-length-label">
                 {% trans "length" %}:
               </span>
-              <input type="text" value="-" aria-labelledby="vector-prop-length-label">
+              <input type="text" disabled="disabled" placeholder="-" aria-labelledby="vector-prop-length-label">
             </div>
           </div>
           <div class="row">
@@ -88,13 +88,13 @@
               <span id="vector-prop-angle-label">
                 {% trans "angle" %}:
               </span>
-              <input type="text" value="-" aria-labelledby="vector-prop-angle-label">
+              <input type="text" disabled="disabled" placeholder="-" aria-labelledby="vector-prop-angle-label">
             </div>
             <div class="vector-prop vector-prop-slope">
               <span id="vector-prop-slope-label">
                 {% trans "slope" %}:
               </span>
-              <input type="text" value="-" aria-labelledby="vector-prop-slope-label" disabled="disabled">
+              <input type="text" disabled="disabled" placeholder="-" aria-labelledby="vector-prop-slope-label">
             </div>
           </div>
           <div class="row">