Commit fc32eedb authored by Rebecca Blundell's avatar Rebecca Blundell

Bug 1635503: Styling changes to json editor

Changes needed after bootstrap 4 merged
Changes to default styling of JSON editor that we want to customise

behatnotneeded

Change-Id: I3358d92c64056e02ad4e976fa79b7f73d3cedb54
parent 38d56377
...@@ -63,7 +63,7 @@ function refresh_editor() { ...@@ -63,7 +63,7 @@ function refresh_editor() {
"title" : get_string('description'), "title" : get_string('description'),
"format" : "textarea", "format" : "textarea",
"default" : get_string('defaultdescription'), "default" : get_string('defaultdescription'),
"description" : get_string('descriptioninfo') "description" : get_string('descriptioninfo'),
}, },
"selfassess" : { "selfassess" : {
"type" : "boolean", "type" : "boolean",
...@@ -235,12 +235,18 @@ function refresh_editor() { ...@@ -235,12 +235,18 @@ function refresh_editor() {
$(".json-editor-btn-add").eq(2).attr("id", "add_standard"); $(".json-editor-btn-add").eq(2).attr("id", "add_standard");
$(".json-editor-btn-add").eq(4).attr("id", "add_standardelement"); $(".json-editor-btn-add").eq(4).attr("id", "add_standardelement");
//creating ids for adding wysiwyg - not currently active: @TODO //creating ids for adding wysiwyg - not currently active: @TODO
$("div.form-group textarea.form-control").eq(0).attr("id", "title_textarea"); $("div.form-group textarea.form-control").eq(0).attr("id", "title_desc_textarea");
$("div.form-group textarea.form-control").eq(1).attr("id", "std_textarea"); $("div.form-group textarea.form-control").eq(2).attr("id", "std_desc_textarea");
$("div.form-group textarea.form-control").eq(2).attr("id", "std_element_textarea"); $("div.form-group textarea.form-control").eq(4).attr("id", "std_element_desc_textarea");
//make text same as rest of site
$("div.form-group p.form-text").addClass("description");
$("div.form-group form-control-label").addClass("label");
//add class for correct styling of help block text //add class for correct styling of help block text
$("[data-schemaid=\"standards\"] >p").addClass("help-block"); $("[data-schemaid=\"standards\"] >p").addClass("help-block");
$("[data-schemaid=\"evidencestatuses\"] >p").addClass("help-block"); $("[data-schemaid=\"evidencestatuses\"] >p").addClass("help-block");
//set min row height for desc fields to 6
$("textarea[id$='_desc_textarea']").attr('rows', '6');
textarea_init();
$("#add_standard").click(function() { $("#add_standard").click(function() {
standard_count += 1; standard_count += 1;
...@@ -260,10 +266,8 @@ function refresh_editor() { ...@@ -260,10 +266,8 @@ function refresh_editor() {
se_count = 1; se_count = 1;
var se_eid_field = editor.getEditor("root.standardelements." + se_index + ".elementid"); var se_eid_field = editor.getEditor("root.standardelements." + se_index + ".elementid");
se_eid_field.setValue(se_count); se_eid_field.setValue(se_count);
$('div.form-group textarea.form-control').on('click', function () { textarea_init();
textarea_autoexpand(this); });
});
});
$("#add_standardelement").click(function() { $("#add_standardelement").click(function() {
se_count ++; se_count ++;
...@@ -275,9 +279,7 @@ function refresh_editor() { ...@@ -275,9 +279,7 @@ function refresh_editor() {
var eid_field = editor.getEditor("root.standardelements." + se_index + ".elementid"); var eid_field = editor.getEditor("root.standardelements." + se_index + ".elementid");
//@TODO: change this display to reflect the data //@TODO: change this display to reflect the data
eid_field.setValue(se_count); eid_field.setValue(se_count);
$('div.form-group textarea.form-control').on('click', function () { textarea_init();
textarea_autoexpand(this);
});
}); });
} }
...@@ -292,14 +294,20 @@ function refresh_editor() { ...@@ -292,14 +294,20 @@ function refresh_editor() {
var evidence_type = ['begun' ,'incomplete', 'partialcomplete', 'completed']; var evidence_type = ['begun' ,'incomplete', 'partialcomplete', 'completed'];
//make textarea expand with text //make textarea expand with text
$("div.form-group textarea.form-control").on('click input', function () { function textarea_init() {
textarea_autoexpand(this); $('div.form-group textarea[name$="description\]"]').each(function() {
}); $(this).off('click input');
$(this).on('click input', function() {
textarea_autoexpand(this);
})
textarea_autoexpand(this);
});
}
function textarea_autoexpand(element) { function textarea_autoexpand(element) {
element.setAttribute('style', 'height:' + (element.scrollHeight) + 'px;overflow-y:hidden;'); element.setAttribute('style', 'height:' + (element.scrollHeight) + 'px;overflow-y:hidden;');
element.style.height = 'auto'; element.style.height = 'auto';
element.style.minHeight = '64px'; element.style.minHeight = '148px';
element.style.maxHeight = '800px';
element.style.height = (element.scrollHeight) + 'px'; element.style.height = (element.scrollHeight) + 'px';
} }
...@@ -317,6 +325,7 @@ function refresh_editor() { ...@@ -317,6 +325,7 @@ function refresh_editor() {
index = Object.keys(fwe[select_index]); index = Object.keys(fwe[select_index]);
index = index[0]; index = index[0];
populate_editor(index, edit); populate_editor(index, edit);
textarea_init();
}); });
//choose from copy dropdown. //choose from copy dropdown.
...@@ -332,6 +341,7 @@ function refresh_editor() { ...@@ -332,6 +341,7 @@ function refresh_editor() {
index = Object.keys(fwc[select_index]); index = Object.keys(fwc[select_index]);
index = index[0]; index = index[0];
populate_editor(index); populate_editor(index);
textarea_init();
}); });
// Manage button - goes to fw screen // Manage button - goes to fw screen
...@@ -383,9 +393,7 @@ function refresh_editor() { ...@@ -383,9 +393,7 @@ function refresh_editor() {
var ed = editor.getEditor("root." + k); var ed = editor.getEditor("root." + k);
if (ed) { if (ed) {
if (k === 'description') { if (k === 'description') {
$('div.form-group textarea.form-control').on('click', function () { textarea_init();
textarea_autoexpand(this);
});
ed.setValue(value) ed.setValue(value)
//@TODO wysiwyg editing: //@TODO wysiwyg editing:
//tinyMCE will display this field correctly, but then I can't save. //tinyMCE will display this field correctly, but then I can't save.
...@@ -412,9 +420,7 @@ function refresh_editor() { ...@@ -412,9 +420,7 @@ function refresh_editor() {
var std_ed = editor.getEditor("root.standards"); var std_ed = editor.getEditor("root.standards");
std_ed.addRow(); std_ed.addRow();
standard_count += 1; standard_count += 1;
$('div.form-group textarea.form-control').on('click', function () { textarea_init();
textarea_autoexpand(this);
});
} }
//this makes an array with the 0 index empty and the db std ids matched with the index //this makes an array with the 0 index empty and the db std ids matched with the index
//of their standard number. //of their standard number.
...@@ -473,9 +479,7 @@ function refresh_editor() { ...@@ -473,9 +479,7 @@ function refresh_editor() {
var se = editor.getEditor("root.standardelements"); var se = editor.getEditor("root.standardelements");
if (count > 0) { if (count > 0) {
se.addRow(); se.addRow();
$('div.form-group textarea.form-control').on('click', function () { textarea_init();
textarea_autoexpand(this);
});
} }
//each value from a standard element //each value from a standard element
$.each(value, function (k,value ) { $.each(value, function (k,value ) {
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
{$copy_desc}</div> {$copy_desc}</div>
</div> </div>
<span id='valid_indicator'></span> <span id='valid_indicator'></span>
{* the json editor form is all in 'editor_holder' *}
<div id='editor_holder'></div> <div id='editor_holder'></div>
<div id="delete_submit_container_end" class=" default submitcancel form-group"> <div id="delete_submit_container_end" class=" default submitcancel form-group">
<button type="submit" class="btn-primary submitcancel submit btn" name="submit" tabindex="0"> <button type="submit" class="btn-primary submitcancel submit btn" name="submit" tabindex="0">
......
...@@ -800,19 +800,21 @@ a[type="submit"], ...@@ -800,19 +800,21 @@ a[type="submit"],
// Backup for libraries that still need hidden class instead of bootstrap 4s new .d-none // Backup for libraries that still need hidden class instead of bootstrap 4s new .d-none
.hidden { .hidden {
display: none; display: none;
}
//used for Smart Evidence json-editor //used for Smart Evidence json-editor
#editor_holder .well { #editor_holder .bg-light {
background: #FFF !important; background-color: #FFF !important;
} }
div.form-group .control-label { div.form-group .form-control-label {
vertical-align: top; vertical-align: top;
} }
//@TODO - doesn't work -why? .btn-group {
//[class^="json-editor-btn-"] {
.json-editor-btntype-properties span {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
} }
}
\ No newline at end of file .json_editor_btn_add .btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
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