assignments - rough in of navigation/proof of concept - wip

cms/djangoapps/contentstore/views.py

@@ -193,7 +193,9 @@ def course_index(request, org, course, name):
 @login_required
 @ensure_csrf_cookie
 def edit_assignment(request, location):
-    return render_to_response('edit-assignment.html', {})
+    return render_to_response('edit-assignment.html', {
+        
+        })
 
 @login_required
 def edit_subsection(request, location):

cms/static/js/base.js

@@ -56,6 +56,10 @@ $(document).ready(function() {
     $('.new-courseware-section-button').bind('click', addNewSection);
     $('.delete-section-button').bind('click', deleteSection);
     
+    // add new/delete assignment
+    $('.new-courseware-assignment-button').bind('click', addNewAssignment);
+    $('.delete-assignment-button').bind('click', deleteAssignment);
+
     // add new/delete subsection
     $('.new-subsection-item').bind('click', addNewSubsection);
     $('.delete-subsection-button').bind('click', deleteSubsection);
@@ -408,6 +412,11 @@ function deleteSection(e) {
     _deleteItem($(this).parents('section.branch'));
 }
 
+function deleteAssignment(e) {
+    e.preventDefault();
+    _deleteItem($(this).parents('section.branch'));
+}
+
 function _deleteItem($el) {
      if(!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
        return;
@@ -594,6 +603,15 @@ function addNewSection(e) {
     $newSection.find('.new-section-name-cancel').bind('click', cancelNewSection);
 }
 
+function addNewAssignment(e) {
+    e.preventDefault();
+    var $newAssignment = $($('#new-assignment-template').html());
+    $('.new-courseware-assignment-button').after($newAssignment);
+    $newAssignment.find('.new-assignment-name').focus().select();
+    $newAssignment.find('.new-assignment-name-save').bind('click', saveNewAssignment);
+    $newAssignment.find('.new-assignment-name-cancel').bind('click', cancelNewAssignment);
+}
+
 
 function saveNewSection(e) {
     e.preventDefault();
@@ -619,6 +637,30 @@ function cancelNewSection(e) {
     $(this).parents('section.new-section').remove();
 }
 
+function saveNewAssignment(e) {
+    e.preventDefault();
+
+    parent = $(this).data('parent');
+    template = $(this).data('template');
+
+    display_name = $(this).prev('.new-assignment-name').val();
+
+    $.post('/clone_item',
+       {'parent_location' : parent,
+           'template' : template,
+           'display_name': display_name,
+           },
+       function(data) {
+            if (data.id != undefined)
+               location.reload();
+       });    
+}
+
+function cancelNewAssignment(e) {
+    e.preventDefault();
+    $(this).parents('section.new-assignment').remove();
+}
+
 
 function addNewCourse(e) {
     e.preventDefault();

cms/static/sass/_assignments.scss

+.assignment {
+
+	.main-wrapper {
+		margin: 40px;
+	}
+}
+
+.assignment-body {
+	padding: 32px 40px;
+	@include clearfix;
+
+	> div {
+		margin-bottom: 40px;
+	}
+
+	input {
+		font-size: 14px;
+	}
+
+	.unit-subtitle {
+		display: block;
+		width: 100%;
+	}
+
+	.sortable-unit-list {
+		ol {
+			@include tree-view;
+		}
+	}
+
+	.policy-list {
+		input[disabled] {
+			border: none;
+			@include box-shadow(none);
+		}
+
+		.policy-list-name {
+			margin-right: 5px;
+			margin-bottom: 10px;
+		}
+
+		.policy-list-value {
+			width: 320px;
+			margin-right: 10px;
+		}
+	}
+
+	.policy-list-element {
+		.save-button,
+		.cancel-button {
+			display: none;
+		}
+
+		.edit-icon {
+			margin-right: 8px;
+		}
+
+		&.editing,
+		&.new-policy-list-element {
+			.policy-list-name,
+			.policy-list-value {
+				border: 1px solid #b0b6c2;
+		    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+		    background-color: #edf1f5;
+		    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+			}
+		}
+	}
+
+	.new-policy-list-element {
+		padding: 10px 10px 0;
+		margin: 0 -10px 10px;
+		border-radius: 3px;
+		background: $mediumGrey;
+
+		.save-button {
+			@include blue-button;
+			margin-bottom: 10px;
+		}
+
+		.cancel-button {
+			@include white-button;
+		}
+
+		.edit-icon {
+			display: none;
+		}
+
+		.delete-icon {
+			display: none;
+		}
+	}
+
+	.new-policy-item {
+		margin: 10px 0;
+
+		.plus-icon-small {
+			position: relative;
+			top: -1px;
+			vertical-align: middle;
+		}
+	}
+}
+
+.assignment-name-input {
+	label {
+		display: block;
+	}
+
+	input {
+		width: 100%;
+		font-size: 20px;
+	}
+}
+
+.scheduled-date-input,
+.due-date-input {
+	@include clearfix;
+
+	.date-input,
+	.time-input {
+		display: inline-block;
+		width: 100px;
+	}
+
+	.inherits-check {
+		label {
+			font-size: 13px;
+		}
+	}
+
+	.notice {
+		margin-top: 6px;
+		font-size: 11px;
+		color: #999;
+	}
+}
+
+.due-date-input {
+	label {
+		display: inline-block !important;
+		margin-right: 10px;
+	}
+
+	a {
+		font-size: 11px;
+		font-weight: 700;
+		line-height: 31px;
+		text-transform: uppercase;
+	}
+
+	.date-setter {
+		@include clearfix;
+		display: none;
+	}
+
+	.remove-date {
+		display: block;
+	}
+}
+
+.row.visibility {
+	label {
+		display: inline-block !important;
+		margin-right: 10px;
+		line-height: 21px;
+	}
+
+	a {
+		display: inline-block;
+		height: 31px;
+		margin-right: 8px;
+		vertical-align: middle;
+		font-size: 11px;
+		font-weight: 700;
+		line-height: 31px;
+		text-transform: uppercase;
+	}
+
+	.large-toggle {
+		width: 41px;
+		background: url(../img/large-toggles.png) no-repeat;
+		background-position: 0 -50px;
+
+		.hidden {
+			background-position: 0 -5px;			
+		}
+	}
+}

cms/static/sass/base-style.scss

@@ -13,6 +13,7 @@
 @import "dashboard";
 @import "courseware";
 @import "subsection";
+@import "assignments";
 @import "unit";
 @import "assets";
 @import "static-pages";

cms/templates/edit-assignment.html

@@ -91,9 +91,7 @@
 
     <div class="sidebar">
       <div class="unit-settings window">
-        <h4>
-          Subsection Settings
-        </h4>
+        <h4>Assignment Settings</h4> 
         <div class="window-contents">
           <div class="scheduled-date-input row">
             <label>Release date:<!-- <span class="description">Determines when this subsection and the units within it will be released publicly.</span>--></label>

cms/templates/overview.html

@@ -30,6 +30,17 @@
     </section>
   </script>
 
+  <script type="text/template" id="new-assignment-template">
+    <section class="courseware-assignment branch new-assignment">
+      <header>
+        <a href="#" class="expand-collapse-icon collapse"></a>
+        <div class="assignment-details">
+          <h3 class="assignment-name"><input type="text" value="New Assignment Name" class="new-section-name" /><a href="#" class="new-assignment-name-save" data-parent="${parent_location}" data-template="${new_section_template}">Save</a><a href="#" class="new-assignment-name-cancel">Cancel</a></h3>
+        </div>
+      </header>
+    </section>
+  </script>
+
   <script type="text/template" id="new-subsection-template">
     <li class="branch collapsed">
       <div class="section-item editing">
@@ -75,7 +86,17 @@
       <h1>Courseware</h1>
       <div class="page-actions"></div>
       <article class="courseware-overview" data-course-id="${context_course.location.url()}">
-        <a href="#" class="new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
+        
+        <nav class="new-courseware-element-nav">
+          <ul>
+            <li>
+              <a class="new-courseware-section-button" href="#"><span class="plus-icon"></span> New Section</a></li>
+            <li>
+              <a class="new-courseware-assignment-button" href="#"><span class="plus-icon"></span> New Assignment</a>
+            </li>
+          </ul>
+        </nav>
+
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
           <header>