Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Support level support for Studio xblock creation.

Browse Source 
TNL-4670
This commit is contained in:
cahrens
2016-07-06 15:06:02 -04:00
parent 71bebec579
commit d4cc7b8ffd
25 changed files with 605 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cms/static/js/models/component_template.js
View File

@@ -10,7 +10,8 @@ define(["backbone"], function (Backbone) {
// category (may or may not match "type")
// boilerplate_name (may be null)
// is_common (only used for problems)
templates: []
templates: [],
support_legend: {}
},
parse: function (response) {
// Returns true only for templates that both have no boilerplate and are of
@@ -24,6 +25,7 @@ define(["backbone"], function (Backbone) {
this.type = response.type;
this.templates = response.templates;
this.display_name = response.display_name;
this.support_legend = response.support_legend;
// Sort the templates.
this.templates.sort(function (a, b) {

3
cms/static/js/spec/models/component_template_spec.js
View File

@@ -49,7 +49,8 @@ define(["js/models/component_template"],
"boilerplate_name": "alternate_word_cloud.yaml",
"display_name": "Word Cloud"
}],
"type": "problem"
"type": "problem",
"support_legend": {"show_legend": false}
};
it('orders templates correctly', function () {

147
cms/static/js/spec/views/pages/container_spec.js
View File

@@ -1,7 +1,9 @@
define(["jquery", "underscore", "underscore.string", "edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers",
"common/js/spec_helpers/template_helpers", "js/spec_helpers/edit_helpers",
"js/views/pages/container", "js/views/pages/paged_container", "js/models/xblock_info", "jquery.simulate"],
function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, ContainerPage, PagedContainerPage, XBlockInfo) {
"js/views/pages/container", "js/views/pages/paged_container", "js/models/xblock_info",
"js/collections/component_template", "jquery.simulate"],
function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, ContainerPage, PagedContainerPage,
XBlockInfo, ComponentTemplates) {
'use strict';
function parameterized_suite(label, globalPageOptions) {
@@ -55,18 +57,19 @@ define(["jquery", "underscore", "underscore.string", "edx-ui-toolkit/js/utils/sp
);
};
getContainerPage = function (options) {
getContainerPage = function (options, componentTemplates) {
var default_options = {
model: model,
templates: EditHelpers.mockComponentTemplates,
templates: componentTemplates === undefined ?
EditHelpers.mockComponentTemplates : componentTemplates,
el: $('#content')
};
return new PageClass(_.extend(options || {}, globalPageOptions, default_options));
};
renderContainerPage = function (test, html, options) {
renderContainerPage = function (test, html, options, componentTemplates) {
requests = AjaxHelpers.requests(test);
containerPage = getContainerPage(options);
containerPage = getContainerPage(options, componentTemplates);
containerPage.render();
respondWithHtml(html);
AjaxHelpers.expectJsonRequest(requests, 'GET', '/xblock/locator-container');
@@ -652,6 +655,138 @@ define(["jquery", "underscore", "underscore.string", "edx-ui-toolkit/js/utils/sp
"parent_locator": "locator-group-A"
});
});
it('does not show the support legend if show_legend is false', function () {
// By default, show_legend is false in the mock component Templates.
renderContainerPage(this, mockContainerXBlockHtml);
showTemplatePicker();
expect(containerPage.$('.support-documentation').length).toBe(0);
});
it('does show the support legend if show_legend is true', function () {
var templates = new ComponentTemplates([
{
"templates": [
{
"category": "html",
"boilerplate_name": null,
"display_name": "Text"
}, {
"category": "html",
"boilerplate_name": "announcement.yaml",
"display_name": "Announcement"
}, {
"category": "html",
"boilerplate_name": "raw.yaml",
"display_name": "Raw HTML"
}],
"type": "html",
"support_legend": {
"show_legend": true,
"documentation_label": "Documentation Label:",
"allow_unsupported_xblocks": false
}
}],
{
parse: true
}), supportDocumentation;
renderContainerPage(this, mockContainerXBlockHtml, {}, templates);
showTemplatePicker();
supportDocumentation = containerPage.$('.support-documentation');
// On this page, groups are being shown, each of which has a new component menu.
expect(supportDocumentation.length).toBeGreaterThan(0);
// check that the documentation label is displayed
expect($(supportDocumentation[0]).find('.support-documentation-link').text().trim())
.toBe('Documentation Label:');
// show_unsupported_xblocks is false, so only 2 support levels should be shown
expect($(supportDocumentation[0]).find('.support-documentation-level').length).toBe(2);
});
it('does show unsupported level if enabled', function () {
var templates = new ComponentTemplates([
{
"templates": [
{
"category": "html",
"boilerplate_name": null,
"display_name": "Text"
}, {
"category": "html",
"boilerplate_name": "announcement.yaml",
"display_name": "Announcement"
}, {
"category": "html",
"boilerplate_name": "raw.yaml",
"display_name": "Raw HTML"
}],
"type": "html",
"support_legend": {
"show_legend": true,
"documentation_label": "Documentation Label:",
"allow_unsupported_xblocks": true
}
}],
{
parse: true
}), supportDocumentation;
renderContainerPage(this, mockContainerXBlockHtml, {}, templates);
showTemplatePicker();
supportDocumentation = containerPage.$('.support-documentation');
// show_unsupported_xblocks is true, so 3 support levels should be shown
expect($(supportDocumentation[0]).find('.support-documentation-level').length).toBe(3);
// verify only one has the unsupported item
expect($(supportDocumentation[0]).find('.fa-circle-o').length).toBe(1);
});
it('does render support level indicators if present in JSON', function () {
var templates = new ComponentTemplates([
{
"templates": [
{
"category": "html",
"boilerplate_name": null,
"display_name": "Text",
"support_level": "fs"
}, {
"category": "html",
"boilerplate_name": "announcement.yaml",
"display_name": "Announcement",
"support_level": "ps"
}, {
"category": "html",
"boilerplate_name": "raw.yaml",
"display_name": "Raw HTML",
"support_level": "us"
}],
"type": "html",
"support_legend": {
"show_legend": true,
"documentation_label": "Documentation Label:",
"allow_unsupported_xblocks": true
}
}],
{
parse: true
}), supportLevelIndicators, getScreenReaderText;
renderContainerPage(this, mockContainerXBlockHtml, {}, templates);
showTemplatePicker();
supportLevelIndicators = $(containerPage.$('.new-component-template')[0])
.find('.support-level');
expect(supportLevelIndicators.length).toBe(3);
getScreenReaderText = function(index){
return $($(supportLevelIndicators[index]).siblings()[0]).text().trim();
};
// Verify one level of each type was rendered.
expect(getScreenReaderText(0)).toBe('Fully Supported');
expect(getScreenReaderText(1)).toBe('Provisionally Supported');
expect(getScreenReaderText(2)).toBe('Not Supported');
});
});
});
});

14
cms/static/js/spec_helpers/edit_helpers.js
View File

@@ -41,12 +41,13 @@ define(["jquery", "underscore", "edx-ui-toolkit/js/utils/spec-helpers/ajax-helpe
mockComponentTemplates = new ComponentTemplates([
{
templates: [
"templates": [
{
category: 'discussion',
display_name: 'Discussion'
"category": "discussion",
"display_name": "Discussion"
}],
type: 'discussion'
"type": "discussion",
"support_legend": {"show_legend": false}
}, {
"templates": [
{
@@ -62,7 +63,8 @@ define(["jquery", "underscore", "edx-ui-toolkit/js/utils/spec-helpers/ajax-helpe
"boilerplate_name": "raw.yaml",
"display_name": "Raw HTML"
}],
"type": "html"
"type": "html",
"support_legend": {"show_legend": false}
}],
{
parse: true
@@ -76,6 +78,8 @@ define(["jquery", "underscore", "edx-ui-toolkit/js/utils/spec-helpers/ajax-helpe
TemplateHelpers.installTemplate('add-xblock-component-button');
TemplateHelpers.installTemplate('add-xblock-component-menu');
TemplateHelpers.installTemplate('add-xblock-component-menu-problem');
TemplateHelpers.installTemplate('add-xblock-component-support-legend');
TemplateHelpers.installTemplate('add-xblock-component-support-level');
// Add templates needed by the edit XBlock modal
TemplateHelpers.installTemplate('edit-xblock-modal');

17
cms/static/js/views/components/add_xblock_menu.js
View File

@@ -1,5 +1,5 @@
define(["jquery", "js/views/baseview"],
function ($, BaseView) {
define(["jquery", "js/views/baseview", 'edx-ui-toolkit/js/utils/html-utils'],
function ($, BaseView, HtmlUtils) {
return BaseView.extend({
className: function () {
@@ -9,8 +9,19 @@ define(["jquery", "js/views/baseview"],
BaseView.prototype.initialize.call(this);
var template_name = this.model.type === "problem" ? "add-xblock-component-menu-problem" :
"add-xblock-component-menu";
var support_indicator_template = this.loadTemplate("add-xblock-component-support-level");
var support_legend_template = this.loadTemplate("add-xblock-component-support-legend");
this.template = this.loadTemplate(template_name);
this.$el.html(this.template({type: this.model.type, templates: this.model.templates}));
HtmlUtils.setHtml(
this.$el,
HtmlUtils.HTML(this.template({
type: this.model.type, templates: this.model.templates,
support_legend: this.model.support_legend,
support_indicator_template: support_indicator_template,
support_legend_template: support_legend_template,
HtmlUtils: HtmlUtils
}))
);
// Make the tabs on problems into "real tabs"
this.$('.tab-group').tabs();
}

2
cms/static/sass/_build-v1.scss
View File

@@ -10,7 +10,7 @@
// +Base - Utilities
// ====================
@import 'variables';
@import 'partials/variables';
@import 'mixins';
@import 'mixins-inherited';

40
cms/static/sass/elements/_modules.scss
View File

@@ -168,18 +168,47 @@
// specific menu types
&.new-component-problem {
padding-bottom: ($baseline/2);
.problem-type-tabs {
display: inline-block;
}
}
.support-documentation {
float: right;
@include margin($baseline, 0, ($baseline/2), ($baseline/2));
@include font-size(14);
.support-documentation-level {
padding-right: ($baseline/2);
}
.support-documentation-link {
// Override JQuery ui-widget-content link color (black) with our usual link color and hover action.
color: $uxpl-blue-base;
text-decoration: none;
padding-right: ($baseline/2);
&:hover {
color: $uxpl-blue-hover-active;
text-decoration: underline;
}
}
}
.support-level {
padding-right: ($baseline/2);
}
.icon {
color: $uxpl-primary-accent;
}
}
// individual menus
// --------------------
.new-component-template {
@include clearfix();
margin-bottom: 0;
li {
border: none;
@@ -190,7 +219,7 @@
}
}
.button-component {
.button-component {
@include clearfix();
@include transition(none);
@extend %t-demi-strong;
@@ -201,11 +230,16 @@
background: $white;
color: $gray-d3;
text-align: left;
font-family: $f-sans-serif;
&:hover {
@include transition(background-color $tmg-f2 linear 0s);
background: tint($green,30%);
color: $white;
.icon {
color: $white;
}
}
}
}

16
cms/static/sass/partials/_variables.scss
View File

@@ -39,6 +39,16 @@ $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// ====================
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
// +Colors - UXPL new pattern library colors
// ====================
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
$uxpl-primary-accent: rgb(14, 166, 236);
// +Colors - Primary
// ====================
$black: rgb(0,0,0);
@@ -87,12 +97,6 @@ $blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
$pink: rgb(183, 37, 103); // #b72567;
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);