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 6fcace702b..82e4100119 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -13,6 +13,7 @@ from openedx.core.djangolib.js_utils import ( dump_js_escaped_json, js_escaped_string ) %> + <%page expression_filter="h"/> @@ -42,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/common/djangoapps/pipeline_mako/tests/test_render.py b/common/djangoapps/pipeline_mako/tests/test_render.py index e93c4dd2a7..d505cee33c 100644 --- a/common/djangoapps/pipeline_mako/tests/test_render.py +++ b/common/djangoapps/pipeline_mako/tests/test_render.py @@ -5,6 +5,7 @@ from unittest import skipUnless from django.conf import settings from django.test import TestCase +from paver.easy import call_task from pipeline_mako import render_require_js_path_overrides, compressed_css, compressed_js @@ -42,6 +43,14 @@ class RequireJSPathOverridesTest(TestCase): class PipelineRenderTest(TestCase): """Test individual pipeline rendering functions. """ + @classmethod + def setUpClass(cls): + """ + Create static assets once for all pipeline render tests. + """ + super(PipelineRenderTest, cls).setUpClass() + call_task('pavelib.assets.update_assets', args=('lms', '--settings=test')) + @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS') @ddt.data( (True,), 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 b8472c516a..b7baaea2fc 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -60,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/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/package.json b/package.json index a5a8925718..12f9c6aae0 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 893b9c3197..1faa8facdb 100644 --- a/pavelib/assets.py +++ b/pavelib/assets.py @@ -35,7 +35,12 @@ CMS_SASS_DIRECTORIES = [ path("cms/static/sass"), ] THEME_SASS_DIRECTORIES = [] -SASS_LOAD_PATHS = ['common/static', 'common/static/sass'] +SASS_LOAD_PATHS = [ + 'common/static', + 'common/static/sass', + 'node_modules', + 'node_modules/edx-pattern-library/node_modules', +] # A list of NPM installed libraries that should be copied into the common # static directory. diff --git a/pavelib/paver_tests/test_assets.py b/pavelib/paver_tests/test_assets.py index bf529b8b4a..b1b94e732b 100644 --- a/pavelib/paver_tests/test_assets.py +++ b/pavelib/paver_tests/test_assets.py @@ -3,7 +3,6 @@ import ddt from paver.easy import call_task from mock import patch -from unittest import TestCase from watchdog.observers.polling import PollingObserver from .utils import PaverTestCase @@ -59,31 +58,3 @@ class TestPaverAssetTasks(PaverTestCase): expected_messages.append("rm -rf cms/static/css/*.css") expected_messages.append("libsass cms/static/sass") self.assertEquals(self.task_messages, expected_messages) - - -class TestPaverWatchAssetTasks(TestCase): - """ - Test the Paver watch asset tasks. - """ - - def setUp(self): - 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. - """ - with patch('pavelib.assets.SassWatcher.register') as mock_register: - with patch('pavelib.assets.PollingObserver.start'): - call_task( - 'pavelib.assets.watch_assets', - options={"background": True}, - ) - self.assertEqual(mock_register.call_count, 2) - - sass_watcher_args = mock_register.call_args_list[0][0] - self.assertIsInstance(sass_watcher_args[0], PollingObserver)