Skip to content

E
edx-platform
Commit 6398af71 by Frances Botsford Committed by Andy Armstrong
Options

Make group config styles generic

parent 39acbdcb
Showing with 328 additions and 235 deletions
cms/static/js/spec/views/group_configuration_spec.js
...@@ -24,7 +24,7 @@ define([ ...@@ -24,7 +24,7 @@ define([
groupsAllocation: '.group-allocation', groupsAllocation: '.group-allocation',
errorMessage: '.group-configuration-edit-error', errorMessage: '.group-configuration-edit-error',
inputGroupName: '.group-name', inputGroupName: '.group-name',
inputName: '.group-configuration-name-input', inputName: '.collection-name-input',
inputDescription: '.group-configuration-description-input', inputDescription: '.group-configuration-description-input',
usageCount: '.group-configuration-usage-count', usageCount: '.group-configuration-usage-count',
usage: '.group-configuration-usage', usage: '.group-configuration-usage',
...@@ -635,15 +635,15 @@ define([ ...@@ -635,15 +635,15 @@ define([
describe('Content groups list view', function() { describe('Content groups list view', function() {
var newGroupCss = '.new-button', var newGroupCss = '.new-button',
addGroupCss = '.action-add', addGroupCss = '.action-add',
inputCss = '.group-configuration-name-input', inputCss = '.collection-name-input',
saveButtonCss = '.action-primary', saveButtonCss = '.action-primary',
cancelButtonCss = '.action-cancel', cancelButtonCss = '.action-cancel',
validationErrorCss = '.group-configuration-edit-error', validationErrorCss = '.content-group-edit-error',
scopedGroupSelector, createGroups, renderView, saveOrCancel, editNewGroup, editExistingGroup, scopedGroupSelector, createGroups, renderView, saveOrCancel, editNewGroup, editExistingGroup,
verifyEditingGroup, respondToSave, expectGroupsVisible, correctValidationError; verifyEditingGroup, respondToSave, expectGroupsVisible, correctValidationError;
scopedGroupSelector = function(groupIndex, additionalSelectors) { scopedGroupSelector = function(groupIndex, additionalSelectors) {
var groupSelector = '.group-configurations-list-item-' + groupIndex; var groupSelector = '.content-groups-list-item-' + groupIndex;
if (additionalSelectors) { if (additionalSelectors) {
return groupSelector + ' ' + additionalSelectors; return groupSelector + ' ' + additionalSelectors;
} else { } else {
...@@ -704,11 +704,11 @@ define([ ...@@ -704,11 +704,11 @@ define([
// editing a group. // editing a group.
index = index || 0; index = index || 0;
if (expectEditing) { if (expectEditing) {
expect(view.$(scopedGroupSelector(index, '.group-configuration-edit'))).toExist(); expect(view.$(scopedGroupSelector(index, '.content-group-edit'))).toExist();
expect(view.$(newGroupCss)).not.toExist(); expect(view.$(newGroupCss)).not.toExist();
expect(view.$(addGroupCss)).toHaveClass('is-hidden'); expect(view.$(addGroupCss)).toHaveClass('is-hidden');
} else { } else {
expect(view.$('.group-configuration-edit')).not.toExist(); expect(view.$('.content-group-edit')).not.toExist();
if (view.collection.length === 0) { if (view.collection.length === 0) {
expect(view.$(newGroupCss)).toExist(); expect(view.$(newGroupCss)).toExist();
expect(view.$(addGroupCss)).not.toExist(); expect(view.$(addGroupCss)).not.toExist();
...@@ -742,7 +742,7 @@ define([ ...@@ -742,7 +742,7 @@ define([
expectGroupsVisible = function(view, groupNames) { expectGroupsVisible = function(view, groupNames) {
_.each(groupNames, function(groupName) { _.each(groupNames, function(groupName) {
expect(view.$('.group-configurations-list-item')).toContainText(groupName); expect(view.$('.content-groups-list-item')).toContainText(groupName);
}); });
}; };
...@@ -753,13 +753,13 @@ define([ ...@@ -753,13 +753,13 @@ define([
}); });
it('shows a message when no groups are present', function() { it('shows a message when no groups are present', function() {
expect(renderView().$('.no-group-configurations-content')) expect(renderView().$('.no-content'))
.toContainText('You have not created any content groups yet.'); .toContainText('You have not created any content groups yet.');
}); });
it('can render groups', function() { it('can render groups', function() {
var groupNames = ['Group 1', 'Group 2', 'Group 3']; var groupNames = ['Group 1', 'Group 2', 'Group 3'];
renderView(groupNames).$('.group-configuration-details').each(function(index) { renderView(groupNames).$('.content-group-details').each(function(index) {
expect($(this)).toContainText(groupNames[index]); expect($(this)).toContainText(groupNames[index]);
}); });
}); });
......
cms/static/js/spec/views/pages/group_configurations_spec.js
...@@ -52,7 +52,7 @@ define([ ...@@ -52,7 +52,7 @@ define([
expect(view.$('.ui-loading')).toBeVisible(); expect(view.$('.ui-loading')).toBeVisible();
view.render(); view.render();
expect(view.$(groupConfigItemClassName)).toExist(); expect(view.$(groupConfigItemClassName)).toExist();
expect(view.$('.content-groups .no-group-configurations-content')).toExist(); expect(view.$('.content-groups .no-content')).toExist();
expect(view.$('.ui-loading')).toHaveClass('is-hidden'); expect(view.$('.ui-loading')).toHaveClass('is-hidden');
}); });
}); });
......
cms/static/js/views/content_group_details.js
...@@ -9,7 +9,7 @@ define([ ...@@ -9,7 +9,7 @@ define([
var ContentGroupDetailsView = BaseView.extend({ var ContentGroupDetailsView = BaseView.extend({
tagName: 'div', tagName: 'div',
className: 'group-configuration-details', className: 'content-group-details collection',
events: { events: {
'click .edit': 'editGroup' 'click .edit': 'editGroup'
......
cms/static/js/views/content_group_editor.js
...@@ -10,7 +10,7 @@ function(ListItemEditorView, _) { ...@@ -10,7 +10,7 @@ function(ListItemEditorView, _) {
var ContentGroupEditorView = ListItemEditorView.extend({ var ContentGroupEditorView = ListItemEditorView.extend({
tagName: 'div', tagName: 'div',
className: 'group-configuration-edit', className: 'content-group-edit collection-edit',
events: { events: {
'submit': 'setAndClose', 'submit': 'setAndClose',
'click .action-cancel': 'cancel' 'click .action-cancel': 'cancel'
......
cms/static/js/views/content_group_item.js
...@@ -12,6 +12,8 @@ define([ ...@@ -12,6 +12,8 @@ define([
var ContentGroupItemView = ListItemView.extend({ var ContentGroupItemView = ListItemView.extend({
tagName: 'section', tagName: 'section',
baseClassName: 'content-group',
createEditView: function() { createEditView: function() {
return new ContentGroupEditorView({model: this.model}); return new ContentGroupEditorView({model: this.model});
}, },
......
cms/static/js/views/content_group_list.js
...@@ -15,6 +15,8 @@ define([ ...@@ -15,6 +15,8 @@ define([
// Translators: This refers to a content group that can be linked to a student cohort. // Translators: This refers to a content group that can be linked to a student cohort.
itemCategoryDisplayName: gettext('content group'), itemCategoryDisplayName: gettext('content group'),
emptyMessage: gettext('You have not created any content groups yet.'),
createItemView: function(options) { createItemView: function(options) {
return new ContentGroupItemView(options); return new ContentGroupItemView(options);
} }
......
cms/static/js/views/group_configuration_details.js
...@@ -19,6 +19,7 @@ function(BaseView, _, gettext, str) { ...@@ -19,6 +19,7 @@ function(BaseView, _, gettext, str) {
var index = this.model.collection.indexOf(this.model); var index = this.model.collection.indexOf(this.model);
return [ return [
'collection',
'group-configuration-details', 'group-configuration-details',
'group-configuration-details-' + index 'group-configuration-details-' + index
].join(' '); ].join(' ');
......
cms/static/js/views/group_configuration_editor.js
...@@ -11,7 +11,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { ...@@ -11,7 +11,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) {
var GroupConfigurationEditorView = ListItemEditorView.extend({ var GroupConfigurationEditorView = ListItemEditorView.extend({
tagName: 'div', tagName: 'div',
events: { events: {
'change .group-configuration-name-input': 'setName', 'change .collection-name-input': 'setName',
'change .group-configuration-description-input': 'setDescription', 'change .group-configuration-description-input': 'setDescription',
'click .action-add-group': 'createGroup', 'click .action-add-group': 'createGroup',
'focus .input-text': 'onFocus', 'focus .input-text': 'onFocus',
...@@ -24,6 +24,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { ...@@ -24,6 +24,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) {
var index = this.model.collection.indexOf(this.model); var index = this.model.collection.indexOf(this.model);
return [ return [
'collection-edit',
'group-configuration-edit', 'group-configuration-edit',
'group-configuration-edit-' + index 'group-configuration-edit-' + index
].join(' '); ].join(' ');
...@@ -84,7 +85,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { ...@@ -84,7 +85,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) {
setName: function(event) { setName: function(event) {
if (event && event.preventDefault) { event.preventDefault(); } if (event && event.preventDefault) { event.preventDefault(); }
this.model.set( this.model.set(
'name', this.$('.group-configuration-name-input').val(), 'name', this.$('.collection-name-input').val(),
{ silent: true } { silent: true }
); );
}, },
......
cms/static/js/views/group_configuration_item.js
...@@ -18,6 +18,13 @@ define([ ...@@ -18,6 +18,13 @@ define([
tagName: 'section', tagName: 'section',
baseClassName: 'group-configuration',
canDelete: true,
// Translators: this refers to a collection of groups.
itemDisplayName: gettext('group configuration'),
attributes: function () { attributes: function () {
return { return {
'id': this.model.get('id'), 'id': this.model.get('id'),
...@@ -25,11 +32,6 @@ define([ ...@@ -25,11 +32,6 @@ define([
}; };
}, },
// Translators: this refers to a collection of groups.
itemDisplayName: gettext('group configuration'),
canDelete: true,
createEditView: function() { createEditView: function() {
return new GroupConfigurationEditorView({model: this.model}); return new GroupConfigurationEditorView({model: this.model});
}, },
......
cms/static/js/views/group_configurations_list.js
...@@ -17,6 +17,8 @@ define([ ...@@ -17,6 +17,8 @@ define([
// Translators: this refers to a collection of groups. // Translators: this refers to a collection of groups.
itemCategoryDisplayName: gettext('group configuration'), itemCategoryDisplayName: gettext('group configuration'),
emptyMessage: gettext('You have not created any group configurations yet.'),
createItemView: function(options) { createItemView: function(options) {
return new GroupConfigurationItemView(options); return new GroupConfigurationItemView(options);
} }
......
cms/static/js/views/list.js
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
* - itemCategoryDisplayName (string): Display name for the category * - itemCategoryDisplayName (string): Display name for the category
* of items this list contains. For example, 'Group Configuration'. * of items this list contains. For example, 'Group Configuration'.
* Note that it must be translated. * Note that it must be translated.
* - emptyMessage (string): Text to render when the list is empty.
*/ */
define([ define([
'js/views/baseview' 'js/views/baseview'
...@@ -21,6 +22,8 @@ define([ ...@@ -21,6 +22,8 @@ define([
'click .new-button': 'onAddItem' 'click .new-button': 'onAddItem'
}, },
listContainerCss: '.list-items',
initialize: function() { initialize: function() {
this.listenTo(this.collection, 'add', this.addNewItemView); this.listenTo(this.collection, 'add', this.addNewItemView);
this.listenTo(this.collection, 'remove', this.onRemoveItem); this.listenTo(this.collection, 'remove', this.onRemoveItem);
...@@ -35,12 +38,13 @@ define([ ...@@ -35,12 +38,13 @@ define([
render: function(model) { render: function(model) {
this.$el.html(this.template({ this.$el.html(this.template({
itemCategoryDisplayName: this.itemCategoryDisplayName, itemCategoryDisplayName: this.itemCategoryDisplayName,
emptyMessage: this.emptyMessage,
length: this.collection.length, length: this.collection.length,
isEditing: model && model.get('editing') isEditing: model && model.get('editing')
})); }));
this.collection.each(function(model) { this.collection.each(function(model) {
this.$('.content-groups').append(this.createItemView({model: model}).render().el); this.$(this.listContainerCss).append(this.createItemView({model: model}).render().el);
}, this); }, this);
return this; return this;
...@@ -71,7 +75,7 @@ define([ ...@@ -71,7 +75,7 @@ define([
// If items already exist, just append one new. // If items already exist, just append one new.
// Otherwise re-render the empty list HTML. // Otherwise re-render the empty list HTML.
if (this.collection.length > 1) { if (this.collection.length > 1) {
this.$('.content-groups').append(view.render().el); this.$(this.listContainerCss).append(view.render().el);
} else { } else {
this.render(); this.render();
} }
......
cms/static/js/views/list_item.js
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
* Subclasses must implement: * Subclasses must implement:
* - itemDisplayName (string): Display name for the list item. * - itemDisplayName (string): Display name for the list item.
* Must be translated. * Must be translated.
* - baseClassName (string): CSS class name representing the item.
* - createEditView (function): Render and append the edit view to the * - createEditView (function): Render and append the edit view to the
* DOM. * DOM.
* - createDetailsView (function): Render and append the details view * - createDetailsView (function): Render and append the details view
...@@ -29,9 +30,11 @@ define([ ...@@ -29,9 +30,11 @@ define([
var index = this.model.collection.indexOf(this.model); var index = this.model.collection.indexOf(this.model);
return [ return [
'group-configuration', 'wrapper-collection',
'group-configurations-list-item', 'wrapper-collection-' + index,
'group-configurations-list-item-' + index this.baseClassName,
this.baseClassName + 's-list-item',
this.baseClassName + 's-list-item-' + index
].join(' '); ].join(' ');
}, },
......
cms/static/sass/views/_group-configuration.scss
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
text-align: center; text-align: center;
} }
.no-group-configurations-content { .no-content {
@extend %no-content; @extend %no-content;
} }
...@@ -35,33 +35,34 @@ ...@@ -35,33 +35,34 @@
.copy { .copy {
@extend %t-copy-sub1; @extend %t-copy-sub1;
} }
} }
.group-configuration { .wrapper-collection {
@extend %ui-window; @extend %ui-window;
position: relative; position: relative;
outline: none; outline: none;
.group-configuration-details { &:hover .collection .actions {
.wrapper-group-configuration { opacity: 1.0;
}
.collection-details {
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
}
.group-configuration-header { .collection-header {
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; border-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
}
.group-configuration-title { .title {
@extend %cont-truncated;
@extend %t-title5; @extend %t-title5;
@extend %t-strong; @extend %t-strong;
overflow: hidden;
text-overflow: ellipsis;
margin-right: ($baseline*14); margin-right: ($baseline*14);
color: $black; color: $black;
.group-toggle { .toggle {
display: inline-block; display: inline-block;
padding-left: $baseline; padding-left: $baseline;
color: $black; color: $black;
...@@ -69,15 +70,37 @@ ...@@ -69,15 +70,37 @@
&:hover, &:focus { &:hover, &:focus {
color: $blue; color: $blue;
} }
.ui-toggle-expansion {
@include transition(rotate .15s ease-in-out .25s);
@extend %t-action1;
display: inline-block;
width: ($baseline*0.75);
vertical-align: baseline;
margin-left: -$baseline;
}
&.is-selectable {
@extend %ui-fake-link;
&:hover {
color: $blue;
.ui-toggle-expansion {
color: $blue;
}
}
}
}
} }
} }
.group-configuration-info { .collection-info {
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $gray-l1; color: $gray-l1;
margin-left: $baseline; margin-left: $baseline;
&.group-configuration-info-inline { &.collection-info-inline {
display: table; display: table;
width: 70%; width: 70%;
margin: ($baseline/4) 0 ($baseline/2) $baseline; margin: ($baseline/4) 0 ($baseline/2) $baseline;
...@@ -86,55 +109,29 @@ ...@@ -86,55 +109,29 @@
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
margin-right: 1%; margin-right: 1%;
padding: ($baseline/4) 0;
&.group-configuration-usage-count { &.collection-usage-count {
font-style: italic; font-style: italic;
} }
} }
} }
&.group-configuration-info-block { .collection-label {
li {
padding: ($baseline/4) 0;
}
}
.group-configuration-label {
text-transform: uppercase; text-transform: uppercase;
} }
.group-configuration-description { .collection-description {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.ui-toggle-expansion { .collection-items {
@include transition(rotate .15s ease-in-out .25s);
@extend %t-action1;
display: inline-block;
width: ($baseline*0.75);
vertical-align: baseline;
margin-left: -$baseline;
}
&.is-selectable {
@extend %ui-fake-link;
&:hover {
color: $blue;
.ui-toggle-expansion {
color: $blue;
}
}
}
.groups {
margin-left: $baseline; margin-left: $baseline;
margin-bottom: ($baseline*0.75); margin-bottom: ($baseline*0.75);
.group { .item {
@extend %t-copy-lead1; @extend %t-copy-lead1;
padding: ($baseline/7) 0 ($baseline/4); padding: ($baseline/7) 0 ($baseline/4);
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
...@@ -144,7 +141,7 @@ ...@@ -144,7 +141,7 @@
border-top: none; border-top: none;
} }
.group-name { .name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
...@@ -152,23 +149,17 @@ ...@@ -152,23 +149,17 @@
width: 75%; width: 75%;
margin-right: 5%; margin-right: 5%;
} }
.group-allocation {
display: inline-block;
vertical-align: middle;
width: 20%;
color: $gray-l1;
text-align: right;
}
} }
} }
.collection-details {
.actions { .actions {
@include transition(opacity .15s .25s ease-in-out); @include transition(opacity .15s .25s ease-in-out);
opacity: 0.0;
position: absolute; position: absolute;
top: $baseline; top: $baseline;
right: $baseline; right: $baseline;
opacity: 0.0;
.action { .action {
display: inline-block; display: inline-block;
...@@ -191,20 +182,20 @@ ...@@ -191,20 +182,20 @@
} }
} }
.wrapper-group-configuration-usages { .collection-references {
@extend %t-copy-sub1; @extend %t-copy-sub1;
box-shadow: 0 2px 2px 0 $shadow inset; box-shadow: 0 2px 2px 0 $shadow inset;
padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5); padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
color: $gray-l1; color: $gray-l1;
.group-configuration-usage { .usage {
margin-left: $baseline; margin-left: $baseline;
.group-configuration-usage-unit { .usage-unit {
padding: ($baseline/4) 0; padding: ($baseline/4) 0;
a { a {
font-weight: 600; @extend %t-strong;
} }
.fa-warning { .fa-warning {
...@@ -219,9 +210,8 @@ ...@@ -219,9 +210,8 @@
} }
} }
} }
}
.wrapper-group-configuration-validation { .usage-validation {
@extend %t-copy-sub1; @extend %t-copy-sub1;
background-color: $gray-l6; background-color: $gray-l6;
margin-top: $baseline; margin-top: $baseline;
...@@ -233,17 +223,21 @@ ...@@ -233,17 +223,21 @@
float: left; float: left;
} }
.group-configuration-validation-text { .collection-validation-text {
overflow: auto; overflow: auto;
} }
} }
.group-configuration-edit { .collection-edit {
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 2px; border-radius: 2px;
width: 100%; width: 100%;
background: $white; background: $white;
.message {
margin-bottom: 0;
}
.wrapper-form { .wrapper-form {
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
} }
...@@ -260,60 +254,17 @@ ...@@ -260,60 +254,17 @@
color: $gray; color: $gray;
} }
.actions {
box-shadow: inset 0 1px 2px $shadow;
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
background: $gray-l6;
.action {
margin-right: ($baseline/4);
&:last-child {
margin-right: 0;
}
}
// add a group is below with groups styling
.action-primary {
@extend %btn-primary-blue;
padding: ($baseline/4) $baseline;
}
.action-secondary {
@extend %btn-secondary-gray;
padding: ($baseline/4) $baseline;
}
.wrapper-delete-button {
float: right;
padding: ($baseline/4) ($baseline/2);
.is-disabled {
color: $gray-l3;
}
}
}
.copy {
@extend %t-copy-sub2;
margin: ($baseline) 0 ($baseline/2) 0;
color: $gray;
strong { .collection-fields {
@extend %t-strong;
}
}
.groups-fields,
.group-configuration-fields {
@extend %cont-no-list; @extend %cont-no-list;
margin-bottom: $baseline;
}
.field { .field {
margin: 0 0 ($baseline*0.75) 0; margin: 0 0 ($baseline*0.75) 0;
&:last-child { &:last-child {
margin-bottom: 0; @extend %wipe-last-child;
} }
&.required { &.required {
...@@ -393,10 +344,188 @@ ...@@ -393,10 +344,188 @@
border-color: $red; border-color: $red;
} }
} }
}
&.add-group-configuration-name label { label.required {
@extend %t-strong;
&:after {
margin-left: ($baseline/4);
content: "*";
}
}
.field.add-collection-name label {
@extend %t-title5; @extend %t-title5;
display: inline-block; display: inline-block;
vertical-align: bottom;
}
.actions {
box-shadow: inset 0 1px 2px $shadow;
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
background: $gray-l6;
.action {
margin-right: ($baseline/4);
&:last-child {
margin-right: 0;
}
}
// add a group is below with groups styling
.action-primary {
@extend %btn-primary-blue;
padding: ($baseline/4) $baseline;
}
.action-secondary {
@extend %btn-secondary-gray;
padding: ($baseline/4) $baseline;
}
.wrapper-delete-button {
float: right;
padding: ($baseline/4) ($baseline/2);
.is-disabled {
color: $gray-l3;
}
}
}
.copy {
@extend %t-copy-sub2;
margin: ($baseline) 0 ($baseline/2) 0;
color: $gray;
strong {
@extend %t-strong;
}
}
}
.action-add-item {
@extend %ui-btn-flat-outline;
@extend %t-action2;
@extend %t-strong;
display: block;
width: 100%;
margin: ($baseline*1.5) 0 0 0;
padding: ($baseline/2);
}
}
// add/new collection
.action-add {
@extend %ui-btn-flat-outline;
display: block;
width: 100%;
margin-top: ($baseline*0.75);
padding: ($baseline/2) $baseline;
&.is-hidden {
display: none;
}
.icon {
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/2);
}
}
// specific group-type styles
.content-groups {
.collection-header{
.title {
margin-bottom: 0;
}
}
}
.experiment-groups {
.group-configuration-details {
.group-configuration-info {
@extend %t-copy-sub1;
color: $gray-l1;
margin-left: $baseline;
&.group-configuration-info-inline {
display: table;
width: 70%;
margin: ($baseline/4) 0 ($baseline/2) $baseline;
li {
@include box-sizing(border-box);
display: table-cell;
margin-right: 1%;
&.group-configuration-usage-count {
font-style: italic;
}
}
}
&.group-configuration-info-block {
li {
padding: ($baseline/4) 0;
}
}
.group-configuration-label {
text-transform: uppercase;
}
.group-configuration-description {
overflow: hidden;
text-overflow: ellipsis;
}
}
.groups {
margin-left: $baseline;
margin-bottom: ($baseline*0.75);
.group {
@extend %t-copy-lead1;
padding: ($baseline/7) 0 ($baseline/4);
border-top: 1px solid $gray-l4;
white-space: nowrap;
&:first-child {
border-top: none;
}
.group-name {
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
width: 75%;
margin-right: 5%;
}
.group-allocation {
display: inline-block;
vertical-align: middle;
width: 20%;
color: $gray-l1;
text-align: right;
}
}
}
}
.group-configuration-edit {
.add-collection-name label {
width: 50%; width: 50%;
padding-right: 5%; padding-right: 5%;
overflow: hidden; overflow: hidden;
...@@ -418,20 +547,6 @@ ...@@ -418,20 +547,6 @@
} }
} }
&.group-allocation {
color: $gray-l1;
}
}
label.required {
@extend %t-strong;
&:after {
margin-left: ($baseline/4);
content: "*";
}
}
.field-group { .field-group {
@include clearfix(); @include clearfix();
margin: 0 0 ($baseline/2) 0; margin: 0 0 ($baseline/2) 0;
...@@ -478,52 +593,10 @@ ...@@ -478,52 +593,10 @@
} }
} }
} }
.group-configuration-fields {
margin-bottom: $baseline;
}
}
&:hover .wrapper-group-configuration .actions {
opacity: 1.0;
}
.action-add-group {
@extend %ui-btn-flat-outline;
@extend %t-action2;
@extend %t-strong;
display: block;
width: 100%;
margin: ($baseline*1.5) 0 0 0;
padding: ($baseline/2);
}
}
// add/new items
.action-add {
@extend %ui-btn-flat-outline;
display: block;
width: 100%;
margin-top: ($baseline*0.75);
padding: ($baseline/2) $baseline;
&.is-hidden {
display: none;
}
.icon {
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/2);
}
} }
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); width: flex-grid(3, 12);
.content-groups-doc {
margin-bottom: $baseline;
}
} }
} }
cms/templates/group_configurations.html
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
% endif % endif
</article> </article>
<aside class="content-supplementary" role="complementary"> <aside class="content-supplementary" role="complementary">
<div class="content-groups-doc">
<div class="bit"> <div class="bit">
<div class="content-groups-doc">
<h3 class="title-3">${_("Content Groups")}</h3> <h3 class="title-3">${_("Content Groups")}</h3>
<p>${_("Use content groups to give groups of students access to a specific set of course content. In addition to course content that is intended for all students, each content group sees content that you specifically designate as visible to it. By associating a content group with one or more cohorts, you can customize the content that a particular cohort or cohorts sees in your course.")}</p> <p>${_("Use content groups to give groups of students access to a specific set of course content. In addition to course content that is intended for all students, each content group sees content that you specifically designate as visible to it. By associating a content group with one or more cohorts, you can customize the content that a particular cohort or cohorts sees in your course.")}</p>
<p>${_("Click {em_start}New content group{em_end} to add a new content group. To edit the name of a content group, hover over its box and click {em_start}Edit{em_end}. Content groups cannot be deleted.").format(em_start="<strong>", em_end="</strong>")}</p> <p>${_("Click {em_start}New content group{em_end} to add a new content group. To edit the name of a content group, hover over its box and click {em_start}Edit{em_end}. Content groups cannot be deleted.").format(em_start="<strong>", em_end="</strong>")}</p>
...@@ -72,8 +72,8 @@ ...@@ -72,8 +72,8 @@
</div> </div>
</div> </div>
% if should_show_experiment_groups: % if should_show_experiment_groups:
<div class="experiment-groups-doc">
<div class="bit"> <div class="bit">
<div class="experiment-groups-doc">
<h3 class="title-3">${_("Experiment Group Configurations")}</h3> <h3 class="title-3">${_("Experiment Group Configurations")}</h3>
<p>${_("Use experiment group configurations to define how many groups of students are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.")}</p> <p>${_("Use experiment group configurations to define how many groups of students are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.")}</p>
<p>${_("Click {em_start}New Group Configuration{em_end} to add a new configuration. To edit a configuration, hover over its box and click {em_start}Edit{em_end}.").format(em_start="<strong>", em_end="</strong>")}</p> <p>${_("Click {em_start}New Group Configuration{em_end} to add a new configuration. To edit a configuration, hover over its box and click {em_start}Edit{em_end}.").format(em_start="<strong>", em_end="</strong>")}</p>
......
cms/templates/js/content-group-details.underscore
<div class="wrapper-group-configuration"> <div class="collection-details">
<header class="group-configuration-header"> <header class="collection-header">
<h3 class="group-configuration-title"> <h3 class="title">
<%- name %> <%- name %>
</h3> </h3>
</header> </header>
<ul class="actions group-configuration-actions"> <ul class="actions">
<li class="action action-edit"> <li class="action action-edit">
<button class="edit"><i class="icon fa fa-pencil"></i> <%= gettext("Edit") %></button> <button class="edit"><i class="icon fa fa-pencil"></i> <%= gettext("Edit") %></button>
</li> </li>
......
cms/templates/js/content-group-editor.underscore
<form class="group-configuration-edit-form"> <form class="collection-edit-form">
<div class="wrapper-form">
<% if (error && error.message) { %> <% if (error && error.message) { %>
<div class="group-configuration-edit-error message message-status message-status error is-shown" name="group-configuration-edit-error"> <div class="content-group-edit-error message message-status message-status error is-shown">
<%= gettext(error.message) %> <%= gettext(error.message) %>
</div> </div>
<% } %> <% } %>
<fieldset class="groups-fields"> <div class="wrapper-form">
<div class="input-wrap field text required add-group-configuration-name <% if(error && error.attributes && error.attributes.name) { print('error'); } %>"> <fieldset class="collection-fields">
<div class="input-wrap field text required add-collection-name <% if(error && error.attributes && error.attributes.name) { print('error'); } %>">
<label for="group-cohort-name-<%= uniqueId %>"><%= gettext("Content Group Name") %></label> <label for="group-cohort-name-<%= uniqueId %>"><%= gettext("Content Group Name") %></label>
<input name="group-cohort-name" id="group-cohort-name-<%= uniqueId %>" class="group-configuration-name-input input-text" value="<%- name %>" type="text" placeholder="<%= gettext("This is the name of the group") %>"> <input name="group-cohort-name" id="group-cohort-name-<%= uniqueId %>" class="collection-name-input input-text" value="<%- name %>" type="text" placeholder="<%= gettext("This is the name of the group") %>">
</div> </div>
</fieldset> </fieldset>
</div> </div>
......
cms/templates/js/group-configuration-details.underscore
<div class="wrapper-group-configuration"> <div class="collection-details wrapper-group-configuration">
<header class="group-configuration-header"> <header class="collection-header group-configuration-header">
<h3 class="group-configuration-title"> <h3 class="title group-configuration-title">
<a href="#" class="group-toggle <% if(showGroups){ print('hide'); } else { print('show'); } %>-groups"> <a href="#" class="toggle group-toggle <% if(showGroups){ print('hide'); } else { print('show'); } %>-groups">
<i class="ui-toggle-expansion icon fa fa-caret-<% if(showGroups){ print('down'); } else { print('right'); } %>"></i> <i class="ui-toggle-expansion icon fa fa-caret-<% if(showGroups){ print('down'); } else { print('right'); } %>"></i>
<%= name %> <%= name %>
</a> </a>
</h3> </h3>
</header> </header>
<ol class="group-configuration-info group-configuration-info-<% if(showGroups){ print('block'); } else { print('inline'); } %>"> <ol class="collection-info group-configuration-info group-configuration-info-<% if(showGroups){ print('block'); } else { print('inline'); } %>">
<% if (!_.isUndefined(id)) { %> <% if (!_.isUndefined(id)) { %>
<li class="group-configuration-id" <li class="group-configuration-id"
><span class="group-configuration-label"><%= gettext('ID') %>: </span ><span class="group-configuration-label"><%= gettext('ID') %>: </span
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
></li> ></li>
<% } %> <% } %>
<% if (showGroups) { %> <% if (showGroups) { %>
<li class="group-configuration-description"> <li class="collection-description group-configuration-description">
<%= description %> <%= description %>
</li> </li>
<% } else { %> <% } else { %>
...@@ -31,11 +31,11 @@ ...@@ -31,11 +31,11 @@
<% if(showGroups) { %> <% if(showGroups) { %>
<% allocation = Math.floor(100 / groups.length) %> <% allocation = Math.floor(100 / groups.length) %>
<ol class="groups groups-<%= index %>"> <ol class="collection-items groups groups-<%= index %>">
<% groups.each(function(group, groupIndex) { %> <% groups.each(function(group, groupIndex) { %>
<li class="group group-<%= groupIndex %>"> <li class="item group group-<%= groupIndex %>">
<span class="group-name"><%= group.get('name') %></span> <span class="name group-name"><%= group.get('name') %></span>
<span class="group-allocation"><%= allocation %>%</span> <span class="meta group-allocation"><%= allocation %>%</span>
</li> </li>
<% }) %> <% }) %>
</ol> </ol>
...@@ -56,12 +56,12 @@ ...@@ -56,12 +56,12 @@
</ul> </ul>
</div> </div>
<% if(showGroups) { %> <% if(showGroups) { %>
<div class="wrapper-group-configuration-usages"> <div class="collection-references wrapper-group-configuration-usages">
<% if (!_.isEmpty(usage)) { %> <% if (!_.isEmpty(usage)) { %>
<h4 class="group-configuration-usage-text"><%= gettext('This Group Configuration is used in:') %></h4> <h4 class="intro group-configuration-usage-text"><%= gettext('This Group Configuration is used in:') %></h4>
<ol class="group-configuration-usage"> <ol class="usage group-configuration-usage">
<% _.each(usage, function(unit) { %> <% _.each(usage, function(unit) { %>
<li class="group-configuration-usage-unit"> <li class="usage-unit group-configuration-usage-unit">
<p><a href=<%= unit.url %> ><%= unit.label %></a></p> <p><a href=<%= unit.url %> ><%= unit.label %></a></p>
<% if (unit.validation) { %> <% if (unit.validation) { %>
<p> <p>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<% } else if (unit.validation.type === 'error') { %> <% } else if (unit.validation.type === 'error') { %>
<i class="icon fa fa-exclamation-circle"></i> <i class="icon fa fa-exclamation-circle"></i>
<% } %> <% } %>
<span class="group-configuration-validation-message"> <span class="usage-validation-message group-configuration-validation-message">
<%= unit.validation.text %> <%= unit.validation.text %>
</span> </span>
</p> </p>
......
cms/templates/js/group-configuration-editor.underscore
<form class="group-configuration-edit-form"> <form class="collection-edit-form group-configuration-edit-form">
<div class="wrapper-form">
<% if (error && error.message) { %> <% if (error && error.message) { %>
<div class="group-configuration-edit-error message message-status message-status error is-shown" name="group-configuration-edit-error"> <div class="group-configuration-edit-error message message-status message-status error is-shown" name="group-configuration-edit-error">
<%= gettext(error.message) %> <%= gettext(error.message) %>
</div> </div>
<% } %> <% } %>
<fieldset class="group-configuration-fields"> <div class="wrapper-form">
<fieldset class="collection-fields group-configuration-fields">
<legend class="sr"><%= gettext("Group Configuration information") %></legend> <legend class="sr"><%= gettext("Group Configuration information") %></legend>
<div class="input-wrap field text required add-group-configuration-name <% if(error && error.attributes && error.attributes.name) { print('error'); } %>"> <div class="input-wrap field text required add-collection-name add-group-configuration-name <% if(error && error.attributes && error.attributes.name) { print('error'); } %>">
<label for="group-configuration-name-<%= uniqueId %>"><%= gettext("Group Configuration Name") %></label><% <label for="group-configuration-name-<%= uniqueId %>"><%= gettext("Group Configuration Name") %></label><%
if (!_.isUndefined(id)) { if (!_.isUndefined(id)) {
%><span class="group-configuration-id"> %><span class="group-configuration-id">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</span><% </span><%
} }
%> %>
<input id="group-configuration-name-<%= uniqueId %>" class="group-configuration-name-input input-text" name="group-configuration-name" type="text" placeholder="<%= gettext("This is the Name of the Group Configuration") %>" value="<%= name %>"> <input id="group-configuration-name-<%= uniqueId %>" class="collection-name-input input-text" name="group-configuration-name" type="text" placeholder="<%= gettext("This is the Name of the Group Configuration") %>" value="<%= name %>">
<span class="tip tip-stacked"><%= gettext("Name or short description of the configuration") %></span> <span class="tip tip-stacked"><%= gettext("Name or short description of the configuration") %></span>
</div> </div>
<div class="input-wrap field text add-group-configuration-description"> <div class="input-wrap field text add-group-configuration-description">
...@@ -30,10 +30,10 @@ ...@@ -30,10 +30,10 @@
<label class="groups-fields-label required"><%= gettext("Groups") %></label> <label class="groups-fields-label required"><%= gettext("Groups") %></label>
<span class="tip tip-stacked"><%= gettext("Name of the groups that students will be assigned to, for example, Control, Video, Problems. You must have two or more groups.") %></span> <span class="tip tip-stacked"><%= gettext("Name of the groups that students will be assigned to, for example, Control, Video, Problems. You must have two or more groups.") %></span>
<ol class="groups list-input enum"></ol> <ol class="groups list-input enum"></ol>
<button class="action action-add-group"><i class="icon fa fa-plus"></i> <%= gettext("Add another group") %></button> <button class="action action-add-group action-add-item"><i class="icon fa fa-plus"></i> <%= gettext("Add another group") %></button>
</fieldset> </fieldset>
<% if (!_.isEmpty(usage)) { %> <% if (!_.isEmpty(usage)) { %>
<div class="wrapper-group-configuration-validation"> <div class="wrapper-group-configuration-validation usage-validation">
<i class="icon fa fa-warning"></i> <i class="icon fa fa-warning"></i>
<p class="group-configuration-validation-text"> <p class="group-configuration-validation-text">
<%= gettext('This configuration is currently used in content experiments. If you make changes to the groups, you may need to edit those experiments.') %> <%= gettext('This configuration is currently used in content experiments. If you make changes to the groups, you may need to edit those experiments.') %>
......
cms/templates/js/list.underscore
<% if (length === 0) { %> <% if (length === 0) { %>
<div class="no-group-configurations-content"> <div class="no-content">
<p><%- interpolate(gettext("You have not created any %(item_type)ss yet."), {item_type: itemCategoryDisplayName}, true) %><a href="#" class="button new-button"><i class="icon fa fa-plus"></i> <%= gettext("Add your first content group") %></a></p> <p>
<%- emptyMessage %>
<a href="#" class="button new-button"><i class="icon fa fa-plus"></i> <%= interpolate(gettext("Add your first %(item_type)s"), {item_type: itemCategoryDisplayName}, true) %></a>
</p>
</div> </div>
<% } else { %> <% } else { %>
<div class="content-groups"></div> <div class="list-items"></div>
<% if (!isEditing) { %> <% if (!isEditing) { %>
<button class="action action-add"> <button class="action action-add">
<i class="icon fa fa-plus"></i><%- interpolate(gettext('New %(item_type)s'), {item_type: itemCategoryDisplayName}, true) %> <i class="icon fa fa-plus"></i><%- interpolate(gettext('New %(item_type)s'), {item_type: itemCategoryDisplayName}, true) %>
......
common/test/acceptance/pages/studio/settings_group_configurations.py
...@@ -49,7 +49,7 @@ class GroupConfigurationsPage(CoursePage): ...@@ -49,7 +49,7 @@ class GroupConfigurationsPage(CoursePage):
""" """
Return list of the group-configurations-list-item's of specified type for the course. Return list of the group-configurations-list-item's of specified type for the course.
""" """
css = prefix + ' .group-configurations-list-item' css = prefix + ' .wrapper-collection'
return [GroupConfiguration(self, prefix, index) for index in xrange(len(self.q(css=css)))] return [GroupConfiguration(self, prefix, index) for index in xrange(len(self.q(css=css)))]
def create_experiment_group_configuration(self): def create_experiment_group_configuration(self):
...@@ -90,7 +90,7 @@ class GroupConfigurationsPage(CoursePage): ...@@ -90,7 +90,7 @@ class GroupConfigurationsPage(CoursePage):
""" """
Returns the message about "no content" for the specified type. Returns the message about "no content" for the specified type.
""" """
return self.q(css='.wrapper-content ' + prefix + ' .no-group-configurations-content') return self.q(css='.wrapper-content ' + prefix + ' .no-content')
@property @property
def experiment_group_sections_present(self): def experiment_group_sections_present(self):
...@@ -107,7 +107,7 @@ class GroupConfiguration(object): ...@@ -107,7 +107,7 @@ class GroupConfiguration(object):
def __init__(self, page, prefix, index): def __init__(self, page, prefix, index):
self.page = page self.page = page
self.SELECTOR = prefix + ' .group-configurations-list-item-{}'.format(index) self.SELECTOR = prefix + ' .wrapper-collection-{}'.format(index)
self.index = index self.index = index
def get_selector(self, css=''): def get_selector(self, css=''):
...@@ -195,9 +195,9 @@ class GroupConfiguration(object): ...@@ -195,9 +195,9 @@ class GroupConfiguration(object):
""" """
Return group configuration mode. Return group configuration mode.
""" """
if self.find_css('.group-configuration-edit').present: if self.find_css('.collection-edit').present:
return 'edit' return 'edit'
elif self.find_css('.group-configuration-details').present: elif self.find_css('.collection').present:
return 'details' return 'details'
@property @property
...@@ -227,14 +227,14 @@ class GroupConfiguration(object): ...@@ -227,14 +227,14 @@ class GroupConfiguration(object):
""" """
Return group configuration name. Return group configuration name.
""" """
return self.get_text('.group-configuration-title') return self.get_text('.title')
@name.setter @name.setter
def name(self, value): def name(self, value):
""" """
Set group configuration name. Set group configuration name.
""" """
self.find_css('.group-configuration-name-input').first.fill(value) self.find_css('.collection-name-input').first.fill(value)
@property @property
def description(self): def description(self):
......
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