Updates based on switching to checkbox for locking.

cms/djangoapps/contentstore/features/upload.py

@@ -125,20 +125,17 @@ def modify_upload(_step, file_name):
 def lock_unlock_file(_step, _lock_state, file_name):
     index = get_index(file_name)
     assert index != -1
-    lock_css = "a.lock-asset-button"
-    world.css_click(lock_css, index=index)
+    lock_css = "input.lock-checkbox"
+    world.css_find(lock_css)[index].click()
 
 
 @step(u'Then "([^"]*)" is (locked|unlocked)$')
 def verify_lock_unlock_file(_step, file_name, lock_state):
     index = get_index(file_name)
     assert index != -1
-    lock_css = "a.lock-asset-button"
-    text = world.css_text(lock_css, index=index)
-    if lock_state == "locked":
-        assert_equal("Unlock this asset", text)
-    else:
-        assert_equal("Lock this asset", text)
+    lock_css = "input.lock-checkbox"
+    checked = world.css_find(lock_css)[index]._element.get_attribute('checked')
+    assert_equal(lock_state == "locked", bool(checked))
 
 
 @step(u'I have opened a course with a (locked|unlocked) asset "([^"]*)"$')

cms/static/coffee/spec/views/assets_spec.coffee

@@ -77,7 +77,7 @@ describe "CMS.Views.Asset", ->
             expect(@collection.contains(@model)).toBeTruthy()
 
         it "should lock the asset on confirmation", ->
-            @view.render().$(".lock-asset-button").click()
+            @view.render().$(".lock-checkbox").click()
             # AJAX request has been sent, but not yet returned
             expect(@model.save).toHaveBeenCalled()
             expect(@requests.length).toEqual(1)
@@ -92,7 +92,7 @@ describe "CMS.Views.Asset", ->
             expect(@model.get("locked")).toBeTruthy()
 
         it "should not lock the asset if server errors", ->
-            @view.render().$(".lock-asset-button").click()
+            @view.render().$(".lock-checkbox").click()
             # return an error response
             @requests[0].respond(404)
             # Don't call hide because that closes the notification showing the server error.

cms/static/js/views/asset_view.js

@@ -1,18 +1,18 @@
 CMS.Views.Asset = Backbone.View.extend({
     initialize: function() {
         this.template = _.template($("#asset-tpl").text());
-        this.listenTo(this.model, "change", this.render);
+        this.listenTo(this.model, "change:locked", this.updateLockState);
     },
 
     tagName: "tr",
 
     events: {
         "click .remove-asset-button": "confirmDelete",
-        "click .lock-asset-button": "lockAsset"
+        "click .lock-checkbox": "lockAsset"
     },
 
     render: function() {
-        this.$el.removeClass();
+        var uniqueId = _.uniqueId('lock_asset_');
 
         this.$el.html(this.template({
             display_name: this.model.get('display_name'),
@@ -20,16 +20,28 @@ CMS.Views.Asset = Backbone.View.extend({
             date_added: this.model.get('date_added'),
             url: this.model.get('url'),
             portable_url: this.model.get('portable_url'),
-            locked: this.model.get('locked')}));
+            uniqueId: uniqueId}));
 
-        // Add a class of "locked" to the tr element if appropriate.
-        if (this.model.get('locked')) {
-            this.$el.addClass('is-locked');
-        }
+        this.updateLockState();
 
         return this;
     },
 
+    updateLockState: function () {
+        var locked_class = "is-locked";
+
+        // Add a class of "locked" to the tr element if appropriate,
+        // and toggle locked state of hidden checkbox.
+        if (this.model.get('locked')) {
+            this.$el.addClass(locked_class);
+            this.$el.find('.lock-checkbox').attr('checked','checked');
+        }
+        else {
+            this.$el.removeClass(locked_class);
+            this.$el.find('.lock-checkbox').removeAttr('checked');
+        }
+    },
+
     confirmDelete: function(e) {
         if(e && e.preventDefault) { e.preventDefault(); }
         var asset = this.model;
@@ -67,7 +79,6 @@ CMS.Views.Asset = Backbone.View.extend({
     },
 
     lockAsset: function(e) {
-        if(e && e.preventDefault) { e.preventDefault(); }
         var asset = this.model;
         var saving = new CMS.Views.Notification.Mini({
             title: gettext("Saving…")

cms/static/sass/views/_assets.scss

@@ -94,6 +94,10 @@ body.course.uploads {
       .thumb-col {
         padding: ($baseline/2) $baseline;
 
+        .thumb {
+          width: 100px;
+        }
+
           img {
             width: 100%;
           }

cms/templates/js/asset.underscore

@@ -22,8 +22,8 @@
             <a href="#" data-tooltip="<%= gettext('Delete this asset') %>" class="remove-asset-button action-button"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext('Delete this asset') %></span></a>
         </li>
         <li class="action-item action-lock">
-            <label for="lock-asset"><span class="sr"><%= gettext('Lock this asset') %></span></label>
-            <input type="checkbox" name="lock-asset" class="lock-checkbox" data-tooltip="<%= gettext('Lock/unlock file') %>" />
+            <label for="<%= uniqueId %>"><span class="sr"><%= gettext('Lock this asset') %></span></label>
+            <input type="checkbox" id="<%= uniqueId %>" class="lock-checkbox" data-tooltip="<%= gettext('Lock/unlock file') %>" />
             <div class="action-button"><i class="icon-lock"></i><i class="icon-unlock-alt"></i></div>
         </li>
     </ul>