Merge pull request #88 from open-craft/mtyaka/studio-help

Clean up studio edit template

drag_and_drop_v2/drag_and_drop_v2.py

 # -*- coding: utf-8 -*-
 #
 """ Drag and Drop v2 XBlock """
+
 # Imports ###########################################################
 
 import copy
@@ -93,7 +94,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
 
     question_text = String(
         display_name=_("Problem text"),
-        help=_("The description of the problem or instructions shown to the learner"),
+        help=_("The description of the problem or instructions shown to the learner."),
         scope=Scope.settings,
         default="",
     )
@@ -106,22 +107,22 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
     )
 
     weight = Float(
-        display_name=_("Weight"),
-        help=_("The maximum score the learner can receive for the problem"),
+        display_name=_("Maximum score"),
+        help=_("The maximum score the learner can receive for the problem."),
         scope=Scope.settings,
         default=1,
     )
 
     item_background_color = String(
         display_name=_("Item background color"),
-        help=_("The background color of draggable items in the problem."),
+        help=_("The background color of draggable items in the problem (example: 'blue' or '#0000ff')."),
         scope=Scope.settings,
         default="",
     )
 
     item_text_color = String(
         display_name=_("Item text color"),
-        help=_("Text color to use for draggable items."),
+        help=_("Text color to use for draggable items (example: 'white' or '#ffffff')."),
         scope=Scope.settings,
         default="",
     )
