Merge pull request #2087 from edx/backbone-notifications-font-awesome

Backbone notifications & font awesome integration

oh thank god this is finally getting merged

cms/djangoapps/contentstore/views/public.py

@@ -8,7 +8,7 @@ from mitxmako.shortcuts import render_to_response
 from external_auth.views import ssl_login_shortcut
 from .user import index
 
-__all__ = ['signup', 'old_login_redirect', 'login_page', 'howitworks', 'ux_alerts']
+__all__ = ['signup', 'old_login_redirect', 'login_page', 'howitworks']
 
 """
 Public views
@@ -49,10 +49,3 @@ def howitworks(request):
         return index(request)
     else:
         return render_to_response('howitworks.html', {})
-
-
-def ux_alerts(request):
-    """
-    static/proof-of-concept views
-    """
-    return render_to_response('ux-alerts.html', {})

cms/djangoapps/contentstore/views/requests.py

@@ -21,7 +21,7 @@ def event(request):
     A noop to swallow the analytics call so that cms methods don't spook and poor developers looking at
     console logs don't get distracted :-)
     '''
-    return HttpResponse(True)
+    return HttpResponse(status=204)
 
 
 def get_request_method(request):

cms/envs/common.py

@@ -221,7 +221,9 @@ PIPELINE_JS = {
         'source_filenames': sorted(
             rooted_glob(COMMON_ROOT / 'static/', 'coffee/src/**/*.js') +
             rooted_glob(PROJECT_ROOT / 'static/', 'coffee/src/**/*.js')
-        ) + ['js/hesitate.js', 'js/base.js'],
+        ) + ['js/hesitate.js', 'js/base.js',
+             'js/models/feedback.js', 'js/views/feedback.js',
+             'js/models/section.js', 'js/views/section.js'],
         'output_filename': 'js/cms-application.js',
         'test_order': 0
     },

cms/static/client_templates/checklist.html

@@ -11,11 +11,11 @@
         <span class="int"><%= percentChecked %></span>% of checklist completed</span></span>
     <header>
         <h3 class="checklist-title title-2 is-selectable" title="Collapse/Expand this Checklist">
-            <i class="ss-icon ss-symbolicons-standard icon-arrow ui-toggle-expansion">&#x25BE;</i>
+            <i class="icon-caret-down ui-toggle-expansion"></i>
             <%= checklistShortDescription %></h3>
               <span class="checklist-status status">
                 Tasks Completed: <span class="status-count"><%= itemsChecked %></span>/<span class="status-amount"><%= items.length %></span>
-                <i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>
+                <i class="icon-ok"></i>
               </span>
     </header>
 
@@ -58,4 +58,4 @@
         <% taskIndex+=1; }) %>
 
     </ul>
-</section>
\ No newline at end of file
+</section>

cms/static/coffee/files.json

@@ -8,6 +8,8 @@
     "js/vendor/json2.js",
     "js/vendor/underscore-min.js",
     "js/vendor/backbone-min.js",
-    "js/vendor/jquery.leanModal.min.js"
+    "js/vendor/jquery.leanModal.min.js",
+    "js/vendor/sinon-1.7.1.js",
+    "js/test/i18n.js"
   ]
 }

cms/static/coffee/fixtures/section-name-edit.underscore

+../../../templates/js/section-name-edit.underscore
\ No newline at end of file

cms/static/coffee/fixtures/system-feedback.underscore

+../../../templates/js/system-feedback.underscore
\ No newline at end of file

cms/static/coffee/spec/helpers.coffee

+jasmine.getFixtures().fixturesPath = 'fixtures'
+
 # Stub jQuery.cookie
 @stubCookies =
   csrftoken: "stubCSRFToken"

cms/static/coffee/spec/main_spec.coffee

@@ -22,3 +22,37 @@ describe "main helper", ->
 
   it "setup AJAX CSRF token", ->
     expect($.ajaxSettings.headers["X-CSRFToken"]).toEqual("stubCSRFToken")
+
+describe "AJAX Errors", ->
+  tpl = readFixtures('system-feedback.underscore')
+
+  beforeEach ->
+    setFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(tpl))
+    appendSetFixtures(sandbox({id: "page-notification"}))
+    @requests = requests = []
+    @xhr = sinon.useFakeXMLHttpRequest()
+    @xhr.onCreate = (xhr) -> requests.push(xhr)
+
+  afterEach ->
+    @xhr.restore()
+
+  it "successful AJAX request does not pop an error notification", ->
+    expect($("#page-notification")).toBeEmpty()
+    $.ajax("/test")
+    expect($("#page-notification")).toBeEmpty()
+    @requests[0].respond(200)
+    expect($("#page-notification")).toBeEmpty()
+
+  it "AJAX request with error should pop an error notification", ->
+    $.ajax("/test")
+    @requests[0].respond(500)
+    expect($("#page-notification")).not.toBeEmpty()
+    expect($("#page-notification")).toContain('div.wrapper-notification-error')
+
+  it "can override AJAX request with error so it does not pop an error notification", ->
+    $.ajax
+      url: "/test"
+      notifyOnError: false
+    @requests[0].respond(500)
+    expect($("#page-notification")).toBeEmpty()
+

cms/static/coffee/spec/models/feedback_spec.coffee

+describe "CMS.Models.SystemFeedback", ->
+    beforeEach ->
+        @model = new CMS.Models.SystemFeedback()
+
+    it "should have an empty message by default", ->
+        expect(@model.get("message")).toEqual("")
+
+    it "should have an empty title by default", ->
+        expect(@model.get("title")).toEqual("")
+
+    it "should not have an intent set by default", ->
+        expect(@model.get("intent")).toBeNull()
+
+
+describe "CMS.Models.WarningMessage", ->
+    beforeEach ->
+        @model = new CMS.Models.WarningMessage()
+
+    it "should have the correct intent", ->
+        expect(@model.get("intent")).toEqual("warning")
+
+describe "CMS.Models.ErrorMessage", ->
+    beforeEach ->
+        @model = new CMS.Models.ErrorMessage()
+
+    it "should have the correct intent", ->
+        expect(@model.get("intent")).toEqual("error")
+
+describe "CMS.Models.ConfirmationMessage", ->
+    beforeEach ->
+        @model = new CMS.Models.ConfirmationMessage()
+
+    it "should have the correct intent", ->
+        expect(@model.get("intent")).toEqual("confirmation")

cms/static/coffee/spec/models/section_spec.coffee

+describe "CMS.Models.Section", ->
+    describe "basic", ->
+        beforeEach ->
+            @model = new CMS.Models.Section({
+                id: 42,
+                name: "Life, the Universe, and Everything"
+            })
+
+        it "should take an id argument", ->
+            expect(@model.get("id")).toEqual(42)
+
+        it "should take a name argument", ->
+            expect(@model.get("name")).toEqual("Life, the Universe, and Everything")
+
+        it "should have a URL set", ->
+            expect(@model.url).toEqual("/save_item")
+
+        it "should serialize to JSON correctly", ->
+            expect(@model.toJSON()).toEqual({
+                id: 42,
+                metadata: {
+                    display_name: "Life, the Universe, and Everything"
+                }
+            })
+
+    describe "XHR", ->
+        beforeEach ->
+            spyOn(CMS.Models.Section.prototype, 'showNotification')
+            spyOn(CMS.Models.Section.prototype, 'hideNotification')
+            @model = new CMS.Models.Section({
+                id: 42,
+                name: "Life, the Universe, and Everything"
+            })
+            @requests = requests = []
+            @xhr = sinon.useFakeXMLHttpRequest()
+            @xhr.onCreate = (xhr) -> requests.push(xhr)
+
+        afterEach ->
+            @xhr.restore()
+
+        it "show/hide a notification when it saves to the server", ->
+            @model.save()
+            expect(CMS.Models.Section.prototype.showNotification).toHaveBeenCalled()
+            @requests[0].respond(200)
+            expect(CMS.Models.Section.prototype.hideNotification).toHaveBeenCalled()
+
+        it "don't hide notification when saving fails", ->
+            # this is handled by the global AJAX error handler
+            @model.save()
+            @requests[0].respond(500)
+            expect(CMS.Models.Section.prototype.hideNotification).not.toHaveBeenCalled()
+
+

cms/static/coffee/spec/views/feedback_spec.coffee

+tpl = readFixtures('system-feedback.underscore')
+
+beforeEach ->
+    setFixtures(sandbox({id: "page-alert"}))
+    appendSetFixtures(sandbox({id: "page-notification"}))
+    appendSetFixtures(sandbox({id: "page-prompt"}))
+    appendSetFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(tpl))
+    @addMatchers
+        toBeShown: ->
+            @actual.hasClass("is-shown") and not @actual.hasClass("is-hiding")
+        toBeHiding: ->
+            @actual.hasClass("is-hiding") and not @actual.hasClass("is-shown")
+        toContainText: (text) ->
+            # remove this when we upgrade jasmine-jquery
+            trimmedText = $.trim(@actual.text())
+            if text and $.isFunction(text.test)
+                return text.test(trimmedText)
+            else
+                return trimmedText.indexOf(text) != -1;
+
+describe "CMS.Views.Alert as base class", ->
+    beforeEach ->
+        @model = new CMS.Models.ConfirmationMessage({
+            title: "Portal"
+            message: "Welcome to the Aperture Science Computer-Aided Enrichment Center"
+        })
+        # it will be interesting to see when this.render is called, so lets spy on it
+        spyOn(CMS.Views.Alert.prototype, 'render').andCallThrough()
+
+    it "renders on initalize", ->
+        view = new CMS.Views.Alert({model: @model})
+        expect(view.render).toHaveBeenCalled()
+
+    it "renders the template", ->
+        view = new CMS.Views.Alert({model: @model})
+        expect(view.$(".action-close")).toBeDefined()
+        expect(view.$('.wrapper')).toBeShown()
+        expect(view.$el).toContainText(@model.get("title"))
+        expect(view.$el).toContainText(@model.get("message"))
+
+    it "close button sends a .hide() message", ->
+        spyOn(CMS.Views.Alert.prototype, 'hide').andCallThrough()
+
+        view = new CMS.Views.Alert({model: @model})
+        view.$(".action-close").click()
+
+        expect(CMS.Views.Alert.prototype.hide).toHaveBeenCalled()
+        expect(view.$('.wrapper')).toBeHiding()
+
+describe "CMS.Views.Prompt", ->
+    beforeEach ->
+        @model = new CMS.Models.ConfirmationMessage({
+            title: "Portal"
+            message: "Welcome to the Aperture Science Computer-Aided Enrichment Center"
+        })
+
+    # for some reason, expect($("body")) blows up the test runner, so this test
+    # just exercises the Prompt rather than asserting on anything. Best I can
+    # do for now. :(
+    it "changes class on body", ->
+        # expect($("body")).not.toHaveClass("prompt-is-shown")
+        view = new CMS.Views.Prompt({model: @model})
+        # expect($("body")).toHaveClass("prompt-is-shown")
+        view.hide()
+        # expect($("body")).not.toHaveClass("prompt-is-shown")
+
+describe "CMS.Views.Alert click events", ->
+    beforeEach ->
+        @model = new CMS.Models.WarningMessage(
+            title: "Unsaved",
+            message: "Your content is currently Unsaved.",
+            actions:
+                primary:
+                    text: "Save",
+                    class: "save-button",
+                    click: jasmine.createSpy('primaryClick')
+                secondary: [{
+                    text: "Revert",
+                    class: "cancel-button",
+                    click: jasmine.createSpy('secondaryClick')
+                }]
+
+        )
+
+        @view = new CMS.Views.Alert({model: @model})
+
+    it "should trigger the primary event on a primary click", ->
+        @view.primaryClick()
+        expect(@model.get('actions').primary.click).toHaveBeenCalled()
+
+    it "should trigger the secondary event on a secondary click", ->
+        @view.secondaryClick()
+        expect(@model.get('actions').secondary[0].click).toHaveBeenCalled()
+
+    it "should apply class to primary action", ->
+        expect(@view.$(".action-primary")).toHaveClass("save-button")
+
+    it "should apply class to secondary action", ->
+        expect(@view.$(".action-secondary")).toHaveClass("cancel-button")
+
+describe "CMS.Views.Notification minShown and maxShown", ->
+    beforeEach ->
+        @model = new CMS.Models.SystemFeedback(
+            intent: "saving"
+            title: "Saving"
+        )
+        spyOn(CMS.Views.Notification.prototype, 'show').andCallThrough()
+        spyOn(CMS.Views.Notification.prototype, 'hide').andCallThrough()
+        @clock = sinon.useFakeTimers()
+
+    afterEach ->
+        @clock.restore()
+
+    it "a minShown view should not hide too quickly", ->
+        view = new CMS.Views.Notification({model: @model, minShown: 1000})
+        expect(CMS.Views.Notification.prototype.show).toHaveBeenCalled()
+        expect(view.$('.wrapper')).toBeShown()
+
+        # call hide() on it, but the minShown should prevent it from hiding right away
+        view.hide()
+        expect(view.$('.wrapper')).toBeShown()
+
+        # wait for the minShown timeout to expire, and check again
+        @clock.tick(1001)
+        expect(view.$('.wrapper')).toBeHiding()
+
+    it "a maxShown view should hide by itself", ->
+        view = new CMS.Views.Notification({model: @model, maxShown: 1000})
+        expect(CMS.Views.Notification.prototype.show).toHaveBeenCalled()
+        expect(view.$('.wrapper')).toBeShown()
+
+        # wait for the maxShown timeout to expire, and check again
+        @clock.tick(1001)
+        expect(view.$('.wrapper')).toBeHiding()
+
+    it "a minShown view can stay visible longer", ->
+        view = new CMS.Views.Notification({model: @model, minShown: 1000})
+        expect(CMS.Views.Notification.prototype.show).toHaveBeenCalled()
+        expect(view.$('.wrapper')).toBeShown()
+
+        # wait for the minShown timeout to expire, and check again
+        @clock.tick(1001)
+        expect(CMS.Views.Notification.prototype.hide).not.toHaveBeenCalled()
+        expect(view.$('.wrapper')).toBeShown()
+
+        # can now hide immediately
+        view.hide()
+        expect(view.$('.wrapper')).toBeHiding()
+
+    it "a maxShown view can hide early", ->
+        view = new CMS.Views.Notification({model: @model, maxShown: 1000})
+        expect(CMS.Views.Notification.prototype.show).toHaveBeenCalled()
+        expect(view.$('.wrapper')).toBeShown()
+
+        # wait 50 milliseconds, and hide it early
+        @clock.tick(50)
+        view.hide()
+        expect(view.$('.wrapper')).toBeHiding()
+
+        # wait for timeout to expire, make sure it doesn't do anything weird
+        @clock.tick(1000)
+        expect(view.$('.wrapper')).toBeHiding()
+
+    it "a view can have both maxShown and minShown", ->
+        view = new CMS.Views.Notification({model: @model, minShown: 1000, maxShown: 2000})
+
+        # can't hide early
+        @clock.tick(50)
+        view.hide()
+        expect(view.$('.wrapper')).toBeShown()
+        @clock.tick(1000)
+        expect(view.$('.wrapper')).toBeHiding()
+
+        # show it again, and let it hide automatically
+        view.show()
+        @clock.tick(1050)
+        expect(view.$('.wrapper')).toBeShown()
+        @clock.tick(1000)
+        expect(view.$('.wrapper')).toBeHiding()

cms/static/coffee/spec/views/section_spec.coffee

+describe "CMS.Views.SectionShow", ->
+    describe "Basic", ->
+        beforeEach ->
+            spyOn(CMS.Views.SectionShow.prototype, "switchToEditView")
+                .andCallThrough()
+            @model = new CMS.Models.Section({
+                id: 42
+                name: "Life, the Universe, and Everything"
+            })
+            @view = new CMS.Views.SectionShow({model: @model})
+            @view.render()
+
+        it "should contain the model name", ->
+            expect(@view.$el).toHaveText(@model.get('name'))
+
+        it "should call switchToEditView when clicked", ->
+            @view.$el.click()
+            expect(@view.switchToEditView).toHaveBeenCalled()
+
+        it "should pass the same element to SectionEdit when switching views", ->
+            spyOn(CMS.Views.SectionEdit.prototype, 'initialize').andCallThrough()
+            @view.switchToEditView()
+            expect(CMS.Views.SectionEdit.prototype.initialize).toHaveBeenCalled()
+            expect(CMS.Views.SectionEdit.prototype.initialize.mostRecentCall.args[0].el).toEqual(@view.el)
+
+describe "CMS.Views.SectionEdit", ->
+    describe "Basic", ->
+        tpl = readFixtures('section-name-edit.underscore')
+        feedback_tpl = readFixtures('system-feedback.underscore')
+
+        beforeEach ->
+            setFixtures($("<script>", {id: "section-name-edit-tpl", type: "text/template"}).text(tpl))
+            appendSetFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(feedback_tpl))
+            spyOn(CMS.Views.SectionEdit.prototype, "switchToShowView")
+                .andCallThrough()
+            spyOn(CMS.Views.SectionEdit.prototype, "showInvalidMessage")
+                .andCallThrough()
+            window.analytics = jasmine.createSpyObj('analytics', ['track'])
+            window.course_location_analytics = jasmine.createSpy()
+            @requests = requests = []
+            @xhr = sinon.useFakeXMLHttpRequest()
+            @xhr.onCreate = (xhr) -> requests.push(xhr)
+
+            @model = new CMS.Models.Section({
+                id: 42
+                name: "Life, the Universe, and Everything"
+            })
+            @view = new CMS.Views.SectionEdit({model: @model})
+            @view.render()
+
+        afterEach ->
+            @xhr.restore()
+            delete window.analytics
+            delete window.course_location_analytics
+
+        it "should have the model name as the default text value", ->
+            expect(@view.$("input[type=text]").val()).toEqual(@model.get('name'))
+
+        it "should call switchToShowView when cancel button is clicked", ->
+            @view.$("input.cancel-button").click()
+            expect(@view.switchToShowView).toHaveBeenCalled()
+
+        it "should save model when save button is clicked", ->
+            spyOn(@model, 'save')
+            @view.$("input[type=submit]").click()
+            expect(@model.save).toHaveBeenCalled()
+
+        it "should call switchToShowView when save() is successful", ->
+            @view.$("input[type=submit]").click()
+            @requests[0].respond(200)
+            expect(@view.switchToShowView).toHaveBeenCalled()
+
+        it "should call showInvalidMessage when validation is unsuccessful", ->
+            spyOn(@model, 'validate').andReturn("BLARRGH")
+            @view.$("input[type=submit]").click()
+            expect(@view.showInvalidMessage).toHaveBeenCalledWith(
+                jasmine.any(Object), "BLARRGH", jasmine.any(Object))
+            expect(@view.switchToShowView).not.toHaveBeenCalled()
+
+        it "should not save when validation is unsuccessful", ->
+            spyOn(@model, 'validate').andReturn("BLARRGH")
+            @view.$("input[type=text]").val("changed")
+            @view.$("input[type=submit]").click()
+            expect(@model.get('name')).not.toEqual("changed")
+

cms/static/coffee/src/main.coffee

@@ -15,6 +15,15 @@ $ ->
     headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
     dataType: 'json'
 
+  $(document).ajaxError (event, jqXHR, ajaxSettings, thrownError) ->
+    if ajaxSettings.notifyOnError is false
+      return
+    msg = new CMS.Models.ErrorMessage(
+        "title": gettext("Studio's having trouble saving your work")
+        "message": jqXHR.responseText || gettext("This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.")
+    )
+    new CMS.Views.Notification({model: msg})
+
   window.onTouchBasedDevice = ->
     navigator.userAgent.match /iPhone|iPod|iPad/i
 

cms/static/js/base.js

@@ -140,11 +140,6 @@ $(document).ready(function() {
 
     $('.new-course-button').bind('click', addNewCourse);
 
-    // section name editing
-    $('.section-name').bind('click', editSectionName);
-    $('.edit-section-name-cancel').bind('click', cancelEditSectionName);
-    // $('.edit-section-name-save').bind('click', saveEditSectionName);
-
     // section date setting
     $('.set-publish-date').bind('click', setSectionScheduleDate);
     $('.edit-section-start-cancel').bind('click', cancelSetSectionScheduleDate);
@@ -209,8 +204,8 @@ function toggleSections(e) {
     $section = $('.courseware-section');
     sectionCount = $section.length;
     $button = $(this);
-    $labelCollapsed = $('<i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span>');
-    $labelExpanded = $('<i class="ss-icon ss-symbolicons-block">down</i> <span class="label">Expand All Sections</span>');
+    $labelCollapsed = $('<i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span>');
+    $labelExpanded = $('<i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span>');
 
     var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
     $button.toggleClass('is-activated').html(buttonLabel);
@@ -763,72 +758,6 @@ function cancelNewSubsection(e) {
     $(this).parents('li.branch').remove();
 }
 
-function editSectionName(e) {
-    e.preventDefault();
-    $(this).unbind('click', editSectionName);
-    $(this).children('.section-name-edit').show();
-    $(this).find('.edit-section-name').focus();
-    $(this).children('.section-name-span').hide();
-    $(this).find('.section-name-edit').bind('submit', saveEditSectionName);
-    $(this).find('.edit-section-name-cancel').bind('click', cancelNewSection);
-    $body.bind('keyup', {
-        $cancelButton: $(this).find('.edit-section-name-cancel')
-    }, checkForCancel);
-}
-
-function cancelEditSectionName(e) {
-    e.preventDefault();
-    $(this).parent().hide();
-    $(this).parent().siblings('.section-name-span').show();
-    $(this).closest('.section-name').bind('click', editSectionName);
-    e.stopPropagation();
-}
-
-function saveEditSectionName(e) {
-    e.preventDefault();
-
-    $(this).closest('.section-name').unbind('click', editSectionName);
-
-    var id = $(this).closest('.courseware-section').data('id');
-    var display_name = $.trim($(this).find('.edit-section-name').val());
-
-    $(this).closest('.courseware-section .section-name').append($spinner);
-    $spinner.show();
-
-    if (display_name == '') {
-        alert("You must specify a name before saving.");
-        return;
-    }
-
-    analytics.track('Edited Section Name', {
-        'course': course_location_analytics,
-        'display_name': display_name,
-        'id': id
-    });
-
-
-    var $_this = $(this);
-    // call into server to commit the new order
-    $.ajax({
-        url: "/save_item",
-        type: "POST",
-        dataType: "json",
-        contentType: "application/json",
-        data: JSON.stringify({
-            'id': id,
-            'metadata': {
-                'display_name': display_name
-            }
-        })
-    }).success(function() {
-        $spinner.delay(250).fadeOut(250);
-        $_this.closest('h3').find('.section-name-span').html(display_name).show();
-        $_this.hide();
-        $_this.closest('.section-name').bind('click', editSectionName);
-        e.stopPropagation();
-    });
-}
-
 function setSectionScheduleDate(e) {
     e.preventDefault();
     $(this).closest("h4").hide();

cms/static/js/models/feedback.js

+CMS.Models.SystemFeedback = Backbone.Model.extend({
+    defaults: {
+        "intent": null,  // "warning", "confirmation", "error", "announcement", "step-required", etc
+        "title": "",
+        "message": ""
+        /* could also have an "actions" hash: here is an example demonstrating
+           the expected structure
+        "actions": {
+            "primary": {
+                "text": "Save",
+                "class": "action-save",
+                "click": function() {
+                    // do something when Save is clicked
+                    // `this` refers to the model
+                }
+            },
+            "secondary": [
+                {
+                    "text": "Cancel",
+                    "class": "action-cancel",
+                    "click": function() {}
+                }, {
+                    "text": "Discard Changes",
+                    "class": "action-discard",
+                    "click": function() {}
+                }
+            ]
+        }
+        */
+    }
+});
+
+CMS.Models.WarningMessage = CMS.Models.SystemFeedback.extend({
+    defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
+        "intent": "warning"
+    })
+});
+
+CMS.Models.ErrorMessage = CMS.Models.SystemFeedback.extend({
+    defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
+        "intent": "error"
+    })
+});
+
+CMS.Models.ConfirmationMessage = CMS.Models.SystemFeedback.extend({
+    defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
+        "intent": "confirmation"
+    })
+});

cms/static/js/models/section.js

+CMS.Models.Section = Backbone.Model.extend({
+    defaults: {
+        "name": ""
+    },
+    validate: function(attrs, options) {
+        if (!attrs.name) {
+            return gettext("You must specify a name");
+        }
+    },
+    url: "/save_item",
+    toJSON: function() {
+        return {
+            id: this.get("id"),
+            metadata: {
+                display_name: this.get("name")
+            }
+        };
+    },
+    initialize: function() {
+        this.listenTo(this, "request", this.showNotification);
+        this.listenTo(this, "sync", this.hideNotification);
+    },
+    showNotification: function() {
+        if(!this.msg) {
+            this.msg = new CMS.Models.SystemFeedback({
+                intent: "saving",
+                title: gettext("Saving…")
+            });
+        }
+        if(!this.msgView) {
+            this.msgView = new CMS.Views.Notification({
+                model: this.msg,
+                closeIcon: false,
+                minShown: 1250
+            });
+        }
+        this.msgView.show();
+    },
+    hideNotification: function() {
+        if(!this.msgView) { return; }
+        this.msgView.hide();
+    }
+});

cms/static/js/models/settings/advanced.js

@@ -40,7 +40,6 @@ CMS.Models.Settings.Advanced = Backbone.Model.extend({
                 // data
                 data : JSON.stringify({ deleteKeys : self.deleteKeys})
             })
-            .fail(function(hdr, status, error) { CMS.ServerError(self, "Deleting keys:" + status); })
             .done(function(data, status, error) {
                 // clear deleteKeys on success
                 self.deleteKeys = [];

cms/static/js/views/checklists_view.js

@@ -22,8 +22,7 @@ CMS.Views.Checklists = Backbone.View.extend({
                         }
                     );
                 },
-                reset: true,
-                error: CMS.ServerError
+                reset: true
             }
         );
     },
@@ -90,8 +89,7 @@ CMS.Views.Checklists = Backbone.View.extend({
                         'task': model.attributes.items[task_index].short_description,
                         'state': model.attributes.items[task_index].is_checked
                     });
-                },
-                error : CMS.ServerError
+                }
             });
     }
 });

cms/static/js/views/course_info_edit.js

@@ -105,7 +105,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
         var targetModel = this.eventModel(event);
         targetModel.set({ date : this.dateEntry(event).val(), content : this.$codeMirror.getValue() });
         // push change to display, hide the editor, submit the change
-        targetModel.save({}, {error : CMS.ServerError});
+        targetModel.save({});
         this.closeEditor(this);
 
         analytics.track('Saved Course Update', {
@@ -166,11 +166,9 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
                     success: function() {
                         cacheThis.render();
                     },
-                    reset: true,
-                    error: CMS.ServerError
+                    reset: true
                 });
-            },
-            error : CMS.ServerError
+            }
         });
     },
 
@@ -254,8 +252,7 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
                     }
                 );
             },
-            reset: true,
-            error: CMS.ServerError
+            reset: true
         });
     },
 
@@ -296,7 +293,7 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
     onSave: function(event) {
         this.model.set('data', this.$codeMirror.getValue());
         this.render();
-        this.model.save({}, {error: CMS.ServerError});
+        this.model.save({});
         this.$form.hide();
         this.closeEditor(this);
 

cms/static/js/views/feedback.js

+CMS.Views.Alert = Backbone.View.extend({
+    options: {
+        type: "alert",
+        shown: true,  // is this view currently being shown?
+        icon: true,  // should we render an icon related to the message intent?
+        closeIcon: true,  // should we render a close button in the top right corner?
+        minShown: 0,  // length of time after this view has been shown before it can be hidden (milliseconds)
+        maxShown: Infinity  // length of time after this view has been shown before it will be automatically hidden (milliseconds)
+    },
+    initialize: function() {
+        var tpl = $("#system-feedback-tpl").text();
+        if(!tpl) {
+            console.error("Couldn't load system-feedback template");
+        }
+        this.template = _.template(tpl);
+        this.setElement($("#page-"+this.options.type));
+        this.listenTo(this.model, 'change', this.render);
+        return this.show();
+    },
+    render: function() {
+        var attrs = $.extend({}, this.options, this.model.attributes);
+        this.$el.html(this.template(attrs));
+        return this;
+    },
+    events: {
+        "click .action-close": "hide",
+        "click .action-primary": "primaryClick",
+        "click .action-secondary": "secondaryClick"
+    },
+    show: function() {
+        clearTimeout(this.hideTimeout);
+        this.options.shown = true;
+        this.shownAt = new Date();
+        this.render();
+        if($.isNumeric(this.options.maxShown)) {
+            this.hideTimeout = setTimeout($.proxy(this.hide, this),
+                this.options.maxShown);
+        }
+        return this;
+    },
+    hide: function() {
+        if(this.shownAt && $.isNumeric(this.options.minShown) &&
+           this.options.minShown > new Date() - this.shownAt)
+        {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = setTimeout($.proxy(this.hide, this),
+                this.options.minShown - (new Date() - this.shownAt));
+        } else {
+            this.options.shown = false;
+            delete this.shownAt;
+            this.render();
+        }
+        return this;
+    },
+    primaryClick: function() {
+        var actions = this.model.get("actions");
+        if(!actions) { return; }
+        var primary = actions.primary;
+        if(!primary) { return; }
+        if(primary.click) {
+            primary.click.call(this.model, this);
+        }
+    },
+    secondaryClick: function(e) {
+        var actions = this.model.get("actions");
+        if(!actions) { return; }
+        var secondaryList = actions.secondary;
+        if(!secondaryList) { return; }
+        // which secondary action was clicked?
+        var i = 0;  // default to the first secondary action (easier for testing)
+        if(e && e.target) {
+            i = _.indexOf(this.$(".action-secondary"), e.target);
+        }
+        var secondary = this.model.get("actions").secondary[i];
+        if(secondary.click) {
+            secondary.click.call(this.model, this);
+        }
+    }
+});
+
+CMS.Views.Notification = CMS.Views.Alert.extend({
+    options: $.extend({}, CMS.Views.Alert.prototype.options, {
+        type: "notification",
+        closeIcon: false
+    })
+});
+CMS.Views.Prompt = CMS.Views.Alert.extend({
+    options: $.extend({}, CMS.Views.Alert.prototype.options, {
+        type: "prompt",
+        closeIcon: false,
+        icon: false
+    }),
+    render: function() {
+        if(!window.$body) { window.$body = $(document.body); }
+        if(this.options.shown) {
+            $body.addClass('prompt-is-shown');
+        } else {
+            $body.removeClass('prompt-is-shown');
+        }
+        // super() in Javascript has awkward syntax :(
+        return CMS.Views.Alert.prototype.render.apply(this, arguments);
+    }
+});

cms/static/js/views/grader-select-view.js

@@ -35,7 +35,7 @@ CMS.Views.OverviewAssignmentGrader = Backbone.View.extend({
 				// TODO move to a template file
 				'<h4 class="status-label"><%= assignmentType %></h4>' +
 				'<a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">' +
-					'<% if (!hideSymbol) {%><span class="ss-icon ss-standard">&#x2713;</span><%};%>' +
+					'<% if (!hideSymbol) {%><i class="icon-ok"></i><%};%>' +
 				'</a>' +
 				'<ul class="menu">' +
 					'<% graders.each(function(option) { %>' +

cms/static/js/views/section.js

+CMS.Views.SectionShow = Backbone.View.extend({
+    template: _.template('<span data-tooltip="<%= gettext("Edit this section\'s name") %>" class="section-name-span"><%= name %></span>'),
+    render: function() {
+        var attrs = {
+            name: this.model.escape('name')
+        };
+        this.$el.html(this.template(attrs));
+        this.delegateEvents();
+        return this;
+    },
+    events: {
+        "click": "switchToEditView"
+    },
+    switchToEditView: function() {
+        if(!this.editView) {
+            this.editView = new CMS.Views.SectionEdit({
+                model: this.model, el: this.el, showView: this});
+        }
+        this.undelegateEvents();
+        this.editView.render();
+    }
+});
+
+CMS.Views.SectionEdit = Backbone.View.extend({
+    render: function() {
+        var attrs = {
+            name: this.model.escape('name')
+        };
+        this.$el.html(this.template(attrs));
+        this.delegateEvents();
+        return this;
+    },
+    initialize: function() {
+        this.template = _.template($("#section-name-edit-tpl").text());
+        this.listenTo(this.model, "invalid", this.showInvalidMessage);
+        this.render();
+    },
+    events: {
+        "click .save-button": "saveName",
+        "submit": "saveName",
+        "click .cancel-button": "switchToShowView"
+    },
+    saveName: function(e) {
+        if (e) { e.preventDefault(); }
+        var name = this.$("input[type=text]").val();
+        var that = this;
+        this.model.save("name", name, {
+            success: function() {
+                analytics.track('Edited Section Name', {
+                    'course': course_location_analytics,
+                    'display_name': that.model.get('name'),
+                    'id': that.model.get('id')
+                });
+                that.switchToShowView();
+            }
+        });
+    },
+    switchToShowView: function() {
+        if(!this.showView) {
+            this.showView = new CMS.Views.SectionShow({
+                model: this.model, el: this.el, editView: this});
+        }
+        this.undelegateEvents();
+        this.stopListening();
+        this.showView.render();
+    },
+    showInvalidMessage: function(model, error, options) {
+        model.set("name", model.previous("name"));
+        var that = this;
+        var msg = new CMS.Models.ErrorMessage({
+            title: gettext("Your change could not be saved"),
+            message: error,
+            actions: {
+                primary: {
+                    text: gettext("Return and resolve this issue"),
+                    click: function(view) {
+                        view.hide();
+                        that.$("input[type=text]").focus();
+                    }
+                }
+            }
+        });
+        new CMS.Views.Prompt({model: msg});
+    }
+});

cms/static/js/views/server_error.js

-CMS.ServerError = function(model, error) {
-	// this handler is for the client:server communication not the validation errors which handleValidationError catches
-	window.alert("Server Error: " + error.responseText);
-};

cms/static/js/views/settings/advanced_view.js

@@ -23,7 +23,6 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         // because these are outside of this.$el, they can't be in the event hash
         $('.save-button').on('click', this, this.saveView);
         $('.cancel-button').on('click', this, this.revertView);
-        this.listenTo(this.model, 'error', CMS.ServerError);
         this.listenTo(this.model, 'invalid', this.handleValidationError);
     },
     render: function() {
@@ -144,8 +143,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
                     'course': course_location_analytics
                 });
 
-            },
-            error : CMS.ServerError
+            }
         });
     },
     revertView : function(event) {
@@ -155,8 +153,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         self.model.clear({silent : true});
         self.model.fetch({
             success : function() { self.render(); },
-            reset: true,
-            error : CMS.ServerError
+            reset: true
         });
     },
     renderTemplate: function (key, value) {

cms/static/js/views/settings/main_settings_view.js

@@ -16,7 +16,7 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
 
     },
     initialize : function() {
-        this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="ss-icon ss-standard">&#x1F4C4;</i><%= filename %></a>');
+        this.fileAnchorTemplate = _.template('<a href="<%= fullpath %>"> <i class="icon-file"></i><%= filename %></a>');
         // fill in fields
         this.$el.find("#course-name").val(this.model.get('location').get('name'));
         this.$el.find("#course-organization").val(this.model.get('location').get('org'));
@@ -26,7 +26,6 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
         var dateIntrospect = new Date();
         this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")");
 
-        this.listenTo(this.model, 'error', CMS.ServerError);
         this.listenTo(this.model, 'invalid', this.handleValidationError);
         this.selectorToField = _.invert(this.fieldToSelectorMap);
     },

cms/static/js/views/settings/settings_grading_view.js

@@ -44,7 +44,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
             self.render();
         }
         );
-        this.listenTo(this.model, 'error', CMS.ServerError);
         this.listenTo(this.model, 'invalid', this.handleValidationError);
         this.model.get('graders').on('remove', this.render, this);
         this.model.get('graders').on('reset', this.render, this);
@@ -65,7 +64,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
         gradeCollection.each(function(gradeModel) {
             $(gradelist).append(self.template({model : gradeModel }));
             var newEle = gradelist.children().last();
-            var newView = new CMS.Views.Settings.GraderView({el: newEle, 
+            var newView = new CMS.Views.Settings.GraderView({el: newEle,
                 model : gradeModel, collection : gradeCollection });
         });
 
@@ -119,7 +118,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
     gradeBarWidth : null, // cache of value since it won't change (more certain)
 
     renderCutoffBar: function() {
-        var gradeBar =this.$el.find('.grade-bar'); 
+        var gradeBar =this.$el.find('.grade-bar');
         this.gradeBarWidth = gradeBar.width();
         var gradelist = gradeBar.children('.grades');
         // HACK fixing a duplicate call issue by undoing previous call effect. Need to figure out why called 2x
@@ -128,11 +127,11 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
         // Can probably be simplified to one variable now.
         var removable = false;
         var draggable = false; // first and last are not removable, first is not draggable
-        _.each(this.descendingCutoffs, 
+        _.each(this.descendingCutoffs,
                 function(cutoff, index) {
-            var newBar = this.gradeCutoffTemplate({ 
-                descriptor : cutoff['designation'] , 
-                width : nextWidth, 
+            var newBar = this.gradeCutoffTemplate({
+                descriptor : cutoff['designation'] ,
+                width : nextWidth,
                 removable : removable });
             gradelist.append(newBar);
             if (draggable) {
@@ -152,7 +151,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
         },
         this);
         // add fail which is not in data
-        var failBar = this.gradeCutoffTemplate({ descriptor : this.failLabel(), 
+        var failBar = this.gradeCutoffTemplate({ descriptor : this.failLabel(),
             width : nextWidth, removable : false});
         $(failBar).find("span[contenteditable=true]").attr("contenteditable", false);
         gradelist.append(failBar);
@@ -221,12 +220,12 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
     },
 
     saveCutoffs: function() {
-        this.model.save('grade_cutoffs', 
-                _.reduce(this.descendingCutoffs, 
-                        function(object, cutoff) { 
+        this.model.save('grade_cutoffs',
+                _.reduce(this.descendingCutoffs,
+                        function(object, cutoff) {
                     object[cutoff['designation']] = cutoff['cutoff'] / 100.0;
                     return object;
-                }, 
+                },
                 {}));
     },
 
@@ -244,7 +243,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
         this.descendingCutoffs.push({designation: this.GRADES[gradeLength], cutoff: failBarWidth});
         this.descendingCutoffs[gradeLength - 1]['cutoff'] = Math.round(targetWidth);
 
-        var $newGradeBar = this.gradeCutoffTemplate({ descriptor : this.GRADES[gradeLength], 
+        var $newGradeBar = this.gradeCutoffTemplate({ descriptor : this.GRADES[gradeLength],
             width : targetWidth, removable : true });
         var gradeDom = this.$el.find('.grades');
         gradeDom.children().last().before($newGradeBar);
@@ -317,7 +316,6 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
         'blur :input' : "inputUnfocus"
     },
     initialize : function() {
-        this.listenTo(this.model, 'error', CMS.ServerError);
         this.listenTo(this.model, 'invalid', this.handleValidationError);
         this.selectorToField = _.invert(this.fieldToSelectorMap);
         this.render();
@@ -362,9 +360,8 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
         }
     },
     deleteModel : function(e) {
-        this.model.destroy(
-                { error : CMS.ServerError});
+        this.model.destroy();
         e.preventDefault();
     }
 
-});
\ No newline at end of file
+});

cms/static/js/views/validating_view.js

@@ -3,7 +3,6 @@ CMS.Views.ValidatingView = Backbone.View.extend({
     // decorates the fields. Needs wiring per class, but this initialization shows how
     // either have your init call this one or copy the contents
     initialize : function() {
-        this.listenTo(this.model, 'error', CMS.ServerError);
         this.listenTo(this.model, 'invalid', this.handleValidationError);
         this.selectorToField = _.invert(this.fieldToSelectorMap);
     },

cms/static/sass/_base.scss

@@ -314,7 +314,7 @@ p, ul, ol, dl {
 
         }
 
-        .upload-button .icon-create {
+        .upload-button .icon-plus {
           @extend .t-action2;
           line-height: 0 !important;
         }
@@ -750,11 +750,11 @@ hr.divide {
     display: block;
   }
 
-  .icon-create {
+  .icon-plus {
     display: inline-block;
     vertical-align: middle;
     margin-right: ($baseline/4);
-    margin-top: ($baseline/10);
+    margin-top: -2px;
     line-height: 0;
   }
 }
@@ -768,12 +768,12 @@ hr.divide {
     display: block;
   }
 
-  .icon-view {
-    @include font-size(15);
+  .icon-eye-open {
+    @include font-size(16);
     display: inline-block;
     vertical-align: middle;
-    margin-right: ($baseline/2);
-    margin-top: ($baseline/5);
+    margin-right: 8px;
+    margin-top: -3px;
     line-height: 0;
   }
 }
@@ -888,7 +888,7 @@ body.js {
         @extend .text-sr;
       }
 
-      .ss-icon {
+      [class^="icon-"] {
         @include font-size(18);
         color: $white;
       }

cms/static/sass/assets/_anims.scss

@@ -92,37 +92,6 @@
 
 // ====================
 
-// notifications slide up then down
-@mixin notificationsSlideUpDown {
-  0%, 100% {
-    @include transform(translateY(0));
-  }
-
-  15%, 85% {
-    @include transform(translateY(-($notification-height)));
-  }
-
-  20%, 80% {
-    @include transform(translateY(-($notification-height*0.99)));
-  }
-}
-
-@-moz-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
-@-webkit-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
-@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
-@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
-
-@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideUpDown);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-}
-
-// ====================
-
 // bounce in
 @mixin bounceIn {
   0% {

cms/static/sass/base-style.scss

@@ -10,6 +10,7 @@
 // ====================
 @import 'vendor/normalize';
 @import 'reset';
+@import 'vendor/font-awesome';
 
 
 // BASE  *default edX offerings*

cms/static/sass/elements/_footer.scss

@@ -48,7 +48,7 @@
           padding: ($baseline/2) ($baseline*0.75);
           background: transparent;
 
-          .ss-icon {
+          [class^="icon-"] {
             @include transition(top .25s ease-in-out .25s);
             @include font-size(15);
             display: inline-block;
@@ -60,7 +60,7 @@
           &:hover, &:active {
             color: $gray-d2;
 
-            .ss-icon {
+            [class^="icon-"] {
               color: $gray-d2;
             }
           }

cms/static/sass/elements/_header.scss

@@ -219,10 +219,11 @@
   .nav-item {
     position: relative;
 
-    .icon-expand {
+    .icon-caret-down {
       @include font-size(14);
       @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
       display: inline-block;
+      vertical-align: middle;
       margin-left: 2px;
       opacity: 0.5;
       color: $gray-l2;
@@ -230,7 +231,7 @@
 
     &:hover {
 
-      .icon-expand {
+      .icon-caret-down {
         color: $blue;
         opacity: 1.0;
       }

cms/static/sass/elements/_icons.scss

@@ -5,12 +5,12 @@
 
 }
 
-.ss-icon {
-  
+[class^="icon-"] {
+
 }
 
 .icon-inline {
   display: inline-block;
   vertical-align: middle;
   margin-right: ($baseline/4);
-}
\ No newline at end of file
+}

cms/static/sass/elements/_modal.scss

@@ -2,22 +2,22 @@
 // ====================
 
 .modal-cover {
+	@extend .depth3;
 	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 1000;
 	width: 100%;
 	height: 100%;
 	background: rgba(0, 0, 0, .8);
 }
 
 .modal {
+	@extend .depth4;
 	display: none;
 	position: fixed;
 	top: 60px;
 	left: 50%;
-	z-index: 1001;
 	width: 930px;
 	height: 540px;
 	margin-left: -465px;
@@ -61,12 +61,12 @@
 
 // lean modal alternative
 #lean_overlay {
+	@extend .depth4;
 	position: fixed;
-	z-index: 10000;
 	top: 0px;
 	left: 0px;
 	display: none;
 	height: 100%;
 	width: 100%;
 	background: $black;
-}
\ No newline at end of file
+}

cms/static/sass/elements/_sock.scss

@@ -33,8 +33,9 @@
       padding: ($baseline/2) $baseline;
       color: $gray;
 
-      .icon {
+      [class^="icon-"] {
         @include font-size(14);
+        margin-right: ($baseline/4);
       }
 
       &:hover {
@@ -62,10 +63,6 @@
         @extend .t-title4;
       }
 
-      .ss-icon {
-        @extend .t-icon;
-        @extend .icon-inline;
-      }
     }
 
     // shared elements
@@ -98,8 +95,11 @@
             @extend .t-action4;
             display: block;
 
-            .icon {
+            [class^="icon-"] {
               @include font-size(18);
+              vertical-align: middle;
+              margin-right: $baseline/4;
+
             }
 
             &:hover, &:active {

cms/static/sass/elements/_system-feedback.scss

@@ -144,7 +144,7 @@
 
 // prompts
 .wrapper-prompt {
-  @extend .depth4;
+  @extend .depth5;
   @include transition(all 0.05s ease-in-out);
   position: fixed;
   top: 0;
@@ -204,7 +204,7 @@
   // types of prompts - error
   .prompt.error {
 
-    .icon-error {
+    [class^="icon"] {
       color: $red-l1;
     }
 
@@ -216,7 +216,7 @@
   // types of prompts - confirmation
   .prompt.confirmation {
 
-    .icon-error {
+    [class^="icon"] {
       color: $green;
     }
 
@@ -228,7 +228,7 @@
   // types of prompts - error
   .prompt.warning {
 
-    .icon-warning {
+    [class^="icon"] {
       color: $orange;
     }
 
@@ -242,7 +242,7 @@
 
 // notifications
 .wrapper-notification {
-  @extend .depth3;
+  @extend .depth5;
   @include clearfix();
   @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
   position: fixed;
@@ -253,7 +253,7 @@
   &.wrapper-notification-warning {
     @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange);
 
-    .icon-warning {
+    [class^="icon"] {
       color: $orange;
     }
   }
@@ -261,7 +261,7 @@
   &.wrapper-notification-error {
     @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1);
 
-    .icon-error {
+    [class^="icon"] {
       color: $red-l1;
     }
   }
@@ -269,7 +269,7 @@
   &.wrapper-notification-confirmation {
     @include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green);
 
-    .icon-confirmation {
+    [class^="icon"] {
       color: $green;
     }
   }
@@ -294,13 +294,13 @@
       max-width: none;
       min-width: none;
 
-      .icon, .copy {
+      [class^="icon"], .copy {
         float: none;
         display: inline-block;
         vertical-align: middle;
       }
 
-      .icon {
+      [class^="icon"] {
         width: $baseline;
         height: ($baseline*1.25);
         margin-right: ($baseline*0.75);
@@ -329,7 +329,7 @@
       max-width: none;
       min-width: none;
 
-      .icon-help {
+      [class^="icon"] {
         width: $baseline;
         margin-right: ($baseline*0.75);
       }
@@ -357,13 +357,13 @@
     font-weight: 700;
   }
 
-  .icon, .copy {
+  [class^="icon"], .copy {
     float: left;
     display: inline-block;
     vertical-align: middle;
   }
 
-  .icon {
+  [class^="icon"] {
     @include transition (color 0.5s ease-in-out);
     @include font-size(22);
     width: flex-grid(1, 12);
@@ -389,7 +389,7 @@
   // with actions
   &.has-actions {
 
-    .icon {
+    [class^="icon"] {
       width: flex-grid(1, 12);
     }
 
@@ -436,9 +436,11 @@
 
   &.saving {
 
-    .icon-saving {
+    [class^="icon"] {
       @include anim-rotateClockwise(3s, linear, infinite);
-      width: 22px;
+      width: 25px;
+      margin: -4px 10px 0 0;
+      @include transform-origin(52% 60%);
     }
 
     .copy p {
@@ -472,7 +474,7 @@
   &.wrapper-alert-warning {
     @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange);
 
-    .icon-warning {
+    [class^="icon"] {
       color: $orange;
     }
   }
@@ -480,7 +482,7 @@
   &.wrapper-alert-error {
     @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1);
 
-    .icon-error {
+    [class^="icon"] {
       color: $red-l1;
     }
   }
@@ -488,7 +490,7 @@
   &.wrapper-alert-confirmation {
     @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green);
 
-    .icon-confirmation {
+    [class^="icon"] {
       color: $green;
     }
   }
@@ -496,7 +498,7 @@
   &.wrapper-alert-announcement {
     @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
 
-    .icon-announcement {
+    [class^="icon"] {
       color: $blue;
     }
   }
@@ -504,7 +506,7 @@
   &.wrapper-alert-step-required {
     @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink);
 
-    .icon-step-required {
+    [class^="icon"] {
       color: $pink;
     }
   }
@@ -524,11 +526,11 @@
     font-weight: 700;
   }
 
-  .icon, .copy {
+  [class^="icon"], .copy {
     float: left;
   }
 
-  .icon {
+  [class^="icon"] {
     @include transition (color 0.5s ease-in-out);
     @include font-size(22);
     width: flex-grid(1, 12);
@@ -550,7 +552,7 @@
   // with actions
   &.has-actions {
 
-    .icon {
+    [class^="icon"] {
       width: flex-grid(1, 12);
     }
 
@@ -600,7 +602,7 @@
       @extend .text-sr;
     }
 
-    .icon {
+    [class^="icon"] {
       @include font-size(14);
       color: $white;
       width: auto;
@@ -669,10 +671,6 @@
     &.is-hiding {
       @include anim-notificationsSlideDown(0.25s);
     }
-
-    &.is-fleeting {
-      @include anim-notificationsSlideUpDown(2s);
-    }
   }
 }
 

cms/static/sass/elements/_typography.scss

@@ -131,7 +131,48 @@
 
 // ====================
 
-// misc
-.t-icon {
-  line-height: 0;
+// icons
+.t-icon1 {
+  @include font-size(48);
+  @include line-height(48);
+}
+
+.t-icon2 {
+  @include font-size(36);
+  @include line-height(36);
+}
+
+.t-icon3 {
+  @include font-size(24);
+  @include line-height(24);
+}
+
+.t-icon4 {
+  @include font-size(18);
+  @include line-height(18);
+}
+
+.t-icon5 {
+  @include font-size(16);
+  @include line-height(16);
+}
+
+.t-icon6 {
+  @include font-size(14);
+  @include line-height(14);
+}
+
+.t-icon7 {
+  @include font-size(12);
+  @include line-height(12);
+}
+
+.t-icon8 {
+  @include font-size(11);
+  @include line-height(11);
+}
+
+.t-icon9 {
+  @include font-size(10);
+  @include line-height(10);
 }

cms/static/sass/views/_account.scss

@@ -272,9 +272,9 @@ body.signup, body.signin {
   background: $yellow-d1;
   color: $white;
 
-  .ss-icon {
+  [class^="icon-"] {
     position: relative;
-    top: 3px;
+    top: 1px;
     @include font-size(16);
     display: inline-block;
     margin-right: ($baseline/2);

cms/static/sass/views/_assets.scss

@@ -2,13 +2,25 @@
 // ====================
 
 body.course.uploads {
-  
+
+
+  .nav-actions {
+
+    .icon-cloud-upload {
+      @include font-size(16);
+      vertical-align: bottom;
+      margin-right: ($baseline/5);
+    }
+
+  }
+
   input.asset-search-input {
     float: left;
     width: 260px;
     background-color: #fff;
   }
 
+
   .asset-library {
     @include clearfix;
 
@@ -102,7 +114,7 @@ body.course.uploads {
 }
 
 .upload-modal {
-  display: none;  
+  display: none;
   width: 640px !important;
   margin-left: -320px !important;
 
@@ -187,4 +199,4 @@ body.course.uploads {
     display: none;
     margin-bottom: 100px;
   }
-}
\ No newline at end of file
+}

cms/static/sass/views/_checklists.scss

@@ -62,7 +62,7 @@ body.course.checklists {
 
         .ui-toggle-expansion {
           @include transition(rotate .15s ease-in-out .25s);
-          @include font-size(14);
+          @include font-size(21);
           display: inline-block;
           vertical-align: middle;
           margin-right: ($baseline/2);
@@ -91,10 +91,9 @@ body.course.checklists {
         color: $gray-l2;
 
 
-        .icon-confirm {
+        .icon-ok {
           @include font-size(20);
           display: inline-block;
-          vertical-align: middle;
           margin-left: ($baseline/2);
           color: $gray-l4;
         }
@@ -184,13 +183,13 @@ body.course.checklists {
 
       header {
 
-        .checklist-title, .icon-confirm {
+        .checklist-title, .icon-caret-down {
           color: $green;
         }
 
         .checklist-status {
 
-          .status-count, .status-amount, .icon-confirm {
+          .status-count, .status-amount, .icon-ok {
             color: $green;
           }
         }

cms/static/sass/views/_index.scss

@@ -164,11 +164,11 @@ body.index {
               right: ($baseline/2);
               opacity: 0;
 
-              .ss-icon {
+              [class^="icon-"] {
                 @include font-size(18);
                 @include border-top-radius(3px);
                 display: inline-block;
-                padding: ($baseline/4) ($baseline/2);
+                padding: ($baseline/2);
                 background: $blue;
                 color: $white;
                 text-align: center;

cms/static/sass/views/_outline.scss

@@ -56,6 +56,12 @@ body.course.outline {
                 }
               }
 
+              [class^="icon-"] {
+                  vertical-align: middle;
+                  margin-top: -5px;
+                  display: inline-block;
+                }
+
               .menu {
                 @include font-size(12);
                 @include border-radius(4px);
@@ -331,6 +337,7 @@ body.course.outline {
                 &:hover, &.is-active {
                   color: $blue;
                 }
+
               }
 
               .menu {
@@ -533,7 +540,7 @@ body.course.outline {
           display: block;
       }
 
-      .ss-icon {
+      [class^="icon-"] {
           @include font-size(11);
           @include border-radius(20px);
           position: relative;

cms/static/sass/views/_settings.scss

@@ -328,11 +328,12 @@ body.course.settings {
             @extend .t-action-3;
             font-weight: 600;
 
-            .icon {
+            [class^="icon-"] {
               @extend .t-icon;
               @include font-size(16);
               display: inline-block;
               vertical-align: middle;
+              margin-top: -3px;
             }
           }
         }

cms/static/sass/views/_static-pages.scss

@@ -10,6 +10,16 @@ body.course.static-pages {
     padding: 12px 0;
   }
 
+  .nav-introduction-supplementary {
+
+    .icon-question-sign {
+      display: inline-block;
+      vertical-align: baseline;
+      margin-right: ($baseline/4);
+    }
+
+  }
+
   .unit-body {
     padding: 0;
 

cms/templates/asset_index.html

@@ -44,7 +44,7 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="button upload-button new-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#xEB40;</i> Upload New File</a>
+            <a href="#" class="button upload-button new-button"><i class="icon-cloud-upload"></i> Upload New File</a>
           </li>
         </ul>
       </nav>

cms/templates/base.html

@@ -30,6 +30,13 @@
 
   <body class="<%block name='bodyclass'></%block> hide-wip">
     <%include file="courseware_vendor_js.html"/>
+
+    ## js templates
+    <script id="system-feedback-tpl" type="text/template">
+      <%static:include path="js/system-feedback.underscore" />
+    </script>
+
+    ## javascript
     <script type="text/javascript" src="/jsi18n/"></script>
     <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
@@ -49,17 +56,16 @@
     <script src="${static.url('js/vendor/jquery.smooth-scroll.min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
-    <script type="text/javascript">
-    document.write('\x3Cscript type="text/javascript" src="' +
-      document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
-    </script>
+    <script type="text/javascript" src="//www.youtube.com/player_api"></script>
+
+    <script src="${static.url('js/models/feedback.js')}"></script>
+    <script src="${static.url('js/views/feedback.js')}"></script>
 
     <!-- view -->
     <div class="wrapper wrapper-view">
       <%include file="widgets/header.html" />
 
-      <%block name="view_alerts"></%block>
-      <%block name="view_banners"></%block>
+      <div id="page-alert"></div>
 
       <%block name="content"></%block>
 
@@ -70,10 +76,10 @@
       <%include file="widgets/footer.html" />
       <%include file="widgets/tender.html" />
 
-      <%block name="view_notifications"></%block>
+      <div id="page-notification"></div>
     </div>
 
-    <%block name="view_prompts"></%block>
+    <div id="page-prompt"></div>
     <%block name="jsextra"></%block>
   </body>
 

cms/templates/course_info.html

@@ -53,7 +53,7 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class=" button new-button new-update-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Update</a>
+            <a href="#" class=" button new-button new-update-button"><i class="icon-plus"></i> New Update</a>
           </li>
         </ul>
       </nav>

cms/templates/edit-tabs.html

@@ -27,7 +27,7 @@
       <h3 class="sr">Page Actions</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="button new-button new-tab"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Page</a>
+          <a href="#" class="button new-button new-tab"><i class="icon-plus"></i> New Page</a>
         </li>
       </ul>
     </nav>
@@ -41,7 +41,7 @@
       <nav class="nav-introduction-supplementary">
         <ul>
           <li class="nav-item">
-            <a rel="modal" href="#preview-lms-staticpages"><i class="ss-icon ss-symbolicons-block icon icon-information">&#x2753;</i>How do Static Pages look to students in my course?</a>
+            <a rel="modal" href="#preview-lms-staticpages"><i class="icon-question-sign"></i>How do Static Pages look to students in my course?</a>
           </li>
         </ul>
       </nav>
@@ -76,7 +76,7 @@
   </figure>
 
   <a href="#" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon-close icon">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>

cms/templates/howitworks.html

@@ -28,7 +28,7 @@
             <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
             <figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
             <span class="action-zoom">
-              <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
+              <i class="icon-zoom-in"></i>
             </span>
           </a>
         </figure>
@@ -62,7 +62,7 @@
           <img src="/static/img/thumb-hiw-feature2.png" alt="Learning is More than Just Lectures" />
           <figcaption class="sr">Learning is More than Just Lectures</figcaption>
           <span class="action-zoom">
-            <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
+            <i class="icon-zoom-in"></i>
           </span>
         </a>
         </figure>
@@ -96,7 +96,7 @@
             <img src="/static/img/thumb-hiw-feature3.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
             <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
             <span class="action-zoom">
-              <i class="ss-icon ss-symbolicons-block icon icon-zoom">&#xE002;</i>
+              <i class="icon-zoom-in"></i>
             </span>
           </a>
         </figure>
@@ -132,7 +132,7 @@
     <header>
       <h2 class="sr">Sign Up for Studio Today!</h2>
     </header>
-    
+
     <ul class="list-actions">
       <li class="action-item">
         <a href="${reverse('signup')}" class="action action-primary">Sign Up &amp; Start Making an edX Course</a>
@@ -152,7 +152,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>
@@ -165,7 +165,7 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>
@@ -178,8 +178,8 @@
   </figure>
 
   <a href="" rel="view" class="action action-modal-close">
-    <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+    <i class="icon-remove-sign"></i>
     <span class="label">close modal</span>
   </a>
 </div>
-</%block>
\ No newline at end of file
+</%block>

cms/templates/index.html

@@ -45,7 +45,7 @@
         <ul>
           <li class="nav-item">
             % if not disable_course_creation:
-              <a href="#" class="button new-button new-course-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> ${_("New Course")}</a>
+              <a href="#" class="button new-button new-course-button"><i class="icon-plus"></i> ${_("New Course")}</a>
 	    % elif settings.MITX_FEATURES.get('STAFF_EMAIL',''):
 	      <a href="mailto:${settings.MITX_FEATURES.get('STAFF_EMAIL','')}">${_("Email staff to create course")}</a>
             % endif
@@ -76,7 +76,7 @@
             <a class="class-link" href="${url}" class="class-name">
               <span class="class-name">${course}</span>
             </a>
-            <a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
+            <a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
           </li>
             %endfor
         </ul>

cms/templates/js/section-name-edit.underscore

+<form class="section-name-edit">
+    <input type="text" value="<%= name %>" autocomplete="off"/>
+    <input type="submit" class="save-button" value="<%= gettext("Save") %>" />
+    <input type="button" class="cancel-button" value="<%= gettext("Cancel") %>" />
+</form>

cms/templates/js/system-feedback.underscore

+<div class="wrapper wrapper-<%= type %> wrapper-<%= type %>-<%= intent %>
+            <% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
+            <% if(_.contains(['help', 'saving'], intent)) { %>wrapper-<%= type %>-status<% } %>"
+     id="<%= type %>-<%= intent %>"
+     aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
+     aria-labelledby="<%= type %>-<%= intent %>-title"
+     <% if (obj.message) { %>aria-describedby="<%= type %>-<%= intent %>-description" <% } %>
+     <% if (obj.actions) { %>role="dialog"<% } %>
+  >
+  <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
+    <% if(obj.icon) { %>
+      <% var iconClass = {"warning": "warning-sign", "confirmation": "ok", "error": "warning-sign", "announcement": "bullhorn", "step-required": "exclamation-sign", "help": "question-sign", "saving": "cog"} %>
+      <i class="icon-<%= iconClass[intent] %>"></i>
+    <% } %>
+
+    <div class="copy">
+      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%= title %></h2>
+      <% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%= message %></p><% } %>
+    </div>
+
+    <% if(obj.actions) { %>
+    <nav class="nav-actions">
+      <h3 class="sr"><%= type %> Actions</h3>
+      <ul>
+        <% if(actions.primary) { %>
+        <li class="nav-item">
+          <a href="#" class="button action-primary <%= actions.primary.class %>"><%= actions.primary.text %></a>
+        </li>
+        <% } %>
+        <% if(actions.secondary) {
+             _.each(actions.secondary, function(secondary) { %>
+        <li class="nav-item">
+          <a href="#" class="button action-secondary <%= secondary.class %>"><%= secondary.text %></a>
+        </li>
+        <%   });
+           } %>
+      </ul>
+    </nav>
+    <% } %>
+
+    <% if(obj.closeIcon) { %>
+    <a href="#" rel="view" class="action action-close action-<%= type %>-close">
+      <i class="icon-remove-sign"></i>
+      <span class="label">close <%= type %></span>
+    </a>
+    <% } %>
+  </div>
+</div>

cms/templates/manage_users.html

@@ -16,7 +16,7 @@
       <ul>
         %if allow_actions:
         <li class="nav-item">
-          <a href="#" class="button new-button new-user-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New User</a>
+          <a href="#" class="button new-button new-user-button"><i class="icon-plus"></i> New User</a>
         </li>
         %endif
       </ul>

cms/templates/overview.html

@@ -20,6 +20,12 @@
   <script type="text/javascript" src="${static.url('js/views/overview.js')}"></script>
   <script type="text/javascript" src="${static.url('js/models/settings/course_grading_policy.js')}"></script>
 
+  <script type="text/template" id="section-name-edit-tpl">
+    <%static:include path="js/section-name-edit.underscore" />
+  </script>
+  <script type="text/javascript" src="${static.url('js/models/section.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/views/section.js')}"></script>
+
   <script type="text/javascript">
   $(document).ready(function(){
     // TODO figure out whether these should be in window or someplace else or whether they're only needed as local vars
@@ -37,6 +43,14 @@
             graders : window.graderTypes
         });
     });
+
+    $(".section-name").each(function() {
+        var model = new CMS.Models.Section({
+            id: $(this).parent(".item-details").data("id"),
+            name: $(this).data("name")
+        });
+        new CMS.Views.SectionShow({model: model, el: this}).render();
+    })
   });
 
   </script>
@@ -115,13 +129,13 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block icon">up</i> <span class="label">Collapse All Sections</span></a>
+            <a href="#" class="toggle-button toggle-button-sections"><i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span></a>
           </li>
           <li class="nav-item">
-            <a href="#" class="button new-button new-courseware-section-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Section</a>
+            <a href="#" class="button new-button new-courseware-section-button"><i class="icon-plus"></i> New Section</a>
           </li>
           <li class="nav-item">
-            <a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
+            <a href="${lms_link}" rel="external" class="button view-button view-live-button">View Live</a>
           </li>
         </ul>
       </nav>
@@ -137,14 +151,7 @@
             <a href="#" data-tooltip="Expand/collapse this section" class="expand-collapse-icon collapse"></a>
 
             <div class="item-details" data-id="${section.location}">
-              <h3 class="section-name">
-                <span data-tooltip="Edit this section's name" class="section-name-span">${section.display_name_with_default}</span>
-                <form class="section-name-edit" style="display:none">
-                  <input type="text" value="${section.display_name_with_default | h}" class="edit-section-name" autocomplete="off"/>
-                  <input type="submit" class="save-button edit-section-name-save" value="Save" />
-                  <input type="button" class="cancel-button edit-section-name-cancel" value="Cancel" />
-                </form>
-              </h3>
+              <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
               <div class="section-published-date">
                 <%
                   start_date_str = get_time_struct_display(section.lms.start, '%m/%d/%Y')

cms/templates/settings.html

@@ -92,7 +92,7 @@ from contentstore import utils
 
             <ul class="list-actions">
               <li class="action-item">
-                <a title="Send a note to students via email" href="mailto:someone@domain.com?Subject=Enroll%20in%20${context_course.display_name_with_default}&body=The%20course%20&quot;${context_course.display_name_with_default}&quot;,%20provided%20by%20edX,%20is%20open%20for%20enrollment.%20Please%20navigate%20to%20this%20course%20at%20https:${utils.get_lms_link_for_about_page(course_location)}%20to%20enroll." class="action action-primary"><i class="ss-icon icon ss-symbolicons-standard icon icon-inline icon-announcement">&#x2709;</i> Invite your students</a>
+                <a title="Send a note to students via email" href="mailto:someone@domain.com?Subject=Enroll%20in%20${context_course.display_name_with_default}&body=The%20course%20&quot;${context_course.display_name_with_default}&quot;,%20provided%20by%20edX,%20is%20open%20for%20enrollment.%20Please%20navigate%20to%20this%20course%20at%20https:${utils.get_lms_link_for_about_page(course_location)}%20to%20enroll." class="action action-primary"><i class="icon-envelope-alt icon-inline"></i> Invite your students</a>
               </li>
             </ul>
           </div>

cms/templates/settings_advanced.html

@@ -110,7 +110,7 @@ editor.render();
 <!-- notification: change has been made and a save is needed -->
 <div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description">
   <div class="notification warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
+    <i class="icon-warning-sign"></i>
 
     <div class="copy">
       <h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
@@ -136,7 +136,7 @@ editor.render();
 <!-- alert: save confirmed with close -->
 <div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
   <div class="alert confirmation">
-    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
+    <i class="icon-ok"></i>
 
     <div class="copy">
       <h2 class="title title-3">Your policy changes have been saved.</h2>
@@ -144,7 +144,7 @@ editor.render();
     </div>
 
     <a href="" rel="view" class="action action-alert-close">
-      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+      <i class="icon-remove-sign"></i>
       <span class="label">close alert</span>
     </a>
   </div>
@@ -153,7 +153,7 @@ editor.render();
 <!-- alert: error -->
 <div class="wrapper wrapper-alert wrapper-alert-error" role="status">
   <div class="alert error">
-    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
+    <i class="icon-warning-sign"></i>
 
     <div class="copy">
       <h2 class="title title-3">There was an error saving your information</h2>

cms/templates/settings_graders.html

@@ -117,7 +117,7 @@ from contentstore import utils
 
           <div class="actions">
             <a href="#" class="new-button new-course-grading-item add-grading-data">
-              <span class="plus-icon white"></span>New Assignment Type
+              <i class="icon-plus"></i>New Assignment Type
             </a>
           </div>
         </section>

cms/templates/widgets/header.html

@@ -21,7 +21,7 @@
 
         <ol>
           <li class="nav-item nav-course-courseware">
-            <h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+            <h3 class="title"><span class="label-prefix">Course </span>Content <i class="icon-caret-down"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -36,7 +36,7 @@
           </li>
 
           <li class="nav-item nav-course-settings">
-            <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+            <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="icon-caret-down"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -51,7 +51,7 @@
           </li>
 
           <li class="nav-item nav-course-tools">
-            <h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+            <h3 class="title">Tools <i class="icon-caret-down"></i></h3>
 
             <div class="wrapper wrapper-nav-sub">
               <div class="nav-sub">
@@ -76,10 +76,10 @@
           <li class="nav-item nav-account-username">
             <a href="#" class="title">
               <span class="account-username">
-                <i class="ss-icon ss-symbolicons-standard icon-user">&#x1F464;</i>
+                <i class="icon-user"></i>
                 ${ user.username }
               </span>
-              <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
+              <i class="icon-caret-down"></i>
             </a>
 
             <div class="wrapper wrapper-nav-sub">

cms/templates/widgets/sock.html

@@ -2,14 +2,14 @@
 <div class="wrapper-sock wrapper">
   <ul class="list-actions list-cta">
     <li class="action-item">
-      <a href="#sock" class="cta cta-show-sock"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> <span class="copy">Looking for Help with Studio?</span></a>
+      <a href="#sock" class="cta cta-show-sock"><i class="icon-question-sign"></i> <span class="copy">Looking for Help with Studio?</span></a>
     </li>
   </ul>
 
   <div class="wrapper-inner wrapper">
     <section class="sock" id="sock">
       <header>
-        <h2 class="title sr"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-help">&#x2753;</i> edX Studio Help</h2>
+        <h2 class="title sr">edX Studio Help</h2>
       </header>
 
       <div class="support">
@@ -21,15 +21,15 @@
 
       <ul class="list-actions">
         <li class="action-item">
-          <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" class="action action-primary" title="This is a PDF Document"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-pdf">&#xEC00;</i> Download Studio Documentation</a>
+          <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" class="action action-primary" title="This is a PDF Document">Download Studio Documentation</a>
           <span class="tip">How to use Studio to build your course</span>
         </li>
         <li class="action-item">
-          <a href="http://help.edge.edx.org/" rel="external" class="action action-primary"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-help">&#xEE11;</i> Studio Help Center</a>
-          <span class="tip"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> Studio Help Center</span>
+          <a href="http://help.edge.edx.org/" rel="external" class="action action-primary">Studio Help Center</a>
+          <span class="tip">Studio Help Center</span>
         </li>
         <li class="action-item">
-          <a href="https://edge.edx.org/courses/edX/edX101/How_to_Create_an_edX_Course/about" rel="external" class="action action-primary"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-enroll">&#x1F393;</i> Enroll in edX101</a>
+          <a href="https://edge.edx.org/courses/edX/edX101/How_to_Create_an_edX_Course/about" rel="external" class="action action-primary">Enroll in edX101</a>
           <span class="tip">How to use Studio to build your course</span>
         </li>
       </ul>
@@ -45,7 +45,7 @@
         <ul class="list-actions">
           <li class="action-item">
 
-            <a href="http://help.edge.edx.org/discussion/new" class="action action-primary show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon icon-inline icon-feedback">&#xE398;</i> Contact Us</a>
+            <a href="http://help.edge.edx.org/discussion/new" class="action action-primary show-tender" title="Use our feedback tool, Tender, to share your feedback"><i class="icon-comments"></i> Contact Us</a>
           </li>
         </ul>
       </div>

cms/urls.py

@@ -115,9 +115,6 @@ urlpatterns += (
     url(r'^login_post$', 'student.views.login_user', name='login_post'),
 
     url(r'^logout$', 'student.views.logout_user', name='logout'),
-
-    # static/proof-of-concept views
-    url(r'^ux-alerts$', 'contentstore.views.ux_alerts', name='ux-alerts')
 )
 
 js_info_dict = {

common/djangoapps/pipeline_mako/templates/static_content.html

@@ -28,3 +28,8 @@ except:
     % endfor
   %endif
 </%def>
+
+<%def name="include(path)"><%
+from django.template.loaders.filesystem import _loader
+source, template_path = _loader.load_template_source(path)
+%>${source}</%def>

common/lib/xmodule/xmodule/js/src/video/display/video_caption.coffee

@@ -27,16 +27,19 @@ class @VideoCaption extends Subview
     @fetchCaption()
 
   fetchCaption: ->
-    $.getWithPrefix @captionURL(), (captions) =>
-      @captions = captions.text
-      @start = captions.start
-
-      @loaded = true
-
-      if onTouchBasedDevice()
-        $('.subtitles li').html "Caption will be displayed when you start playing the video."
-      else
-        @renderCaption()
+    $.ajaxWithPrefix
+      url: @captionURL()
+      notifyOnError: false
+      success: (captions) =>
+        @captions = captions.text
+        @start = captions.start
+
+        @loaded = true
+
+        if onTouchBasedDevice()
+          $('.subtitles li').html "Caption will be displayed when you start playing the video."
+        else
+          @renderCaption()
 
   renderCaption: ->
     container = $('<ol>')

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_caption.coffee

@@ -27,16 +27,19 @@ class @VideoCaptionAlpha extends SubviewAlpha
     @fetchCaption()
 
   fetchCaption: ->
-    $.getWithPrefix @captionURL(), (captions) =>
-      @captions = captions.text
-      @start = captions.start
-
-      @loaded = true
-
-      if onTouchBasedDevice()
-        $('.subtitles li').html "Caption will be displayed when you start playing the video."
-      else
-        @renderCaption()
+    $.ajaxWithPrefix
+      url: @captionURL()
+      notifyOnError: false
+      success: (captions) =>
+        @captions = captions.text
+        @start = captions.start
+
+        @loaded = true
+
+        if onTouchBasedDevice()
+          $('.subtitles li').html "Caption will be displayed when you start playing the video."
+        else
+          @renderCaption()
 
   renderCaption: ->
     container = $('<ol>')

common/static/js/test/i18n.js

+window.gettext = window.ngettext = function(){};