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

Responding to review feedback on studio outline cleanup

Browse Source 
Bug fix for dragging past last element in list.
STUD-879
This commit is contained in:
Frances Botsford
2013-12-10 14:16:12 -05:00
parent 089a61c6af
commit 2d678d0c5e
10 changed files with 464 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
cms/static/coffee/spec/views/overview_spec.coffee
View File

@@ -55,23 +55,35 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
"""
appendSetFixtures """
<ol class="sortable-subsection-list">
<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">
<section>
<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">
<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-3" data-parent="subsection-1-id" data-locator="third-unit-id"></li>
</ol>
</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">
<li class="courseware-unit unit is-draggable" id="unit-4" data-parent="subsection-2" data-locator="fourth-unit-id"></li>
</ol>
</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">
<ol class="sortable-unit-list" id="subsection-list-3">
<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>
</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()
@@ -94,6 +106,13 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
'li.courseware-subsection, article.subsection-body'
)
Overview.overviewDragger.makeDraggable(
'.courseware-subsection',
'.subsection-drag-handle',
'.sortable-subsection-list',
'section'
)
afterEach ->
delete window.analytics
delete window.course_location_analytics
@@ -136,25 +155,54 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
expect(destination.ele).toBe($('#unit-2'))
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')
$unit4 = $('#unit-4')
$ele.offset(
top: $('#unit-4').offset().top + 8
top: $unit4.offset().top + 8
left: $ele.offset().left
)
# Dragging down, we will insert after.
destination = Overview.overviewDragger.findDestination($ele, 1)
expect(destination.ele).toBe($('#unit-4'))
# Dragging down into first element, we have a fudge factor makes it easier to drag at beginning.
expect(destination.attachMethod).toBe('before')
# Now past the "fudge factor".
$ele.offset(
top: $('#unit-4').offset().top + 12
left: $ele.offset().left
)
destination = Overview.overviewDragger.findDestination($ele, 1)
expect(destination.ele).toBe($('#unit-4'))
expect(destination.ele).toBe($unit4)
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')
# If past the end the drop target, will attach after.
$ele.offset(
top: $unit4.offset().top + $unit4.height() + 1
left: $ele.offset().left
)
destination = Overview.overviewDragger.findDestination($ele, 0)
expect(destination.ele).toBe($unit4)
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", ->
$ele = $('#unit-4')
$ele.offset(
@@ -174,6 +222,20 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
expect(destination.ele).toBe($('#unit-3'))
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", ->
$ele = $('#unit-1')
$ele.offset(
@@ -322,8 +384,8 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
$('#subsection-1').addClass('expand-on-drop')
Overview.overviewDragger.onDragEnd(
{element: $('#subsection-1')},
null,
null
null,
null
)
expect($('#subsection-1')).not.toHaveClass('collapsed')
expect($('#subsection-1')).not.toHaveClass('expand-on-drop')
@@ -335,7 +397,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
Overview.overviewDragger.dragState.parentList = $('#subsection-2')
Overview.overviewDragger.onDragEnd(
{element: $('#unit-1')},
null,
null,
{clientX: $('#unit-1').offset().left}
)
expect($('#subsection-2')).not.toHaveClass('collapsed')

2
cms/static/js/base.js
View File

@@ -25,7 +25,7 @@ domReady(function() {
$('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);
// lean/simple modal

96
cms/static/js/views/overview.js
View File

@@ -1,6 +1,6 @@
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"],
function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, ModalUtils, CancelOnEscape,
"js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"],
function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, CancelOnEscape,
DateUtils, ModuleUtils) {
var modalSelector = '.edit-section-publish-settings';
@@ -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');
$('.edit-section-publish-settings').removeClass('is-shown');
}
};
var editSectionPublishDate = function (e) {
e.preventDefault();
@@ -51,7 +51,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
$modal.find('.save-button').hide();
}
$modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
//ModalUtils.showModal();
$('body').addClass('dialog-is-shown');
$('.edit-section-publish-settings').addClass('is-shown');
};
@@ -108,7 +107,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
locator: locator},
{interpolate: /\{(.+?)\}/g});
$thisSection.find('.section-published-date').html(html);
//ModalUtils.hideModal();
saving.hide();
closeModalNew();
});
@@ -221,6 +219,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
*/
findDestination: function (ele, yChange) {
var eleY = ele.offset().top;
var eleYEnd = eleY + ele.height();
var containers = $(ele.data('droppable-class'));
for (var i = 0; i < containers.length; i++) {
@@ -235,7 +234,15 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// position of the container
var parentList = container.parents(ele.data('parent-location-selector')).first();
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 {
ele: container,
attachMethod: 'prepend',
@@ -269,25 +276,64 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// Facilitate dropping into the beginning or end of a list
// (coming from opposite direction) via a "fudge factor". Math.min is for Jasmine test.
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) {
return {
ele: $sibling,
attachMethod: 'after'
};
// Dragging to top or bottom of a list with only one element is tricky
// because the element being dragged may be the same size as the sibling.
if (siblings.length == 1) {
// 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) {
return {
ele: $sibling,
attachMethod: yChange > 0 ? 'after' : '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'
};
}
}
// Dragging down into beginning of list.
else if (j == 0 && yChange > 0 && Math.abs(eleY - siblingY) <= fudge) {
return {
ele: $sibling,
attachMethod: 'before'
};
}
else if (eleY >= siblingY && eleY <= siblingYEnd) {
return {
ele: $sibling,
attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after'
};
else {
// Dragging up into end of list.
if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
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'
};
}
}
}
}