@@ -247,18 +248,17 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
         """
 
         js_templates = loader.load_unicode('/templates/html/js_templates.html')
-        help_texts = {
-            field_name: self.ugettext(field.help)
-            for field_name, field in self.fields.viewitems() if hasattr(field, "help")
-        }
-        field_values = {
-            field_name: field.values
-            for field_name, field in self.fields.viewitems() if hasattr(field, "values")
-        }
+        # Get a 'html_id' string that is unique for this block.
+        # We append it to HTML element ID attributes to ensure multiple instances of the DnDv2 block
+        # on the same page don't share the same ID value.
+        # We avoid using ID attributes in preference to classes, but sometimes we still need IDs to
+        # connect 'for' and 'aria-describedby' attributes to the associated elements.
+        id_suffix = self.location.html_id()  # pylint: disable=no-member
+        js_templates = js_templates.replace('{{id_suffix}}', id_suffix)
         context = {
             'js_templates': js_templates,
-            'help_texts': help_texts,
-            'field_values': field_values,
+            'id_suffix': id_suffix,
+            'fields': self.fields,
             'self': self,
             'data': urllib.quote(json.dumps(self.data)),
         }

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -61,52 +61,78 @@
     position: relative;
 }
 
-.xblock--drag-and-drop--editor .tab::after,
-.xblock--drag-and-drop--editor .tab-footer::after {
+.xblock--drag-and-drop--editor .tab::after {
   content: "";
   display: table;
   clear: both;
 }
 
-.xblock--drag-and-drop--editor .tab h3,
-.xblock--drag-and-drop--editor .tab .h3 {
-    margin: 20px 0 8px 0;
+.xblock--drag-and-drop--editor .tab h3 {
+    font-size: 18px;
 }
 
-.xblock--drag-and-drop--editor .tab .h3 {
+.xblock--drag-and-drop--editor .tab h4,
+.xblock--drag-and-drop--editor .tab .h4 {
     display: block;
-    font: inherit;
-    font-size: 100%;
+    font-size: 16px;
+    margin: 20px 0 8px 0;
 }
 
-.xblock--drag-and-drop--editor .tab .nested-input {
-    display: block;
-    margin-top: 8px;
+.xblock--drag-and-drop--editor .tab .items-form .item .row:first-of-type .h4 {
+    margin-top: 0;
 }
 
 .xblock--drag-and-drop--editor .tab-header,
-.xblock--drag-and-drop--editor .tab-content,
-.xblock--drag-and-drop--editor .tab-footer {
+.xblock--drag-and-drop--editor .tab-content {
     width: 96%;
     margin: 2%;
 }
 
-.xblock--drag-and-drop--editor .tab-footer {
-    height: 25px;
-    position: relative;
-    display: block;
-    float: left;
-}
-
 .xblock--drag-and-drop--editor .items {
     width: calc(100% - 515px);
     margin: 10px 0 0 0;
 }
 
-.xblock--drag-and-drop--editor .target-image-form input,
-.xblock--drag-and-drop--editor .target-image-form textarea {
+.xblock--drag-and-drop--editor .target-image-form input {
     width: 50%;
 }
+.xblock--drag-and-drop--editor .target-image-form textarea {
+    width: 97%;
+}
+
+.xblock--drag-and-drop--editor .target-image-form textarea {
+    display: block;
+}
+
+.xblock--drag-and-drop--editor input,
+.xblock--drag-and-drop--editor textarea {
+    box-sizing: border-box;
+    font-size: 14px;
+    background: #fff;
+    box-shadow: none;
+    padding: 6px 8px;
+    border: 1px solid #b2b2b2;
+    color: #4c4c4c;
+}
+
+.xblock--drag-and-drop--editor label > span {
+    display: inline-block;
+    margin-bottom: 0.25em;
+}
+
+.xblock--drag-and-drop--editor label.checkbox-label {
+    font-size: 14px;
+}
+
+/* Main Tab */
+.xblock--drag-and-drop--editor .feedback-tab input,
+.xblock--drag-and-drop--editor .feedback-tab select {
+    display: block;
+}
+
+.xblock--drag-and-drop--editor .feedback-tab input[type=checkbox] {
+    display: inline-block;
+}
 
 /* Zones Tab */
 .xblock--drag-and-drop--editor .zones-tab .zone-editor {
@@ -122,7 +148,6 @@
   width: 40%;
   max-width: 50%;
   min-width: 330px;
-  margin-right: 15px;
 }
 
 .xblock--drag-and-drop--editor .zones-tab .tab-content .target {
@@ -137,39 +162,57 @@
   max-width: 100%;
 }
 
+.xblock--drag-and-drop--editor .zones-form .zone-row {
+    background-color: #b1d9f1;
+    padding: 1rem;
+    margin-bottom: 2rem;
+}
+
 .xblock--drag-and-drop--editor .zones-form .zone-row label {
+    display: block;
+}
+
+.xblock--drag-and-drop--editor .zones-form .zone-row label > span {
     display: inline-block;
-    width: 18%;
+    font-size: 14px;
+    min-width: 8rem;
 }
 
-.xblock--drag-and-drop--editor .zones-form .zone-row > input {
-    width: 60%;
+.xblock--drag-and-drop--editor .zones-form .zone-row label > input {
+    width: 63%;
     margin: 0 0 5px;
     line-height: 2.664rem;  /* .title gets line-height from a Studio rule that does not apply to .description;
                                here we make sure that both input fields get the same value for line-height */
 }
 
-.xblock--drag-and-drop--editor .zones-form .zone-row .alignment {
-    margin-bottom: 15px;
+.xblock--drag-and-drop--editor .zones-form .zone-row .layout {
+    margin: 2rem 0;
 }
 
+.xblock--drag-and-drop--editor .zones-form .zone-row .layout label {
+    display: inline-block;
+    width: 45%;
+}
+
+.xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-size,
+.xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-coord {
+    width: 35%;
+    line-height: inherit;
+}
 
-.xblock--drag-and-drop--editor .zones-form .zone-row .layout .size,
-.xblock--drag-and-drop--editor .zones-form .zone-row .layout .coord {
-    width: 15%;
-    margin: 0 19px 5px 0;
+.xblock--drag-and-drop--editor .zones-form .zone-row .alignment {
+    margin-bottom: 15px;
 }
 
+
 .xblock--drag-and-drop--editor .feedback-form textarea {
     width: 99%;
     height: 128px;
 }
 
-.xblock--drag-and-drop--editor .zones-form .zones-form-help,
-.xblock--drag-and-drop--editor .target-image-form .target-image-form-help,
-.xblock--drag-and-drop--editor .item-styles-form .item-styles-form-help {
-    margin-top: 5px;
-    font-size: small;
+.xblock--drag-and-drop--editor .form-help {
+    margin: 0.5rem 0 1rem;
+    font-size: 12px;
 }
 
 .xblock--drag-and-drop--editor .item-styles-form,
@@ -178,14 +221,9 @@
 }
 
 .xblock--drag-and-drop--editor .items-form .item {
-    background-color: #8fcaec;
-    padding: 10px 0 1px;
-    margin: 15px 0;
-}
-
-.xblock--drag-and-drop--editor .items-form label,
-.xblock--drag-and-drop--editor .items-form .h3 {
-    margin: 0 1%;
+    background-color: #b1d9f1;
+    padding: 2rem;
+    margin-bottom: 2rem;
 }
 
 .xblock--drag-and-drop--editor .items-form select {
@@ -199,7 +237,6 @@
 .xblock--drag-and-drop--editor .items-form .item-text,
 .xblock--drag-and-drop--editor .items-form .item-image-url {
     width: 50%;
-    margin: 0 1%;
 }
 
 .xblock--drag-and-drop--editor .items-form .item-width {
@@ -208,23 +245,30 @@
 
 .xblock--drag-and-drop--editor .items-form textarea {
     width: 97%;
-    margin: 0 1%;
 }
 
-.xblock--drag-and-drop--editor .items-form .zone-checkbox-label {
-    text-align: left;
-}
-
-.xblock--drag-and-drop--editor .items-form .row {
-    margin-bottom: 20px;
-}
 .xblock--drag-and-drop--editor .items-form .row.advanced {
     display: none;
 }
 .xblock--drag-and-drop--editor .items-form .row.advanced-link {
-    padding-left: 1em;
-    font-size: 80%;
+    font-size: 12px;
+    margin-top: 2em;
+}
+.xblock--drag-and-drop--editor .items-form .row.advanced-link button {
+    background: none;
+    border: none;
+    color: #4c4c4c;
+}
+.xblock--drag-and-drop--editor .items-form .row.advanced-link button:before {
+    content: '\25B6';
+    margin-right: 0.5em;
 }
+.rtl .xblock--drag-and-drop--editor .items-form .row.advanced-link button:before {
+    content: '\25C0';
+    margin-left: 0.5em;
+    margin-right: 0;
+}
+
 .xblock--drag-and-drop-editor .items-form .zone-checkbox-row {
     margin-bottom: 0px;
 }
@@ -238,48 +282,33 @@
     padding: 5px 10px;
 }
 
-.xblock--drag-and-drop--editor .btn:hover {
-    opacity: 0.8;
-    cursor: pointer;
-}
-
+.xblock--drag-and-drop--editor .btn:hover,
 .xblock--drag-and-drop--editor .btn:focus {
-    outline: none;
-    opacity: 0.5;
-}
-
-.xblock--drag-and-drop--editor .add-element {
-    text-decoration: none;
-    color: #1d5280;
-}
-
-.xblock--drag-and-drop--editor .remove-zone {
-    float: right;
-    margin-top: 2px;
-    margin-right: 16px;
+    background-color: #296ba5;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.5);
 }
 
+.xblock--drag-and-drop--editor .remove-zone,
 .xblock--drag-and-drop--editor .remove-item {
     float: right;
-    display: inline-block;
-    margin-right: 16px;
+    padding: 3px;
+    border-radius: 12px;
+}
+.rtl .xblock--drag-and-drop--editor .remove-zone,
+.rtl .xblock--drag-and-drop--editor .remove-item {
+    float: left;
 }
 
 .xblock--drag-and-drop--editor .icon {
     width: 14px;
     height: 14px;
     border-radius: 7px;
-    background-color: #1d5280;
-    position: relative;
-    float: left;
-    margin: 0 5px 0 0;
+    display: inline-block;
 }
 
-.xblock--drag-and-drop--editor .add-zone:hover,
-.xblock--drag-and-drop--editor .add-zone:hover .icon,
-.xblock--drag-and-drop--editor .remove-zone:hover,
-.xblock--drag-and-drop--editor .remove-zone:hover .icon {
-    opacity: 0.7;
+.xblock--drag-and-drop--editor .remove-zone .icon,
+.xblock--drag-and-drop--editor .remove-item .icon {
+    display: block;
 }
 
 .xblock--drag-and-drop--editor .tab .field-error {
@@ -342,12 +371,3 @@
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }
-
-.xblock--drag-and-drop--editor .remove-item .icon.remove {
-    background-color: #fff;
-    color: #0072a7;  /* Override default color from Studio to ensure contrast is large enough */
-}
-.xblock--drag-and-drop--editor .remove-item .icon.remove:before,
-.xblock--drag-and-drop--editor .remove-item .icon.remove:after {
-    background-color: #1d5280;
-}

drag_and_drop_v2/translations/en/LC_MESSAGES/text.po

@@ -90,6 +90,7 @@ msgid "I don't belong anywhere"
 msgstr ""
 
 #: drag_and_drop_v2.py
+#: templates/html/js_templates.html
 msgid "Title"
 msgstr ""
 
@@ -121,7 +122,6 @@ msgid "Assessment"
 msgstr ""
 
 #: drag_and_drop_v2.py
-#: templates/html/drag_and_drop_edit.html
 msgid "Maximum attempts"
 msgstr ""
 
@@ -132,7 +132,6 @@ msgid ""
 msgstr ""
 
 #: drag_and_drop_v2.py
-#: templates/html/drag_and_drop_edit.html
 msgid "Show title"
 msgstr ""
 
@@ -141,16 +140,14 @@ msgid "Display the title to the learner?"
 msgstr ""
 
 #: drag_and_drop_v2.py
-#: templates/html/drag_and_drop_edit.html
 msgid "Problem text"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "The description of the problem or instructions shown to the learner"
+msgid "The description of the problem or instructions shown to the learner."
 msgstr ""
 
 #: drag_and_drop_v2.py
-#: templates/html/drag_and_drop_edit.html
 msgid "Show \"Problem\" heading"
 msgstr ""
 
@@ -159,11 +156,11 @@ msgid "Display the heading \"Problem\" above the problem text?"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "Weight"
+msgid "Maximum score"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "The maximum score the learner can receive for the problem"
+msgid "The maximum score the learner can receive for the problem."
 msgstr ""
 
 #: drag_and_drop_v2.py
@@ -171,7 +168,7 @@ msgid "Item background color"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "The background color of draggable items in the problem."
+msgid "The background color of draggable items in the problem (example: 'blue' or '#0000ff')."
 msgstr ""
 
 #: drag_and_drop_v2.py
@@ -179,7 +176,7 @@ msgid "Item text color"
 msgstr ""
 
 #: drag_and_drop_v2.py
-msgid "Text color to use for draggable items."
+msgid "Text color to use for draggable items (example: 'white' or '#ffffff')."
 msgstr ""
 
 #: drag_and_drop_v2.py
@@ -200,9 +197,33 @@ msgid ""
 msgstr ""
 
 #: drag_and_drop_v2.py
+msgid "Number of attempts learner used"
+msgstr ""
+
+#: drag_and_drop_v2.py
 msgid "Indicates whether a learner has completed the problem at least once"
 msgstr ""
 
+#: drag_and_drop_v2.py
+msgid "Keeps maximum achieved score by student"
+msgstr ""
+
+#: drag_and_drop_v2.py
+msgid "do_attempt handler should only be called for assessment mode"
+msgstr ""
+
+#: drag_and_drop_v2.py
+msgid "Max number of attempts reached"
+msgstr ""
+
+#: drag_and_drop_v2.py
+msgid "Unknown DnDv2 mode {mode} - course is misconfigured"
+msgstr ""
+
+#: templates/html/js_templates.html
+msgid "Remove zone"
+msgstr ""
+
 #: templates/html/js_templates.html
 msgid "Text"
 msgstr ""
@@ -212,7 +233,7 @@ msgid "Description"
 msgstr ""
 
 #: templates/html/js_templates.html
-msgid "Describe this zone to non-visual users"
+msgid "Describe this zone to non-visual users."
 msgstr ""
 
 #: templates/html/js_templates.html
@@ -250,6 +271,10 @@ msgid ""
 msgstr ""
 
 #: templates/html/js_templates.html
+msgid "Remove item"
+msgstr ""
+
+#: templates/html/js_templates.html
 msgid "Zone"
 msgstr ""
 
@@ -258,7 +283,7 @@ msgid "Image URL (alternative to the text)"
 msgstr ""
 
 #: templates/html/js_templates.html
-msgid "For example, http://example.com/image.png or /static/image.png"
+msgid "For example, 'http://example.com/image.png' or '/static/image.png'."
 msgstr ""
 
 #: templates/html/js_templates.html
@@ -280,13 +305,17 @@ msgid "Show advanced settings"
 msgstr ""
 
 #: templates/html/js_templates.html
+msgid "Preferred width"
+msgstr ""
+
+#: templates/html/js_templates.html
 msgid ""
-"Preferred width as a percentage of the background image width (or blank for "
-"automatic width):"
+"Specify preferred width as percentage of the background image width. "
+"Leave blank for automatic width."
 msgstr ""
 
 #: templates/html/js_templates.html
-msgid "Use text that is clear and descriptive of the item to be placed"
+msgid "Use text that is clear and descriptive of the item to be placed."
 msgstr ""
 
 #: templates/html/drag_and_drop.html
@@ -300,18 +329,6 @@ msgid ""
 msgstr ""
 
 #: templates/html/drag_and_drop_edit.html
-msgid "Problem title"
-msgstr ""
-
-#: templates/html/drag_and_drop_edit.html
-msgid "Problem mode"
-msgstr ""
-
-#: templates/html/drag_and_drop_edit.html
-msgid "Maximum score"
-msgstr ""
-
-#: templates/html/drag_and_drop_edit.html
 msgid "Introductory Feedback"
 msgstr ""
 
@@ -319,8 +336,8 @@ msgstr ""
 msgid "Final Feedback"
 msgstr ""
 
-#: templates/html/js_templates.html
 #: templates/html/drag_and_drop_edit.html
+#: templates/html/js_templates.html
 msgid "Zones"
 msgstr ""
 
@@ -330,7 +347,7 @@ msgstr ""
 
 #: templates/html/drag_and_drop_edit.html
 msgid ""
-"For example, http://example.com/background.png or /static/background.png"
+"For example, 'http://example.com/background.png' or '/static/background.png'."
 msgstr ""
 
 #: templates/html/drag_and_drop_edit.html
@@ -354,6 +371,10 @@ msgid ""
 msgstr ""
 
 #: templates/html/drag_and_drop_edit.html
+msgid "Zone definitions"
+msgstr ""
+
+#: templates/html/drag_and_drop_edit.html
 msgid "Zone labels"
 msgstr ""
 
@@ -378,14 +399,6 @@ msgid "Items"
 msgstr ""
 
 #: templates/html/drag_and_drop_edit.html
-msgid "Background color"
-msgstr ""
-
-#: templates/html/drag_and_drop_edit.html
-msgid "Text color"
-msgstr ""
-
-#: templates/html/drag_and_drop_edit.html
 msgid "Add an item"
 msgstr ""
 
@@ -421,6 +434,7 @@ msgstr ""
 msgid "Reset"
 msgstr ""
 
+#: public/js/drag_and_drop.js
 msgid "Submit"
 msgstr ""
 
@@ -470,6 +484,10 @@ msgstr ""
 msgid "An error occurred. Unable to load drag and drop problem."
 msgstr ""
 
+#: public/js/drag_and_drop.js
+msgid "You have used {used} of {total} attempts."
+msgstr ""
+
 #: public/js/drag_and_drop_edit.js
 msgid "There was an error with your form."
 msgstr ""