Skip to content

E
edx-platform
Commit 86f7e3ba by Brian Jacobel
Options

Implement Pattern Library alerts in Discussions 

TNL-5164
parent 6d8c0759
Showing with 147 additions and 115 deletions
common/static/common/js/discussion/utils.js
......@@ -252,33 +252,36 @@
};
DiscussionUtil.formErrorHandler = function(errorsField) {
return function(xhr, textStatus, error) {
var makeErrorElem, response, _i, _len, _ref, _results, $errorItem;
makeErrorElem = function(message) {
return edx.HtmlUtils.setHtml(
$('<li>').addClass('post-error'),
message
return function(xhr) {
var makeErrorElem, response, i, $errorItem;
makeErrorElem = function(message, alertId) {
return edx.HtmlUtils.joinHtml(
edx.HtmlUtils.HTML('<li>'),
edx.HtmlUtils.template(
$('#new-post-alert-template').html()
)({
message: message,
alertId: alertId
}),
edx.HtmlUtils.HTML('</li>')
);
};
errorsField.empty().show();
if (xhr.status === 400) {
response = JSON.parse(xhr.responseText);
if (response.errors) {
_ref = response.errors;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
error = _ref[_i];
$errorItem = makeErrorElem(error);
_results.push(errorsField.append($errorItem));
for (i = 0; i < response.errors.length; i++) {
$errorItem = makeErrorElem(response.errors[i], i);
edx.HtmlUtils.append(errorsField, $errorItem);
}
return _results;
}
} else {
$errorItem = makeErrorElem(
gettext('We had some trouble processing your request. Please try again.')
);
return errorsField.append($errorItem);
$errorItem = makeErrorElem('We had some trouble processing your request. Please try again.', 0);
edx.HtmlUtils.append(errorsField, $errorItem);
}
// Set focus on the first error displayed
$('div[role="alert"]', errorsField).first().focus();
};
};
......
common/static/common/js/spec/discussion/view/response_comment_view_spec.js
......@@ -195,7 +195,7 @@
expect($.ajax.calls.mostRecent().args[0].data.body).toEqual(this.updatedBody);
expect(this.view.model.get('body')).toEqual(originalBody);
expect(this.view.cancelEdit).not.toHaveBeenCalled();
return expect(this.view.$('.edit-comment-form-errors *').length).toEqual(1);
return expect(this.view.$('.edit-comment-form-errors > *').length).toEqual(1);
});
});
});
......
common/static/common/js/spec_helpers/discussion_spec_helper.js
......@@ -74,7 +74,7 @@
templateNames = [
'thread', 'thread-show', 'thread-edit', 'thread-response', 'thread-response-show',
'thread-response-edit', 'response-comment-show', 'response-comment-edit', 'thread-list-item',
'discussion-home', 'search-alert', 'new-post', 'thread-type', 'new-post-menu-entry',
'discussion-home', 'search-alert', 'new-post', 'thread-type', 'new-post-menu-entry', 'new-post-alert',
'new-post-menu-category', 'topic', 'post-user-display', 'inline-discussion', 'pagination',
'profile-thread', 'customwmd-prompt', 'nav-loading'
];
......
common/static/common/templates/discussion/new-post-alert.underscore 0 → 100644
<div class="alert alert-error pattern-library-shim" role="alert" aria-labelledby="alert-title-error-<%- alertId %>" tabindex="-1">
<span class="icon alert-icon fa fa-warning" aria-hidden="true"></span>
<div class="alert-message">
<h3 class="sr-only alert-title" id="alert-title-error-<%- alertId %>">
<%- gettext("Error posting your message.") %>
</h3>
<p class="alert-copy">
<%- gettext(message) %>
</p>
</div>
</div>
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -11,6 +11,11 @@
padding: $baseline;
max-width: 1180px;
.post-errors {
padding: 0 !important;
list-style: none !important;
}
.post-field {
margin-bottom: $baseline;
......@@ -183,23 +188,9 @@
.forum-new-post-form,
.edit-post-form {
.post-errors {
margin-bottom: $baseline;
border-radius: $forum-border-radius;
padding: 0;
background: $error-color;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
color: $white;
margin: 0 0 $baseline 0;
list-style: none;
.post-error {
padding: ($baseline/2) $baseline 12px 45px;
border-bottom: 1px solid $forum-color-error;
background: url('#{$static-path}/images/white-error-icon.png') no-repeat 15px 14px;
&:last-child {
border-bottom: none;
}
}
}
}
......
lms/static/sass/shared/_alerts_pattern_library_shim.scss
......@@ -19,38 +19,49 @@
// #CONFIG
// ----------------------------
// alert colors
$alert-information-color: #6fa0ba;
$alert-warning-color: #fdbc56;
$alert-error-color: #b20610;
$alert-success-color: #25b85a;
$alert-background-color: #fcfcfc;
$alert-icon-color: #fcfcfc;
$alert-border-grey: #cdd7db;
$alert-shadow-grey: #eef1f2;
// alert borders
$alert-border-radius: 0.3125rem;
$alert-border: 0.0625rem solid $alert-border-grey;
// Overrides for other things available in the UXPL but not here
// This is super gross. Don't do this in other places if you can avoid it.
$palette-brand-accent: #2991c3;
$palette-brand-back: #cce3f0;
$palette-warning-accent: #ffc01f;
$palette-warning-back: #fff9eb;
$palette-error-accent: #cb0712;
$palette-error-back: #feeced;
$palette-success-accent: #009b00;
$palette-success-back: #ecfaec;
$palette-grey-accent: #a0a0a0;
$palette-grey-back: #d9d9d9;
$spacing-vertical-xx-small: ($baseline / 4);
$spacing-vertical-x-small: ($baseline / 2);
$spacing-vertical-small: $baseline;
$spacing-horizontal-small: ($baseline / 2);
$spacing-horizontal-base: $baseline;
$font-size-small: 14px;
$bp-screen-md: 768px !default;
// ----------------------------
// #UTILITIES
// ----------------------------
@mixin alert($alert-color) {
border-top: rem(2) solid $alert-color;
@mixin alert($shim-alert-color, $shim-alert-color-glow) {
border: 1px solid $shim-alert-color;
box-shadow: inset 0 0 0 4px $shim-alert-color-glow;
.alert-icon {
color: $alert-icon-color;
background-color: $alert-color;
color: $white;
background-color: $shim-alert-color;
}
}
@mixin alert-message($width) {
@include float(left);
width: $width;
padding: 1.25rem;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
@media (min-width: $bp-screen-md) {
@include float(left);
width: $width;
padding: $spacing-vertical-small;
padding-top: 0;
padding-bottom: 0;
}
:last-child {
// keeps the message compact
......@@ -60,65 +71,104 @@ $alert-border: 0.0625rem solid $alert-border-grey;
// everything below here gets added specificity pattern-library-shim
.pattern-library-shim {
// ----------------------------
// #GENERAL
// ----------------------------
&.alert {
background-color: $alert-background-color;
border: $alert-border;
border-radius: $alert-border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: 1.25rem;
background-color: $white;
border: 1px solid $palette-grey-accent;
padding: $spacing-vertical-small $spacing-horizontal-base;
box-shadow: inset 0 0 0 4px $palette-grey-back;
overflow: auto;
box-shadow: 0 rem(2) rem(2) 0 $alert-shadow-grey;
&.alert-slim {
padding: $spacing-vertical-x-small;
.alert-message {
padding: $spacing-vertical-small $spacing-horizontal-base;
font-size: $font-size-small;
.copy {
margin-bottom: 0;
}
}
}
&.alert-tiny {
padding: $spacing-vertical-x-small;
.alert-message {
padding: $spacing-vertical-x-small $spacing-horizontal-small;
font-size: $font-size-small;
.copy {
margin-bottom: 0;
.icon {
display: inline-block;
margin-right: $baseline;
}
}
}
}
}
&.alert-icon {
@include float(left);
display: block;
.alert-icon {
// hide icons on small screens
display: none;
// create a circle around the icon
border-radius: 50%;
@media (min-width: $bp-screen-md) {
@include float(left);
display: block;
// create room around the icon for the circle
padding: 0.625rem;
// create a circle around the icon
border-radius: 50%;
// create room around the icon for the circle
padding: $spacing-vertical-x-small;
}
}
&.alert-message-with-action {
.alert-message-with-action {
// provide room for the action to be displayed next to the alert message
@include alert-message(70%);
}
&.alert-message {
.alert-message {
@include alert-message(90%);
}
&.alert-title {
.alert-title {
@extend %hd-5;
@extend %headings-emphasized;
// shift the section up to make the alert more compact
margin-top: -0.625rem;
@media (min-width: $bp-screen-md) {
// shift the section up to make the alert more compact
margin-top: - $spacing-vertical-x-small;
}
}
&.alert-copy {
.alert-copy {
@extend %copy-base;
// shift the message down to be in line with the icon
margin-top: 0.3125rem;
@media (min-width: $bp-screen-md) {
// shift the message down to be in line with the icon
margin-top: $spacing-vertical-xx-small;
}
}
&.alert-copy-with-title {
.alert-copy-with-title {
@extend %copy-base;
}
&.alert-action {
@include float(right);
width: inherit;
.alert-action {
width: 100%;
@media (min-width: $bp-screen-md) {
@include float(right);
width: inherit;
}
}
// ----------------------------
......@@ -127,46 +177,21 @@ $alert-border: 0.0625rem solid $alert-border-grey;
// information-based alert
&.alert-information {
@include alert($alert-information-color);
@include alert($palette-brand-accent, $palette-brand-back);
}
// warning-based alert
&.alert-warning {
@include alert($alert-warning-color);
@include alert($palette-warning-accent, $palette-warning-back);
}
// error-based alert
&.alert-error {
@include alert($alert-error-color);
@include alert($palette-error-accent, $palette-error-back);
}
// success-based alert
&.alert-success {
@include alert($alert-success-color);
}
// added from _icons.scss
&.icon {
display: inline-block;
height: auto;
width: auto;
font-family: FontAwesome;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&.icon-bullhorn:before {
content: "\f0a1";
}
// handles negative margin on navigation bar
&.subsection-header {
margin-top: -4px;
margin-bottom: 14px;
@include alert($palette-success-accent, $palette-success-back);
}
}
lms/templates/discussion/_underscore_templates.html
......@@ -15,8 +15,8 @@
template_names = [
'thread', 'thread-show', 'thread-edit', 'thread-response', 'thread-response-show', 'thread-response-edit',
'response-comment-show', 'response-comment-edit', 'thread-list-item', 'discussion-home', 'search-alert',
'new-post', 'thread-type', 'new-post-menu-entry', 'new-post-menu-category', 'topic', 'post-user-display',
'inline-discussion', 'pagination', 'profile-thread', 'customwmd-prompt', 'nav-loading'
'new-post', 'new-post-menu-entry', 'new-post-menu-category', 'new-post-alert', 'topic', 'post-user-display',
'inline-discussion', 'pagination', 'profile-thread', 'customwmd-prompt', 'nav-loading', 'thread-type'
]
## same, but without trailing "-template" in script ID - these templates does not contain any free variables
......
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