Commit c1ae9079 authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-56187 theme_boost: Atto fields styling for validation errors

parent 0b8e0c37
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -170,6 +170,8 @@ Y.extend(Editor, Y.Base, {
return;
}
var extraclasses = this.textarea.getAttribute('class');
this._eventHandles = [];
this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" />');
......@@ -178,7 +180,7 @@ Y.extend(Editor, Y.Base, {
'role="textbox" ' +
'spellcheck="true" ' +
'aria-live="off" ' +
'class="{{CSS.CONTENT}}" ' +
'class="{{CSS.CONTENT}} ' + extraclasses + '" ' +
'/>');
this.editor = Y.Node.create(template({
elementid: this.get('elementid'),
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -29,6 +29,11 @@ define(['jquery', 'core/event'], function($, Event) {
event.preventDefault();
var parent = $(element).closest('.form-group');
var feedback = parent.find('.form-control-feedback');
// Sometimes (atto) we have a hidden textarea backed by a real contenteditable div.
if (($(element).prop("tagName") == 'TEXTAREA') && parent.find('[contenteditable]')) {
element = parent.find('[contenteditable]');
}
if (msg !== '') {
parent.addClass('has-danger');
parent.data('client-validation-error', true);
......
......@@ -35,6 +35,10 @@
border-bottom: $border-width solid $table-border-color;
}
.editor_atto_content.form-control {
width: 100%;
}
.mform fieldset.collapsible legend a.fheader {
padding: 0 5px 0 ($spacer * 1.5);
margin-left: -($spacer * 1.5);
......@@ -336,3 +340,15 @@ textarea[data-auto-rows] {
margin-left: $grid-gutter-width / 2;
max-width: 30rem;
}
/** Atto fields do not have form-control because that would break the layout of the editor.
So they need these extra styles to highlight the editor when there is a validation error. */
.has-danger .editor_atto_content.form-control,
.has-danger .editor_atto_content.form-control-danger {
@include form-control-validation($brand-danger);
background-image: $form-icon-danger;
padding-right: ($input-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2);
}
Supports Markdown
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