diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 8834d69dc8..4f162127be 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -10,7 +10,8 @@ var $spinner; $(document).ready(function() { $body = $('body'); $modal = $('.history-modal'); - $modalCover = $('.modal-cover'); + $modalCover = $('
'); + $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('Will Release: ' + input_date + ' at ' + input_time + 'Edit'); + $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(); }); } diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 0ba4b84226..e064428dee 100644 --- a/cms/static/sass/_courseware.scss +++ b/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 diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 91b39d7586..cc0d7e8e32 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -56,6 +56,20 @@ <%block name="content"> +
+
+

Section Release Date

+
+ + +
+

On the date set above, this section – – will be released to students along with the 5 subsections within it. Any units marked private will only be visible to admins.

+
+
+ SaveCancel +
+
+

Courseware

@@ -75,18 +89,19 @@
- <% 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 '' %> -
- - - -
-
+ %if start_date is None: + This section has not been released. + Schedule + %else: + Will Release: ${start_date_str} at ${start_time_str} + Edit + %endif +
diff --git a/common/static/js/vendor/timepicker/jquery.timepicker.css b/common/static/js/vendor/timepicker/jquery.timepicker.css index 045751cc06..ad6dae98b8 100755 --- a/common/static/js/vendor/timepicker/jquery.timepicker.css +++ b/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; }