-
+ ").addClass("new-post-form-error").html(message)
+ $(" ").addClass("post-error").html(message)
errorsField.empty().show()
if xhr.status == 400
response = JSON.parse(xhr.responseText)
diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
index 23a090c8f5..a271cc99bc 100644
--- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -75,7 +75,7 @@ if Backbone?
#TODO fix this entire chain of events
addAndSelectThread: (thread) =>
commentable_id = thread.get("commentable_id")
- menuItem = @$(".forum-nav-browse-menu-item[data-discussion-id]").filter(-> $(this).data("discussion-id").id == commentable_id)
+ menuItem = @$(".forum-nav-browse-menu-item[data-discussion-id]").filter(-> $(this).data("discussion-id") == commentable_id)
@setCurrentTopicDisplay(@getPathText(menuItem))
@retrieveDiscussion commentable_id, =>
@trigger "thread:created", thread.get('id')
@@ -242,7 +242,7 @@ if Backbone?
goHome: ->
@template = _.template($("#discussion-home").html())
- $(".discussion-column").html(@template)
+ $(".forum-content").html(@template)
$(".forum-nav-thread-list a").removeClass("is-active")
$("input.email-setting").bind "click", @updateEmailNotifications
url = DiscussionUtil.urlFor("notifications_status",window.user.get("id"))
@@ -373,7 +373,7 @@ if Backbone?
else
allItems = item.find(".forum-nav-browse-menu-item").andSelf()
discussionIds = allItems.filter("[data-discussion-id]").map(
- (i, elem) -> $(elem).data("discussion-id").id
+ (i, elem) -> $(elem).data("discussion-id")
).get()
@retrieveDiscussions(discussionIds)
@$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true)
diff --git a/common/static/coffee/src/discussion/views/new_post_view.coffee b/common/static/coffee/src/discussion/views/new_post_view.coffee
index cd4d959f3a..a801d4e1d1 100644
--- a/common/static/coffee/src/discussion/views/new_post_view.coffee
+++ b/common/static/coffee/src/discussion/views/new_post_view.coffee
@@ -10,72 +10,50 @@ if Backbone?
@topicId = options.topicId
render: () ->
+ context = _.clone(@course_settings.attributes)
+ _.extend(context, {
+ cohort_options: @getCohortOptions(),
+ mode: @mode
+ })
+ context.topics_html = @renderCategoryMap(@course_settings.get("category_map")) if @mode is "tab"
+ @$el.html(_.template($("#new-post-template").html(), context))
+
if @mode is "tab"
- @$el.html(
- _.template(
- $("#new-post-tab-template").html(), {
- topic_dropdown_html: @getTopicDropdownHTML(),
- options_html: @getOptionsHTML(),
- editor_html: @getEditorHTML()
- }
- )
- )
# set up the topic dropdown in tab mode
- @dropdownButton = @$(".topic_dropdown_button")
- @topicMenu = @$(".topic_menu_wrapper")
- @menuOpen = @dropdownButton.hasClass('dropped')
- @topicId = @$(".topic").first().data("discussion_id")
- @topicText = @getFullTopicName(@$(".topic").first())
- $('.choose-cohort').hide() unless @$(".topic_menu li a").first().is("[cohorted=true]")
- @setSelectedTopic()
- else # inline
- @$el.html(
- _.template(
- $("#new-post-inline-template").html(), {
- options_html: @getOptionsHTML(),
- editor_html: @getEditorHTML()
- }
- )
- )
- DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "new-post-body"
+ @dropdownButton = @$(".post-topic-button")
+ @topicMenu = @$(".topic-menu-wrapper")
+ @hideTopicDropdown()
+ @setTopic(@$("a.topic-title").first())
- getTopicDropdownHTML: () ->
- # populate the category menu (topic dropdown)
- _renderCategoryMap = (map) ->
- category_template = _.template($("#new-post-menu-category-template").html())
- entry_template = _.template($("#new-post-menu-entry-template").html())
- html = ""
- for name in map.children
- if name of map.entries
- entry = map.entries[name]
- html += entry_template({text: name, id: entry.id, is_cohorted: entry.is_cohorted})
- else # subcategory
- html += category_template({text: name, entries: _renderCategoryMap(map.subcategories[name])})
- html
- topics_html = _renderCategoryMap(@course_settings.get("category_map"))
- _.template($("#new-post-topic-dropdown-template").html(), {topics_html: topics_html})
+ DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "js-post-body"
- getEditorHTML: () ->
- _.template($("#new-post-editor-template").html(), {})
+ renderCategoryMap: (map) ->
+ category_template = _.template($("#new-post-menu-category-template").html())
+ entry_template = _.template($("#new-post-menu-entry-template").html())
+ html = ""
+ for name in map.children
+ if name of map.entries
+ entry = map.entries[name]
+ html += entry_template({text: name, id: entry.id, is_cohorted: entry.is_cohorted})
+ else # subcategory
+ html += category_template({text: name, entries: @renderCategoryMap(map.subcategories[name])})
+ html
- getOptionsHTML: () ->
- # cohort options?
+ getCohortOptions: () ->
if @course_settings.get("is_cohorted") and DiscussionUtil.isStaff()
user_cohort_id = $("#discussion-container").data("user-cohort-id")
- cohort_options = _.map @course_settings.get("cohorts"), (cohort) ->
+ _.map @course_settings.get("cohorts"), (cohort) ->
{value: cohort.id, text: cohort.name, selected: cohort.id==user_cohort_id}
else
- cohort_options = null
- context = _.clone(@course_settings.attributes)
- context.cohort_options = cohort_options
- _.template($("#new-post-options-template").html(), context)
+ null
events:
- "submit .new-post-form": "createPost"
- "click .topic_dropdown_button": "toggleTopicDropdown"
- "click .topic_menu_wrapper": "setTopic"
- "click .topic_menu_search": "ignoreClick"
- "keyup .form-topic-drop-search-input": DiscussionFilter.filterDrop
+ "submit .forum-new-post-form": "createPost"
+ "click .post-topic-button": "toggleTopicDropdown"
+ "click .topic-menu-wrapper": "handleTopicEvent"
+ "click .topic-filter-label": "ignoreClick"
+ "keyup .topic-filter-input": DiscussionFilter.filterDrop
+ "change .post-option-input": "postOptionChange"
# Because we want the behavior that when the body is clicked the menu is
# closed, we need to ignore clicks in the search field and stop propagation.
@@ -83,15 +61,23 @@ if Backbone?
ignoreClick: (event) ->
event.stopPropagation()
+ postOptionChange: (event) ->
+ $target = $(event.target)
+ $optionElem = $target.closest(".post-option")
+ if $target.is(":checked")
+ $optionElem.addClass("is-enabled")
+ else
+ $optionElem.removeClass("is-enabled")
+
createPost: (event) ->
event.preventDefault()
- title = @$(".new-post-title").val()
- body = @$(".new-post-body").find(".wmd-input").val()
- group = @$(".new-post-group option:selected").attr("value")
+ title = @$(".js-post-title").val()
+ body = @$(".js-post-body").find(".wmd-input").val()
+ group = @$(".js-group-select option:selected").attr("value")
- anonymous = false || @$("input.discussion-anonymous").is(":checked")
- anonymous_to_peers = false || @$("input.discussion-anonymous-to-peers").is(":checked")
- follow = false || @$("input.discussion-follow").is(":checked")
+ anonymous = false || @$(".js-anon").is(":checked")
+ anonymous_to_peers = false || @$(".js-anon-peers").is(":checked")
+ follow = false || @$(".js-follow").is(":checked")
url = DiscussionUtil.urlFor('create_thread', @topicId)
@@ -109,18 +95,20 @@ if Backbone?
anonymous_to_peers: anonymous_to_peers
auto_subscribe: follow
group_id: group
- error: DiscussionUtil.formErrorHandler(@$(".new-post-form-errors"))
+ error: DiscussionUtil.formErrorHandler(@$(".post-errors"))
success: (response, textStatus) =>
# TODO: Move this out of the callback, this makes it feel sluggish
thread = new Thread response['content']
- DiscussionUtil.clearFormErrors(@$(".new-post-form-errors"))
+ DiscussionUtil.clearFormErrors(@$(".post-errors"))
@$el.hide()
- @$(".new-post-title").val("").attr("prev-text", "")
- @$(".new-post-body textarea").val("").attr("prev-text", "")
+ @$(".js-post-title").val("").attr("prev-text", "")
+ @$(".js-post-body textarea").val("").attr("prev-text", "")
@$(".wmd-preview p").html("") # only line not duplicated in new post inline view
@collection.add thread
+
toggleTopicDropdown: (event) ->
+ event.preventDefault()
event.stopPropagation()
if @menuOpen
@hideTopicDropdown()
@@ -133,7 +121,6 @@ if Backbone?
@topicMenu.show()
$(".form-topic-drop-search-input").focus()
- $("body").bind "keydown", @setActiveItem
$("body").bind "click", @hideTopicDropdown
# Set here because 1) the window might get resized and things could
@@ -146,28 +133,33 @@ if Backbone?
@dropdownButton.removeClass('dropped')
@topicMenu.hide()
- $("body").unbind "keydown", @setActiveItem
$("body").unbind "click", @hideTopicDropdown
- setTopic: (event) ->
- $target = $(event.target)
- if $target.data('discussion_id')
+ handleTopicEvent: (event) ->
+ event.preventDefault()
+ event.stopPropagation()
+ @setTopic($(event.target))
+
+ setTopic: ($target) ->
+ if $target.data('discussion-id')
@topicText = $target.html()
@topicText = @getFullTopicName($target)
- @topicId = $target.data('discussion_id')
+ @topicId = $target.data('discussion-id')
@setSelectedTopic()
- if $target.is('[cohorted=true]')
- $('.choose-cohort').show();
+ if $target.data("cohorted")
+ $(".js-group-select").prop("disabled", false)
else
- $('.choose-cohort').hide();
+ $(".js-group-select").val("")
+ $(".js-group-select").prop("disabled", true)
+ @hideTopicDropdown()
setSelectedTopic: ->
- @dropdownButton.html(@fitName(@topicText) + ' ▾')
+ @$(".js-selected-topic").html(@fitName(@topicText))
getFullTopicName: (topicElement) ->
name = topicElement.html()
- topicElement.parents('ul').not('.topic_menu').each ->
- name = $(this).siblings('a').text() + ' / ' + name
+ topicElement.parents('.topic-submenu').each ->
+ name = $(this).siblings('.topic-title').text() + ' / ' + name
return name
getNameWidth: (name) ->
@@ -204,29 +196,3 @@ if Backbone?
name = gettext("…") + " / " + rawName + " " + gettext("…")
return name
-
- setActiveItem: (event) ->
- if event.which == 13
- $(".topic_menu_wrapper .focused").click()
- return
- if event.which != 40 && event.which != 38
- return
- event.preventDefault()
-
- items = $.makeArray($(".topic_menu_wrapper a").not(".hidden"))
- index = items.indexOf($('.topic_menu_wrapper .focused')[0])
-
- if event.which == 40
- index = Math.min(index + 1, items.length - 1)
- if event.which == 38
- index = Math.max(index - 1, 0)
-
- $(".topic_menu_wrapper .focused").removeClass("focused")
- $(items[index]).addClass("focused")
-
- itemTop = $(items[index]).parent().offset().top
- scrollTop = $(".topic_menu").scrollTop()
- itemFromTop = $(".topic_menu").offset().top - itemTop
- scrollTarget = Math.min(scrollTop - itemFromTop, scrollTop)
- scrollTarget = Math.max(scrollTop - itemFromTop - $(".topic_menu").height() + $(items[index]).height() + 20, scrollTarget)
- $(".topic_menu").scrollTop(scrollTarget)
diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako
index 1bce4f4e77..af7e17894e 100644
--- a/lms/static/sass/application-extend2.scss.mako
+++ b/lms/static/sass/application-extend2.scss.mako
@@ -49,7 +49,10 @@
// applications
@import "discussion/utilities/variables";
+@import "discussion/mixins";
@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import "discussion/views/new-post";
+@import "discussion/elements/editor";
@import "discussion/elements/navigation";
@import 'discussion/utilities/developer';
@import 'discussion/utilities/shame';
diff --git a/lms/static/sass/course/_discussions-inline.scss b/lms/static/sass/course/_discussions-inline.scss
index 798b9f1e01..0aa6307164 100644
--- a/lms/static/sass/course/_discussions-inline.scss
+++ b/lms/static/sass/course/_discussions-inline.scss
@@ -177,109 +177,6 @@
margin: auto;
}
- .new-post-form {
- width: 100%;
- margin-bottom: 20px;
- padding: 30px;
- border-radius: 3px;
- background: rgba(0, 0, 0, .55);
- color: #fff;
- box-shadow: none;
- @include clearfix;
- @include box-sizing(border-box);
-
- .form-row {
- margin-bottom: 20px;
- }
-
- .new-post-body .wmd-input {
- @include discussion-wmd-input;
- position: relative;
- width: 100%;
- height: 200px;
- z-index: 1;
- padding: 10px;
- box-sizing: border-box;
- border: 1px solid #333;
- border-radius: 3px 3px 0 0;
- background: #fff;
- font-family: 'Monaco', monospace;
- font-size: 13px;
- line-height: 1.6;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
- }
-
- .new-post-body .wmd-preview {
- @include discussion-wmd-preview;
- position: relative;
- width: 100%;
- //height: 50px;
- margin-top: -1px;
- padding: 25px 20px 10px 20px;
- box-sizing: border-box;
- border: 1px solid #333;
- border-radius: 0 0 3px 3px;
- background: #e6e6e6;
- color: #333;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
- }
-
- .new-post-preview-label {
- position: absolute;
- top: 4px;
- left: 4px;
- font-size: 11px;
- color: #aaa;
- text-transform: uppercase;
- }
-
- .new-post-title{
- width: 100%;
- height: 40px;
- padding: 0 10px;
- box-sizing: border-box;
- border-radius: 3px;
- border: 1px solid #333;
- font-size: 16px;
- font-weight: 700;
- font-family: 'Open Sans', sans-serif;
- color: #333;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
- }
-
- .submit {
- @include blue-button;
- float: left;
- height: 37px;
- margin-top: 10px;
- padding-bottom: 2px;
- border-color: #333;
-
- &:hover, &:focus {
- border-color: #222;
- }
- }
-
- .new-post-cancel {
- @include white-button;
- float: left;
- margin: 10px 0 0 15px;
- border-color: #444;
- }
-
- .options {
- margin-top: 5px;
-
- label {
- display: inline;
- margin-left: 8px;
- font-size: 15px;
- color: #fff;
- text-shadow: none;
- }
- }
- }
-
.thread-title {
display: block;
margin-bottom: 20px;
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 903ba66143..5b08f91570 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -1,144 +1,8 @@
-// forums - main styling
+// forums - main app styling
// ====================
-// mixins and extends
-@mixin blue-button {
- display: block;
- height: 35px;
- padding: 0 ($baseline*.75);
- border-radius: 3px;
- border: 1px solid #2d81ad;
- @include linear-gradient(top, #6dccf1, #38a8e5);
- font-size: 13px;
- font-weight: 700;
- line-height: 32px;
- color: $white;
- text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
-
- &:hover, &:focus {
- border-color: #297095;
- @include linear-gradient(top, #4fbbe4, #2090d0);
- }
-}
-
-@mixin white-button {
- @include linear-gradient(top, #eee, #ccc);
- display: block;
- border: 1px solid #aaa;
- border-radius: 3px;
- padding: 0 ($baseline*.75);
- height: 35px;
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
- color: $dark-gray;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
- font-weight: 700;
- font-size: 13px;
- line-height: 32px;
-
- &:hover, &:focus {
- @include linear-gradient(top, $white, #ddd);
- }
-}
-
-@mixin dark-grey-button {
- display: block;
- height: 35px;
- padding: 0 ($baseline*.75);
- border-radius: 3px;
- border: 1px solid #222;
- background: -webkit-linear-gradient(top, #777, #555);
- font-size: 13px;
- font-weight: 700;
- line-height: 32px;
- color: $white;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
-
- &:hover, &:focus {
- background: -webkit-linear-gradient(top, #888, #666);
- }
-}
-
-@mixin discussion-wmd-input {
- width: 100%;
- height: 240px;
- margin-top: 0;
- padding: ($baseline/2);
- @include box-sizing(border-box);
- border: 1px solid #aaa;
- border-radius: 3px 3px 0 0;
- background: $white;
- font-family: 'Monaco', monospace;
- font-size: 13px;
- line-height: 1.6;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-}
-
-@mixin discussion-wmd-preview-container {
- width: 100%;
- @include box-sizing(border-box);
- border: 1px solid #aaa;
- border-top: none;
- border-radius: 0 0 3px 3px;
- background: #eee;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-}
-
-@mixin discussion-new-post-wmd-preview-container {
- @include discussion-wmd-preview-container;
- border-color: #333;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
-}
-
-@mixin discussion-wmd-preview-label {
- width: 100%;
- padding-top: 3px;
- padding-left: 5px;
- color: #bbb;
- font-size: 11px;
- text-transform: uppercase;
-}
-
-@mixin discussion-wmd-preview {
- width: 100%;
- padding: 10px 20px;
- color: #333;
-}
-
-@-webkit-keyframes fadeIn {
- 0% { opacity: 0.0; }
- 100% { opacity: 1.0; }
-}
-
-// ===============
-
-// main styling
body.discussion {
- // new post creation
- .new-post-form-errors {
- display: none;
- background: $error-red;
- padding: 0;
- border: 1px solid $dark-gray;
- list-style: none;
- color: $white;
- line-height: 1.6;
- border-radius: 3px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
-
- li {
- padding: ($baseline/2) $baseline 12px 45px;
- border-bottom: 1px solid #dc4949;
- background: url(../images/white-error-icon.png) no-repeat 15px 14px;
-
- &:last-child {
- border-bottom: none;
- }
- }
- }
-
.course-tabs .right {
float: right;
@@ -155,148 +19,6 @@ body.discussion {
}
}
- .new-post-article {
- display: none;
- margin-top: $baseline;
-
- .inner-wrapper {
- max-width: 1180px;
- min-width: 760px;
- margin: auto;
- }
-
- .left-column {
- @include box-sizing(border-box);
- float: left;
- padding: ($baseline*2);
- width: 32%;
-
- .topic-dropdown-label {
- font-size: 22px;
- font-weight: 700;
- color: $white;
- text-shadow: none;
- }
-
- .form-topic-drop {
- position: relative;
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- }
-
- .form-group-label {
- display: block;
- padding-top: ($baseline/4);
- color: $white;
- }
-
- .topic_dropdown_button {
- @include white-button;
- position: relative;
- z-index: 1000;
- margin-top: 15px;
- border-color: #444;
- height: 40px;
- line-height: 36px;
-
- .drop-arrow {
- float: right;
- color: #999;
- line-height: 37px;
- }
- }
-
- .topic_menu_wrapper {
- display: none;
- position: absolute;
- top: $baseline*2;
- left: 0;
- z-index: 9999;
- width: 100%;
- @include box-sizing(border-box);
- background: #797979;
- border: 1px solid $dark-gray;
- box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
- }
-
- .topic_menu {
- max-height: 400px;
- overflow-y: scroll;
-
- a {
- display: block;
- padding: ($baseline/2) 15px;
- border-top: 1px solid #5f5f5f;
- font-size: 14px;
- font-weight: 700;
- line-height: 18px;
- color: #eee;
- @include transition(none);
-
- &:hover, &:focus {
- background-color: #666;
- }
-
- .topic-menu-span {
- color: #eee;
- }
- }
-
- li li {
- a {
- padding-left: 39px;
- background: url(../images/nested-icon.png) no-repeat 17px 10px;
- }
- }
-
- li li li {
- a {
- padding-left: 63px;
- background: url(../images/nested-icon.png) no-repeat 41px 10px;
- }
- }
- }
-
- .topic_menu_search {
- padding: $baseline/2;
- border-bottom: 1px solid black;
- }
-
- .form-topic-drop-search-input {
- width: 100%;
- height: 30px;
- padding: 0 15px;
- @include box-sizing(border-box);
- border-radius: 30px;
- border: 1px solid $dark-gray;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
- background: -webkit-linear-gradient(top, #eee, $white);
- font-size: 11px;
- line-height: 16px;
- color: #333;
- }
- }
-
- .right-column {
- float: left;
- width: 68%;
- padding: ($baseline*2);
- @include box-sizing(border-box);
- }
-
- .wmd-button {
- background: none;
- }
-
- .wmd-button span {
- background: url(../images/new-post-icons-full.png) no-repeat;
- }
- }
-
.edit-post-form {
@include clearfix;
margin-bottom: ($baseline*2);
@@ -341,92 +63,12 @@ body.discussion {
font-size: 16px;
font-family: $sans-serif;
}
-
}
.comments .edit-post-form h1 {
@extend %t-title6;
}
- .new-post-form {
- @include clearfix;
- border-radius: 3px;
- width: 100%;
- background: $shadow-d2;
- box-shadow: 0 1px 2px $shadow-d2 inset, 0 1px 0 rgba(255, 255, 255, .5);
- color: $white;
-
- .form-row {
- margin-bottom: $baseline;
- }
-
- .new-post-body .wmd-input {
- @include discussion-wmd-input;
- @include box-sizing(border-box);
- position: relative;
- z-index: 1;
- width: 100%;
- height: 150px;
- background: $white;
- }
-
- .new-post-body .wmd-preview-container {
- @include discussion-new-post-wmd-preview-container;
- }
-
- .new-post-body .wmd-preview-label {
- @include discussion-wmd-preview-label;
- }
-
- .new-post-body .wmd-preview {
- @include discussion-wmd-preview;
- }
-
- .new-post-title {
- @include box-sizing(border-box);
- border: 1px solid $dark-gray;
- border-radius: 3px;
- padding: 0 ($baseline/2);
- width: 100%;
- height: 40px;
- box-shadow: 0 1px 3px $shadow inset;
- color: $dark-gray;
- font-weight: 700;
- }
-
- .submit {
- @include blue-button;
- float: left;
- margin-top: ($baseline/2);
- border-color: $dark-gray;
- padding-bottom: ($baseline/10);
- height: 37px;
-
- &:hover, &:focus {
- border-color: #222;
- }
- }
-
- .new-post-cancel {
- @include white-button;
- float: left;
- margin: ($baseline/2) 0 0 ($baseline*.75);
- border-color: #444;
- }
-
- .options {
- margin-top: ($baseline*2);
-
- label {
- display: inline;
- margin-left: ($baseline/2);
- color: $white;
- text-shadow: none;
- font-size: 15px;
- }
- }
- }
-
.thread-title {
display: block;
margin-bottom: $baseline;
@@ -467,9 +109,6 @@ body.discussion {
}
}
-
-
-
.wmd-panel {
min-width: 500px;
width: 100%;
@@ -776,7 +415,7 @@ body.discussion {
.discussion-article {
position: relative;
- min-height: 468px;
+ min-height: 500px;
background-image: url(../images/bg-texture.png);
a {
@@ -831,9 +470,6 @@ body.discussion {
background-position: 0 0;
}
}
-
-
-
}
.discussion-post {
@@ -860,8 +496,6 @@ body.discussion {
margin-bottom: $baseline;
}
-
-
.responses {
list-style: none;
margin-top: $baseline;
@@ -917,7 +551,6 @@ body.discussion {
text-transform: uppercase;
}
-
&.loading {
height: 0;
margin: 0;
@@ -1198,40 +831,11 @@ body.discussion {
}
}
-
-
-
.main-article.new {
display: none;
padding: ($baseline*2.5);
}
- .new-post-form {
- margin-top: $baseline;
- @include clearfix;
- }
-
- .new-post-form .submit {
- @include blue-button;
- float: left;
- margin-top: ($baseline/2);
- padding-bottom: ($baseline/10);
- }
-
- .new-post-form .options {
- float: right;
- margin-top: $baseline;
- font-size: 14px;
-
- label {
- margin-left: ($baseline/5);
- }
- }
-
-
-
-
-
.discussion-reply-new {
padding: $baseline ($baseline*1.5);
@include clearfix;
@@ -1524,97 +1128,6 @@ body.discussion {
margin: auto;
}
- .new-post-form {
- width: 100%;
- margin-bottom: $baseline;
- padding: 30px;
- border-radius: 3px;
- background: rgba(0, 0, 0, .55);
- color: $white;
- box-shadow: none;
- @include clearfix;
- @include box-sizing(border-box);
-
- .form-row {
- margin-bottom: $baseline;
- }
-
- .new-post-body .wmd-input {
- @include discussion-wmd-input;
- position: relative;
- width: 100%;
- height: 200px;
- z-index: 1;
- padding: $baseline/2;
- @include box-sizing(border-box);
- border: 1px solid #333;
- border-radius: 3px 3px 0 0;
- background: $white;
- font-family: 'Monaco', monospace;
- font-size: 13px;
- line-height: 1.6;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
- }
-
- .new-post-body .wmd-preview-container {
- @include discussion-new-post-wmd-preview-container;
- }
-
- .new-post-body .wmd-preview-label {
- @include discussion-wmd-preview-label;
- }
-
- .new-post-body .wmd-preview {
- @include discussion-wmd-preview;
- }
-
- .new-post-title{
- width: 100%;
- height: 40px;
- padding: 0 $baseline/2;
- @include box-sizing(border-box);
- border-radius: 3px;
- border: 1px solid #333;
- font-size: 16px;
- font-weight: 700;
- font-family: 'Open Sans', sans-serif;
- color: #333;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
- }
-
- .submit {
- @include blue-button;
- float: left;
- height: 37px;
- margin-top: $baseline/2;
- padding-bottom: 2px;
- border-color: #333;
-
- &:hover, &:focus {
- border-color: #222;
- }
- }
-
- .new-post-cancel {
- @include white-button;
- float: left;
- margin: $baseline/2 0 0 15px;
- border-color: #444;
- }
-
- .options {
- margin-top: 5px;
-
- label {
- display: inline;
- margin-left: 8px;
- font-size: 15px;
- color: $white;
- text-shadow: none;
- }
- }
- }
-
.thread-title {
display: block;
margin-bottom: $baseline;
@@ -1678,148 +1191,6 @@ body.discussion {
}
}
- .new-post-body {
- .wmd-panel {
- width: 100%;
- min-width: 500px;
- }
-
- .wmd-button-bar {
- width: 100%;
- }
-
- .wmd-input {
- height: 150px;
- width: 100%;
- background-color: #e9e9e9;
- border: 1px solid #c8c8c8;
- font-family: Monaco, 'Lucida Console', monospace;
- font-style: normal;
- font-size: 0.8em;
- line-height: 1.6em;
- border-radius: 3px 3px 0 0;
-
- &::-webkit-input-placeholder {
- color: #888;
- }
- }
-
- .wmd-button-row {
- position: relative;
- margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
- padding: 0;
- height: 30px;
- overflow: hidden;
- @include transition(all .2s ease-out 0s);
- }
-
- .wmd-spacer {
- width: 1px;
- height: 20px;
- margin-left: 14px;
-
- position: absolute;
- background-color: Silver;
- display: inline-block;
- list-style: none;
- }
-
- .wmd-button {
- width: 20px;
- height: 20px;
- padding-left: 2px;
- padding-right: 3px;
- position: absolute;
- display: inline-block;
- list-style: none;
- cursor: pointer;
- background: none;
- }
-
- .wmd-button > span {
- display: inline-block;
- background-image: url(../images/new-post-icons-full.png);
- background-repeat: no-repeat;
- background-position: 0px 0px;
- width: 20px;
- height: 20px;
- }
-
- .wmd-spacer1 {
- left: 50px;
- }
- .wmd-spacer2 {
- left: 175px;
- }
-
- .wmd-spacer3 {
- left: 300px;
- }
-
- .wmd-prompt-background {
- background-color: Black;
- }
-
- .wmd-prompt-dialog {
- @extend .modal;
- background: $white;
- }
-
- .wmd-prompt-dialog {
- padding: $baseline;
-
- > div {
- font-size: 0.8em;
- font-family: arial, helvetica, sans-serif;
- }
-
- b {
- font-size: 16px;
- }
-
- > form > input[type="text"] {
- border-radius: 3px;
- color: #333;
- }
-
- > form > input[type="button"] {
- border: 1px solid #888;
- font-family: $sans-serif;
- font-size: 14px;
- }
-
- > form > input[type="file"] {
- margin-bottom: 18px;
- }
- }
- }
-
- .wmd-button-row {
- // this is being hidden now because the inline styles to position the icons are not being written
- position: relative;
- height: 25px;
- }
-
- .wmd-button {
- span {
- width: 20px;
- height: 20px;
- background-image: url("/static/images/wmd-buttons.png");
- display: inline-block;
- }
- }
-
- .wmd-spacer1 {
- left: 50px;
- }
-
- .wmd-spacer2 {
- left: 175px;
- }
-
- .wmd-spacer3 {
- left: 300px;
- }
.edit-post-form {
width: 100%;
margin-bottom: $baseline;
@@ -1867,8 +1238,6 @@ body.discussion {
@extend .discussion-module
}
-// ====================
-
// post actions - pinning
.discussion-pin {
font-size: 12px;
diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss
new file mode 100644
index 0000000000..34d6df7090
--- /dev/null
+++ b/lms/static/sass/discussion/_mixins.scss
@@ -0,0 +1,116 @@
+// discussion - mixins and extends
+// ====================
+
+@mixin blue-button {
+ @include linear-gradient(top, #6dccf1, #38a8e5);
+ display: block;
+ border: 1px solid #2d81ad;
+ border-radius: 3px;
+ padding: 0 ($baseline*.75);
+ height: 35px;
+ color: $white;
+ text-shadow: none;
+ font-size: 13px;
+ line-height: 35px;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+
+ &:hover, &:focus {
+ @include linear-gradient(top, #4fbbe4, #2090d0);
+ border-color: #297095;
+ }
+}
+
+@mixin white-button {
+ @include linear-gradient(top, $white, $gray-l5);
+ display: block;
+ border: 1px solid #aaa;
+ border-radius: 3px;
+ padding: 0 ($baseline*.75);
+ height: 35px;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+ color: $dark-gray;
+ text-shadow: none;
+ font-size: 13px;
+ line-height: 35px;
+
+ &:hover, &:focus {
+ @include linear-gradient(top, $white, $gray-l6);
+ }
+}
+
+@mixin dark-grey-button {
+ display: block;
+ border: 1px solid #222;
+ border-radius: 3px;
+ padding: 0 ($baseline*.75);
+ height: 35px;
+ background: -webkit-linear-gradient(top, #777, #555);
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
+ color: $white;
+ text-shadow: none;
+ font-size: 13px;
+ line-height: 35px;
+
+ &:hover, &:focus {
+ background: -webkit-linear-gradient(top, #888, #666);
+ }
+}
+
+@mixin discussion-wmd-input {
+ @include box-sizing(border-box);
+ margin-top: 0;
+ border: 1px solid #aaa;
+ border-radius: 3px 3px 0 0;
+ padding: ($baseline/2);
+ width: 100%;
+ height: 240px;
+ background: $white;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+ font-size: 13px;
+ font-family: 'Monaco', monospace;
+ line-height: 1.6;
+}
+
+@mixin discussion-wmd-preview-container {
+ @include box-sizing(border-box);
+ border: 1px solid #aaa;
+ border-top: none;
+ border-radius: 0 0 3px 3px;
+ width: 100%;
+ background: #eee;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+}
+
+@mixin discussion-new-post-wmd-preview-container {
+ @include discussion-wmd-preview-container;
+ border-color: #333;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
+}
+
+@mixin discussion-wmd-preview-label {
+ padding-top: 3px;
+ padding-left: 5px;
+ width: 100%;
+ color: #bbb;
+ text-transform: uppercase;
+ font-size: 11px;
+}
+
+@mixin discussion-wmd-preview {
+ padding: 10px 20px;
+ width: 100%;
+ color: #333;
+}
+
+@-webkit-keyframes fadeIn {
+ 0% { opacity: 0.0; }
+ 100% { opacity: 1.0; }
+}
+
+// extends - content - text overflow by ellipsis
+%cont-truncated {
+ @include box-sizing(border-box);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss
new file mode 100644
index 0000000000..96ec8ea801
--- /dev/null
+++ b/lms/static/sass/discussion/elements/_editor.scss
@@ -0,0 +1,168 @@
+// discussion - elements - editor
+// ====================
+
+// UI: general editor styling
+
+// TO-DO: isolate out all editing styling from _discussion.scss and clean up cases defined below once general syling exists
+
+// =========================
+
+// CASE: new post
+.forum-new-post-form {
+ .wmd-input {
+ @include discussion-wmd-input;
+ @include box-sizing(border-box);
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ height: 150px;
+ background: $white;
+ }
+
+ .wmd-preview-container {
+ @include discussion-new-post-wmd-preview-container;
+ }
+
+ .wmd-preview-label {
+ @include discussion-wmd-preview-label;
+ }
+
+ .wmd-preview {
+ @include discussion-wmd-preview;
+ }
+
+ .wmd-button {
+ background: none;
+ }
+}
+
+// =========================
+
+// CASE: inline styling
+// TO-DO: additional styling cleanup here necessary, for now this case was ported over from _discussion.scss
+.discussion-module .forum-new-post-form {
+
+ .wmd-panel {
+ width: 100%;
+ min-width: 500px;
+ }
+
+ .wmd-button-bar {
+ width: 100%;
+ }
+
+ .wmd-input {
+ width: 100%;
+ height: 150px;
+ border-radius: 3px 3px 0 0;
+ font-style: normal;
+ font-size: 0.8em;
+ font-family: Monaco, 'Lucida Console', monospace;
+ line-height: 1.6em;
+
+ &::-webkit-input-placeholder {
+ color: #888;
+ }
+ }
+
+ .wmd-button-row {
+ @include transition(all .2s ease-out 0s);
+ position: relative;
+ overflow: hidden;
+ margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
+ padding: 0;
+ height: 30px;
+ }
+
+ .wmd-spacer {
+ position: absolute;
+ display: inline-block;
+ margin-left: 14px;
+ width: 1px;
+ height: 20px;
+ background-color: Silver;
+ list-style: none;
+ }
+
+ .wmd-button {
+ position: absolute;
+ display: inline-block;
+ padding-right: 3px;
+ padding-left: 2px;
+ width: 20px;
+ height: 20px;
+ background: none;
+ list-style: none;
+ cursor: pointer;
+ }
+
+ .wmd-button > span {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ background-image: url('/static/images/wmd-buttons-transparent.png');
+ background-position: 0px 0px;
+ background-repeat: no-repeat;
+ }
+
+ .wmd-spacer1 {
+ left: 50px;
+ }
+ .wmd-spacer2 {
+ left: 175px;
+ }
+
+ .wmd-spacer3 {
+ left: 300px;
+ }
+
+ .wmd-prompt-background {
+ background-color: Black;
+ }
+
+ .wmd-prompt-dialog {
+ @extend .modal;
+ background: $white;
+ }
+
+ .wmd-prompt-dialog {
+ padding: $baseline;
+
+ > div {
+ font-size: 0.8em;
+ font-family: arial, helvetica, sans-serif;
+ }
+
+ b {
+ font-size: 16px;
+ }
+
+ > form > input[type="text"] {
+ border-radius: 3px;
+ color: #333;
+ }
+
+ > form > input[type="button"] {
+ border: 1px solid #888;
+ font-family: $sans-serif;
+ font-size: 14px;
+ }
+
+ > form > input[type="file"] {
+ margin-bottom: 18px;
+ }
+ }
+
+ .wmd-button-row {
+ // this is being hidden now because the inline styles to position the icons are not being written
+ position: relative;
+ height: 25px;
+ }
+
+ .wmd-button {
+ span {
+ background-image: url("/static/images/wmd-buttons.png");
+ display: inline-block;
+ }
+ }
+}
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index cdb15d324e..9adf6e6fe6 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -1,3 +1,6 @@
+// discussion - elements - navigation
+// ====================
+
.forum-nav {
@include box-sizing(border-box);
float: left;
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
index 347ae0d683..22d6bbf1d6 100644
--- a/lms/static/sass/discussion/utilities/_shame.scss
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -95,3 +95,33 @@ li[class*=forum-nav-thread-label-] {
display: none !important;
}
}
+
+// -------------
+// new post form
+// -------------
+
+.forum-new-post-form {
+ // Override global label rules
+ .topic-filter-label {
+ margin-bottom: 0;
+ }
+
+ // Override global ul rules
+ .topic-menu {
+ padding-left: 0;
+ }
+
+ .topic-menu, .topic-submenu {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ // Override global span rules
+ .post-topic-button .drop-arrow {
+ line-height: 36px;
+ }
+
+ .topic-title {
+ line-height: 14px;
+ }
+}
diff --git a/lms/static/sass/discussion/views/_new-post.scss b/lms/static/sass/discussion/views/_new-post.scss
new file mode 100644
index 0000000000..070494e19a
--- /dev/null
+++ b/lms/static/sass/discussion/views/_new-post.scss
@@ -0,0 +1,224 @@
+// discussion - views - new post
+// ====================
+
+// UI: form structure
+.forum-new-post-form {
+ @include clearfix;
+ box-sizing: border-box;
+ margin: 0;
+ border-radius: 3px;
+ padding: ($baseline*2);
+ min-width: 760px;
+ max-width: 1180px;
+ background: $gray-l5;
+
+ .post-field {
+ margin-bottom: $baseline;
+
+ .field-label {
+ display: inline-block;
+ width: 50%;
+ vertical-align: top;
+ line-height: 40px;
+
+ .field-input {
+ display: inline-block;
+ width: 100%;
+ }
+
+ .field-label-text {
+ display: inline-block;
+ width: 25%;
+ vertical-align: top;
+ text-transform: uppercase;
+ font-size: 12px;
+ line-height: 40px;
+ }
+
+ .field-label-text + .field-input {
+ width: 75%;
+ }
+ }
+
+ // UI: support text for input fields
+ .field-help {
+ @include box-sizing(border-box);
+ display: inline-block;
+ padding-left: $baseline;
+ width: 50%;
+ font-size: 12px;
+ }
+ }
+
+ .post-options {
+ margin-bottom: ($baseline/2);
+ }
+}
+
+// CASE: inline styling
+.discussion-module .forum-new-post-form {
+ background: $white;
+}
+
+// ====================
+
+// UI: inputs
+.forum-new-post-form {
+ .post-topic-button {
+ @include white-button;
+ @extend %cont-truncated;
+ z-index: 1000;
+ padding: 0 $baseline 0 ($baseline*.75);
+ height: 40px;
+ font-size: 14px;
+ line-height: 36px;
+
+ .drop-arrow {
+ float: right;
+ color: #999;
+ }
+ }
+
+ input[type=text].field-input {
+ @include box-sizing(border-box);
+ border: 1px solid $gray-l2;
+ border-radius: 3px;
+ padding: 0 $baseline/2;
+ height: 40px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+ color: #333;
+ font-weight: 700;
+ font-size: 16px;
+ font-family: 'Open Sans', sans-serif;
+ }
+
+ .post-option {
+ @include box-sizing(border-box);
+ display: inline-block;
+ margin-right: $baseline;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ padding: ($baseline/2);
+
+ &:hover {
+ border-color: $gray-l3;
+ }
+
+ &.is-enabled {
+ border-color: $blue;
+ color: $blue;
+ }
+
+ .post-option-input {
+ margin-right: ($baseline/2);
+ }
+
+ .icon {
+ margin-right: 0.5em;
+ }
+ }
+}
+
+// ====================
+
+// UI: actions
+.forum-new-post-form {
+ .submit {
+ @include blue-button;
+ display: inline-block;
+ margin-right: ($baseline/2);
+ }
+
+ .cancel {
+ @include white-button;
+ display: inline-block;
+ }
+}
+
+// ====================
+
+// UI: errors - new post creation
+.forum-new-post-form {
+ .post-errors {
+ margin-bottom: $baseline;
+ border-radius: 3px;
+ padding: 0;
+ background: $error-red;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
+ color: $white;
+ list-style: none;
+
+ .post-error {
+ padding: ($baseline/2) $baseline 12px 45px;
+ border-bottom: 1px solid $red;
+ background: url(../images/white-error-icon.png) no-repeat 15px 14px;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+}
+
+// ====================
+
+// UI: topic menu
+
+// TO-DO: refactor to use _navigation.scss as general topic selector
+.forum-new-post-form .post-topic {
+ position: relative;
+
+ .topic-menu-wrapper {
+ @include box-sizing(border-box);
+ position: absolute;
+ top: 40px;
+ left: 0;
+ z-index: 9999;
+ border: 1px solid $gray-l3;
+ width: 100%;
+ background: $white;
+ box-shadow: 0 2px 1px $shadow;
+ }
+
+ .topic-filter-label {
+ border-bottom: 1px solid $gray-l2;
+ padding: ($baseline/4);
+ }
+
+ .topic-filter-input {
+ @include box-sizing(border-box);
+ border: 1px solid $gray-l3;
+ padding: 0 15px;
+ width: 100%;
+ height: 30px;
+ color: #333;
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ .topic-menu {
+ overflow-y: scroll;
+ max-height: 400px;
+ list-style: none;
+ }
+
+ .topic-submenu {
+ padding-left: $baseline;
+ list-style: none;
+ }
+
+ .topic-title {
+ display: block;
+ border-bottom: 1px solid $gray-l3;
+ padding: ($baseline/2);
+ font-size: 14px;
+ }
+
+ a.topic-title {
+ @include transition(none);
+
+ &:hover, &:focus {
+ background-color: $gray-l4;
+ }
+ }
+}
diff --git a/lms/templates/discussion/_filter_dropdown.html b/lms/templates/discussion/_filter_dropdown.html
index 7fb3cbfa8f..6ba420f422 100644
--- a/lms/templates/discussion/_filter_dropdown.html
+++ b/lms/templates/discussion/_filter_dropdown.html
@@ -14,7 +14,7 @@
<%def name="render_entry(entries, entry)">
${entry}
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index d6dc58ffca..aed33d9850 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -257,7 +257,7 @@
)
%>
+${'<%='}${js_block}${'%>'}
- <%
+ <%
js_block = u"""
var fmt;
// Counts in data do not include the post itself, but the UI should
@@ -345,8 +345,7 @@
% endif
-
-
+
-
-
-
-
-
-
-
-
-
-
diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html
index 1ed39aeede..38eddd692d 100644
--- a/lms/templates/discussion/index.html
+++ b/lms/templates/discussion/index.html
@@ -23,8 +23,6 @@
<%include file="_discussion_course_navigation.html" args="active_page='discussion'" />
-
-
+
-
-
-
-
-
-
-
-
-
"""
)
window.$$course_id = "edX/999/test"
@@ -106,30 +58,31 @@ describe "NewPostView", ->
describe "Drop down works correct", ->
beforeEach ->
+ @course_settings = new DiscussionCourseSettings({
+ "category_map": {
+ "subcategories": {
+ "Basic Question Types": {
+ "subcategories": {},
+ "children": ["Selection From Options"],
+ "entries": {
+ "Selection From Options": {
+ "sort_key": null,
+ "is_cohorted": true,
+ "id": "cba3e4cd91d0466b9ac50926e495b76f"
+ }
+ },
+ },
+ },
+ "children": ["Basic Question Types"],
+ "entries": {}
+ },
+ "allow_anonymous": true,
+ "allow_anonymous_to_peers": true
+ })
@view = new NewPostView(
el: $(".new-post-article"),
collection: @discussion,
- course_settings: new DiscussionCourseSettings({
- "category_map": {
- "subcategories": {
- "Basic Question Types": {
- "subcategories": {},
- "children": ["Selection From Options"],
- "entries": {
- "Selection From Options": {
- "sort_key": null,
- "is_cohorted": true,
- "id": "cba3e4cd91d0466b9ac50926e495b76f"
- }
- },
- },
- },
- "children": ["Basic Question Types"],
- "entries": {}
- },
- "allow_anonymous": true,
- "allow_anonymous_to_peers": true
- }),
+ course_settings: @course_settings,
mode: "tab"
)
@view.render()
@@ -140,16 +93,16 @@ describe "NewPostView", ->
complete_text = @parent_category_text + " / " + @selected_option_text
selected_text_width = @view.getNameWidth(complete_text)
@view.maxNameWidth = selected_text_width + 1
- @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click()
- dropdown_text = @view.$el.find(".form-topic-drop > a").text()
- expect(complete_text+' ▾').toEqual(dropdown_text)
+ @view.$el.find( "a.topic-title" ).first().click()
+ dropdown_text = @view.$el.find(".js-selected-topic").text()
+ expect(complete_text).toEqual(dropdown_text)
it "completely show just sub-category", ->
complete_text = @parent_category_text + " / " + @selected_option_text
selected_text_width = @view.getNameWidth(complete_text)
@view.maxNameWidth = selected_text_width - 10
- @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click()
- dropdown_text = @view.$el.find(".form-topic-drop > a").text()
+ @view.$el.find( "a.topic-title" ).first().click()
+ dropdown_text = @view.$el.find(".js-selected-topic").text()
expect(dropdown_text.indexOf("…")).toEqual(0)
expect(dropdown_text).toContain(@selected_option_text)
@@ -158,8 +111,8 @@ describe "NewPostView", ->
complete_text = @parent_category_text + " / " + @selected_option_text
selected_text_width = @view.getNameWidth(complete_text)
@view.maxNameWidth = selected_text_width - parent_width
- @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click()
- dropdown_text = @view.$el.find(".form-topic-drop > a").text()
+ @view.$el.find( "a.topic-title" ).first().click()
+ dropdown_text = @view.$el.find(".js-selected-topic").text()
expect(dropdown_text.indexOf("…")).toEqual(0)
expect(dropdown_text.lastIndexOf("…")).toBeGreaterThan(0)
@@ -167,10 +120,49 @@ describe "NewPostView", ->
complete_text = @parent_category_text + " / " + @selected_option_text
selected_text_width = @view.getNameWidth(complete_text)
@view.maxNameWidth = @view.getNameWidth(@selected_option_text) + 100
- @view.$el.find( "ul.topic_menu li[role='menuitem'] > a" )[1].click()
- dropdown_text = @view.$el.find(".form-topic-drop > a").text()
+ @view.$el.find( "a.topic-title" ).first().click()
+ dropdown_text = @view.$el.find(".js-selected-topic").text()
expect(dropdown_text.indexOf("/ span>")).toEqual(-1)
+ describe "cohort selector", ->
+ renderWithCohortedTopics = (course_settings, view, isCohortedFirst) ->
+ course_settings.set(
+ "category_map",
+ {
+ "children": if isCohortedFirst then ["Cohorted", "Non-Cohorted"] else ["Non-Cohorted", "Cohorted"],
+ "entries": {
+ "Non-Cohorted": {
+ "sort_key": null,
+ "is_cohorted": false,
+ "id": "non-cohorted"
+ },
+ "Cohorted": {
+ "sort_key": null,
+ "is_cohorted": true,
+ "id": "cohorted"
+ }
+ }
+ }
+ )
+ view.render()
+
+ expectCohortSelectorEnabled = (view, enabled) ->
+ expect(view.$(".js-group-select").prop("disabled")).toEqual(not enabled)
+ if not enabled
+ expect(view.$(".js-group-select option:selected").attr("value")).toEqual("")
+
+ it "is disabled with non-cohorted default topic and enabled by selecting cohorted topic", ->
+ renderWithCohortedTopics(@course_settings, @view, false)
+ expectCohortSelectorEnabled(@view, false)
+ @view.$("a.topic-title[data-discussion-id=cohorted]").click()
+ expectCohortSelectorEnabled(@view, true)
+
+ it "is enabled with cohorted default topic and disabled by selecting non-cohorted topic", ->
+ renderWithCohortedTopics(@course_settings, @view, true)
+ expectCohortSelectorEnabled(@view, true)
+ @view.$("a.topic-title[data-discussion-id=non-cohorted]").click()
+ expectCohortSelectorEnabled(@view, false)
+
it "posts to the correct URL", ->
topicId = "test_topic"
spyOn($, "ajax").andCallFake(
@@ -189,5 +181,5 @@ describe "NewPostView", ->
topicId: topicId
)
view.render()
- view.$(".new-post-form").submit()
+ view.$(".forum-new-post-form").submit()
expect($.ajax).toHaveBeenCalled()
diff --git a/common/static/coffee/src/discussion/discussion_filter.coffee b/common/static/coffee/src/discussion/discussion_filter.coffee
index 6b3ab03689..f9cc710e0d 100644
--- a/common/static/coffee/src/discussion/discussion_filter.coffee
+++ b/common/static/coffee/src/discussion/discussion_filter.coffee
@@ -1,8 +1,13 @@
class @DiscussionFilter
+
+ # TODO: this helper class duplicates functionality in DiscussionThreadListView.filterTopics
+ # for use with a very similar category dropdown in the New Post form. The two menus' implementations
+ # should be merged into a single reusable view.
+
@filterDrop: (e) ->
- $drop = $(e.target).parents('.topic_menu_wrapper, .browse-topic-drop-menu-wrapper')
+ $drop = $(e.target).parents('.topic-menu-wrapper')
query = $(e.target).val()
- $items = $drop.find('a')
+ $items = $drop.find('.topic-menu-item')
if(query.length == 0)
$items.removeClass('hidden')
@@ -10,19 +15,14 @@ class @DiscussionFilter
$items.addClass('hidden')
$items.each (i) ->
- thisText = $(this).not('.unread').text()
- $(this).parents('ul').siblings('a').not('.unread').each (i) ->
- thisText = thisText + ' ' + $(this).text();
- test = true
- terms = thisText.split(' ')
+ path = $(this).parents(".topic-menu-item").andSelf()
+ pathTitles = path.children(".topic-title").map((i, elem) -> $(elem).text()).get()
+ pathText = pathTitles.join(" / ").toLowerCase()
- if(thisText.toLowerCase().search(query.toLowerCase()) == -1)
- test = false
-
- if(test)
+ if query.split(" ").every((term) -> pathText.search(term.toLowerCase()) != -1)
$(this).removeClass('hidden')
# show children
- $(this).parent().find('a').removeClass('hidden');
+ $(this).find('.topic-menu-item').removeClass('hidden');
# show parents
- $(this).parents('ul').siblings('a').removeClass('hidden');
+ $(this).parents('.topic-menu-item').removeClass('hidden');
diff --git a/common/static/coffee/src/discussion/discussion_module_view.coffee b/common/static/coffee/src/discussion/discussion_module_view.coffee
index 811305037b..d941fad375 100644
--- a/common/static/coffee/src/discussion/discussion_module_view.coffee
+++ b/common/static/coffee/src/discussion/discussion_module_view.coffee
@@ -7,7 +7,7 @@ if Backbone?
"click .new-post-btn": "toggleNewPost"
"keydown .new-post-btn":
(event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost)
- "click .new-post-cancel": "hideNewPost"
+ "click .cancel": "hideNewPost"
"click .discussion-paginator a": "navigateToPage"
paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
diff --git a/common/static/coffee/src/discussion/discussion_router.coffee b/common/static/coffee/src/discussion/discussion_router.coffee
index e61a40e6a1..ade48a3d56 100644
--- a/common/static/coffee/src/discussion/discussion_router.coffee
+++ b/common/static/coffee/src/discussion/discussion_router.coffee
@@ -25,7 +25,7 @@ if Backbone?
@newPostView.render()
$('.new-post-btn').bind "click", @showNewPost
$('.new-post-btn').bind "keydown", (event) => DiscussionUtil.activateOnSpace(event, @showNewPost)
- $('.new-post-cancel').bind "click", @hideNewPost
+ @newPostView.$('.cancel').bind "click", @hideNewPost
allThreads: ->
@nav.updateSidebar()
@@ -45,8 +45,12 @@ if Backbone?
if(@main)
@main.cleanup()
@main.undelegateEvents()
+ unless($(".forum-content").is(":visible"))
+ $(".forum-content").fadeIn()
+ if(@newPost.is(":visible"))
+ @newPost.fadeOut()
- @main = new DiscussionThreadView(el: $(".discussion-column"), model: @thread)
+ @main = new DiscussionThreadView(el: $(".forum-content"), model: @thread)
@main.render()
@main.on "thread:responses:rendered", =>
@nav.updateSidebar()
@@ -59,8 +63,17 @@ if Backbone?
@navigate("", trigger: true)
showNewPost: (event) =>
- @newPost.slideDown(300)
- $('.new-post-title').focus()
+ $('.forum-content').fadeOut(
+ duration: 200
+ complete: =>
+ @newPost.fadeIn(200)
+ $('.new-post-title').focus()
+ )
hideNewPost: (event) =>
- @newPost.slideUp(300)
+ @newPost.fadeOut(
+ duration: 200
+ complete: =>
+ $('.forum-content').fadeIn(200)
+ )
+
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index 50530622b2..157852a8f6 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -167,7 +167,7 @@ class @DiscussionUtil
@formErrorHandler: (errorsField) ->
(xhr, textStatus, error) ->
makeErrorElem = (message) ->
- $("
+
-
+
+
+