course handouts styled and basic view handling added

cms/static/coffee/src/client_templates/course_info_handouts.html

@@ -0,0 +1,30 @@
+<a href="#" class="edit-button"><span class="edit-icon"></span>Edit</a>
+<div class="handouts-content">
+  <h2>Course Handouts</h2>
+  <ol class="treeview-handoutsnav">
+    <li>
+      <a href="/static/content-mit-6002x/handouts/syllabus.a477535058a1.pdf">Syllabus</a>
+    </li>
+    <li>
+      <a href="/static/content-mit-6002x/handouts/at-a-glance.9674fe7f677e.pdf">6.002x At-A-Glance</a>
+    </li>
+    <li>
+      <a href="/static/content-mit-6002x/handouts/syllabus.a477535058a1.pdf">Syllabus</a>
+    </li>
+    <li>
+      <a href="/static/content-mit-6002x/handouts/at-a-glance.9674fe7f677e.pdf">6.002x At-A-Glance</a>
+    </li>
+    <li>
+      <a href="/static/content-mit-6002x/handouts/syllabus.a477535058a1.pdf">Syllabus</a>
+    </li>
+  </ol>
+</div>
+<form class="edit-handouts-form" style="display: block;">
+  <div class="row">
+    <textarea class="handouts-content-editor text-editor"></textarea>
+  </div>
+  <div class="row">
+    <a href="#" class="save-button">Save</a>
+    <a href="#" class="cancel-button">Cancel</a>
+  </div>
+</form>

cms/static/js/views/course_info_edit.js

@@ -13,7 +13,11 @@ CMS.Views.CourseInfoEdit = Backbone.View.extend({
         el: this.$('#course-update-view'),
         collection: this.model.get('updates')
     });
-    // TODO instantiate the handouts view
+
+    new CMS.Views.ClassInfoHandoutsView({
+        el: this.$('#course-handouts-view')
+        // collection: this.model.get('')
+    });
     return this;
   }
 });
@@ -169,4 +173,64 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
     }
         
 });
-        
+
+// the handouts view is dumb right now; it needs tied to a model and all that jazz
+CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
+    // collection is CourseUpdateCollection
+    events: {
+        "click .save-button" : "onSave",
+        "click .cancel-button" : "onCancel",
+        "click .edit-button" : "onEdit"
+    },
+
+    initialize: function() {
+        var self = this;
+        window.templateLoader.loadRemoteTemplate("course_info_handouts",
+            "/static/coffee/src/client_templates/course_info_handouts.html",
+            function (raw_template) {
+                self.template = _.template(raw_template);
+                self.render();                
+            }
+        );
+    },
+        
+    render: function () {        
+        var updateEle = this.$el;
+        var self = this;
+        this.$el.append($(this.template()));
+        this.$preview = this.$el.find('.handouts-content');
+        this.$form = this.$el.find(".edit-handouts-form");
+        this.$editor = this.$form.find('.handouts-content-editor');
+        this.$form.hide();
+
+        return this;
+    },
+
+    onEdit: function(event) {
+        this.$editor.val(this.$preview.html());
+        this.$form.show();
+        this.$preview.hide();
+        $modalCover.show();
+        $modalCover.bind('click', function() {
+            self.closeEditor(self);
+        });
+    },
+
+    onSave: function(event) {
+        this.$form.hide();
+        this.closeEditor(this);
+    },
+
+    onCancel: function(event) {
+        this.$form.hide();
+        this.closeEditor(this);
+    },
+
+    closeEditor: function(self) {
+        this.$preview.html(this.$editor.val());
+        this.$preview.show();
+        this.$form.hide();
+        $modalCover.unbind('click');
+        $modalCover.hide();
+    }
+});

cms/static/sass/_course-info.scss

@@ -121,7 +121,7 @@
 
 .course-handouts {
 	width: 30%;
-	padding: 20px 25px;
+	padding: 20px 30px;
 	margin: 0;
 	border-radius: 0 3px 3px 0;
 	border-left: none;
@@ -132,21 +132,38 @@
 		font-weight: 700;
 	}
 
-	.new-handout-button {
-		@include grey-button;
-		display: block;
-		text-align: center;
-		padding: 12px 0;
-		margin-bottom: 28px;
+	.edit-button {
+		float: right;
+		@include white-button;
+    padding: 3px 10px 4px;
+    margin-left: 7px;
+    font-size: 12px;
+    font-weight: 400;
+
+    .edit-icon,
+    .delete-icon {
+      margin-right: 4px;
+    }
 	}
 
-	li {
-		margin-bottom: 10px;
+	.handouts-content {
 		font-size: 14px;
 	}
 
-	.new-handout-form {
-		@include edit-box;
-		margin-bottom: 24px;
+	.treeview-handoutsnav li {
+		margin-bottom: 12px;
+	}
+}
+
+.edit-handouts-form {
+	@include edit-box;
+	position: absolute;
+	right: 0;
+	z-index: 10001;
+	width: 800px;
+	padding: 30px;
+
+	textarea {
+		height: 300px;
 	}
 }

cms/templates/course_info.html

@@ -46,10 +46,7 @@
             <!-- probably replace w/ a vertical where each element of the vertical is a separate update w/ a date and html field -->
           </article>
         </div>
-        <div class="sidebar window course-handouts">
-          <h2>Course Handouts</h2>
-          <a href="#" class="new-update-button">New Handout</a>
-        </div>
+        <div class="sidebar window course-handouts" id="course-handouts-view"></div>
       </div>
     </div>
   </div>