Skip to content

E
edx-platform
Commit f84b6031 by Tom Giannattasio
Options

wrapped up section date setting; need help with already published sections

parent e3457fa2
Showing with 163 additions and 25 deletions
cms/static/js/base.js
......@@ -10,7 +10,8 @@ var $spinner;
$(document).ready(function() {
$body = $('body');
$modal = $('.history-modal');
$modalCover = $('.modal-cover');
$modalCover = $('<div class="modal-cover">');
$body.append($modalCover);
$newComponentItem = $('.new-component-item');
$newComponentTypePicker = $('.new-component');
$newComponentTemplatePickers = $('.new-component-templates');
......@@ -102,8 +103,35 @@ $(document).ready(function() {
// pretty wacky stuff to happen
$('.file-input').bind('change', startUpload);
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
$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', hideModal)
$body.on('change', '.edit-subsection-publish-settings .start-date', function() {
if($('.edit-subsection-publish-settings').find('.start-time').val() == '') {
$('.edit-subsection-publish-settings').find('.start-time').val('12:00am');
}
});
$('.edit-subsection-publish-settings').on('change', '.start-date, .start-time', function() {
$('.edit-subsection-publish-settings').find('.save-button').show();
});
});
function editSectionPublishDate(e) {
e.preventDefault();
$modal = $('.edit-subsection-publish-settings').show();
$modal = $('.edit-subsection-publish-settings').show();
$modal.attr('data-id', $(this).attr('data-id'));
$modal.find('.start-date').val($(this).attr('data-date'));
$modal.find('.start-time').val($(this).attr('data-time'));
if($modal.find('.start-date').val() == '' && $modal.find('.start-time').val() == '') {
$modal.find('.save-button').hide();
}
$modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
$modalCover.show();
}
function showImportSubmit(e) {
var filepath = $(this).val();
if(filepath.substr(filepath.length - 6, 6) == 'tar.gz') {
......@@ -387,7 +415,9 @@ function _deleteItem($el) {
function showUploadModal(e) {
e.preventDefault();
$('.upload-modal').show();
$modal = $('.upload-modal').show();
$('.file-input').bind('change', startUpload);
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
$modalCover.show();
}
......@@ -448,8 +478,10 @@ function markAsLoaded() {
}
function hideModal(e) {
e.preventDefault();
$('.modal').hide();
if(e) {
e.preventDefault();
}
$modal.hide();
$modalCover.hide();
}
......@@ -726,12 +758,12 @@ function cancelSetSectionScheduleDate(e) {
function saveSetSectionScheduleDate(e) {
e.preventDefault();
input_date = $(this).siblings('input.date').val();
input_time = $(this).siblings('input.time').val();
input_date = $('.edit-subsection-publish-settings .start-date').val();
input_time = $('.edit-subsection-publish-settings .start-time').val();
start = getEdxTimeFromDateTimeVals(input_date, input_time);
id = $(this).closest("section.courseware-section").data("id");
id = $modal.attr('data-id');
var $_this = $(this);
// call into server to commit the new order
......@@ -743,7 +775,18 @@ function saveSetSectionScheduleDate(e) {
data:JSON.stringify({ 'id' : id, 'metadata' : {'start' : start}, 'data': null, 'children' : null})
}).success(function()
{
alert('Your changes have been saved.');
location.reload();
var $thisSection = $('.courseware-section[data-id="' + id + '"]');
$thisSection.find('.section-published-date').html('<span class="published-status"><strong>Will Release:</strong> ' + input_date + ' at ' + input_time + '</span><a href="#" class="edit-button" data-date="' + input_date + '" data-time="' + input_time + '" data-id="' + id + '">Edit</a>');
$thisSection.find('.section-published-date').animate({
'background-color': 'rgb(182,37,104)'
}, 300).animate({
'background-color': '#edf1f5'
}, 300).animate({
'background-color': 'rgb(182,37,104)'
}, 300).animate({
'background-color': '#edf1f5'
}, 300);
hideModal();
});
}
cms/static/sass/_courseware.scss
......@@ -42,10 +42,35 @@ input.courseware-unit-search-input {
.section-published-date {
position: absolute;
top: 12px;
top: 19px;
right: 90px;
width: 250px;
font-size: 13px;
padding: 4px 10px;
border-radius: 3px;
background: $lightGrey;
text-align: right;
.published-status {
font-size: 12px;
margin-right: 15px;
strong {
font-weight: 700;
}
}
.schedule-button {
@include blue-button;
}
.edit-button {
@include blue-button;
}
.schedule-button,
.edit-button {
font-size: 11px;
padding: 3px 15px 5px;
}
}
.datepair .date,
......@@ -76,15 +101,15 @@ input.courseware-unit-search-input {
}
header {
height: 55px;
height: 75px;
.item-details {
float: left;
padding: 15px 0 0;
padding: 21px 0 0;
}
.item-actions {
margin-top: 11px;
margin-top: 21px;
margin-right: 12px;
.edit-button,
......@@ -95,7 +120,7 @@ input.courseware-unit-search-input {
.expand-collapse-icon {
float: left;
margin: 20px 6px 16px 16px;
margin: 29px 6px 16px 16px;
@include transition(none);
}
......@@ -105,7 +130,7 @@ input.courseware-unit-search-input {
}
h3 {
font-size: 16px;
font-size: 19px;
font-weight: 700;
color: $blue;
}
......@@ -192,3 +217,57 @@ input.courseware-unit-search-input {
.preview {
background: url(../img/preview.jpg) center top no-repeat;
}
.edit-subsection-publish-settings {
display: none;
position: fixed;
top: 100px;
left: 50%;
z-index: 99999;
width: 600px;
margin-left: -300px;
background: #fff;
text-align: center;
.settings {
padding: 40px;
}
h3 {
font-size: 34px;
font-weight: 300;
}
.picker {
margin: 30px 0 65px;
}
.description {
margin-top: 30px;
font-size: 14px;
line-height: 20px;
}
strong {
font-weight: 700;
}
.start-date,
.start-time {
font-size: 19px;
}
.save-button {
@include blue-button;
margin-right: 10px;
}
.cancel-button {
@include white-button;
}
.save-button,
.cancel-button {
font-size: 16px;
}
}
\ No newline at end of file
cms/templates/overview.html
......@@ -56,6 +56,20 @@
</%block>
<%block name="content">
<div class="edit-subsection-publish-settings">
<div class="settings">
<h3>Section Release Date</h3>
<div class="picker datepair">
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<div class="description">
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students along with the 5 subsections within it. Any units marked private will only be visible to admins.</p>
</div>
</div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Courseware</h1>
......@@ -75,18 +89,19 @@
</div>
</h3>
<div class="section-published-date">
<label>Release Date:</label>
<%
start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None
start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
%>
<div class="datepair" data-language="javascript">
<input type="text" name="start_date" value="${start_date_str}" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input type="text" name="start_time" value="${start_time_str}" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<!--<a href="#" class="save-button edit-section-start-save">Save</a><a href="#" class="cancel-button edit-section-start-cancel">Cancel</a>-->
</div>
</div>
%if start_date is None:
<span class="published-status">This section has not been released.</span>
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
%else:
<span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
<a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
%endif
</div>
</div>
<div class="item-actions">
<a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
......
common/static/js/vendor/timepicker/jquery.timepicker.css
......@@ -11,7 +11,7 @@
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
outline: none;
z-index: 10001;
z-index: 100001;
font-size: 12px;
}
......
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