Add support for page banner status messages

LEARNER-1890
This commit is contained in:
Andy Armstrong
2017-07-14 10:33:47 -04:00
parent febf2a07ae
commit a077a5e364
19 changed files with 1379 additions and 35 deletions

View File

@@ -388,7 +388,7 @@ class SelfPacedCourseInfoTestCase(LoginEnrollmentTestCase, SharedModuleStoreTest
self.assertEqual(resp.status_code, 200)
def test_num_queries_instructor_paced(self):
self.fetch_course_info_with_queries(self.instructor_paced_course, 22, 3)
self.fetch_course_info_with_queries(self.instructor_paced_course, 25, 3)
def test_num_queries_self_paced(self):
self.fetch_course_info_with_queries(self.self_paced_course, 22, 3)
self.fetch_course_info_with_queries(self.self_paced_course, 25, 3)

View File

@@ -18,6 +18,7 @@
@import 'edx-pattern-library-shims/buttons';
// base - elements
@import 'elements/banners';
@import 'elements/controls';
@import 'elements/creative-commons';
@import 'elements/icons';

View File

@@ -0,0 +1,19 @@
// Open edX: components
// ====================
// Page banner
.page-banner {
max-width: $lms-max-width;
margin: 0 auto;
.user-messages {
margin-top: $baseline;
}
}
// Alerts
.alert {
.icon-alert {
margin-right: $baseline / 4;
}
}

View File

@@ -13,3 +13,4 @@
@import 'footer';
@import 'navigation';
@import 'layouts';
@import 'components';

View File

@@ -44,3 +44,50 @@ $full-width-banner-margin: 20px;
right: $full-width-banner-margin;
}
}
.page-banner {
max-width: $lms-max-width;
margin: 0 auto;
.user-messages {
padding-top: $baseline;
}
.alert {
margin-bottom: $baseline !important;
padding: $baseline;
border: 1px solid;
.icon-alert {
margin-right: $baseline / 4;
}
&.alert-info {
color: $state-info-text;
background-color: $state-info-bg;
border-color: $state-info-border;
box-shadow: none;
}
&.alert-success {
color: $state-success-text;
background-color: $state-success-bg;
border-color: $state-success-border;
box-shadow: none;
}
&.alert-warning {
color: $state-warning-text;
background-color: $state-warning-bg;
border-color: $state-warning-border;
box-shadow: none;
}
&.alert-danger {
color: $state-danger-text;
background-color: $state-danger-bg;
border-color: $state-danger-border;
box-shadow: none;
}
}
}

View File

@@ -220,6 +220,26 @@ $alert-color: rgb(212, 64, 64) !default;
$success-color: rgb(0, 155, 0) !default;
$success-color-hover: rgb(0, 129, 0) !default;
// ----------------------------
// #COLORS- Bootstrap-style
// ----------------------------
$state-success-text: $black !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
$state-info-text: $black !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-warning-text: $black !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-danger-text: $black !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;
// ----------------------------
// #COLORS- EDX-SPECIFIC
// ----------------------------

View File

@@ -89,6 +89,48 @@
}
}
.page-banner {
max-width: $lms-max-width;
margin: 0 auto;
.alert {
margin-top: $baseline;
border: 1px solid;
.icon-alert {
margin-right: $baseline / 4;
}
&.alert-info {
color: $state-info-text;
background-color: $state-info-bg;
border-color: $state-info-border;
box-shadow: none;
}
&.alert-success {
color: $state-success-text;
background-color: $state-success-bg;
border-color: $state-success-border;
box-shadow: none;
}
&.alert-warning {
color: $state-warning-text;
background-color: $state-warning-bg;
border-color: $state-warning-border;
box-shadow: none;
}
&.alert-danger {
color: $state-danger-text;
background-color: $state-danger-bg;
border-color: $state-danger-border;
box-shadow: none;
}
}
}
.wrapper-preview-menu {
@include clearfix();
@include box-sizing(border-box);

View File

@@ -62,3 +62,23 @@ $lms-dark-icon-background-color: palette(grayscale, black) !default;
$site-status-color: rgb(182,37,103) !default;
$shadow-l1: rgba(0,0,0,0.1) !default;
// ----------------------------
// #ALERTS
// ----------------------------
$state-success-text: $black !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
$state-info-text: $black !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-warning-text: $black !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-danger-text: $black !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;

View File

@@ -141,6 +141,8 @@ from pipeline_mako import render_require_js_path_overrides
<%include file="/preview_menu.html" />
% endif
<%include file="/page_banner.html" />
<div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content">
${self.body()}
<%block name="bodyextra"/>

View File

@@ -0,0 +1,24 @@
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
<%!
from django.utils.translation import ugettext as _
from openedx.core.djangolib.markup import HTML
from openedx.core.djangoapps.util.user_messages import user_messages
%>
% if user_messages:
<div class="page-banner">
<div class="user-messages">
% for message in user_messages(request):
<div class="alert ${message.css_class}" role="alert">
<span class="icon icon-alert fa ${message.icon_class}" aria-hidden="true"></span>
${HTML(message.message_html)}
</div>
% endfor
</div>
</div>
% endif

View File

@@ -1,3 +1,5 @@
## mako
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/lms-main.css" %>

View File

@@ -1,5 +1,4 @@
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
## mako
<%page expression_filter="h"/>
<%inherit file="/main.html" />
@@ -18,10 +17,14 @@
<h2>UX Style Reference</h2>
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
<h3>Page Types</h3>
<h3>v1-style LMS Pages</h3>
<ul>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li>
<li><a href="course-skeleton.html">Course skeleton page</a></li>
<li><a href="v1/course-skeleton.html">Course skeleton page</a></li>
</ul>
<h3>Pattern Library</h3>
<ul>
<li><a href="pattern-library/course-skeleton.html">Course skeleton page</a></li>
</ul>
<h3>Bootstrap</h3>

View File

@@ -1,24 +0,0 @@
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/>
<%inherit file="/main.html" />
<%block name="pagetitle">Pattern Library Test</%block>
<%block name="nav_skip">#content</%block>
<%block name="bodyclass">pattern-library</%block>
<%block name="content">
<h1>Pattern Library test page</h1>
<div class="alert alert-warning" role="alert" tabindex="-1">
<span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<div class="alert-message">
<p class="alert-copy">
Interesting pattern library content to come...
</p>
</div>
</div>
</%block>

View File

@@ -1,3 +1,5 @@
## mako
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>

File diff suppressed because one or more lines are too long

View File

@@ -998,7 +998,10 @@ if settings.DEBUG:
settings.PROFILE_IMAGE_BACKEND['options']['base_url'],
document_root=settings.PROFILE_IMAGE_BACKEND['options']['location']
)
# TODO: re-enable this after removing the URL below
# urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template')
# TODO: DO NOT MERGE
urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
if 'debug_toolbar' in settings.INSTALLED_APPS: