Skip to content

X
xblock-drag-and-drop-v2
Commit 883e332e by Matjaz Gregoric Committed by Tim Krones
Options

Address review notes.

parent 17334d9b
Showing with 38 additions and 47 deletions
drag_and_drop_v2/drag_and_drop_v2.py
...@@ -255,19 +255,10 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin): ...@@ -255,19 +255,10 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
# connect 'for' and 'aria-describedby' attributes to the associated elements. # connect 'for' and 'aria-describedby' attributes to the associated elements.
id_suffix = uuid.uuid4().hex[:16] id_suffix = uuid.uuid4().hex[:16]
js_templates = js_templates.replace('{{id_suffix}}', id_suffix) js_templates = js_templates.replace('{{id_suffix}}', id_suffix)
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")
}
context = { context = {
'js_templates': js_templates, 'js_templates': js_templates,
'help_texts': help_texts,
'field_values': field_values,
'id_suffix': id_suffix, 'id_suffix': id_suffix,
'fields': self.fields,
'self': self, 'self': self,
'data': urllib.quote(json.dumps(self.data)), 'data': urllib.quote(json.dumps(self.data)),
} }
......
drag_and_drop_v2/public/css/drag_and_drop_edit.css
...@@ -176,8 +176,8 @@ ...@@ -176,8 +176,8 @@
width: 40%; width: 40%;
} }
.xblock--drag-and-drop--editor .zones-form .zone-row .layout .size, .xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-size,
.xblock--drag-and-drop--editor .zones-form .zone-row .layout .coord { .xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-coord {
width: 35%; width: 35%;
margin: 0 19px 5px 0; margin: 0 19px 5px 0;
line-height: inherit; line-height: inherit;
......
drag_and_drop_v2/public/js/drag_and_drop_edit.js
...@@ -354,19 +354,19 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -354,19 +354,19 @@ function DragAndDropEditBlock(runtime, element, params) {
var $changedInput = $(ev.currentTarget); var $changedInput = $(ev.currentTarget);
var $row = $changedInput.closest('.zone-row'); var $row = $changedInput.closest('.zone-row');
var record = _fn.build.form.zone.getZoneObjByUID(String($row.data('uid'))); var record = _fn.build.form.zone.getZoneObjByUID(String($row.data('uid')));
if ($changedInput.hasClass('title')) { if ($changedInput.hasClass('zone-title')) {
record.title = $changedInput.val(); record.title = $changedInput.val();
} else if ($changedInput.hasClass('width')) { } else if ($changedInput.hasClass('zone-width')) {
record.width = $changedInput.val(); record.width = $changedInput.val();
} else if ($changedInput.hasClass('description')) { } else if ($changedInput.hasClass('zone-description')) {
record.description = $changedInput.val(); record.description = $changedInput.val();
} else if ($changedInput.hasClass('height')) { } else if ($changedInput.hasClass('zone-height')) {
record.height = $changedInput.val(); record.height = $changedInput.val();
} else if ($changedInput.hasClass('x')) { } else if ($changedInput.hasClass('zone-x')) {
record.x = $changedInput.val(); record.x = $changedInput.val();
} else if ($changedInput.hasClass('y')) { } else if ($changedInput.hasClass('zone-y')) {
record.y = $changedInput.val(); record.y = $changedInput.val();
} else if ($changedInput.hasClass('align-select')) { } else if ($changedInput.hasClass('zone-align-select')) {
record.align = $changedInput.val(); record.align = $changedInput.val();
} }
_fn.build.form.zone.renderZonesPreview(); _fn.build.form.zone.renderZonesPreview();
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
...@@ -13,32 +13,32 @@ ...@@ -13,32 +13,32 @@
<section class="tab-content"> <section class="tab-content">
<form class="feedback-form"> <form class="feedback-form">
<label class="h3"> <label class="h3">
<span>{% trans self.fields.display_name.display_name %}</span> <span>{% trans fields.display_name.display_name %}</span>
<input class="display-name" value="{{ self.display_name }}" /> <input class="display-name" value="{{ self.display_name }}" />
</label> </label>
<label title="{{ help_texts.show_title }}"> <label title="{% trans fields.show_title.help %}">
<input class="show-title" type="checkbox" <input class="show-title" type="checkbox"
{% if self.show_title %}checked="checked"{% endif %}> {% if self.show_title %}checked="checked"{% endif %}>
{% trans self.fields.show_title.display_name %} {% trans fields.show_title.display_name %}
<span class="sr">{{ help_texts.show_title }}</span> <span class="sr">{% trans fields.show_title.help %}</span>
</label> </label>
<label class="h3"> <label class="h3">
<span>{% trans self.fields.mode.display_name %}</span> <span>{% trans fields.mode.display_name %}</span>
<select class="problem-mode" aria-describedby="problem-mode-description-{{id_suffix}}"> <select class="problem-mode" aria-describedby="problem-mode-description-{{id_suffix}}">
{% for field_value in field_values.mode %} {% for field_value in fields.mode.values %}
<option value="{{ field_value.value }}" {% if self.mode == field_value.value %}selected{% endif %}> <option value="{{ field_value.value }}" {% if self.mode == field_value.value %}selected{% endif %}>
{{ field_value.display_name }} {% trans field_value.display_name %}
</option> </option>
{% endfor %} {% endfor %}
</select> </select>
</label> </label>
<div id="problem-mode-description-{{id_suffix}}" class="form-help"> <div id="problem-mode-description-{{id_suffix}}" class="form-help">
{{ help_texts.mode }} {% trans fields.mode.help %}
</div> </div>
<label class="h3 assessment-setting"> <label class="h3 assessment-setting">
{% trans self.fields.max_attempts.display_name %} {% trans fields.max_attempts.display_name %}
<input class="max-attempts" <input class="max-attempts"
type="number" type="number"
min="1" min="1"
...@@ -47,16 +47,16 @@ ...@@ -47,16 +47,16 @@
{% if self.max_attempts %}value="{{ self.max_attempts }}"{% endif %} /> {% if self.max_attempts %}value="{{ self.max_attempts }}"{% endif %} />
</label> </label>
<div id="max-attempts-description-{{id_suffix}}" class="assessment-setting form-help"> <div id="max-attempts-description-{{id_suffix}}" class="assessment-setting form-help">
{{ help_texts.max_attempts }} {% trans fields.max_attempts.help %}
</div> </div>
<label class="h3"> <label class="h3">
<span>{% trans self.fields.weight.display_name %}</span> <span>{% trans fields.weight.display_name %}</span>
<input class="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" /> <input class="weight" type="number" step="0.1" value="{{ self.weight|unlocalize }}" />
</label> </label>
<label class="h3"> <label class="h3">
<span>{% trans self.fields.question_text.display_name %}</span> <span>{% trans fields.question_text.display_name %}</span>
<textarea class="problem-text">{{ self.question_text }}</textarea> <textarea class="problem-text">{{ self.question_text }}</textarea>
</label> </label>
<label> <label>
...@@ -64,10 +64,10 @@ ...@@ -64,10 +64,10 @@
type="checkbox" type="checkbox"
aria-describedby="show-problem-header-description-{{id_suffix}}" aria-describedby="show-problem-header-description-{{id_suffix}}"
{% if self.show_question_header %}checked="checked"{% endif %}> {% if self.show_question_header %}checked="checked"{% endif %}>
{% trans self.fields.show_question_header.display_name %} {% trans fields.show_question_header.display_name %}
</label> </label>
<div id="show-problem-header-description-{{id_suffix}}" class="form-help"> <div id="show-problem-header-description-{{id_suffix}}" class="form-help">
{{ help_texts.show_question_header }} {% trans fields.show_question_header.help %}
</div> </div>
<label class="h3"> <label class="h3">
...@@ -150,24 +150,24 @@ ...@@ -150,24 +150,24 @@
<section class="tab-content"> <section class="tab-content">
<form class="item-styles-form"> <form class="item-styles-form">
<label class="h3"> <label class="h3">
<span>{% trans self.fields.item_background_color.display_name %}</span> <span>{% trans fields.item_background_color.display_name %}</span>
<input class="item-background-color" <input class="item-background-color"
placeholder="e.g. blue or #0000ff" placeholder="{% blocktrans with example1='blue' example2='#0000ff' %}e.g. {{example1}} or {{example2}}{% endblocktrans %}"
value="{{ self.item_background_color }}" value="{{ self.item_background_color }}"
aria-describedby="item-background-color-description-{{id_suffix}}"> aria-describedby="item-background-color-description-{{id_suffix}}">
</label> </label>
<div id="item-background-color-description-{{id_suffix}}" class="form-help"> <div id="item-background-color-description-{{id_suffix}}" class="form-help">
{{ help_texts.item_background_color }} {% trans fields.item_background_color.help %}
</div> </div>
<label class="h3"> <label class="h3">
<span>{% trans self.fields.item_text_color.display_name %}</span> <span>{% trans fields.item_text_color.display_name %}</span>
<input class="item-text-color" <input class="item-text-color"
placeholder="e.g. white or #ffffff" placeholder="{% blocktrans with example1='white' example2='#ffffff' %}e.g. {{example1}} or {{example2}}{% endblocktrans %}"
value="{{ self.item_text_color}}" value="{{ self.item_text_color}}"
aria-describedby="item-text-color-description-{{id_suffix}}"> aria-describedby="item-text-color-description-{{id_suffix}}">
</label> </label>
<div id="item-text-color-description-{{id_suffix}}" class="form-help"> <div id="item-text-color-description-{{id_suffix}}" class="form-help">
{{ help_texts.item_text_color }} {% trans fields.item_text_color.help %}
</div> </div>
</form> </form>
</section> </section>
......
drag_and_drop_v2/templates/html/js_templates.html
...@@ -15,16 +15,16 @@ ...@@ -15,16 +15,16 @@
<div class="icon remove"></div> <div class="icon remove"></div>
</a> </a>
<label> <label>
<span>{{i18n "Text"}}</span> <span>{{i18n "Title"}}</span>
<input type="text" <input type="text"
class="title" class="zone-title"
value="{{ zone.title }}" value="{{ zone.title }}"
required /> required />
</label> </label>
<label> <label>
<span>{{i18n "Description"}}</span> <span>{{i18n "Description"}}</span>
<input type="text" <input type="text"
class="description" class="zone-description"
value="{{ zone.description }}" value="{{ zone.description }}"
placeholder="{{i18n 'Describe this zone to non-visual users'}}" placeholder="{{i18n 'Describe this zone to non-visual users'}}"
required /> required />
...@@ -33,33 +33,33 @@ ...@@ -33,33 +33,33 @@
<label> <label>
<span>{{i18n "width"}}</span> <span>{{i18n "width"}}</span>
<input type="text" <input type="text"
class="size width" class="zone-size zone-width"
value="{{ zone.width }}" /> value="{{ zone.width }}" />
</label> </label>
<label> <label>
<span>{{i18n "height"}}</span> <span>{{i18n "height"}}</span>
<input type="text" <input type="text"
class="size height" class="zone-size zone-height"
value="{{ zone.height }}" /> value="{{ zone.height }}" />
</label> </label>
<br /> <br />
<label> <label>
<span>x</span> <span>x</span>
<input type="text" <input type="text"
class="coord x" class="zone-coord zone-x"
value="{{ zone.x }}" /> value="{{ zone.x }}" />
</label> </label>
<label> <label>
<span>y</span> <span>y</span>
<input type="text" <input type="text"
class="coord y" class="zone-coord zone-y"
value="{{ zone.y }}" /> value="{{ zone.y }}" />
</label> </label>
</div> </div>
<div class="alignment"> <div class="alignment">
<label> <label>
<span>{{i18n "Alignment"}}</span> <span>{{i18n "Alignment"}}</span>
<select class="align-select" <select class="zone-align-select"
aria-describedby="zone-align-description-{{zone.uid}}-{{id_suffix}}"> aria-describedby="zone-align-description-{{zone.uid}}-{{id_suffix}}">
<option value="" <option value=""
{{#ifeq zone.align ""}}selected{{/ifeq}}> {{#ifeq zone.align ""}}selected{{/ifeq}}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment