diff --git a/cms/envs/common.py b/cms/envs/common.py index 71389ff714..dc65e725e1 100644 --- a/cms/envs/common.py +++ b/cms/envs/common.py @@ -568,19 +568,29 @@ PIPELINE_CSS = { ], 'output_filename': 'css/cms-style-vendor-tinymce-skin.css', }, - 'style-main': { - # this is unnecessary and can be removed + 'style-main-v1': { 'source_filenames': [ - 'css/studio-main.css', + 'css/studio-main-v1.css', ], - 'output_filename': 'css/studio-main.css', + 'output_filename': 'css/studio-main-v1.css', }, - 'style-main-rtl': { - # this is unnecessary and can be removed + 'style-main-v1-rtl': { 'source_filenames': [ - 'css/studio-main-rtl.css', + 'css/studio-main-v1-rtl.css', ], - 'output_filename': 'css/studio-main-rtl.css', + 'output_filename': 'css/studio-main-v1-rtl.css', + }, + 'style-main-v2': { + 'source_filenames': [ + 'css/studio-main-v2.css', + ], + 'output_filename': 'css/studio-main-v2.css', + }, + 'style-main-v2-rtl': { + 'source_filenames': [ + 'css/studio-main-v2-rtl.css', + ], + 'output_filename': 'css/studio-main-v2-rtl.css', }, 'style-edx-icons': { 'source_filenames': [ diff --git a/cms/static/sass/_build.scss b/cms/static/sass/_build-v1.scss similarity index 98% rename from cms/static/sass/_build.scss rename to cms/static/sass/_build-v1.scss index 57a133fa83..f6770f4b9b 100644 --- a/cms/static/sass/_build.scss +++ b/cms/static/sass/_build-v1.scss @@ -1,5 +1,6 @@ // ------------------------------ // Studio: Shared Build Compile +// Version 1 styling (pre-Pattern Library) // About: Sass compile for Studio that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the studio-main-*.scss files. diff --git a/cms/static/sass/_build-v2.scss b/cms/static/sass/_build-v2.scss new file mode 100644 index 0000000000..2a032042f6 --- /dev/null +++ b/cms/static/sass/_build-v2.scss @@ -0,0 +1,9 @@ +// ------------------------------ +// Studio: Shared Build Compile +// Version 2 - introduces the Pattern Library + + +// Configuration +@import 'config'; + +// Extensions diff --git a/cms/static/sass/_config.scss b/cms/static/sass/_config.scss new file mode 100644 index 0000000000..a1c263754b --- /dev/null +++ b/cms/static/sass/_config.scss @@ -0,0 +1,7 @@ +// ------------------------------ +// Studio configuration settings + + +// ------------------------------ +// #VARIABLES +// ------------------------------ diff --git a/cms/static/sass/studio-main-rtl.scss b/cms/static/sass/studio-main-v1-rtl.scss similarity index 88% rename from cms/static/sass/studio-main-rtl.scss rename to cms/static/sass/studio-main-v1-rtl.scss index 7bd76516bb..83150f3607 100644 --- a/cms/static/sass/studio-main-rtl.scss +++ b/cms/static/sass/studio-main-v1-rtl.scss @@ -17,4 +17,4 @@ @import 'bourbon/bourbon'; // lib - bourbon @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages -@import 'build'; // shared app style assets/rendering +@import 'build-v1'; // shared app style assets/rendering diff --git a/cms/static/sass/studio-main.scss b/cms/static/sass/studio-main-v1.scss similarity index 76% rename from cms/static/sass/studio-main.scss rename to cms/static/sass/studio-main-v1.scss index 00db34fabe..4c40522015 100644 --- a/cms/static/sass/studio-main.scss +++ b/cms/static/sass/studio-main-v1.scss @@ -1,4 +1,5 @@ -// studio - css architecture +// Studio - css architecture +// Version 1 styling (pre-Pattern Library) // ==================== // Table of Contents @@ -17,4 +18,4 @@ @import 'bourbon/bourbon'; // lib - bourbon @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages -@import 'build'; // shared app style assets/rendering +@import 'build-v1'; // shared app style assets/rendering diff --git a/cms/static/sass/studio-main-v2-rtl.scss b/cms/static/sass/studio-main-v2-rtl.scss new file mode 100644 index 0000000000..9f0643502f --- /dev/null +++ b/cms/static/sass/studio-main-v2-rtl.scss @@ -0,0 +1,14 @@ +// ------------------------------ +// Studio main styling +// Version 2 - introduces the Pattern Library + +// NOTE: This is the right-to-left (RTL) configured style compile. +// It should mirror main-ltr w/ the exception of bi-app references. + + +// Load the RTL version of the edX Pattern Library +$pattern-library-path: '../edx-pattern-library' !default; +@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; + +// Load the shared build +@import 'build-v2'; diff --git a/cms/static/sass/studio-main-v2.scss b/cms/static/sass/studio-main-v2.scss new file mode 100644 index 0000000000..cd355d5a7d --- /dev/null +++ b/cms/static/sass/studio-main-v2.scss @@ -0,0 +1,14 @@ +// ------------------------------ +// Studio main styling +// Version 2 - introduces the Pattern Library + +// NOTE: This is the left-to-right (LTR) configured style compile. +// It should mirror main-rtl w/ the exception of bi-app references. + + +// Load the LTR version of the edX Pattern Library +$pattern-library-path: '../edx-pattern-library' !default; +@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; + +// Load the shared build +@import 'build-v2'; diff --git a/cms/templates/base.html b/cms/templates/base.html index 8dc7502e10..82e4100119 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -1,4 +1,10 @@ ## coding=utf-8 + +## Pages currently use v1 styling by default. Once the Pattern Library +## rollout has been completed, this default can be switched to v2. +<%! main_css = "style-main-v1" %> + +## Standard imports <%namespace name='static' file='static_content.html'/> <%! from django.utils.translation import ugettext as _ @@ -7,6 +13,7 @@ from openedx.core.djangolib.js_utils import ( dump_js_escaped_json, js_escaped_string ) %> + <%page expression_filter="h"/> @@ -36,7 +43,8 @@ from openedx.core.djangolib.js_utils import ( <%static:css group='style-vendor'/> <%static:css group='style-vendor-tinymce-content'/> <%static:css group='style-vendor-tinymce-skin'/> - <%static:css group='style-main'/> + + <%static:css group='${self.attr.main_css}'/> <%include file="widgets/segment-io.html" /> diff --git a/cms/templates/ux/reference/index.html b/cms/templates/ux/reference/index.html index 4121778dcd..5f7c6d1aeb 100644 --- a/cms/templates/ux/reference/index.html +++ b/cms/templates/ux/reference/index.html @@ -24,6 +24,7 @@ diff --git a/cms/templates/ux/reference/pattern-library-test.html b/cms/templates/ux/reference/pattern-library-test.html new file mode 100644 index 0000000000..0881993f7e --- /dev/null +++ b/cms/templates/ux/reference/pattern-library-test.html @@ -0,0 +1,23 @@ +## Override the default styles_version to the Pattern Library version (version 2) +<%! main_css = "style-main-v2" %> + +<%inherit file="../../base.html" /> + +<%block name="title">Pattern Library Test Page +<%block name="bodyclass">is-signedin pattern-library + +<%block name="content"> +

Warning Alert with Message Only

+
+ +
+ diff --git a/common/djangoapps/pipeline_mako/tests/test_render.py b/common/djangoapps/pipeline_mako/tests/test_render.py index a7c50d8e19..e93c4dd2a7 100644 --- a/common/djangoapps/pipeline_mako/tests/test_render.py +++ b/common/djangoapps/pipeline_mako/tests/test_render.py @@ -1,7 +1,12 @@ """ Tests for rendering functions in the mako pipeline. """ +import ddt +from unittest import skipUnless + +from django.conf import settings from django.test import TestCase -from pipeline_mako import render_require_js_path_overrides + +from pipeline_mako import render_require_js_path_overrides, compressed_css, compressed_js class RequireJSPathOverridesTest(TestCase): @@ -31,3 +36,43 @@ class RequireJSPathOverridesTest(TestCase): result = render_require_js_path_overrides(self.OVERRIDES) # To make the string comparision easy remove the whitespaces self.assertEqual(map(str.strip, result.splitlines()), self.OVERRIDES_JS) + + +@ddt.ddt +class PipelineRenderTest(TestCase): + """Test individual pipeline rendering functions. """ + + @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS') + @ddt.data( + (True,), + (False,), + ) + def test_compressed_css(self, pipeline_enabled): + """ + Verify the behavior of compressed_css, with the pipeline + both enabled and disabled. + """ + with self.settings(PIPELINE_ENABLED=pipeline_enabled): + # Verify the default behavior + css_include = compressed_css('style-main-v1') + self.assertIn(u'lms-main-v1.css', css_include) + + # Verify that raw keyword causes raw URLs to be emitted + css_include = compressed_css('style-main-v1', raw=True) + self.assertIn(u'lms-main-v1.css?raw', css_include) + + @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS') + def test_compressed_js(self): + """ + Verify the behavior of compressed_css, with the pipeline + both enabled and disabled. + """ + # Verify that a single JS file is rendered with the pipeline enabled + with self.settings(PIPELINE_ENABLED=True): + js_include = compressed_js('base_application') + self.assertIn(u'lms-base-application.js', js_include) + + # Verify that multiple JS files are rendered with the pipeline disabled + with self.settings(PIPELINE_ENABLED=False): + js_include = compressed_js('base_application') + self.assertIn(u'/static/js/src/logger.js', js_include) diff --git a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py index 54ef5ff84f..dcc8d10485 100644 --- a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py +++ b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py @@ -104,8 +104,8 @@ class TestComprehensiveTheming(TestCase): """ Test that static files finders are adjusted according to the applied comprehensive theme. """ - result = staticfiles.finders.find('red-theme/css/lms-main.css') - self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main.css") + result = staticfiles.finders.find('red-theme/css/lms-main-v1.css') + self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main-v1.css") lms_main_css = "" with open(result) as css_file: @@ -117,8 +117,8 @@ class TestComprehensiveTheming(TestCase): """ Test default css is served if no theme is applied """ - result = staticfiles.finders.find('css/lms-main.css') - self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css") + result = staticfiles.finders.find('css/lms-main-v1.css') + self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css") lms_main_css = "" with open(result) as css_file: diff --git a/lms/envs/common.py b/lms/envs/common.py index 6c84403569..612386f2d2 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -1390,19 +1390,29 @@ PIPELINE_CSS = { ], 'output_filename': 'css/lms-style-vendor-tinymce-skin.css', }, - 'style-main': { - # this is unnecessary and can be removed + 'style-main-v1': { 'source_filenames': [ - 'css/lms-main.css', + 'css/lms-main-v1.css', ], - 'output_filename': 'css/lms-main.css', + 'output_filename': 'css/lms-main-v1.css', }, - 'style-main-rtl': { - # this is unnecessary and can be removed + 'style-main-v1-rtl': { 'source_filenames': [ - 'css/lms-main-rtl.css', + 'css/lms-main-v1-rtl.css', ], - 'output_filename': 'css/lms-main-rtl.css', + 'output_filename': 'css/lms-main-v1-rtl.css', + }, + 'style-main-v2': { + 'source_filenames': [ + 'css/lms-main-v2.css', + ], + 'output_filename': 'css/lms-main-v2.css', + }, + 'style-main-v2-rtl': { + 'source_filenames': [ + 'css/lms-main-v2-rtl.css', + ], + 'output_filename': 'css/lms-main-v2-rtl.css', }, 'style-course-vendor': { 'source_filenames': [ diff --git a/lms/static/certificates/sass/_build.scss b/lms/static/certificates/sass/_build.scss index c97b1b0c37..11bd2e9947 100644 --- a/lms/static/certificates/sass/_build.scss +++ b/lms/static/certificates/sass/_build.scss @@ -1,19 +1,15 @@ // ------------------------------ // Open edX Certificates: Shared Build Compile -// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files. +// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. +// Configuration and vendor specific imports happen before this shared set of imports are compiled +// in the main-*.scss files. -// ------------------------------ -// #CONFIG + LIB -// ------------------------------ -@import 'lib'; +// Configuration @import 'config'; -@import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library'; -// ------------------------------ -// #EXTENSIONS -// ------------------------------ +// Extensions @import 'utilities'; @import 'base'; @import 'components'; diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss index d8e3a022d5..911c68dd9a 100644 --- a/lms/static/certificates/sass/_config.scss +++ b/lms/static/certificates/sass/_config.scss @@ -1,14 +1,10 @@ // ------------------------------ // Open edX Certificates: Config -// About: variable and configuration overrides - -// #VARIABLES // ------------------------------ // #VARIABLES // ------------------------------ -$pattern-library-path: '../../edx-pattern-library' !default; // certificate characteristics $cert-base-color: palette(grayscale-cool, dark); diff --git a/lms/static/certificates/sass/_lib.scss b/lms/static/certificates/sass/_lib.scss deleted file mode 100644 index 83b0a55882..0000000000 --- a/lms/static/certificates/sass/_lib.scss +++ /dev/null @@ -1,9 +0,0 @@ -// ------------------------------ -// Open edX Certificates: Main Style Compile - -// About: third party libraries and dependencies import - - -@import '../../../../node_modules/edx-pattern-library/node_modules/bourbon/app/assets/stylesheets/bourbon'; -@import '../../../../node_modules/edx-pattern-library/node_modules/susy/sass/susy'; -@import '../../../../node_modules/edx-pattern-library/node_modules/breakpoint-sass/stylesheets/breakpoint'; diff --git a/lms/static/certificates/sass/_ltr.scss b/lms/static/certificates/sass/_ltr.scss deleted file mode 100644 index 392f53d3dd..0000000000 --- a/lms/static/certificates/sass/_ltr.scss +++ /dev/null @@ -1,23 +0,0 @@ -// ------------------------------ -// Open edX Certificates: Main Style Compile - -// About: Sass partial for defining settings and utilities for LTR-centric layouts. - -// #SETTINGS -// #LIB - - -// ---------------------------- -// #SETTINGS -// ---------------------------- -$layout-direction: ltr; - -// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23 -$grid-direction-default: ltr; -$grid-direction-reversed: ltr; - - -// ---------------------------- -// #LIB -// ---------------------------- -@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-ltr'; diff --git a/lms/static/certificates/sass/_rtl.scss b/lms/static/certificates/sass/_rtl.scss deleted file mode 100644 index ba219f69f8..0000000000 --- a/lms/static/certificates/sass/_rtl.scss +++ /dev/null @@ -1,23 +0,0 @@ -// ------------------------------ -// Open edX Certificates: Main Style Compile - -// About: Sass partial for defining settings and utilities for LTR-centric layouts. - -// #SETTINGS -// #LIB - - -// ---------------------------- -// #SETTINGS -// ---------------------------- -$layout-direction: rtl; - -// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23 -$grid-direction-default: rtl; -$grid-direction-reversed: ltr; - - -// ---------------------------- -// #LIB -// ---------------------------- -@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-rtl'; diff --git a/lms/static/certificates/sass/main-ltr.scss b/lms/static/certificates/sass/main-ltr.scss index db0e51c41e..41f638c2b4 100644 --- a/lms/static/certificates/sass/main-ltr.scss +++ b/lms/static/certificates/sass/main-ltr.scss @@ -3,16 +3,13 @@ // About: Sass compile for the Open edX Certificates Elements. -// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references. +// NOTE: This is the left to right (LTR) configured style compile. +// It should mirror main-rtl w/ the exception of bi-app references. -// ------------------------------ -// #CONFIG - layout direction -// ------------------------------ -@import 'ltr'; // LTR-specifc settings and utilities +// Load the LTR version of the edX Pattern Library +$pattern-library-path: '../../edx-pattern-library' !default; +@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; - -// ------------------------------ -// #BUILD -// ------------------------------ -@import 'build'; // shared compile/build order for both LTR and RTL UI +// Load the shared build +@import 'build'; diff --git a/lms/static/certificates/sass/main-rtl.scss b/lms/static/certificates/sass/main-rtl.scss index 54a6ec443c..faea15b67e 100644 --- a/lms/static/certificates/sass/main-rtl.scss +++ b/lms/static/certificates/sass/main-rtl.scss @@ -3,16 +3,13 @@ // About: Sass compile for the Open edX Certificates Elements. -// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references. +// NOTE: This is the right to left (RTL) configured style compile. +// It should mirror main-ltr w/ the exception of bi-app references. -// ------------------------------ -// #CONFIG - layout direction -// ------------------------------ -@import 'rtl'; // RTL-specifc settings and utilities +// Load the RTL version of the edX Pattern Library +$pattern-library-path: '../../edx-pattern-library' !default; +@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; - -// ------------------------------ -// #BUILD -// ------------------------------ -@import 'build'; // shared compile/build order for both LTR and RTL UI +// Load the shared build +@import 'build'; diff --git a/lms/static/sass/_build-lms.scss b/lms/static/sass/_build-lms-v1.scss similarity index 100% rename from lms/static/sass/_build-lms.scss rename to lms/static/sass/_build-lms-v1.scss diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss new file mode 100644 index 0000000000..a982b28c2a --- /dev/null +++ b/lms/static/sass/_build-lms-v2.scss @@ -0,0 +1,9 @@ +// ------------------------------ +// LMS: Shared Build Compile +// Version 2 - introduces the Pattern Library + + +// Configuration +@import 'config'; + +// Extensions diff --git a/lms/static/sass/_config.scss b/lms/static/sass/_config.scss new file mode 100644 index 0000000000..e3a6ab63c1 --- /dev/null +++ b/lms/static/sass/_config.scss @@ -0,0 +1,7 @@ +// ------------------------------ +// LMS configuration settings + + +// ------------------------------ +// #VARIABLES +// ------------------------------ diff --git a/lms/static/sass/lms-main-rtl.scss b/lms/static/sass/lms-main-v1-rtl.scss similarity index 78% rename from lms/static/sass/lms-main-rtl.scss rename to lms/static/sass/lms-main-v1-rtl.scss index 7ab3e3cd35..0988836b42 100644 --- a/lms/static/sass/lms-main-rtl.scss +++ b/lms/static/sass/lms-main-v1-rtl.scss @@ -1,4 +1,5 @@ -// lms - css application architecture +// LMS - CSS application architecture +// Version 1 styling (pre-Pattern Library) // ==================== // libs and resets *do not edit* @@ -18,4 +19,4 @@ // theme, for old-style deprecated theming. // -@import 'build-lms'; // shared app style assets/rendering +@import 'build-lms-v1'; // shared app style assets/rendering diff --git a/lms/static/sass/lms-main.scss b/lms/static/sass/lms-main-v1.scss similarity index 76% rename from lms/static/sass/lms-main.scss rename to lms/static/sass/lms-main-v1.scss index 1a79ca0442..ca36fb3acb 100644 --- a/lms/static/sass/lms-main.scss +++ b/lms/static/sass/lms-main-v1.scss @@ -1,4 +1,5 @@ -// lms - css application architecture +// LMS - CSS application architecture +// Version 1 styling (pre-Pattern Library) // ==================== // libs and resets *do not edit* @@ -17,4 +18,4 @@ // theme, for old-style deprecated theming. // -@import 'build-lms'; // shared app style assets/rendering +@import 'build-lms-v1'; // shared app style assets/rendering diff --git a/lms/static/sass/lms-main-v2-rtl.scss b/lms/static/sass/lms-main-v2-rtl.scss new file mode 100644 index 0000000000..195b752386 --- /dev/null +++ b/lms/static/sass/lms-main-v2-rtl.scss @@ -0,0 +1,14 @@ +// ------------------------------ +// LMS main styling +// Version 2 - introduces the Pattern Library + +// NOTE: This is the right-to-left (RTL) configured style compile. +// It should mirror lms-main-v2 w/ the exception of bi-app references. + + +// Load the RTL version of the edX Pattern Library +$pattern-library-path: '../edx-pattern-library' !default; +@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl'; + +// Load the shared build +@import 'build-lms-v2'; diff --git a/lms/static/sass/lms-main-v2.scss b/lms/static/sass/lms-main-v2.scss new file mode 100644 index 0000000000..ca43dfc041 --- /dev/null +++ b/lms/static/sass/lms-main-v2.scss @@ -0,0 +1,14 @@ +// ------------------------------ +// LMS main styling +// Version 2 - introduces the Pattern Library + +// NOTE: This is the left-to-right (LTR) configured style compile. +// It should mirror lms-main-v2-rtl w/ the exception of bi-app references. + + +// Load the RTL version of the edX Pattern Library +$pattern-library-path: '../edx-pattern-library' !default; +@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr'; + +// Load the shared build +@import 'build-lms-v2'; diff --git a/lms/templates/main.html b/lms/templates/main.html index 827e578234..b7baaea2fc 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -1,4 +1,15 @@ ## coding=utf-8 + +## This is the main Mako template that all page templates should include. +## Note: there are a handful of pages that use Django Templates and which +## instead include main_django.html. It is important that these two files +## remain in sync, so changes made in one should be applied to the other. + +## Pages currently use v1 styling by default. Once the Pattern Library +## rollout has been completed, this default can be switched to v2. +<%! main_css = "style-main-v1" %> + + <%namespace name='static' file='static_content.html'/> <%! from django.core.urlresolvers import reverse @@ -49,17 +60,7 @@ from pipeline_mako import render_require_js_path_overrides <%static:css group='style-vendor'/> - ## We could do <%static:css group='style-main'/>, but that's only useful - ## if the group contains multiple files, and the 'style-main' group doesn't. - ## Instead, we'll construct this element manually, to improve clarity. - ## When nothing in the system is referencing the 'style-main' group, it can - ## be removed from the environment file. - <% - application_css_path = "css/lms-main{rtl}.css".format( - rtl="-rtl" if get_language_bidi() else "", - ) - %> - + <%static:css group='${self.attr.main_css}'/> % if disable_courseware_js: <%static:js group='base_vendor'/> diff --git a/lms/templates/main_django.html b/lms/templates/main_django.html index fe9d8a65a8..6925f17c80 100644 --- a/lms/templates/main_django.html +++ b/lms/templates/main_django.html @@ -9,7 +9,7 @@ {% stylesheet 'style-vendor' %} - {% stylesheet 'style-main' %} + {% stylesheet 'style-main-v1' %} {% block main_vendor_js %} {% javascript 'main_vendor' %} diff --git a/lms/templates/ux/reference/index.html b/lms/templates/ux/reference/index.html new file mode 100644 index 0000000000..e4ce1d1142 --- /dev/null +++ b/lms/templates/ux/reference/index.html @@ -0,0 +1,27 @@ +<%page expression_filter="h"/> +<%inherit file="/main.html" /> +<%namespace name='static' file='/static_content.html'/> + +<%block name="pagetitle">UX Reference +<%block name="nav_skip">#content + +<%block name="bodyclass">view-ux-reference + +<%block name="content"> +
+
+
+ +
+
+
+ diff --git a/lms/templates/ux/reference/pattern-library-test.html b/lms/templates/ux/reference/pattern-library-test.html new file mode 100644 index 0000000000..cb44766107 --- /dev/null +++ b/lms/templates/ux/reference/pattern-library-test.html @@ -0,0 +1,26 @@ +## 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 name="nav_skip">#content + +<%block name="bodyclass">pattern-library + +<%block name="content"> +

Warning Alert with Message Only

+
+ +
+ diff --git a/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py b/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py index b7852249d9..defc250276 100644 --- a/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py +++ b/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py @@ -63,8 +63,8 @@ class TestComprehensiveThemeLMS(TestCase): """ Test that theme sass files are used instead of default sass files. """ - result = staticfiles.finders.find('test-theme/css/lms-main.css') - self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main.css") + result = staticfiles.finders.find('test-theme/css/lms-main-v1.css') + self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main-v1.css") lms_main_css = "" with open(result) as css_file: @@ -115,8 +115,8 @@ class TestComprehensiveThemeCMS(TestCase): """ Test that theme sass files are used instead of default sass files. """ - result = staticfiles.finders.find('test-theme/css/studio-main.css') - self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main.css") + result = staticfiles.finders.find('test-theme/css/studio-main-v1.css') + self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main-v1.css") cms_main_css = "" with open(result) as css_file: @@ -161,8 +161,8 @@ class TestComprehensiveThemeDisabledLMS(TestCase): """ Test that default css files served without comprehensive themes applied. """ - result = staticfiles.finders.find('css/lms-main.css') - self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css") + result = staticfiles.finders.find('css/lms-main-v1.css') + self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css") lms_main_css = "" with open(result) as css_file: @@ -208,8 +208,8 @@ class TestComprehensiveThemeDisabledCMS(TestCase): """ Test that default css files served without comprehensive themes applied.. """ - result = staticfiles.finders.find('css/studio-main.css') - self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main.css") + result = staticfiles.finders.find('css/studio-main-v1.css') + self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main-v1.css") cms_main_css = "" with open(result) as css_file: diff --git a/package.json b/package.json index 5b9cffa68b..35cc6a9829 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "dependencies": { "coffee-script": "1.6.1", - "edx-pattern-library": "0.10.4", - "edx-ui-toolkit": "0.9.0", + "edx-pattern-library": "~0.12.1", + "edx-ui-toolkit": "~0.9.1", "requirejs": "~2.1.22", "uglify-js": "2.4.24", "underscore": "~1.8.3", diff --git a/pavelib/assets.py b/pavelib/assets.py index 3124979c6f..78c249b2df 100644 --- a/pavelib/assets.py +++ b/pavelib/assets.py @@ -33,9 +33,12 @@ SYSTEMS = { } # Common lookup paths that are added to the lookup paths for all sass compilations -COMMON_LOOKUP_DIRS = [ +COMMON_LOOKUP_PATHS = [ path("common/static"), path("common/static/sass"), + path("node_modules"), + path("node_modules/edx-pattern-library/node_modules"), + ] # A list of NPM installed libraries that should be copied into the common @@ -108,10 +111,7 @@ def get_common_sass_directories(): applicable_directories.append({ "sass_source_dir": path("common/static/sass"), "css_destination_dir": path("common/static/css"), - "lookup_paths": [ - path("common/static"), - path("common/static/sass"), - ], + "lookup_paths": COMMON_LOOKUP_PATHS, }) return applicable_directories @@ -223,7 +223,7 @@ def get_watcher_dirs(themes_base_dir=None, themes=None): (list): dirs that need to be added to sass watchers. """ dirs = [] - dirs.extend(COMMON_LOOKUP_DIRS) + dirs.extend(COMMON_LOOKUP_PATHS) if themes_base_dir and themes: # Register sass watchers for all the given themes theme_dirs = [(path(themes_base_dir) / theme) for theme in themes if theme] @@ -559,7 +559,7 @@ def _compile_sass(system, theme, debug, force, timing_info): else: sass.compile( dirname=(sass_source_dir, css_dir), - include_paths=COMMON_LOOKUP_DIRS + lookup_paths, + include_paths=COMMON_LOOKUP_PATHS + lookup_paths, source_comments=source_comments, output_style=output_style, ) diff --git a/pavelib/paver_tests/test_assets.py b/pavelib/paver_tests/test_assets.py index 4f6f211615..ede0949ca1 100644 --- a/pavelib/paver_tests/test_assets.py +++ b/pavelib/paver_tests/test_assets.py @@ -148,6 +148,8 @@ class TestPaverWatchAssetTasks(TestCase): self.expected_sass_directories = [ path('common/static/sass'), path('common/static'), + path('node_modules'), + path('node_modules/edx-pattern-library/node_modules'), path('lms/static/sass/partials'), path('lms/static/sass'), path('lms/static/certificates/sass'), @@ -156,6 +158,10 @@ class TestPaverWatchAssetTasks(TestCase): ] super(TestPaverWatchAssetTasks, self).setUp() + def tearDown(self): + self.expected_sass_directories = [] + super(TestPaverWatchAssetTasks, self).tearDown() + def test_watch_assets(self): """ Test the "compile_sass" task. @@ -198,7 +204,3 @@ class TestPaverWatchAssetTasks(TestCase): self.assertIsInstance(sass_watcher_args[0], PollingObserver) self.assertIsInstance(sass_watcher_args[1], list) self.assertItemsEqual(sass_watcher_args[1], self.expected_sass_directories) - - def tearDown(self): - self.expected_sass_directories = [] - super(TestPaverWatchAssetTasks, self).tearDown()