90
cms/static/sass/elements/_edit_dialog.scss
View File

@@ -1,4 +1,4 @@
// studio - elements - uploads
// studio - elements - editing dialog
// ========================
body.course.feature-edit-dialog {
@@ -6,7 +6,7 @@ body.course.feature-edit-dialog {
// dialog
.wrapper-dialog {
@extend %ui-depth5;
@include transition(all 0.05s ease-in-out);
@include transition(all $tmg-f2 ease-in-out);
position: fixed;
top: 0;
background: $black-t2;
@@ -24,12 +24,12 @@ body.course.feature-edit-dialog {
.dialog {
@include box-sizing(border-box);
box-shadow: 0px 0px 7px $shadow-d1;
border-radius: ($baseline/5);
background-color: $gray-l4;
display: inline-block;
vertical-align: middle;
width: $baseline*23;
box-shadow: 0px 0px 7px $shadow-d1;
border-radius: ($baseline/5);
background-color: $gray-l4;
padding: 7px;
text-align: left;
@@ -72,44 +72,9 @@ body.course.feature-edit-dialog {
@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 {
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
.action-item {
@extend %t-action4;
display: inline-block;
@@ -134,46 +99,31 @@ body.course.feature-edit-dialog {
color: $blue-s2;
}
}
}
}
}
}
// ====================
// dialog set-up
.wrapper-dialog {
visibility: hidden;
pointer-events: none;
.dialog {
opacity: 0;
}
}
// dialog showing/hiding
&.dialog-is-shown {
// dialog set-up
.wrapper-dialog {
visibility: hidden;
pointer-events: none;
.wrapper-dialog.is-shown {
visibility: visible;
pointer-events: auto;
.dialog {
opacity: 0;
opacity: 1.0;
}
}
// dialog showing/hiding
&.dialog-is-shown {
.wrapper-dialog {
-webkit-filter: blur(2px) grayscale(25%);
filter: blur(2px) grayscale(25%);
}
.wrapper-dialog.is-shown {
visibility: visible;
pointer-events: auto;
.dialog {
opacity: 1.0;
}
}
}
}
}

130
cms/static/sass/views/_outline.scss
View File

@@ -39,27 +39,17 @@
// page header bits
.toggle-button-sections {
@include font-size(12);
display: none;
@extend %t-copy-sub2;
position: relative;
display: none;
float: right;
margin-top: ($baseline/4);
color: $darkGrey;
color: $gray-l1;
&.is-shown {
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 {
display: inline-block;
}
@@ -71,9 +61,9 @@
.new-subsection-name-input {
@include font-size(16);
display: inline-block;
vertical-align: top;
width: 515px;
padding: ($baseline/4);
vertical-align: top;
}
.new-subsection-name-input {
@@ -82,16 +72,16 @@
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
padding: 4px 20px 7px;
margin: 0 5px;
color: #fff !important;
padding: 4px 20px 7px;
color: $white;
}
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 4px 20px 7px;
color: #8891a1 !important;
color: $gray-l1;
}
.new-subsection-item,
@@ -121,7 +111,6 @@
display: inline-block;
vertical-align: top;
margin: 0 ($baseline/4);
padding: 0;
color: $gray-l2;
&:hover {
@@ -160,7 +149,7 @@
color: $gray-l2;
&:hover,
&.isset {
&.is-set {
color: $blue;
visibility: visible;
}
@@ -195,23 +184,24 @@
}
&.new-section {
padding: ($baseline*1.5) $baseline 0 $baseline;
header {
@include clearfix();
height: auto;
border-bottom: 0;
}
.expand-collapse {
visibility: hidden;
}
.expand-collapse {
display: none;
}
.item-details {
padding: 25px 0 0 0;
.item-details {
width: auto;
.section-name {
float: none;
width: 100%;
.section-name {
float: none;
width: 100%;
}
}
}
}
@@ -226,15 +216,14 @@
// section name area
.item-details {
@include clearfix();
display: inline-block;
width: 400px;
float: none;
display: inline-block;
padding: 0 0 ($baseline/2) 0;
.section-name {
@include font-size(19);
float: left;
width: 400px;
margin-right: 10px;
margin-right: ($baseline/2);
}
.section-name-span {
@@ -248,7 +237,7 @@
.section-name-edit {
position: relative;
width: 400px;
width: ($baseline*20);
background: $white;
input {
@@ -257,13 +246,13 @@
.save-button {
@include blue-button;
padding: 7px 20px 7px;
margin-right: 5px;
padding: 7px $baseline 7px;
margin-right: ($baseline/4);
}
.cancel-button {
@include white-button;
padding: 7px 20px 7px;
padding: 7px $baseline 7px;
}
}
}
@@ -271,6 +260,10 @@
// section specific action styles
.item-actions {
position: relative;
display: inline-block;
float: right;
margin-bottom: ($baseline/2);
top: 0;
}
@@ -292,16 +285,16 @@
}
&:hover,
&.isset {
&.is-set {
color: $blue;
visibility: visible;
}
}
.section-published-date {
padding: 4px 10px;
padding: ($baseline/5) ($baseline/2);
border-radius: 3px;
background: $lightGrey;
background: $gray-l5;
text-align: right;
.published-status {
@@ -334,7 +327,7 @@
// subsection styles
.courseware-subsection {
@include clearfix();
margin-bottom: 5px;
padding: 3px 0;
&.visible {
border-left: 5px solid $green;
@@ -397,12 +390,12 @@
}
.menu-toggle {
z-index: 10;
@extend %ui-depth1;
position: absolute;
top: 0;
right: 5px;
padding: 2px 5px;
color: $mediumGrey;
color: $gray-l2;
&:hover,
&.is-active {
@@ -412,12 +405,6 @@
&:focus {
outline: 0;
}
[class^="icon-"] {
vertical-align: middle;
margin-top: -5px;
display: inline-block;
}
}
@@ -433,7 +420,7 @@
right: 0;
margin: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
border: 1px solid $mediumGrey;
border: 1px solid $gray-l2;
border-radius: 4px;
padding: 8px 12px;
background: $white;
@@ -441,16 +428,16 @@
li {
width: 115px;
margin-bottom: 3px;
border-bottom: 1px solid $gray-l4;
padding-bottom: 3px;
border-bottom: 1px solid $lightGrey;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border: none;
padding-bottom: 0;
.gradable-status-notgraded {
color: $darkGrey;
color: $gray;
}
}
}
@@ -468,13 +455,13 @@
&.is-active {
.menu {
z-index: 1000;
@extend %ui-depth3;
display: block;
opacity: 1.0;
}
.menu-toggle {
z-index: 10000;
@extend %ui-depth4;
}
}
@@ -520,8 +507,8 @@
.draft-item:after,
.public-item:after,
.private-item:after {
@include font-size(9);
margin-left: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
}
@@ -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 @@
.draggable-drop-indicator-before {
top: -($baseline/2);
left: 0;
}
.draggable-drop-indicator-after {
bottom: -13px;
left: 0;
}
// CASE: DnD - empty subsection with unit dropping

105
cms/static/sass/views/_subsection.scss
View File

@@ -33,6 +33,7 @@
}
label {
@extend %t-title8;
margin-bottom: ($baseline/4);
}
}
@@ -201,12 +202,6 @@
input {
font-size: 14px;
}
.sortable-unit-list {
ol {
@include tree-view;
}
}
}
.subsection-name-input {
@@ -237,8 +232,8 @@
}
.notice {
@extend %t-copy-sub2;
margin-top: 6px;
font-size: 11px;
color: #999;
}
}
@@ -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 {
label {
@extend %t-title8;
display: inline-block;
vertical-align: top;
}

102
cms/static/sass/views/_unit.scss
View File

@@ -885,6 +885,14 @@ body.unit {
// ====================
// Unit Page Sidebar
.sidebar {
label {
@extend %t-title8;
}
}
.unit-settings {
.window-contents {
@@ -910,12 +918,14 @@ body.unit {
}
}
input[type="radio"] {
margin-right: 7px;
}
.status {
font-size: 12px;
@extend %t-copy-sub2;
strong {
font-weight: 700;
@@ -1025,37 +1035,95 @@ body.unit {
font-size: 8px;
}
.window-contents > ol {
@include tree-view;
.unit-tree-location {
.section-name {
@extend %t-title8;
}
.subsection,
.courseware-unit {
margin: ($baseline/4) 0 0 ($baseline);
}
.courseware-unit .section-item {
background-color: transparent;
}
.section-item {
@include transition(background $tmg-avg ease-in-out 0);
@include box-sizing(border-box);
@extend %t-copy-sub2;
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
background: $gray-l5;
padding: 6px 8px 8px 16px;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
color: $gray;
ol {
.section-item {
padding-left: $baseline;
&:hover {
background: $blue-l5;
color: $blue;
}
.new-unit-item {
margin-left: $baseline;
&.editing {
background-color: $orange-l3;
}
.public-item {
color: $black;
}
.private-item {
color: $gray-l1;
}
.draft-item {
color: $yellow-d1;
}
.public-item:hover,
.private-item:hover,
.draft-item:hover {
color: $blue;
}
.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";
}
}
ol ol {
.section-item {
padding-left: 34px;
}
.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;
.new-unit-item {
margin: 0 0 $baseline 41px;
&:hover {
box-shadow: none;
background-image: none;
}
}
}

73
cms/templates/overview.html
View File

@@ -50,8 +50,8 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
<%block name="header_extras">
<script type="text/template" id="new-section-template">
<section class="courseware-section new-section is-collapsible is-draggable">
<header>
<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>
<header class="section">
<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">
<h3 class="section-name">
<form class="section-name-form">
@@ -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>
<div class="item-details">
<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">
<input type="text" value="${_('New Section Name')}" class="new-section-name" />
<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
</script>
<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">
<form class="new-subsection-form">
<span class="subsection-name">
@@ -276,42 +276,41 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
</div>
<footer></footer>
<div
class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings"
aria-describedby="dialog-edit-sectionrelease-description"
aria-labelledby="dialog-edit-sectionrelease-title"
aria-hidden=""
role="dialog">
<div class="dialog confirm">
<form class="edit-sectionrelease-dialog" action="#">
<div class="form-content">
<div
class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings"
aria-describedby="dialog-edit-sectionrelease-description"
aria-labelledby="dialog-edit-sectionrelease-title"
aria-hidden=""
role="dialog">
<div class="dialog confirm">
<form class="edit-sectionrelease-dialog" action="#">
<div class="form-content">
<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>
<ul class="list-input picker datepair">
<li class="field field-start-date">
<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"/>
</li>
<li class="field field-start-time">
<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"/>
</li>
</ul>
</div>
<div class="actions">
<h3 class="sr">${_("Form Actions")}</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-save">${_("Save")}</a>
</li>
<li class="action-item">
<a href="#" class="button action-secondary action-cancel">${_("Cancel")}</a>
</li>
<ul class="list-input picker datepair">
<li class="field field-start-date">
<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"/>
</li>
<li class="field field-start-time">
<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"/>
</li>
</ul>
</div>
</form>
</div>
</div>
<div class="actions">
<h3 class="sr">${_("Form Actions")}</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-save">${_("Save")}</a>
</li>
<li class="action-item">
<a href="#" class="button action-secondary action-cancel">${_("Cancel")}</a>
</li>
</ul>
</div>
</form>
</div>
</div>

40
cms/templates/unit.html
View File

@@ -46,7 +46,7 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
</div>
<div class="main-column">
<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">
% for locator in components:
<li class="component" data-locator="${locator}"/>
@@ -147,8 +147,8 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
<h4 class="header">${_("Unit Settings")}</h4>
<div class="window-contents">
<div class="row visibility">
<label class="inline-label">${_("Visibility:")}</label>
<select name="visibility-select" class='visibility-select'>
<label for="visibility-select" class="inline-label">${_("Visibility:")}</label>
<select name="visibility-select" id="visibility-select" class='visibility-select'>
<option value="public">${_("Public")}</option>
<option value="private">${_("Private")}</option>
</select>
@@ -181,23 +181,27 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
<div class="window-contents">
<div class="row wrapper-unit-id">
<p class="unit-id">
<span class="label">${_("Unit Identifier:")}</span>
<input type="text" class="url value" value="${unit.location.name}" readonly />
<label for="unit-location-id-input">${_("Unit Identifier:")}</label>
<input type="text" class="url value" id="unit-location-id-input" value="${unit.location.name}" readonly />
</p>
</div>
<ol>
<li>
<a href="${index_url}" class="section-item">${section.display_name_with_default}</a>
<ol>
<li>
<a href="${subsection_url}" class="section-item">
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
</a>
${units.enum_units(subsection, actions=False, selected=unit.location)}
</li>
</ol>
</li>
</ol>
<div class="unit-tree-location">
<ol>
<li class="section">
<a href="${index_url}" class="section-item section-name">
<span class="section-name">${section.display_name_with_default}</span>
</a>
<ol>
<li class="subsection">
<a href="${subsection_url}" class="section-item">
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
</a>
${units.enum_units(subsection, actions=False, selected=unit.location)}
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>

7
cms/templates/widgets/units.html
View File

@@ -1,3 +1,4 @@
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%! from contentstore.utils import compute_unit_state %>
<%! 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
<div class="item-actions">
<ul class="actions-list">
<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 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>
</ul>
</div>
@@ -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" />
<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>
</li>
</ol>