From fe9ae3123fa2fb99c3193a704328a6e1c8e05cde Mon Sep 17 00:00:00 2001
From: Matjaz Gregoric <mtyaka@gmail.com>
Date: Sat, 3 Jan 2015 10:16:50 +0100
Subject: [PATCH] Add 'Add Component' button to library page.

It looks like the 'New Course'/'New Library' buttons on the studio home page.

Clicking the 'Add Component' button scrolls down to the 'Add New Component' buttons.
---
 cms/static/js/spec/views/pages/container_spec.js     |  9 +++++++++
 cms/static/js/spec/views/pages/index_spec.js         |  3 +++
 cms/static/js/views/pages/container.js               |  8 +++++++-
 cms/templates/js/mock/mock-container-page.underscore |  6 ++++++
 cms/templates/library.html                           | 12 ++++++++++++
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/cms/static/js/spec/views/pages/container_spec.js b/cms/static/js/spec/views/pages/container_spec.js
index ce862aac7d..7ef32bb7b7 100644
--- a/cms/static/js/spec/views/pages/container_spec.js
+++ b/cms/static/js/spec/views/pages/container_spec.js
@@ -494,6 +494,15 @@ define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_hel
                             containerPage.$(".new-component .new-component-type a.single-template")[index].click();
                         };
 
+                        it('Attaches a handler to new component button', function() {
+                            containerPage = getContainerPage();
+                            containerPage.render();
+                            // Stub jQuery.scrollTo module.
+                            $.scrollTo = jasmine.createSpy('jQuery.scrollTo');
+                            containerPage.$('.new-component-button').click();
+                            expect($.scrollTo).toHaveBeenCalled();
+                        });
+
                         it('sends the correct JSON to the server', function () {
                             renderContainerPage(this, mockContainerXBlockHtml);
                             clickNewComponent(0);
diff --git a/cms/static/js/spec/views/pages/index_spec.js b/cms/static/js/spec/views/pages/index_spec.js
index 52b71a8349..3217df1b2c 100644
--- a/cms/static/js/spec/views/pages/index_spec.js
+++ b/cms/static/js/spec/views/pages/index_spec.js
@@ -66,6 +66,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
                 expect($('.create-course .wrap-error')).toHaveClass('is-shown');
                 expect($('#course_creation_error')).toContainText('error message');
                 expect($('.new-course-save')).toHaveClass('is-disabled');
+                expect($('.new-course-save')).toHaveAttr('aria-disabled', 'true');
             });
 
             it("saves new libraries", function () {
@@ -97,6 +98,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
                     fillInLibraryFields.apply(this, values_with_blank);
                     expect($('.create-library li.field.text input[value=]').parent()).toHaveClass('error');
                     expect($('.new-library-save')).toHaveClass('is-disabled');
+                    expect($('.new-library-save')).toHaveAttr('aria-disabled', 'true');
                     $('.new-library-save').click();
                     expect(requests.length).toEqual(requests_count); // Expect no new requests
                 }
@@ -123,6 +125,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
                 expect($('.create-library .wrap-error')).toHaveClass('is-shown');
                 expect($('#library_creation_error')).toContainText('error message');
                 expect($('.new-library-save')).toHaveClass('is-disabled');
+                expect($('.new-library-save')).toHaveAttr('aria-disabled', 'true');
             });
 
             it("can switch tabs", function() {
diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
index cea6c43120..179a2a0529 100644
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -16,7 +16,8 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
             events: {
                 "click .edit-button": "editXBlock",
                 "click .duplicate-button": "duplicateXBlock",
-                "click .delete-button": "deleteXBlock"
+                "click .delete-button": "deleteXBlock",
+                "click .new-component-button": "scrollToNewComponentButtons"
             },
 
             options: {
@@ -321,6 +322,11 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                         temporaryView.unbind();  // Remove the temporary view
                     }
                 });
+            },
+
+            scrollToNewComponentButtons: function(event) {
+                event.preventDefault();
+                $.scrollTo(this.$('.add-xblock-component'));
             }
         });
 
diff --git a/cms/templates/js/mock/mock-container-page.underscore b/cms/templates/js/mock/mock-container-page.underscore
index 8f36555317..585f39fdff 100644
--- a/cms/templates/js/mock/mock-container-page.underscore
+++ b/cms/templates/js/mock/mock-container-page.underscore
@@ -33,6 +33,12 @@
                             </a>
                         </li>
                 % endif
+                    <li class="nav-item">
+                        <a href="#" class="button new-button new-component-button">
+                            <i class="icon-plus icon-inline"></i>
+                            <span class="action-button-text">${_("Add Component")}</span>
+                        </a>
+                   </li>
                 </ul>
             </nav>
         </header>
diff --git a/cms/templates/library.html b/cms/templates/library.html
index c58b1d4e51..c66c7bfa44 100644
--- a/cms/templates/library.html
+++ b/cms/templates/library.html
@@ -43,7 +43,19 @@ from django.utils.translation import ugettext as _
             <div class="wrapper-xblock-field incontext-editor is-editable"
                  data-field="display_name" data-field-display-name="${_("Display Name")}">
                 <h1 class="page-header-title xblock-field-value incontext-editor-value"><span class="title-value">${context_library.display_name_with_default | h}</span></h1>
+            </div>
         </div>
+
+        <nav class="nav-actions">
+            <h3 class="sr">${_("Page Actions")}</h3>
+            <ul>
+                <li class="nav-item">
+                    <a href="#" class="button new-button new-component-button">
+                        <i class="icon-plus icon-inline"></i> <span class="action-button-text">${_("Add Component")}</span>
+                    </a>
+              </li>
+            </ul>
+        </nav>
     </header>
 </div>