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>
 

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);
@@ -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,8 +360,7 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
         }
     },
     deleteModel : function(e) {
-        this.model.destroy(
-                { error : CMS.ServerError});
+        this.model.destroy();
         e.preventDefault();
     }
 

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,7 +5,7 @@
 
 }
 
-.ss-icon {
+[class^="icon-"] {
 
 }
 

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,8 +61,8 @@
 
 // lean modal alternative
 #lean_overlay {
+	@extend .depth4;
 	position: fixed;
-	z-index: 10000;
 	top: 0px;
 	left: 0px;
 	display: none;

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/vendor/_font-awesome.scss

+/*!
+ *  Font Awesome 3.1.0
+ *  the iconic font designed for Bootstrap
+ *  -------------------------------------------------------
+ *  The full suite of pictographic icons, examples, and documentation
+ *  can be found at: http://fontawesome.io
+ *
+ *  License
+ *  -------------------------------------------------------
+ *  - The Font Awesome font is licensed under the SIL Open Font License v1.1 -
+ *    http://scripts.sil.org/OFL
+ *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
+ *    http://opensource.org/licenses/mit-license.html
+ *  - Font Awesome documentation licensed under CC BY 3.0 License -
+ *    http://creativecommons.org/licenses/by/3.0/
+ *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+ *    "Font Awesome by Dave Gandy - http://fontawesome.io"
+
+ *  Contact
+ *  -------------------------------------------------------
+ *  Email: dave@fontawesome.io
+ *  Twitter: http://twitter.com/fortaweso_me
+ *  Work: Lead Product Designer @ http://kyruus.com
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../fonts/vendor/fontawesome-webfont.eot?v=3.1.0');
+  src: url('../fonts/vendor/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../fonts/vendor/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../fonts/vendor/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../fonts/vendor/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* FONT AWESOME CORE
+ * -------------------------- */
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+}
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+  text-decoration: inherit;
+  display: inline-block;
+  speak: none;
+}
+/* makes the font 33% larger relative to the icon container */
+.icon-large:before {
+  vertical-align: -10%;
+  font-size: 1.3333333333333333em;
+}
+/* makes sure icons active on rollover in links */
+a [class^="icon-"],
+a [class*=" icon-"],
+a [class^="icon-"]:before,
+a [class*=" icon-"]:before {
+  display: inline;
+}
+/* increased font size for icon-large */
+[class^="icon-"].icon-fixed-width,
+[class*=" icon-"].icon-fixed-width {
+  display: inline-block;
+  width: 1.2857142857142858em;
+  text-align: center;
+}
+[class^="icon-"].icon-fixed-width.icon-large,
+[class*=" icon-"].icon-fixed-width.icon-large {
+  width: 1.5714285714285714em;
+}
+ul.icons-ul {
+  list-style-type: none;
+  text-indent: -0.7142857142857143em;
+  margin-left: 2.142857142857143em;
+}
+ul.icons-ul > li .icon-li {
+  width: 0.7142857142857143em;
+  display: inline-block;
+  text-align: center;
+}
+[class^="icon-"].hide,
+[class*=" icon-"].hide {
+  display: none;
+}
+.icon-muted {
+  color: #eeeeee;
+}
+.icon-light {
+  color: #ffffff;
+}
+.icon-dark {
+  color: #333333;
+}
+.icon-border {
+  border: solid 1px #eeeeee;
+  padding: .2em .25em .15em;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.icon-2x {
+  font-size: 2em;
+}
+.icon-2x.icon-border {
+  border-width: 2px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.icon-3x {
+  font-size: 3em;
+}
+.icon-3x.icon-border {
+  border-width: 3px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.icon-4x {
+  font-size: 4em;
+}
+.icon-4x.icon-border {
+  border-width: 4px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+.icon-5x {
+  font-size: 5em;
+}
+.icon-5x.icon-border {
+  border-width: 5px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+[class^="icon-"].pull-left,
+[class*=" icon-"].pull-left {
+  margin-right: .3em;
+}
+[class^="icon-"].pull-right,
+[class*=" icon-"].pull-right {
+  margin-left: .3em;
+}
+/* BOOTSTRAP SPECIFIC CLASSES
+ * -------------------------- */
+/* Bootstrap 2.0 sprites.less reset */
+[class^="icon-"],
+[class*=" icon-"] {
+  display: inline;
+  width: auto;
+  height: auto;
+  line-height: normal;
+  vertical-align: baseline;
+  background-image: none;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  margin-top: 0;
+}
+/* more sprites.less reset */
+.icon-white,
+.nav-pills > .active > a > [class^="icon-"],
+.nav-pills > .active > a > [class*=" icon-"],
+.nav-list > .active > a > [class^="icon-"],
+.nav-list > .active > a > [class*=" icon-"],
+.navbar-inverse .nav > .active > a > [class^="icon-"],
+.navbar-inverse .nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"],
+.dropdown-submenu:hover > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"] {
+  background-image: none;
+}
+/* keeps Bootstrap styles with and without icons the same */
+.btn [class^="icon-"].icon-large,
+.nav [class^="icon-"].icon-large,
+.btn [class*=" icon-"].icon-large,
+.nav [class*=" icon-"].icon-large {
+  line-height: .9em;
+}
+.btn [class^="icon-"].icon-spin,
+.nav [class^="icon-"].icon-spin,
+.btn [class*=" icon-"].icon-spin,
+.nav [class*=" icon-"].icon-spin {
+  display: inline-block;
+}
+.nav-tabs [class^="icon-"],
+.nav-pills [class^="icon-"],
+.nav-tabs [class*=" icon-"],
+.nav-pills [class*=" icon-"],
+.nav-tabs [class^="icon-"].icon-large,
+.nav-pills [class^="icon-"].icon-large,
+.nav-tabs [class*=" icon-"].icon-large,
+.nav-pills [class*=" icon-"].icon-large {
+  line-height: .9em;
+}
+.btn [class^="icon-"].pull-left.icon-2x,
+.btn [class*=" icon-"].pull-left.icon-2x,
+.btn [class^="icon-"].pull-right.icon-2x,
+.btn [class*=" icon-"].pull-right.icon-2x {
+  margin-top: .18em;
+}
+.btn [class^="icon-"].icon-spin.icon-large,
+.btn [class*=" icon-"].icon-spin.icon-large {
+  line-height: .8em;
+}
+.btn.btn-small [class^="icon-"].pull-left.icon-2x,
+.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
+.btn.btn-small [class^="icon-"].pull-right.icon-2x,
+.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
+  margin-top: .25em;
+}
+.btn.btn-large [class^="icon-"],
+.btn.btn-large [class*=" icon-"] {
+  margin-top: 0;
+}
+.btn.btn-large [class^="icon-"].pull-left.icon-2x,
+.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
+.btn.btn-large [class^="icon-"].pull-right.icon-2x,
+.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
+  margin-top: .05em;
+}
+.btn.btn-large [class^="icon-"].pull-left.icon-2x,
+.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
+  margin-right: .2em;
+}
+.btn.btn-large [class^="icon-"].pull-right.icon-2x,
+.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
+  margin-left: .2em;
+}
+/* EXTRAS
+ * -------------------------- */
+/* Stacked and layered icon */
+.icon-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: -35%;
+}
+.icon-stack [class^="icon-"],
+.icon-stack [class*=" icon-"] {
+  display: block;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 1em;
+  line-height: inherit;
+  *line-height: 2em;
+}
+.icon-stack .icon-stack-base {
+  font-size: 2em;
+  *line-height: 1em;
+}
+/* Animated rotating icon */
+.icon-spin {
+  display: inline-block;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -ms-transform: rotate(0deg);
+  }
+  100% {
+    -ms-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+/* Icon rotations and mirroring */
+.icon-rotate-90:before {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+.icon-rotate-180:before {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+.icon-rotate-270:before {
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+.icon-flip-horizontal:before {
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.icon-flip-vertical:before {
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.icon-glass:before {
+  content: "\f000";
+}
+.icon-music:before {
+  content: "\f001";
+}
+.icon-search:before {
+  content: "\f002";
+}
+.icon-envelope:before {
+  content: "\f003";
+}
+.icon-heart:before {
+  content: "\f004";
+}
+.icon-star:before {
+  content: "\f005";
+}
+.icon-star-empty:before {
+  content: "\f006";
+}
+.icon-user:before {
+  content: "\f007";
+}
+.icon-film:before {
+  content: "\f008";
+}
+.icon-th-large:before {
+  content: "\f009";
+}
+.icon-th:before {
+  content: "\f00a";
+}
+.icon-th-list:before {
+  content: "\f00b";
+}
+.icon-ok:before {
+  content: "\f00c";
+}
+.icon-remove:before {
+  content: "\f00d";
+}
+.icon-zoom-in:before {
+  content: "\f00e";
+}
+.icon-zoom-out:before {
+  content: "\f010";
+}
+.icon-off:before {
+  content: "\f011";
+}
+.icon-signal:before {
+  content: "\f012";
+}
+.icon-cog:before {
+  content: "\f013";
+}
+.icon-trash:before {
+  content: "\f014";
+}
+.icon-home:before {
+  content: "\f015";
+}
+.icon-file:before {
+  content: "\f016";
+}
+.icon-time:before {
+  content: "\f017";
+}
+.icon-road:before {
+  content: "\f018";
+}
+.icon-download-alt:before {
+  content: "\f019";
+}
+.icon-download:before {
+  content: "\f01a";
+}
+.icon-upload:before {
+  content: "\f01b";
+}
+.icon-inbox:before {
+  content: "\f01c";
+}
+.icon-play-circle:before {
+  content: "\f01d";
+}
+.icon-repeat:before,
+.icon-rotate-right:before {
+  content: "\f01e";
+}
+/* F020 doesn't work in Safari. all shifted one down */
+.icon-refresh:before {
+  content: "\f021";
+}
+.icon-list-alt:before {
+  content: "\f022";
+}
+.icon-lock:before {
+  content: "\f023";
+}
+.icon-flag:before {
+  content: "\f024";
+}
+.icon-headphones:before {
+  content: "\f025";
+}
+.icon-volume-off:before {
+  content: "\f026";
+}
+.icon-volume-down:before {
+  content: "\f027";
+}
+.icon-volume-up:before {
+  content: "\f028";
+}
+.icon-qrcode:before {
+  content: "\f029";
+}
+.icon-barcode:before {
+  content: "\f02a";
+}
+.icon-tag:before {
+  content: "\f02b";
+}
+.icon-tags:before {
+  content: "\f02c";
+}
+.icon-book:before {
+  content: "\f02d";
+}
+.icon-bookmark:before {
+  content: "\f02e";
+}
+.icon-print:before {
+  content: "\f02f";
+}
+.icon-camera:before {
+  content: "\f030";
+}
+.icon-font:before {
+  content: "\f031";
+}
+.icon-bold:before {
+  content: "\f032";
+}
+.icon-italic:before {
+  content: "\f033";
+}
+.icon-text-height:before {
+  content: "\f034";
+}
+.icon-text-width:before {
+  content: "\f035";
+}
+.icon-align-left:before {
+  content: "\f036";
+}
+.icon-align-center:before {
+  content: "\f037";
+}
+.icon-align-right:before {
+  content: "\f038";
+}
+.icon-align-justify:before {
+  content: "\f039";
+}
+.icon-list:before {
+  content: "\f03a";
+}
+.icon-indent-left:before {
+  content: "\f03b";
+}
+.icon-indent-right:before {
+  content: "\f03c";
+}
+.icon-facetime-video:before {
+  content: "\f03d";
+}
+.icon-picture:before {
+  content: "\f03e";
+}
+.icon-pencil:before {
+  content: "\f040";
+}
+.icon-map-marker:before {
+  content: "\f041";
+}
+.icon-adjust:before {
+  content: "\f042";
+}
+.icon-tint:before {
+  content: "\f043";
+}
+.icon-edit:before {
+  content: "\f044";
+}
+.icon-share:before {
+  content: "\f045";
+}
+.icon-check:before {
+  content: "\f046";
+}
+.icon-move:before {
+  content: "\f047";
+}
+.icon-step-backward:before {
+  content: "\f048";
+}
+.icon-fast-backward:before {
+  content: "\f049";
+}
+.icon-backward:before {
+  content: "\f04a";
+}
+.icon-play:before {
+  content: "\f04b";
+}
+.icon-pause:before {
+  content: "\f04c";
+}
+.icon-stop:before {
+  content: "\f04d";
+}
+.icon-forward:before {
+  content: "\f04e";
+}
+.icon-fast-forward:before {
+  content: "\f050";
+}
+.icon-step-forward:before {
+  content: "\f051";
+}
+.icon-eject:before {
+  content: "\f052";
+}
+.icon-chevron-left:before {
+  content: "\f053";
+}
+.icon-chevron-right:before {
+  content: "\f054";
+}
+.icon-plus-sign:before {
+  content: "\f055";
+}
+.icon-minus-sign:before {
+  content: "\f056";
+}
+.icon-remove-sign:before {
+  content: "\f057";
+}
+.icon-ok-sign:before {
+  content: "\f058";
+}
+.icon-question-sign:before {
+  content: "\f059";
+}
+.icon-info-sign:before {
+  content: "\f05a";
+}
+.icon-screenshot:before {
+  content: "\f05b";
+}
+.icon-remove-circle:before {
+  content: "\f05c";
+}
+.icon-ok-circle:before {
+  content: "\f05d";
+}
+.icon-ban-circle:before {
+  content: "\f05e";
+}
+.icon-arrow-left:before {
+  content: "\f060";
+}
+.icon-arrow-right:before {
+  content: "\f061";
+}
+.icon-arrow-up:before {
+  content: "\f062";
+}
+.icon-arrow-down:before {
+  content: "\f063";
+}
+.icon-share-alt:before,
+.icon-mail-forward:before {
+  content: "\f064";
+}
+.icon-resize-full:before {
+  content: "\f065";
+}
+.icon-resize-small:before {
+  content: "\f066";
+}
+.icon-plus:before {
+  content: "\f067";
+}
+.icon-minus:before {
+  content: "\f068";
+}
+.icon-asterisk:before {
+  content: "\f069";
+}
+.icon-exclamation-sign:before {
+  content: "\f06a";
+}
+.icon-gift:before {
+  content: "\f06b";
+}
+.icon-leaf:before {
+  content: "\f06c";
+}
+.icon-fire:before {
+  content: "\f06d";
+}
+.icon-eye-open:before {
+  content: "\f06e";
+}
+.icon-eye-close:before {
+  content: "\f070";
+}
+.icon-warning-sign:before {
+  content: "\f071";
+}
+.icon-plane:before {
+  content: "\f072";
+}
+.icon-calendar:before {
+  content: "\f073";
+}
+.icon-random:before {
+  content: "\f074";
+}
+.icon-comment:before {
+  content: "\f075";
+}
+.icon-magnet:before {
+  content: "\f076";
+}
+.icon-chevron-up:before {
+  content: "\f077";
+}
+.icon-chevron-down:before {
+  content: "\f078";
+}
+.icon-retweet:before {
+  content: "\f079";
+}
+.icon-shopping-cart:before {
+  content: "\f07a";
+}
+.icon-folder-close:before {
+  content: "\f07b";
+}
+.icon-folder-open:before {
+  content: "\f07c";
+}
+.icon-resize-vertical:before {
+  content: "\f07d";
+}
+.icon-resize-horizontal:before {
+  content: "\f07e";
+}
+.icon-bar-chart:before {
+  content: "\f080";
+}
+.icon-twitter-sign:before {
+  content: "\f081";
+}
+.icon-facebook-sign:before {
+  content: "\f082";
+}
+.icon-camera-retro:before {
+  content: "\f083";
+}
+.icon-key:before {
+  content: "\f084";
+}
+.icon-cogs:before {
+  content: "\f085";
+}
+.icon-comments:before {
+  content: "\f086";
+}
+.icon-thumbs-up:before {
+  content: "\f087";
+}
+.icon-thumbs-down:before {
+  content: "\f088";
+}
+.icon-star-half:before {
+  content: "\f089";
+}
+.icon-heart-empty:before {
+  content: "\f08a";
+}
+.icon-signout:before {
+  content: "\f08b";
+}
+.icon-linkedin-sign:before {
+  content: "\f08c";
+}
+.icon-pushpin:before {
+  content: "\f08d";
+}
+.icon-external-link:before {
+  content: "\f08e";
+}
+.icon-signin:before {
+  content: "\f090";
+}
+.icon-trophy:before {
+  content: "\f091";
+}
+.icon-github-sign:before {
+  content: "\f092";
+}
+.icon-upload-alt:before {
+  content: "\f093";
+}
+.icon-lemon:before {
+  content: "\f094";
+}
+.icon-phone:before {
+  content: "\f095";
+}
+.icon-check-empty:before {
+  content: "\f096";
+}
+.icon-bookmark-empty:before {
+  content: "\f097";
+}
+.icon-phone-sign:before {
+  content: "\f098";
+}
+.icon-twitter:before {
+  content: "\f099";
+}
+.icon-facebook:before {
+  content: "\f09a";
+}
+.icon-github:before {
+  content: "\f09b";
+}
+.icon-unlock:before {
+  content: "\f09c";
+}
+.icon-credit-card:before {
+  content: "\f09d";
+}
+.icon-rss:before {
+  content: "\f09e";
+}
+.icon-hdd:before {
+  content: "\f0a0";
+}
+.icon-bullhorn:before {
+  content: "\f0a1";
+}
+.icon-bell:before {
+  content: "\f0a2";
+}
+.icon-certificate:before {
+  content: "\f0a3";
+}
+.icon-hand-right:before {
+  content: "\f0a4";
+}
+.icon-hand-left:before {
+  content: "\f0a5";
+}
+.icon-hand-up:before {
+  content: "\f0a6";
+}
+.icon-hand-down:before {
+  content: "\f0a7";
+}
+.icon-circle-arrow-left:before {
+  content: "\f0a8";
+}
+.icon-circle-arrow-right:before {
+  content: "\f0a9";
+}
+.icon-circle-arrow-up:before {
+  content: "\f0aa";
+}
+.icon-circle-arrow-down:before {
+  content: "\f0ab";
+}
+.icon-globe:before {
+  content: "\f0ac";
+}
+.icon-wrench:before {
+  content: "\f0ad";
+}
+.icon-tasks:before {
+  content: "\f0ae";
+}
+.icon-filter:before {
+  content: "\f0b0";
+}
+.icon-briefcase:before {
+  content: "\f0b1";
+}
+.icon-fullscreen:before {
+  content: "\f0b2";
+}
+.icon-group:before {
+  content: "\f0c0";
+}
+.icon-link:before {
+  content: "\f0c1";
+}
+.icon-cloud:before {
+  content: "\f0c2";
+}
+.icon-beaker:before {
+  content: "\f0c3";
+}
+.icon-cut:before {
+  content: "\f0c4";
+}
+.icon-copy:before {
+  content: "\f0c5";
+}
+.icon-paper-clip:before {
+  content: "\f0c6";
+}
+.icon-save:before {
+  content: "\f0c7";
+}
+.icon-sign-blank:before {
+  content: "\f0c8";
+}
+.icon-reorder:before {
+  content: "\f0c9";
+}
+.icon-list-ul:before {
+  content: "\f0ca";
+}
+.icon-list-ol:before {
+  content: "\f0cb";
+}
+.icon-strikethrough:before {
+  content: "\f0cc";
+}
+.icon-underline:before {
+  content: "\f0cd";
+}
+.icon-table:before {
+  content: "\f0ce";
+}
+.icon-magic:before {
+  content: "\f0d0";
+}
+.icon-truck:before {
+  content: "\f0d1";
+}
+.icon-pinterest:before {
+  content: "\f0d2";
+}
+.icon-pinterest-sign:before {
+  content: "\f0d3";
+}
+.icon-google-plus-sign:before {
+  content: "\f0d4";
+}
+.icon-google-plus:before {
+  content: "\f0d5";
+}
+.icon-money:before {
+  content: "\f0d6";
+}
+.icon-caret-down:before {
+  content: "\f0d7";
+}
+.icon-caret-up:before {
+  content: "\f0d8";
+}
+.icon-caret-left:before {
+  content: "\f0d9";
+}
+.icon-caret-right:before {
+  content: "\f0da";
+}
+.icon-columns:before {
+  content: "\f0db";
+}
+.icon-sort:before {
+  content: "\f0dc";
+}
+.icon-sort-down:before {
+  content: "\f0dd";
+}
+.icon-sort-up:before {
+  content: "\f0de";
+}
+.icon-envelope-alt:before {
+  content: "\f0e0";
+}
+.icon-linkedin:before {
+  content: "\f0e1";
+}
+.icon-undo:before,
+.icon-rotate-left:before {
+  content: "\f0e2";
+}
+.icon-legal:before {
+  content: "\f0e3";
+}
+.icon-dashboard:before {
+  content: "\f0e4";
+}
+.icon-comment-alt:before {
+  content: "\f0e5";
+}
+.icon-comments-alt:before {
+  content: "\f0e6";
+}
+.icon-bolt:before {
+  content: "\f0e7";
+}
+.icon-sitemap:before {
+  content: "\f0e8";
+}
+.icon-umbrella:before {
+  content: "\f0e9";
+}
+.icon-paste:before {
+  content: "\f0ea";
+}
+.icon-lightbulb:before {
+  content: "\f0eb";
+}
+.icon-exchange:before {
+  content: "\f0ec";
+}
+.icon-cloud-download:before {
+  content: "\f0ed";
+}
+.icon-cloud-upload:before {
+  content: "\f0ee";
+}
+.icon-user-md:before {
+  content: "\f0f0";
+}
+.icon-stethoscope:before {
+  content: "\f0f1";
+}
+.icon-suitcase:before {
+  content: "\f0f2";
+}
+.icon-bell-alt:before {
+  content: "\f0f3";
+}
+.icon-coffee:before {
+  content: "\f0f4";
+}
+.icon-food:before {
+  content: "\f0f5";
+}
+.icon-file-alt:before {
+  content: "\f0f6";
+}
+.icon-building:before {
+  content: "\f0f7";
+}
+.icon-hospital:before {
+  content: "\f0f8";
+}
+.icon-ambulance:before {
+  content: "\f0f9";
+}
+.icon-medkit:before {
+  content: "\f0fa";
+}
+.icon-fighter-jet:before {
+  content: "\f0fb";
+}
+.icon-beer:before {
+  content: "\f0fc";
+}
+.icon-h-sign:before {
+  content: "\f0fd";
+}
+.icon-plus-sign-alt:before {
+  content: "\f0fe";
+}
+.icon-double-angle-left:before {
+  content: "\f100";
+}
+.icon-double-angle-right:before {
+  content: "\f101";
+}
+.icon-double-angle-up:before {
+  content: "\f102";
+}
+.icon-double-angle-down:before {
+  content: "\f103";
+}
+.icon-angle-left:before {
+  content: "\f104";
+}
+.icon-angle-right:before {
+  content: "\f105";
+}
+.icon-angle-up:before {
+  content: "\f106";
+}
+.icon-angle-down:before {
+  content: "\f107";
+}
+.icon-desktop:before {
+  content: "\f108";
+}
+.icon-laptop:before {
+  content: "\f109";
+}
+.icon-tablet:before {
+  content: "\f10a";
+}
+.icon-mobile-phone:before {
+  content: "\f10b";
+}
+.icon-circle-blank:before {
+  content: "\f10c";
+}
+.icon-quote-left:before {
+  content: "\f10d";
+}
+.icon-quote-right:before {
+  content: "\f10e";
+}
+.icon-spinner:before {
+  content: "\f110";
+}
+.icon-circle:before {
+  content: "\f111";
+}
+.icon-reply:before,
+.icon-mail-reply:before {
+  content: "\f112";
+}
+.icon-folder-close-alt:before {
+  content: "\f114";
+}
+.icon-folder-open-alt:before {
+  content: "\f115";
+}
+.icon-expand-alt:before {
+  content: "\f116";
+}
+.icon-collapse-alt:before {
+  content: "\f117";
+}
+.icon-smile:before {
+  content: "\f118";
+}
+.icon-frown:before {
+  content: "\f119";
+}
+.icon-meh:before {
+  content: "\f11a";
+}
+.icon-gamepad:before {
+  content: "\f11b";
+}
+.icon-keyboard:before {
+  content: "\f11c";
+}
+.icon-flag-alt:before {
+  content: "\f11d";
+}
+.icon-flag-checkered:before {
+  content: "\f11e";
+}
+.icon-terminal:before {
+  content: "\f120";
+}
+.icon-code:before {
+  content: "\f121";
+}
+.icon-reply-all:before {
+  content: "\f122";
+}
+.icon-mail-reply-all:before {
+  content: "\f122";
+}
+.icon-star-half-full:before,
+.icon-star-half-empty:before {
+  content: "\f123";
+}
+.icon-location-arrow:before {
+  content: "\f124";
+}
+.icon-crop:before {
+  content: "\f125";
+}
+.icon-code-fork:before {
+  content: "\f126";
+}
+.icon-unlink:before {
+  content: "\f127";
+}
+.icon-question:before {
+  content: "\f128";
+}
+.icon-info:before {
+  content: "\f129";
+}
+.icon-exclamation:before {
+  content: "\f12a";
+}
+.icon-superscript:before {
+  content: "\f12b";
+}
+.icon-subscript:before {
+  content: "\f12c";
+}
+.icon-eraser:before {
+  content: "\f12d";
+}
+.icon-puzzle-piece:before {
+  content: "\f12e";
+}
+.icon-microphone:before {
+  content: "\f130";
+}
+.icon-microphone-off:before {
+  content: "\f131";
+}
+.icon-shield:before {
+  content: "\f132";
+}
+.icon-calendar-empty:before {
+  content: "\f133";
+}
+.icon-fire-extinguisher:before {
+  content: "\f134";
+}
+.icon-rocket:before {
+  content: "\f135";
+}
+.icon-maxcdn:before {
+  content: "\f136";
+}
+.icon-chevron-sign-left:before {
+  content: "\f137";
+}
+.icon-chevron-sign-right:before {
+  content: "\f138";
+}
+.icon-chevron-sign-up:before {
+  content: "\f139";
+}
+.icon-chevron-sign-down:before {
+  content: "\f13a";
+}
+.icon-html5:before {
+  content: "\f13b";
+}
+.icon-css3:before {
+  content: "\f13c";
+}
+.icon-anchor:before {
+  content: "\f13d";
+}
+.icon-unlock-alt:before {
+  content: "\f13e";
+}
+.icon-bullseye:before {
+  content: "\f140";
+}
+.icon-ellipsis-horizontal:before {
+  content: "\f141";
+}
+.icon-ellipsis-vertical:before {
+  content: "\f142";
+}
+.icon-rss-sign:before {
+  content: "\f143";
+}
+.icon-play-sign:before {
+  content: "\f144";
+}
+.icon-ticket:before {
+  content: "\f145";
+}
+.icon-minus-sign-alt:before {
+  content: "\f146";
+}
+.icon-check-minus:before {
+  content: "\f147";
+}
+.icon-level-up:before {
+  content: "\f148";
+}
+.icon-level-down:before {
+  content: "\f149";
+}
+.icon-check-sign:before {
+  content: "\f14a";
+}
+.icon-edit-sign:before {
+  content: "\f14b";
+}
+.icon-external-link-sign:before {
+  content: "\f14c";
+}
+.icon-share-sign:before {
+  content: "\f14d";
+}

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

@@ -3,12 +3,24 @@
 
 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;
 

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>
@@ -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,7 +178,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>

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/ux-alerts.html

-<%inherit file="base.html" />
-<%block name="title">Studio Alerts</%block>
-<%block name="bodyclass">is-signedin course uxdesign alerts</%block>
-
-<%block name="jsextra">
-<script type="text/javascript">
-  // notifications - demo
-  $(document).ready(function() {
-
-    // alert and notifications - manual close
-    $('.action-alert-close, .alert.has-actions .nav-actions a').click(function(e) {
-        (e).preventDefault();
-        console.log('closing alert');
-        $(this).closest('.wrapper-alert').removeClass('is-shown');
-    });
-
-    // alert and notifications - manual & action-based close
-    $('.action-notification-close').click(function(e) {
-        (e).preventDefault();
-        $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
-    });
-
-    // prompt pop
-    $('.action-prompt').click(function(e){
-        (e).preventDefault();
-        $body.toggleClass('prompt-is-shown');
-        $(this).closest('.wrapper-prompt').attr('aria-hidden','false');
-    });
-
-    // prompt close
-    $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
-        (e).preventDefault();
-        $body.removeClass('prompt-is-shown');
-        $(this).closest('.wrapper-prompt').attr('aria-hidden','true');
-    });
-
-    $('.hide-notification').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-notification').removeClass('is-hiding is-shown').attr('aria-hidden','true');
-        $(this.hash).addClass('is-hiding').attr('aria-hidden','true');
-    });
-
-    $('.show-notification').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-notification').removeClass('is-shown is-hiding');
-        $(this.hash).addClass('is-shown').attr('aria-hidden','false');
-    });
-
-    $('.show-notification-fleeting').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-notification').removeClass('is-fleeting').attr('aria-hidden','true');
-        $(this.hash).addClass('is-fleeting').attr('aria-hidden','false');
-    });
-
-    $('.hide-alert').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-alert').removeClass('is-hiding');
-        $(this.hash).addClass('is-hiding');
-    });
-
-    $('.show-alert').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-alert').removeClass('is-shown');
-        $(this.hash).addClass('is-shown');
-    });
-
-    $('.hide-prompt').click(function(e){
-        (e).preventDefault();
-        $body.removeClass('prompt-is-shown');
-    });
-
-    $('.show-prompt').click(function(e) {
-        (e).preventDefault();
-        $body.toggleClass('prompt-is-shown');
-        $('.wrapper-prompt').removeClass('is-shown');
-        $(this.hash).addClass('is-shown').attr('aria-hidden','false');
-    });
-  });
-</script>
-</%block>
-
-<%block name="content">
-<div class="wrapper-mast wrapper">
-  <header class="mast has-actions has-subtitle">
-    <h1 class="page-header">
-      <small class="subtitle">UX Design</small>
-      <span class="sr">&gt; </span>System Notifications
-    </h1>
-  </header>
-</div>
-
-<div class="wrapper-content wrapper">
-  <section class="content">
-    <article class="content-primary" role="main">
-      <section>
-        <header>
-          <h2 class="title-2">Alerts</h2>
-          <span class="tip">persistant, static messages to the user</span>
-        </header>
-
-        <p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
-
-        <h3 class="title-3">Different Static Examples of Alerts</h3>
-        <p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
-
-        <ul>
-          <li><a href="#alert-draft" class="show-alert">Show Draft</a></li>
-          <li><a href="#alert-version" class="show-alert">Show Version</a></li>
-          <li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
-          <li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
-          <li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
-          <li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
-          <li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
-          <li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
-          <li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
-          <li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
-          <li><a href="#alert-threeActions" class="show-alert">Alert with three actions</a></li>
-        </ul>
-      </section>
-
-      <section>
-        <header>
-          <h2 class="title-2">Notifications</h2>
-          <span class="tip">contextual, feedback-based, and temporal messages to the user</span>
-        </header>
-
-        <p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
-
-        <h3 class="title-3">Different Static Examples of Notifications</h3>
-
-        <ul>
-          <li>
-            <a href="#notification-changesMade" class="show-notification">Show Changes Made (used in Advanced Settings)</a>
-            <a href="#notification-changesMade" class="hide-notification">Hide Changes Made (used in Advanced Settings)</a>
-          </li>
-          <li>
-            <a href="#notification-version" class="show-notification">Show New Version Warning</a>
-            <a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
-          </li>
-          <li>
-            <a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
-            <a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
-          </li>
-          <li>
-            <a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
-          </li>
-          <li>
-            <a href="#notification-saving" class="show-notification">Show Saving</a>
-            <a href="#notification-saving" class="hide-notification">Hide Saving</a>
-          </li>
-          <li>
-            <a href="#notification-help" class="show-notification">Show Help</a>
-            <a href="#notification-help" class="hide-notification">Hide Help</a>
-          </li>
-        </ul>
-      </section>
-
-      <section>
-        <header>
-          <h2 class="title-2">Prompts</h2>
-          <span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
-        </header>
-
-        <p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>
-
-        <h3 class="title-3">Different Static Examples of Prompts</h3>
-
-        <ul>
-          <li>
-            <a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
-          </li>
-          <li>
-            <a href="#prompt-warning" class="show-prompt">Show Warning Prompt</a>
-          </li>
-          <li>
-            <a href="#prompt-error" class="show-prompt">Show Error Prompt</a>
-          </li>
-        </ul>
-      </section>
-    </article>
-  </section>
-</div>
-</%block>
-
-<%block name="view_alerts">
-<!-- alert: 3 actions -->
-<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-threeActions">
-  <div class="alert warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">You are editing a draft</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Alert Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action action-save action-primary">Save Draft</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action action-cancel action-secondary">Disgard Draft</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action action-secondary">Do Something Elsee</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- alert: you're editing a draft -->
-<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
-  <div class="alert warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">You are editing a draft</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Alert Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action action-save action-primary">Save Draft</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action action-cancel action-secondary">Disgard Draft</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- alert: newer version -->
-<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-version">
-  <div class="alert warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">A Newer Version of This Exists</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Alert Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action action-save action-primary">Go to Newer Version</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action action-cancel action-secondary">Continue Editing</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- alert: save confirmed -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-saved">
-  <div class="alert confirmation">
-    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">Your changes have been saved</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
-    </div>
-  </div>
-</div>
-
-<!-- alert: save confirmed with close -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-close">
-  <div class="alert confirmation">
-    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">Your changes have been saved</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
-    </div>
-
-    <a href="#" rel="view" class="action action-alert-close">
-      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
-      <span class="label">close alert</span>
-    </a>
-  </div>
-</div>
-
-<!-- alert: delete confirmed -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
-  <div class="alert confirmation">
-    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">X Has been removed</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-  </div>
-</div>
-
-<!-- alert: system error -->
-<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-system-error">
-  <div class="alert error">
-    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">We're sorry, there was a error with Studio</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-  </div>
-</div>
-
-<!-- alert: user error -->
-<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-user-error">
-  <div class="alert error has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">There was an error in your submission</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Alert Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action action-cancel action-primary">Cancel Your Submission</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- alert: announcement w/ actions -->
-<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement1">
-  <div class="alert announcement has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">Studio will be unavailable this weekend</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Alert Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" rel="external" class="action-primary">Contact edX Staff</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action-secondary">Manage Your edX Notifications</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- alert: announcement -->
-<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement2">
-  <div class="alert announcement">
-    <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">Studio will be unavailable this weekend</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-  </div>
-</div>
-
-<!-- alert: step required -->
-<div class="wrapper wrapper-alert wrapper-alert-step-required" id="alert-activation">
-  <div class="alert step-required has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
-      <p class="message">Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Alert Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary">Re-send Activation Message</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" rel="external" class="action-secondary">Contact edX Support</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-</%block>
-
-<%block name="view_notifications">
-<!-- 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" id="notification-changesMade">
-  <div class="notification warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
-      <p id="notification-changesMade-description">Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Notification Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="" class="action action-save action-primary">Save Changes</a>
-        </li>
-        <li class="nav-item">
-          <a href="" class="action action-cancel action-secondary">Cancel</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- notification: newer version exists -->
-<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version" aria-hidden="true" role="dialog" aria-labelledby="notification-warning-title" aria-describedby="notification-warning-description">
-  <div class="notification warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" id="notification-warning-title">A Newer Version of This Exists</h2>
-      <p class="message" id="notification-warning-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Notification Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action action-save action-primary">Go to Newer Version</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action action-cancel action-secondary">Continue Editing</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- notification: warning about editing something dangerous -->
-<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous" aria-hidden="true" role="dialog" aria-labelledby="notification-dangerous-title" aria-describedby="notification-dangerous-description">
-  <div class="notification warning has-actions">
-    <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" id="notification-dangerous-title">Are You Sure You Want to Edit That?</h2>
-      <p class="message" id="notification-dangerous-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Notification Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action action-proceed action-primary">Yes, I want to Edit X</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action action-cancel action-secondary">No, I do not</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- notification: status - saving -->
-<div class="wrapper wrapper-notification wrapper-notification-status wrapper-notification-saving" id="notification-saving">
-  <div class="notification saving">
-    <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" role="status">Saving &hellip;</h2>
-    </div>
-  </div>
-</div>
-
-<!-- notification: status- confirmed -->
-<div class="wrapper wrapper-notification wrapper-notification-confirmation" id="notification-confirmation">
-  <div class="notification confirmation">
-    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
-
-    <div class="copy">
-      <h2 class="title title-3" role="status"><a href="#">Your Section</a> Has Been Created</h2>
-    </div>
-  </div>
-</div>
-
-<!-- notification: help - DYK -->
-<div class="wrapper wrapper-notification wrapper-notification-help" id="notification-help">
-  <div class="notification help">
-    <i class="ss-icon ss-symbolicons-block icon icon-help">&#x2753;</i>
-
-    <div class="copy">
-      <h2 class="title title-3">Fun Fact:</h2>
-      <p class="message">Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
-    </div>
-
-    <a href="#" rel="view" class="action action-notification-close">
-      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
-      <span class="label">close notification</span>
-    </a>
-  </div>
-</div>
-</%block>
-
-<%block name="view_prompts">
-<!-- prompt - confirm deletion -->
-<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm" aria-hidden="true" role="dialog" aria-labelledby="prompt-confirm-sectionDelete-title" aria-describedby="prompt-confirm-sectionDelete-description">
-  <div class="prompt confirm">
-    <div class="copy">
-      <h2 class="title title-3" id="prompt-confirm-sectionDelete-title">Delete "Introduction &amp; Overview"?</h2>
-      <p class="message" id="prompt-confirm-sectionDelete-description">Deleting a section cannot be undone and its contents cannot be recovered.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Prompt Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary action-proceed">Yes, delete this section</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action-secondary action-cancel">Cancel</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- prompt - warning -->
-<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning" aria-hidden="true" role="dialog" aria-labelledby="prompt-warning-useAdvanced-title" aria-describedby="prompt-warning-useAdvanced-description">
-  <div class="prompt warning">
-    <div class="copy">
-      <h2 class="title title-3" id="prompt-warning-useAdvanced-title">Use Advanced Problem Editor?</h2>
-      <p class="message" id="prompt-warning-useAdvanced-description">If you proceed, you cannot edit this problem using the simple problem editor.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Prompt Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary action-proceed">Continue to Advanced Editor</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="action-secondary action-cancel">Cancel</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<!-- prompt - error -->
-<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error" aria-hidden="true" role="dialog" aria-labelledby="prompt-errorUser-title" aria-describedby="prompt-errorUser-description">
-  <div class="prompt error">
-    <div class="copy">
-      <h2 class="title title-3" id="prompt-errorUser-title">There Were Errors in Your Submission</h2>
-      <p class="message" id="prompt-errorUser-description">Please correct the errors noted on the page and try again.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Prompt Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary action-proceed">Correct errors &amp; try again</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-</%block>

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,7 +27,10 @@ class @VideoCaption extends Subview
     @fetchCaption()
 
   fetchCaption: ->
-    $.getWithPrefix @captionURL(), (captions) =>
+    $.ajaxWithPrefix
+      url: @captionURL()
+      notifyOnError: false
+      success: (captions) =>
         @captions = captions.text
         @start = captions.start
 

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

@@ -27,7 +27,10 @@ class @VideoCaptionAlpha extends SubviewAlpha
     @fetchCaption()
 
   fetchCaption: ->
-    $.getWithPrefix @captionURL(), (captions) =>
+    $.ajaxWithPrefix
+      url: @captionURL()
+      notifyOnError: false
+      success: (captions) =>
         @captions = captions.text
         @start = captions.start
 

common/static/js/test/i18n.js

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