Skip to content

E
edx-platform
Commit a2d5500f by Frances Botsford
Options

FED clean up of studio outline page

parent 724cc025
Showing with 284 additions and 38 deletions
cms/static/js/base.js
......@@ -243,17 +243,17 @@ function createNewUnit(e) {
function deleteUnit(e) {
e.preventDefault();
_deleteItem($(this).parents('li.leaf'), 'Unit');
_deleteItem($(this).parents('li.courseware-unit'), 'Unit');
}
function deleteSubsection(e) {
e.preventDefault();
_deleteItem($(this).parents('li.branch'), 'Subsection');
_deleteItem($(this).parents('li.courseware-subsection'), 'Subsection');
}
function deleteSection(e) {
e.preventDefault();
_deleteItem($(this).parents('section.branch'), 'Section');
_deleteItem($(this).parents('section.courseware-section'), 'Section');
}
function _deleteItem($el, type) {
......
cms/static/js/views/overview.js
......@@ -3,7 +3,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, ModalUtils, CancelOnEscape,
DateUtils, ModuleUtils) {
var modalSelector = '.edit-subsection-publish-settings';
var modalSelector = '.edit-section-publish-settings';
var toggleSections = function(e) {
e.preventDefault();
......@@ -21,20 +21,26 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
if ($button.hasClass('is-activated')) {
$section.addClass('collapsed');
// first child in order to avoid the icons on the subsection lists which are not in the first child
$section.find('header .expand-collapse-icon').removeClass('collapse').addClass('expand');
$section.find('header .expand-collapse').removeClass('collapse').addClass('expand');
} else {
$section.removeClass('collapsed');
// first child in order to avoid the icons on the subsection lists which are not in the first child
$section.find('header .expand-collapse-icon').removeClass('expand').addClass('collapse');
$section.find('header .expand-collapse').removeClass('expand').addClass('collapse');
}
};
var toggleSubmodules = function(e) {
e.preventDefault();
$(this).toggleClass('expand').toggleClass('collapse');
$(this).closest('.branch, .window').toggleClass('collapsed');
$(this).toggleClass('expand');
$(this).closest('.is-collapsible, .window').toggleClass('collapsed');
};
var closeModalNew = function (e) {
$('body').removeClass('dialog-is-shown');
$('.edit-section-publish-settings').removeClass('is-shown');
}
var editSectionPublishDate = function (e) {
e.preventDefault();
var $modal = $(modalSelector);
......@@ -45,15 +51,17 @@ 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();
//ModalUtils.showModal();
$('body').addClass('dialog-is-shown');
$('.edit-section-publish-settings').addClass('is-shown');
};
var saveSetSectionScheduleDate = function (e) {
e.preventDefault();
var datetime = DateUtils(
$('.edit-subsection-publish-settings .start-date'),
$('.edit-subsection-publish-settings .start-time')
$('.edit-section-publish-settings .start-date'),
$('.edit-section-publish-settings .start-time')
);
var locator = $(modalSelector).attr('data-locator');
......@@ -89,10 +97,10 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var $thisSection = $('.courseware-section[data-locator="' + locator + '"]');
var html = _.template(
'<span class="published-status">' +
'<strong>' + gettext("Will Release:") + '&nbsp;</strong>' +
'<strong>' + gettext("Release date:") + '&nbsp;</strong>' +
gettext("{month}/{day}/{year} at {hour}:{minute} UTC") +
'</span>' +
'<a href="#" class="edit-button" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}">' +
'<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}">' +
gettext("Edit") +
'</a>',
{year: datetime.getUTCFullYear(), month: pad2(datetime.getUTCMonth() + 1), day: pad2(datetime.getUTCDate()),
......@@ -100,8 +108,9 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
locator: locator},
{interpolate: /\{(.+?)\}/g});
$thisSection.find('.section-published-date').html(html);
ModalUtils.hideModal();
//ModalUtils.hideModal();
saving.hide();
closeModalNew();
});
};
......@@ -159,7 +168,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var $saveButton = $newSubsection.find('.new-subsection-name-save');
var $cancelButton = $newSubsection.find('.new-subsection-name-cancel');
var parent = $(this).parents("section.branch").data("locator");
var parent = $(this).parents("section.courseware-section").data("locator");
$saveButton.data('parent', parent);
$saveButton.data('category', $(this).data('category'));
......@@ -197,7 +206,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var cancelNewSubsection = function (e) {
e.preventDefault();
$(this).parents('li.branch').remove();
$(this).parents('li.courseware-subsection').remove();
};
var overviewDragger = {
......@@ -310,7 +319,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
};
if (!ele.hasClass('collapsed')) {
ele.addClass('collapsed');
ele.find('.expand-collapse-icon').first().addClass('expand').removeClass('collapse');
ele.find('.expand-collapse').first().addClass('expand').removeClass('collapse');
// onDragStart gets called again after the collapse, so we can't just store a variable in the dragState.
ele.addClass(this.expandOnDropClass);
}
......@@ -406,7 +415,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
expandElement: function (ele) {
ele.removeClass('collapsed');
ele.find('.expand-collapse-icon').first().removeClass('expand').addClass('collapse');
ele.find('.expand-collapse').first().removeClass('expand').addClass('collapse');
},
/*
......@@ -500,13 +509,12 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
}
});
$('.toggle-button-sections').bind('click', toggleSections);
$('.expand-collapse-icon').bind('click', toggleSubmodules);
$('.expand-collapse').bind('click', toggleSubmodules);
var $body = $('body');
$body.on('click', '.section-published-date .edit-button', editSectionPublishDate);
$body.on('click', '.section-published-date .schedule-button', editSectionPublishDate);
$body.on('click', '.edit-subsection-publish-settings .save-button', saveSetSectionScheduleDate);
$body.on('click', '.edit-subsection-publish-settings .cancel-button', ModalUtils.hideModal);
$body.on('click', '.section-published-date .edit-release-date', editSectionPublishDate);
$body.on('click', '.edit-section-publish-settings .action-save', saveSetSectionScheduleDate);
$body.on('click', '.edit-section-publish-settings .action-cancel', closeModalNew);
$('.new-courseware-section-button').bind('click', addNewSection);
$('.new-subsection-item').bind('click', addNewSubsection);
......@@ -530,7 +538,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
'.unit',
'.unit-drag-handle',
'ol.sortable-unit-list',
'li.branch, article.subsection-body'
'li.courseware-subsection, article.subsection-body'
);
});
......
cms/static/sass/_shame.scss
......@@ -47,7 +47,7 @@
// ====================
// needed for poorly scoped margin rules on all content elements
.branch .sortable-unit-list {
.courseware-subsection .sortable-unit-list {
margin-bottom: 0;
}
......
cms/static/sass/elements/_edit_dialog.scss 0 → 100644
// studio - elements - uploads
// ========================
body.course.feature-edit-dialog {
// dialog
.wrapper-dialog {
@extend %ui-depth5;
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
background: $black-t2;
width: 100%;
height: 100%;
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.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;
padding: 7px;
text-align: left;
.title {
@extend %t-title5;
margin-bottom: ($baseline/2);
font-weight: 600;
color: $black;
}
.message {
@extend %t-copy-sub2;
color: $gray;
}
.error {
color: $white;
}
form {
padding: 0;
.form-content {
box-shadow: 0 0 3px $shadow-d1;
padding: ($baseline*1.5);
background-color: $white;
}
.field {
margin-bottom: ($baseline/2);
}
label {
@include font-size(14);
display: block;
font-weight: bold;
}
input[type="text"] {
@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;
margin-right: ($baseline*0.75);
&:last-child {
margin-right: 0;
}
}
.action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d1;
color: $white;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
}
}
}
// ====================
// dialog set-up
.wrapper-dialog {
visibility: hidden;
pointer-events: none;
.dialog {
opacity: 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;
}
}
}
}
cms/static/sass/style-app.scss
......@@ -38,3 +38,4 @@
@import 'elements/modal'; // interstitial UI, dialogs, modal windows
@import 'elements/vendor'; // overrides to vendor-provided styling
@import 'elements/uploads';
@import 'elements/edit_dialog';
cms/templates/js/blank-slate-template.underscore 0 → 100644
<section class="courseware-section new-section">
<header>
<a href="#" data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the 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}"
data-category="${new_section_category}" value="${_('Save')}" />
<input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
</div>
</header>
</section>
cms/templates/js/new-section-template.underscore 0 → 100644
<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>
<div class="item-details">
<h3 class="section-name">
<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}"
data-category="${new_section_category}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" />
</form>
</h3>
</div>
</header>
</section>
cms/templates/js/new-subsection-template.underscore 0 → 100644
<li class="collapsed">
<div class="section-item editing">
<form class="new-subsection-form">
<span class="subsection-name">
<input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
</span>
<input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
<input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
</form>
</div>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<i class="icon-plus"></i> ${_('New Unit')}
</a>
</li>
</ol>
</li>
cms/templates/js/no-outline-content.underscore 0 → 100644
<div class="no-outline-content">
<p><%= gettext("You haven't added any sections to your course outline.") %><a href="#" class="button new-button"><i class="icon-plus"></i><%= gettext("Add your first section") %></a></p>
</div>
cms/templates/unit.html
......@@ -191,7 +191,6 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
<ol>
<li>
<a href="${subsection_url}" class="section-item">
<span class="folder-icon"></span>
<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)}
......
cms/templates/widgets/units.html
......@@ -18,7 +18,7 @@ This def will enumerate through a passed in subsection and list all of the units
<%
unit_locator = loc_mapper().translate_location(context_course.location.course_id, unit.location, False, True)
%>
<li class="courseware-unit leaf unit is-draggable" data-locator="${unit_locator}"
<li class="courseware-unit unit is-draggable" data-locator="${unit_locator}"
data-parent="${subsection_locator}">
<%include file="_ui-dnd-indicator-before.html" />
......@@ -32,14 +32,18 @@ This def will enumerate through a passed in subsection and list all of the units
%>
<div class="section-item ${selected_class}">
<a href="${unit_locator.url_reverse('unit')}" class="${unit_state}-item">
<span class="${unit.scope_ids.block_type}-icon"></span>
<span class="unit-name">${unit.display_name_with_default}</span>
</a>
% if actions:
<div class="item-actions">
<a href="#" data-tooltip="Delete this unit" class="delete-button" data-locator="${unit_locator}">
<span class="delete-icon"></span></a>
<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle"></span>
<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>
</li>
<li class="actions-item drag">
<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
</li>
</ul>
</div>
% endif
</div>
......@@ -47,11 +51,11 @@ This def will enumerate through a passed in subsection and list all of the units
<%include file="_ui-dnd-indicator-after.html" />
</li>
% endfor
<li>
<li class="courseware-unit add-new-unit">
<%include file="_ui-dnd-indicator-initial.html" />
<a href="#" class="new-unit-item" data-category="${new_unit_category}" data-parent="${subsection_locator}">
<span class="new-unit-icon"></span>New Unit
<i class="icon-plus"></i> New Unit
</a>
</li>
</ol>
......
common/static/sass/_mixins-inherited.scss
......@@ -354,8 +354,8 @@
}
@mixin tree-view {
border: 1px solid $mediumGrey;
background: $lightGrey;
border: 0;
background: $white;
.branch {
margin-bottom: 0;
......@@ -374,7 +374,7 @@
font-size: 13px;
&:hover {
background: $orange-l4;
background: $blue-l5;
.item-actions {
display: block;
......@@ -403,11 +403,11 @@
}
.private-item {
color: #a4aab7;
color: $gray-l1;
}
.draft-item {
color: #9f7d10;
color: $yellow-d1;
}
}
......
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