Skip to content

E
edx-platform
Commit 2d678d0c by Frances Botsford
Options

Responding to review feedback on studio outline cleanup 

Bug fix for dragging past last element in list.
STUD-879
parent 089a61c6
Showing with 459 additions and 280 deletions
cms/static/coffee/spec/views/overview_spec.coffee
...@@ -55,23 +55,35 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base ...@@ -55,23 +55,35 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
""" """
appendSetFixtures """ appendSetFixtures """
<ol class="sortable-subsection-list"> <section>
<li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-1" data-locator="subsection-1-id" data-parent="a-aprent-locator-goes-here" data-id="a-data-id-goes-here"> <ol class="sortable-subsection-list">
<li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-0" data-locator="subsection-0-id" style="margin:5px">
<ol class="sortable-unit-list" id="subsection-list-0">
<li class="courseware-unit unit is-draggable" id="unit-0" data-parent="subsection-0-id" data-locator="zero-unit-id"></li>
</ol>
</li>
<li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-1" data-locator="subsection-1-id" style="margin:5px">
<ol class="sortable-unit-list" id="subsection-list-1"> <ol class="sortable-unit-list" id="subsection-list-1">
<li class="courseware-unit unit is-draggable" id="unit-1" data-parent="subsection-1-id" data-locator="first-unit-id"></li> <li class="courseware-unit unit is-draggable" id="unit-1" data-parent="subsection-1-id" data-locator="first-unit-id"></li>
<li class="courseware-unit unit is-draggable" id="unit-2" data-parent="subsection-1-id" data-locator="second-unit-id"></li> <li class="courseware-unit unit is-draggable" id="unit-2" data-parent="subsection-1-id" data-locator="second-unit-id"></li>
<li class="courseware-unit unit is-draggable" id="unit-3" data-parent="subsection-1-id" data-locator="third-unit-id"></li> <li class="courseware-unit unit is-draggable" id="unit-3" data-parent="subsection-1-id" data-locator="third-unit-id"></li>
</ol> </ol>
</li> </li>
<li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-2" data-locator="subsection-2-id" data-parent="a-aprent-locator-goes-here" data-id="a-data-id-goes-here"> <li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-2" data-locator="subsection-2-id" style="margin:5px">
<ol class="sortable-unit-list" id="subsection-list-2"> <ol class="sortable-unit-list" id="subsection-list-2">
<li class="courseware-unit unit is-draggable" id="unit-4" data-parent="subsection-2" data-locator="fourth-unit-id"></li> <li class="courseware-unit unit is-draggable" id="unit-4" data-parent="subsection-2" data-locator="fourth-unit-id"></li>
</ol> </ol>
</li> </li>
<li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-3" data-locator="subsection-3-id" data-parent="a-aprent-locator-goes-here" data-id="a-data-id-goes-here"> <li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-3" data-locator="subsection-3-id" style="margin:5px">
<ol class="sortable-unit-list" id="subsection-list-3"> <ol class="sortable-unit-list" id="subsection-list-3"></ol>
</li> </li>
</ol> <li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-4" data-locator="subsection-4-id" style="margin:5px">
<ol class="sortable-unit-list" id="subsection-list-4">
<li class="courseware-unit unit is-draggable" id="unit-5" data-parent="subsection-4-id" data-locator="fifth-unit-id"></li>
</ol>
</li>
</ol>
</section>
""" """
spyOn(Overview, 'saveSetSectionScheduleDate').andCallThrough() spyOn(Overview, 'saveSetSectionScheduleDate').andCallThrough()
...@@ -94,6 +106,13 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base ...@@ -94,6 +106,13 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
'li.courseware-subsection, article.subsection-body' 'li.courseware-subsection, article.subsection-body'
) )
Overview.overviewDragger.makeDraggable(
'.courseware-subsection',
'.subsection-drag-handle',
'.sortable-subsection-list',
'section'
)
afterEach -> afterEach ->
delete window.analytics delete window.analytics
delete window.course_location_analytics delete window.course_location_analytics
...@@ -136,25 +155,54 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base ...@@ -136,25 +155,54 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
expect(destination.ele).toBe($('#unit-2')) expect(destination.ele).toBe($('#unit-2'))
expect(destination.attachMethod).toBe('before') expect(destination.attachMethod).toBe('before')
it "can drag and drop across section boundaries, with special handling for first element", -> it "can drag and drop across section boundaries, with special handling for single sibling", ->
$ele = $('#unit-1') $ele = $('#unit-1')
$unit4 = $('#unit-4')
$ele.offset( $ele.offset(
top: $('#unit-4').offset().top + 8 top: $unit4.offset().top + 8
left: $ele.offset().left left: $ele.offset().left
) )
# Dragging down, we will insert after.
destination = Overview.overviewDragger.findDestination($ele, 1) destination = Overview.overviewDragger.findDestination($ele, 1)
expect(destination.ele).toBe($('#unit-4')) expect(destination.ele).toBe($unit4)
# Dragging down into first element, we have a fudge factor makes it easier to drag at beginning. expect(destination.attachMethod).toBe('after')
# Dragging up, we will insert before.
destination = Overview.overviewDragger.findDestination($ele, -1)
expect(destination.ele).toBe($unit4)
expect(destination.attachMethod).toBe('before') expect(destination.attachMethod).toBe('before')
# Now past the "fudge factor".
# If past the end the drop target, will attach after.
$ele.offset( $ele.offset(
top: $('#unit-4').offset().top + 12 top: $unit4.offset().top + $unit4.height() + 1
left: $ele.offset().left left: $ele.offset().left
) )
destination = Overview.overviewDragger.findDestination($ele, 1) destination = Overview.overviewDragger.findDestination($ele, 0)
expect(destination.ele).toBe($('#unit-4')) expect(destination.ele).toBe($unit4)
expect(destination.attachMethod).toBe('after') expect(destination.attachMethod).toBe('after')
$unit0 = $('#unit-0')
# If before the start the drop target, will attach before.
$ele.offset(
top: $unit0.offset().top - 16
left: $ele.offset().left
)
destination = Overview.overviewDragger.findDestination($ele, 0)
expect(destination.ele).toBe($unit0)
expect(destination.attachMethod).toBe('before')
it """can drop before the first element, even if element being dragged is
slightly before the first element""", ->
$ele = $('#subsection-2')
$ele.offset(
top: $('#subsection-0').offset().top - 5
left: $ele.offset().left
)
destination = Overview.overviewDragger.findDestination($ele, -1)
expect(destination.ele).toBe($('#subsection-0'))
expect(destination.attachMethod).toBe('before')
it "can drag and drop across section boundaries, with special handling for last element", -> it "can drag and drop across section boundaries, with special handling for last element", ->
$ele = $('#unit-4') $ele = $('#unit-4')
$ele.offset( $ele.offset(
...@@ -174,6 +222,20 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base ...@@ -174,6 +222,20 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
expect(destination.ele).toBe($('#unit-3')) expect(destination.ele).toBe($('#unit-3'))
expect(destination.attachMethod).toBe('before') expect(destination.attachMethod).toBe('before')
it """can drop past the last element, even if element being dragged is
slightly before/taller then the last element""", ->
$ele = $('#subsection-2')
$ele.offset(
# Make the top 1 before the top of the last element in the list.
# This mimics the problem when the element being dropped is taller then then
# the last element in the list.
top: $('#subsection-4').offset().top - 1
left: $ele.offset().left
)
destination = Overview.overviewDragger.findDestination($ele, 1)
expect(destination.ele).toBe($('#subsection-4'))
expect(destination.attachMethod).toBe('after')
it "can drag into an empty list", -> it "can drag into an empty list", ->
$ele = $('#unit-1') $ele = $('#unit-1')
$ele.offset( $ele.offset(
...@@ -322,8 +384,8 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base ...@@ -322,8 +384,8 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
$('#subsection-1').addClass('expand-on-drop') $('#subsection-1').addClass('expand-on-drop')
Overview.overviewDragger.onDragEnd( Overview.overviewDragger.onDragEnd(
{element: $('#subsection-1')}, {element: $('#subsection-1')},
null, null,
null null
) )
expect($('#subsection-1')).not.toHaveClass('collapsed') expect($('#subsection-1')).not.toHaveClass('collapsed')
expect($('#subsection-1')).not.toHaveClass('expand-on-drop') expect($('#subsection-1')).not.toHaveClass('expand-on-drop')
...@@ -335,7 +397,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base ...@@ -335,7 +397,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
Overview.overviewDragger.dragState.parentList = $('#subsection-2') Overview.overviewDragger.dragState.parentList = $('#subsection-2')
Overview.overviewDragger.onDragEnd( Overview.overviewDragger.onDragEnd(
{element: $('#unit-1')}, {element: $('#unit-1')},
null, null,
{clientX: $('#unit-1').offset().left} {clientX: $('#unit-1').offset().left}
) )
expect($('#subsection-2')).not.toHaveClass('collapsed') expect($('#subsection-2')).not.toHaveClass('collapsed')
......
cms/static/js/base.js
...@@ -25,7 +25,7 @@ domReady(function() { ...@@ -25,7 +25,7 @@ domReady(function() {
$('body').addClass('js'); $('body').addClass('js');
$('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.unit .item-actions .delete-unit-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit); $('.new-unit-item').bind('click', createNewUnit);
// lean/simple modal // lean/simple modal
......
cms/static/js/views/overview.js
define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notification", "draggabilly", define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notification", "draggabilly",
"js/utils/modal", "js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"], "js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"],
function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, ModalUtils, CancelOnEscape, function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, CancelOnEscape,
DateUtils, ModuleUtils) { DateUtils, ModuleUtils) {
var modalSelector = '.edit-section-publish-settings'; var modalSelector = '.edit-section-publish-settings';
...@@ -36,10 +36,10 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe ...@@ -36,10 +36,10 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
}; };
var closeModalNew = function (e) { var closeModalNew = function () {
$('body').removeClass('dialog-is-shown'); $('body').removeClass('dialog-is-shown');
$('.edit-section-publish-settings').removeClass('is-shown'); $('.edit-section-publish-settings').removeClass('is-shown');
} };
var editSectionPublishDate = function (e) { var editSectionPublishDate = function (e) {
e.preventDefault(); e.preventDefault();
...@@ -51,7 +51,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe ...@@ -51,7 +51,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
$modal.find('.save-button').hide(); $modal.find('.save-button').hide();
} }
$modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"'); $modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
//ModalUtils.showModal();
$('body').addClass('dialog-is-shown'); $('body').addClass('dialog-is-shown');
$('.edit-section-publish-settings').addClass('is-shown'); $('.edit-section-publish-settings').addClass('is-shown');
}; };
...@@ -108,7 +107,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe ...@@ -108,7 +107,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
locator: locator}, locator: locator},
{interpolate: /\{(.+?)\}/g}); {interpolate: /\{(.+?)\}/g});
$thisSection.find('.section-published-date').html(html); $thisSection.find('.section-published-date').html(html);
//ModalUtils.hideModal();
saving.hide(); saving.hide();
closeModalNew(); closeModalNew();
}); });
...@@ -221,6 +219,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe ...@@ -221,6 +219,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
*/ */
findDestination: function (ele, yChange) { findDestination: function (ele, yChange) {
var eleY = ele.offset().top; var eleY = ele.offset().top;
var eleYEnd = eleY + ele.height();
var containers = $(ele.data('droppable-class')); var containers = $(ele.data('droppable-class'));
for (var i = 0; i < containers.length; i++) { for (var i = 0; i < containers.length; i++) {
...@@ -235,7 +234,15 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe ...@@ -235,7 +234,15 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// position of the container // position of the container
var parentList = container.parents(ele.data('parent-location-selector')).first(); var parentList = container.parents(ele.data('parent-location-selector')).first();
if (parentList.hasClass('collapsed')) { if (parentList.hasClass('collapsed')) {
if (Math.abs(eleY - parentList.offset().top) < 10) { var parentListTop = parentList.offset().top;
// To make it easier to drop subsections into collapsed sections (which have
// a lot of visual padding around them), allow a fudge factor around the
// parent element.
var collapseFudge = 10;
if (Math.abs(eleY - parentListTop) < collapseFudge ||
(eleY > parentListTop &&
eleYEnd - collapseFudge <= parentListTop + parentList.height())
) {
return { return {
ele: container, ele: container,
attachMethod: 'prepend', attachMethod: 'prepend',
...@@ -269,25 +276,64 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe ...@@ -269,25 +276,64 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// Facilitate dropping into the beginning or end of a list // Facilitate dropping into the beginning or end of a list
// (coming from opposite direction) via a "fudge factor". Math.min is for Jasmine test. // (coming from opposite direction) via a "fudge factor". Math.min is for Jasmine test.
var fudge = Math.min(Math.ceil(siblingHeight / 2), 20); var fudge = Math.min(Math.ceil(siblingHeight / 2), 20);
// Dragging up into end of list.
if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) { // Dragging to top or bottom of a list with only one element is tricky
return { // because the element being dragged may be the same size as the sibling.
ele: $sibling, if (siblings.length == 1) {
attachMethod: 'after' // Element being dragged is within the drop target. Use the direction
}; // of the drag (yChange) to determine before or after.
} if (eleY + fudge >= siblingY && eleYEnd - fudge <= siblingYEnd) {
// Dragging down into beginning of list. return {
else if (j == 0 && yChange > 0 && Math.abs(eleY - siblingY) <= fudge) { ele: $sibling,
return { attachMethod: yChange > 0 ? 'after' : 'before'
ele: $sibling, };
attachMethod: 'before' }
}; // Element being dragged is before the drop target.
else if (Math.abs(eleYEnd - siblingY) <= fudge) {
return {
ele: $sibling,
attachMethod: 'before'
};
}
// Element being dragged is after the drop target.
else if (Math.abs(eleY - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
}
} }
else if (eleY >= siblingY && eleY <= siblingYEnd) { else {
return { // Dragging up into end of list.
ele: $sibling, if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after' return {
}; ele: $sibling,
attachMethod: 'after'
};
}
// Dragging up or down into beginning of list.
else if (j == 0 && Math.abs(eleY - siblingY) <= fudge) {
return {
ele: $sibling,
attachMethod: 'before'
};
}
// Dragging down into end of list. Special handling required because
// the element being dragged may be taller then the element being dragged over
// (if eleY can never be >= siblingY, general case at the end does not work).
else if (j == siblings.length - 1 && yChange > 0 &&
Math.abs(eleYEnd - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
}
else if (eleY >= siblingY && eleY <= siblingYEnd) {
return {
ele: $sibling,
attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after'
};
}
} }
} }
} }
......
cms/static/sass/elements/_edit_dialog.scss
// studio - elements - uploads // studio - elements - editing dialog
// ======================== // ========================
body.course.feature-edit-dialog { body.course.feature-edit-dialog {
...@@ -6,7 +6,7 @@ body.course.feature-edit-dialog { ...@@ -6,7 +6,7 @@ body.course.feature-edit-dialog {
// dialog // dialog
.wrapper-dialog { .wrapper-dialog {
@extend %ui-depth5; @extend %ui-depth5;
@include transition(all 0.05s ease-in-out); @include transition(all $tmg-f2 ease-in-out);
position: fixed; position: fixed;
top: 0; top: 0;
background: $black-t2; background: $black-t2;
...@@ -24,12 +24,12 @@ body.course.feature-edit-dialog { ...@@ -24,12 +24,12 @@ body.course.feature-edit-dialog {
.dialog { .dialog {
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0px 0px 7px $shadow-d1;
border-radius: ($baseline/5);
background-color: $gray-l4;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: $baseline*23; width: $baseline*23;
box-shadow: 0px 0px 7px $shadow-d1;
border-radius: ($baseline/5);
background-color: $gray-l4;
padding: 7px; padding: 7px;
text-align: left; text-align: left;
...@@ -72,44 +72,9 @@ body.course.feature-edit-dialog { ...@@ -72,44 +72,9 @@ body.course.feature-edit-dialog {
@extend %t-copy-sub2; @extend %t-copy-sub2;
} }
.message-status {
@include border-top-radius(2px);
@include box-sizing(border-box);
@include font-size(14);
display: none;
border-bottom: 2px solid $yellow;
margin: 0 0 20px 0;
padding: 10px 20px;
font-weight: 500;
background: $paleYellow;
.text {
display: inline-block;
}
&.error {
border-color: $red-d2;
background: $red-l1;
color: $white;
}
&.confirm {
border-color: $green-d2;
background: $green-l1;
color: $white;
}
&.is-shown {
display: block;
}
}
.actions { .actions {
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline; padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
.action-item { .action-item {
@extend %t-action4; @extend %t-action4;
display: inline-block; display: inline-block;
...@@ -134,46 +99,31 @@ body.course.feature-edit-dialog { ...@@ -134,46 +99,31 @@ body.course.feature-edit-dialog {
color: $blue-s2; color: $blue-s2;
} }
} }
} }
} }
} }
} }
// ==================== // dialog set-up
.wrapper-dialog {
visibility: hidden;
pointer-events: none;
// dialog set-up
.wrapper-dialog {
visibility: hidden;
pointer-events: none;
.dialog { .dialog {
opacity: 0; opacity: 0;
}
} }
}
// dialog showing/hiding // dialog showing/hiding
&.dialog-is-shown { &.dialog-is-shown {
.wrapper-dialog { .wrapper-dialog.is-shown {
-webkit-filter: blur(2px) grayscale(25%); visibility: visible;
filter: blur(2px) grayscale(25%); pointer-events: auto;
}
.wrapper-dialog.is-shown { .dialog {
visibility: visible; opacity: 1.0;
pointer-events: auto;
.dialog {
opacity: 1.0;
}
} }
} }
}
} }
cms/static/sass/views/_outline.scss
...@@ -39,27 +39,17 @@ ...@@ -39,27 +39,17 @@
// page header bits // page header bits
.toggle-button-sections { .toggle-button-sections {
@include font-size(12); @extend %t-copy-sub2;
display: none;
position: relative; position: relative;
display: none;
float: right; float: right;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $darkGrey; color: $gray-l1;
&.is-shown { &.is-shown {
display: block; display: block;
} }
[class^="icon-"] {
@include font-size(11);
border-radius: 20px;
position: relative;
top: -1px;
display: inline-block;
margin-right: 2px;
line-height: 5px;
}
.label { .label {
display: inline-block; display: inline-block;
} }
...@@ -71,9 +61,9 @@ ...@@ -71,9 +61,9 @@
.new-subsection-name-input { .new-subsection-name-input {
@include font-size(16); @include font-size(16);
display: inline-block; display: inline-block;
vertical-align: top;
width: 515px; width: 515px;
padding: ($baseline/4); padding: ($baseline/4);
vertical-align: top;
} }
.new-subsection-name-input { .new-subsection-name-input {
...@@ -82,16 +72,16 @@ ...@@ -82,16 +72,16 @@
.new-section-name-save, .new-section-name-save,
.new-subsection-name-save { .new-subsection-name-save {
@include blue-button; @include blue-button;
padding: 4px 20px 7px;
margin: 0 5px; margin: 0 5px;
color: #fff !important; padding: 4px 20px 7px;
color: $white;
} }
.new-section-name-cancel, .new-section-name-cancel,
.new-subsection-name-cancel { .new-subsection-name-cancel {
@include white-button; @include white-button;
padding: 4px 20px 7px; padding: 4px 20px 7px;
color: #8891a1 !important; color: $gray-l1;
} }
.new-subsection-item, .new-subsection-item,
...@@ -121,7 +111,6 @@ ...@@ -121,7 +111,6 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 0 ($baseline/4); margin: 0 ($baseline/4);
padding: 0;
color: $gray-l2; color: $gray-l2;
&:hover { &:hover {
...@@ -160,7 +149,7 @@ ...@@ -160,7 +149,7 @@
color: $gray-l2; color: $gray-l2;
&:hover, &:hover,
&.isset { &.is-set {
color: $blue; color: $blue;
visibility: visible; visibility: visible;
} }
...@@ -195,23 +184,24 @@ ...@@ -195,23 +184,24 @@
} }
&.new-section { &.new-section {
padding: ($baseline*1.5) $baseline 0 $baseline;
header { header {
@include clearfix(); @include clearfix();
height: auto; height: auto;
border-bottom: 0; border-bottom: 0;
}
.expand-collapse { .expand-collapse {
visibility: hidden; display: none;
} }
.item-details { .item-details {
padding: 25px 0 0 0; width: auto;
.section-name { .section-name {
float: none; float: none;
width: 100%; width: 100%;
}
} }
} }
} }
...@@ -226,15 +216,14 @@ ...@@ -226,15 +216,14 @@
// section name area // section name area
.item-details { .item-details {
@include clearfix(); @include clearfix();
display: inline-block; width: 400px;
float: none; float: none;
display: inline-block;
padding: 0 0 ($baseline/2) 0; padding: 0 0 ($baseline/2) 0;
.section-name { .section-name {
@include font-size(19); @include font-size(19);
float: left; margin-right: ($baseline/2);
width: 400px;
margin-right: 10px;
} }
.section-name-span { .section-name-span {
...@@ -248,7 +237,7 @@ ...@@ -248,7 +237,7 @@
.section-name-edit { .section-name-edit {
position: relative; position: relative;
width: 400px; width: ($baseline*20);
background: $white; background: $white;
input { input {
...@@ -257,13 +246,13 @@ ...@@ -257,13 +246,13 @@
.save-button { .save-button {
@include blue-button; @include blue-button;
padding: 7px 20px 7px; padding: 7px $baseline 7px;
margin-right: 5px; margin-right: ($baseline/4);
} }
.cancel-button { .cancel-button {
@include white-button; @include white-button;
padding: 7px 20px 7px; padding: 7px $baseline 7px;
} }
} }
} }
...@@ -271,6 +260,10 @@ ...@@ -271,6 +260,10 @@
// section specific action styles // section specific action styles
.item-actions { .item-actions {
position: relative;
display: inline-block;
float: right;
margin-bottom: ($baseline/2);
top: 0; top: 0;
} }
...@@ -292,16 +285,16 @@ ...@@ -292,16 +285,16 @@
} }
&:hover, &:hover,
&.isset { &.is-set {
color: $blue; color: $blue;
visibility: visible; visibility: visible;
} }
} }
.section-published-date { .section-published-date {
padding: 4px 10px; padding: ($baseline/5) ($baseline/2);
border-radius: 3px; border-radius: 3px;
background: $lightGrey; background: $gray-l5;
text-align: right; text-align: right;
.published-status { .published-status {
...@@ -334,7 +327,7 @@ ...@@ -334,7 +327,7 @@
// subsection styles // subsection styles
.courseware-subsection { .courseware-subsection {
@include clearfix(); @include clearfix();
margin-bottom: 5px; padding: 3px 0;
&.visible { &.visible {
border-left: 5px solid $green; border-left: 5px solid $green;
...@@ -397,12 +390,12 @@ ...@@ -397,12 +390,12 @@
} }
.menu-toggle { .menu-toggle {
z-index: 10; @extend %ui-depth1;
position: absolute; position: absolute;
top: 0; top: 0;
right: 5px; right: 5px;
padding: 2px 5px; padding: 2px 5px;
color: $mediumGrey; color: $gray-l2;
&:hover, &:hover,
&.is-active { &.is-active {
...@@ -412,12 +405,6 @@ ...@@ -412,12 +405,6 @@
&:focus { &:focus {
outline: 0; outline: 0;
} }
[class^="icon-"] {
vertical-align: middle;
margin-top: -5px;
display: inline-block;
}
} }
...@@ -433,7 +420,7 @@ ...@@ -433,7 +420,7 @@
right: 0; right: 0;
margin: 0; margin: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
border: 1px solid $mediumGrey; border: 1px solid $gray-l2;
border-radius: 4px; border-radius: 4px;
padding: 8px 12px; padding: 8px 12px;
background: $white; background: $white;
...@@ -441,16 +428,16 @@ ...@@ -441,16 +428,16 @@
li { li {
width: 115px; width: 115px;
margin-bottom: 3px; margin-bottom: 3px;
border-bottom: 1px solid $gray-l4;
padding-bottom: 3px; padding-bottom: 3px;
border-bottom: 1px solid $lightGrey;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0;
border: none; border: none;
padding-bottom: 0;
.gradable-status-notgraded { .gradable-status-notgraded {
color: $darkGrey; color: $gray;
} }
} }
} }
...@@ -468,13 +455,13 @@ ...@@ -468,13 +455,13 @@
&.is-active { &.is-active {
.menu { .menu {
z-index: 1000; @extend %ui-depth3;
display: block; display: block;
opacity: 1.0; opacity: 1.0;
} }
.menu-toggle { .menu-toggle {
z-index: 10000; @extend %ui-depth4;
} }
} }
...@@ -520,8 +507,8 @@ ...@@ -520,8 +507,8 @@
.draft-item:after, .draft-item:after,
.public-item:after, .public-item:after,
.private-item:after { .private-item:after {
@include font-size(9);
margin-left: 3px; margin-left: 3px;
font-size: 9px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -558,37 +545,6 @@ ...@@ -558,37 +545,6 @@
} }
} }
} }
.description {
@include font-size(14);
float: left;
margin-top: 30px;
line-height: 20px;
width: 100%;
}
strong {
font-weight: 700;
}
.start-date,
.start-time {
@include font-size(19);
}
.save-button {
@include blue-button;
margin-right: 10px;
}
.cancel-button {
@include white-button;
}
.save-button,
.cancel-button {
@include font-size(16);
}
} }
...@@ -598,10 +554,12 @@ ...@@ -598,10 +554,12 @@
.draggable-drop-indicator-before { .draggable-drop-indicator-before {
top: -($baseline/2); top: -($baseline/2);
left: 0;
} }
.draggable-drop-indicator-after { .draggable-drop-indicator-after {
bottom: -13px; bottom: -13px;
left: 0;
} }
// CASE: DnD - empty subsection with unit dropping // CASE: DnD - empty subsection with unit dropping
......
cms/static/sass/views/_subsection.scss
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
} }
label { label {
@extend %t-title8;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
} }
} }
...@@ -201,12 +202,6 @@ ...@@ -201,12 +202,6 @@
input { input {
font-size: 14px; font-size: 14px;
} }
.sortable-unit-list {
ol {
@include tree-view;
}
}
} }
.subsection-name-input { .subsection-name-input {
...@@ -237,8 +232,8 @@ ...@@ -237,8 +232,8 @@
} }
.notice { .notice {
@extend %t-copy-sub2;
margin-top: 6px; margin-top: 6px;
font-size: 11px;
color: #999; color: #999;
} }
} }
...@@ -295,9 +290,105 @@ ...@@ -295,9 +290,105 @@
} }
} }
.sortable-unit-list {
.courseware-unit {
@include font-size(13);
@include clearfix();
margin: ($baseline/4) 0 0 0;
.section-item {
@include transition(background $tmg-avg ease-in-out 0);
@include font-size(13);
position: relative;
display: block;
padding: 6px 8px 8px 16px;
&:hover {
background: $blue-l5;
}
}
.public-item {
color: $black;
}
.private-item {
color: $gray-l1;
}
.draft-item {
color: $yellow-d1;
}
.draft-item:after,
.public-item:after,
.private-item:after {
@include font-size(9);
margin-left: 3px;
font-weight: 600;
text-transform: uppercase;
}
.draft-item:after {
content: "- draft";
}
.private-item:after {
content: "- private";
}
}
.actions-list {
display: inline-block;
margin-bottom: 0;
}
.actions-item {
@include font-size(13);
display: inline-block;
padding: 0 4px;
vertical-align: middle;
.action {
min-width: ($baseline*.75);
color: $gray-l2;
&:hover,
&.is-set {
color: $blue;
visibility: visible;
}
//reset old drag handle style
&.drag-handle {
float: none;
margin: 0;
background: transparent url(../img/drag-handles.png) right 5px no-repeat;
text-align: center;
}
}
}
.new-unit-item {
@extend %ui-btn-flat-outline;
width: 100%;
margin: 0 0 ($baseline/2) 0;
border: 1px solid $gray-l3;
padding: ($baseline/2) 0;
color: $gray-l2;
&:hover {
box-shadow: none;
background-image: none;
}
}
}
.gradable { .gradable {
label { label {
@extend %t-title8;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
......
cms/static/sass/views/_unit.scss
...@@ -885,6 +885,14 @@ body.unit { ...@@ -885,6 +885,14 @@ body.unit {
// ==================== // ====================
// Unit Page Sidebar // Unit Page Sidebar
.sidebar {
label {
@extend %t-title8;
}
}
.unit-settings { .unit-settings {
.window-contents { .window-contents {
...@@ -910,12 +918,14 @@ body.unit { ...@@ -910,12 +918,14 @@ body.unit {
} }
} }
input[type="radio"] { input[type="radio"] {
margin-right: 7px; margin-right: 7px;
} }
.status { .status {
font-size: 12px; @extend %t-copy-sub2;
strong { strong {
font-weight: 700; font-weight: 700;
...@@ -1025,37 +1035,95 @@ body.unit { ...@@ -1025,37 +1035,95 @@ body.unit {
font-size: 8px; font-size: 8px;
} }
.window-contents > ol { .unit-tree-location {
@include tree-view;
.section-name {
@extend %t-title8;
}
.subsection,
.courseware-unit {
margin: ($baseline/4) 0 0 ($baseline);
}
.courseware-unit .section-item {
background-color: transparent;
}
.section-item { .section-item {
@include transition(background $tmg-avg ease-in-out 0);
@include box-sizing(border-box); @include box-sizing(border-box);
@extend %t-copy-sub2;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
font-size: 11px; background: $gray-l5;
padding: 2px 8px 4px; padding: 6px 8px 8px 16px;
vertical-align: top;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} color: $gray;
&:hover {
background: $blue-l5;
color: $blue;
}
ol { &.editing {
.section-item { background-color: $orange-l3;
padding-left: $baseline;
} }
.new-unit-item { .public-item {
margin-left: $baseline; color: $black;
}
.private-item {
color: $gray-l1;
}
.draft-item {
color: $yellow-d1;
}
.public-item:hover,
.private-item:hover,
.draft-item:hover {
color: $blue;
} }
}
ol ol { .draft-item:after,
.section-item { .public-item:after,
padding-left: 34px; .private-item:after {
@include font-size(9);
margin-left: 3px;
font-weight: 600;
text-transform: uppercase;
}
.draft-item:after {
content: "- draft";
} }
.new-unit-item { .private-item:after {
margin: 0 0 $baseline 41px; content: "- private";
}
}
.new-unit-item {
@extend %ui-btn-flat-outline;
@extend %t-action4;
width: 90%;
margin: 0 0 ($baseline/2) ($baseline/4);
border: 1px solid transparent;
padding: ($baseline/4) ($baseline/2);
font-weight: normal;
color: $gray-l2;
text-align: left;
&:hover {
box-shadow: none;
background-image: none;
} }
} }
} }
......
cms/templates/overview.html
...@@ -50,8 +50,8 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v ...@@ -50,8 +50,8 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
<%block name="header_extras"> <%block name="header_extras">
<script type="text/template" id="new-section-template"> <script type="text/template" id="new-section-template">
<section class="courseware-section new-section is-collapsible is-draggable"> <section class="courseware-section new-section is-collapsible is-draggable">
<header> <header class="section">
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a> <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
<div class="item-details"> <div class="item-details">
<h3 class="section-name"> <h3 class="section-name">
<form class="section-name-form"> <form class="section-name-form">
...@@ -73,7 +73,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v ...@@ -73,7 +73,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a> <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
<div class="item-details"> <div class="item-details">
<h3 class="section-name"> <h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span> <span class="section-name-span">${_('Add a new section name')}</span>
<form class="section-name-form"> <form class="section-name-form">
<input type="text" value="${_('New Section Name')}" class="new-section-name" /> <input type="text" value="${_('New Section Name')}" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}" <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
...@@ -90,7 +90,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v ...@@ -90,7 +90,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
</script> </script>
<script type="text/template" id="new-subsection-template"> <script type="text/template" id="new-subsection-template">
<li class="collapsed"> <li class="courseware-subsection collapsed is-draggable is-collapsible">
<div class="section-item editing"> <div class="section-item editing">
<form class="new-subsection-form"> <form class="new-subsection-form">
<span class="subsection-name"> <span class="subsection-name">
...@@ -276,42 +276,41 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v ...@@ -276,42 +276,41 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
</div> </div>
<footer></footer> <footer></footer>
<div <div
class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings" class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings"
aria-describedby="dialog-edit-sectionrelease-description" aria-describedby="dialog-edit-sectionrelease-description"
aria-labelledby="dialog-edit-sectionrelease-title" aria-labelledby="dialog-edit-sectionrelease-title"
aria-hidden="" aria-hidden=""
role="dialog"> role="dialog">
<div class="dialog confirm"> <div class="dialog confirm">
<form class="edit-sectionrelease-dialog" action="#"> <form class="edit-sectionrelease-dialog" action="#">
<div class="form-content"> <div class="form-content">
<h2 class="title dialog-edit-sectionrelease-title">${_("Section Release Date")}</h2> <h2 class="title dialog-edit-sectionrelease-title">${_("Section Release Date")}</h2>
<p id="dialog-edit-sectionrelease-description" class="message">${_('On the date set below, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p> <p id="dialog-edit-sectionrelease-description" class="message">${_('On the date set below, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
<ul class="list-input picker datepair"> <ul class="list-input picker datepair">
<li class="field field-start-date"> <li class="field field-start-date">
<label for="start_date">${_("Release Day")}</label> <label for="start_date">${_("Release Day")}</label>
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/> <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
</li> </li>
<li class="field field-start-time"> <li class="field field-start-time">
<label for="start_time">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label> <label for="start_time">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/> <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
</li> </li>
</ul> </ul>
</div> </div>
<div class="actions"> <div class="actions">
<h3 class="sr">${_("Form Actions")}</h3> <h3 class="sr">${_("Form Actions")}</h3>
<ul> <ul>
<li class="action-item"> <li class="action-item">
<a href="#" class="button action-primary action-save">${_("Save")}</a> <a href="#" class="button action-primary action-save">${_("Save")}</a>
</li> </li>
<li class="action-item"> <li class="action-item">
<a href="#" class="button action-secondary action-cancel">${_("Cancel")}</a> <a href="#" class="button action-secondary action-cancel">${_("Cancel")}</a>
</li> </li>
</ul> </ul>
</div> </div>
</form> </form>
</div>
</div>
</div> </div>
......
cms/templates/unit.html
...@@ -46,7 +46,7 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit" ...@@ -46,7 +46,7 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
</div> </div>
<div class="main-column"> <div class="main-column">
<article class="unit-body window"> <article class="unit-body window">
<p class="unit-name-input"><label>${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" class="unit-display-name-input" /></p> <p class="unit-name-input"><label for="unit-display-name-input">${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" id="unit-display-name-input" class="unit-display-name-input" /></p>
<ol class="components"> <ol class="components">
% for locator in components: % for locator in components:
<li class="component" data-locator="${locator}"/> <li class="component" data-locator="${locator}"/>
...@@ -147,8 +147,8 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit" ...@@ -147,8 +147,8 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
<h4 class="header">${_("Unit Settings")}</h4> <h4 class="header">${_("Unit Settings")}</h4>
<div class="window-contents"> <div class="window-contents">
<div class="row visibility"> <div class="row visibility">
<label class="inline-label">${_("Visibility:")}</label> <label for="visibility-select" class="inline-label">${_("Visibility:")}</label>
<select name="visibility-select" class='visibility-select'> <select name="visibility-select" id="visibility-select" class='visibility-select'>
<option value="public">${_("Public")}</option> <option value="public">${_("Public")}</option>
<option value="private">${_("Private")}</option> <option value="private">${_("Private")}</option>
</select> </select>
...@@ -181,23 +181,27 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit" ...@@ -181,23 +181,27 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
<div class="window-contents"> <div class="window-contents">
<div class="row wrapper-unit-id"> <div class="row wrapper-unit-id">
<p class="unit-id"> <p class="unit-id">
<span class="label">${_("Unit Identifier:")}</span> <label for="unit-location-id-input">${_("Unit Identifier:")}</label>
<input type="text" class="url value" value="${unit.location.name}" readonly /> <input type="text" class="url value" id="unit-location-id-input" value="${unit.location.name}" readonly />
</p> </p>
</div> </div>
<ol> <div class="unit-tree-location">
<li> <ol>
<a href="${index_url}" class="section-item">${section.display_name_with_default}</a> <li class="section">
<ol> <a href="${index_url}" class="section-item section-name">
<li> <span class="section-name">${section.display_name_with_default}</span>
<a href="${subsection_url}" class="section-item"> </a>
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span> <ol>
</a> <li class="subsection">
${units.enum_units(subsection, actions=False, selected=unit.location)} <a href="${subsection_url}" class="section-item">
</li> <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
</ol> </a>
</li> ${units.enum_units(subsection, actions=False, selected=unit.location)}
</ol> </li>
</ol>
</li>
</ol>
</div>
</div> </div>
</div> </div>
</div> </div>
......
cms/templates/widgets/units.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%! from contentstore.utils import compute_unit_state %> <%! from contentstore.utils import compute_unit_state %>
<%! from xmodule.modulestore.django import loc_mapper %> <%! from xmodule.modulestore.django import loc_mapper %>
...@@ -38,10 +39,10 @@ This def will enumerate through a passed in subsection and list all of the units ...@@ -38,10 +39,10 @@ This def will enumerate through a passed in subsection and list all of the units
<div class="item-actions"> <div class="item-actions">
<ul class="actions-list"> <ul class="actions-list">
<li class="actions-item delete"> <li class="actions-item delete">
<a href="#" data-tooltip="Delete this unit" class="delete-unit-button action" data-locator="${unit_locator}"><i class="icon-trash"></i><span class="sr">Delete unit</span></a> <a href="#" data-tooltip="${_("Delete this unit")}" class="delete-unit-button action" data-locator="${unit_locator}"><i class="icon-trash"></i><span class="sr">${_("Delete unit")}</span></a>
</li> </li>
<li class="actions-item drag"> <li class="actions-item drag">
<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle action"></span> <span data-tooltip="${_("Drag to sort")}" class="drag-handle unit-drag-handle action"><span class="sr"> ${_("Drag to reorder unit")}</span></span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -55,7 +56,7 @@ This def will enumerate through a passed in subsection and list all of the units ...@@ -55,7 +56,7 @@ This def will enumerate through a passed in subsection and list all of the units
<%include file="_ui-dnd-indicator-initial.html" /> <%include file="_ui-dnd-indicator-initial.html" />
<a href="#" class="new-unit-item" data-category="${new_unit_category}" data-parent="${subsection_locator}"> <a href="#" class="new-unit-item" data-category="${new_unit_category}" data-parent="${subsection_locator}">
<i class="icon-plus"></i> New Unit <i class="icon-plus"></i> ${_("New Unit")}
</a> </a>
</li> </li>
</ol> </ol>
......
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