Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update forum new post form

Browse Source 
Add help text to several fields, update visual styling, and make it
appear in the right-hand pane of the discussion tab instead of sliding
down from the top.

Co-authored-by: jsa <jsa@edx.org>
Co-authored-by: marco <marcotuts@gmail.com>
This commit is contained in:
Greg Price
2014-07-21 10:43:45 -04:00
parent e33d9b7367
commit 854621be60
19 changed files with 847 additions and 1080 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
View File

@@ -98,7 +98,7 @@ describe "DiscussionThreadListView", ->
<ul class="forum-nav-browse-submenu">
<li
class="forum-nav-browse-menu-item"
data-discussion-id='{"sort_key": null, "id": "child"}'
data-discussion-id="child"
data-cohorted="false"
>
<a href="#" class="forum-nav-browse-title">Child</a>
@@ -106,7 +106,7 @@ describe "DiscussionThreadListView", ->
</ul>
<li
class="forum-nav-browse-menu-item"
data-discussion-id='{"sort_key": null, "id": "sibling"}'
data-discussion-id="sibling"
data-cohorted="false"
>
<a href="#" class="forum-nav-browse-title">Sibling</a>
@@ -115,7 +115,7 @@ describe "DiscussionThreadListView", ->
</li>
<li
class="forum-nav-browse-menu-item"
data-discussion-id='{"sort_key": null, "id": "other"}'
data-discussion-id="other"
data-cohorted="false"
>
<a href="#" class="forum-nav-browse-title">Other Category</a>

218
common/static/coffee/spec/discussion/view/new_post_view_spec.coffee
View File

@@ -3,101 +3,53 @@ describe "NewPostView", ->
beforeEach ->
setFixtures(
"""
<article class="new-post-article" style="display: block;">
<div class="inner-wrapper">
<form class="new-post-form">
<div class="left-column" >
</div>
</form>
<div class="discussion-body">
<div class="discussion-column">
<article class="new-post-article" style="display: block;"></article>
</div>
</article>
</div>
<script aria-hidden="true" type="text/template" id="new-post-tab-template">
<div class="inner-wrapper">
<form class="new-post-form">
<div class="left-column">
'<%= topic_dropdown_html %>
'<%= options_html %>'
<script aria-hidden="true" type="text/template" id="new-post-template">
<form class="forum-new-post-form">
<% if (mode=="tab") { %>
<div class="post-field">
<div class="field-label">
<span class="field-label-text">
Topic Area:
</span>
<div class="field-input post-topic">
<a href="#" class="post-topic-button">
<span class="sr">${_("Discussion topics; current selection is: ")}</span>
<span class="js-selected-topic"></span>
<span class="drop-arrow" aria-hidden="true">▾</span>
</a>
<div class="topic-menu-wrapper">
<ul class="topic-menu" role="menu"><%= topics_html %></ul>
</div>
</div>
</div>
</form>
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-inline-template">
<div class="inner-wrapper">
<div class="new-post-form-errors">
</div>
<form class="new-post-form">
<%= editor_html %>
<%= options_html %>
</form>
</div>
<% } %>
<select class="js-group-select">
<option value="">All Groups</option>
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
</form>
</script>
<script aria-hidden="true" type="text/template" id="new-post-menu-entry-template">
<li role="menuitem"><a href="#" class="topic" data-discussion_id="<%- id %>" aria-describedby="topic-name-span-<%- id %>" cohorted="<%- is_cohorted %>"><%- text %></a></li>
<li role="menuitem">
<a href="#" class="topic-title" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></a>
</li>
</script>
<script aria-hidden="true" type="text/template" id="new-post-menu-category-template">
<li role="menuitem">
<a href="#"><span class="category-menu-span"><%- text %></span></a>
<ul role="menu"><%= entries %></ul>
<span class="topic-title"><%- text %></span>
<ul role="menu" class="topic-submenu"><%= entries %></ul>
</li>
</script>
<script aria-hidden="true" type="text/template" id="new-post-topic-dropdown-template">
<span class="topic-dropdown-label" id="topic-dropdown-label">Create new post about:</span>
<div class="form-topic-drop">
<a href="#" aria-labelledby="topic-dropdown-label" class="topic_dropdown_button">${_("Show All Discussions")}<span class="drop-arrow" aria-hidden="true">▾</span></a>
<div class="topic_menu_wrapper">
<div class="topic_menu_search" role="menu">
<label class="sr" for="browse-topic-newpost">Filter List</label>
<input type="text" id="browse-topic-newpost" class="form-topic-drop-search-input" placeholder="Filter discussion areas">
</div>
<ul class="topic_menu" role="menu"><%= topics_html %></ul>
</div>
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-options-template">
<div class="options">
<input type="checkbox" name="follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<% if (allow_anonymous) { %>
<br>
<input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous">
<label for="new-post-anonymous">post anonymously</label>
<% } %>
<% if (allow_anonymous_to_peers) { %>
<br>
<input type="checkbox" name="anonymous_to_peers" class="discussion-anonymous-to-peers" id="new-post-anonymous-to-peers">
<label for="new-post-anonymous-to-peers">post anonymously to classmates</label>
<% } %>
<% if (cohort_options) { %>
<div class="form-group-label choose-cohort">
## Translators: This labels the selector for which group of students can view a post
Make visible to:
<select class="group-filter-select new-post-group" name="group_id">
<option value="">All Groups</option>
<% _.each(cohort_options, function(opt) { %>
<option value="<%= opt.value %>" <% if (opt.selected) { %>selected<% } %>><%- opt.text %></option>
<% }); %>
</select>
</div>
<% } %>
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-editor-template">
<div class="form-row">
<label class="sr" for="new-post-title">new post title</label>
<input type="text" id="new-post-title" class="new-post-title" name="title" placeholder="Title">
</div>
<div class="form-row">
<div class="new-post-body" name="body" placeholder="Enter your question or comment…"></div>
</div>
<input type="submit" id="new-post-submit" class="submit" value="Add post">
<a href="#" class="new-post-cancel">Cancel</a>
</script>
"""
)
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()

26
common/static/coffee/src/discussion/discussion_filter.coffee
View File

@@ -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');

2
common/static/coffee/src/discussion/discussion_module_view.coffee
View File

@@ -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")

23
common/static/coffee/src/discussion/discussion_router.coffee
View File

@@ -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)
)

2
common/static/coffee/src/discussion/utils.coffee
View File

@@ -167,7 +167,7 @@ class @DiscussionUtil
@formErrorHandler: (errorsField) ->
(xhr, textStatus, error) ->
makeErrorElem = (message) ->
$("<li>").addClass("new-post-form-error").html(message)
$("<li>").addClass("post-error").html(message)
errorsField.empty().show()
if xhr.status == 400
response = JSON.parse(xhr.responseText)

6
common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
View File

@@ -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)

172
common/static/coffee/src/discussion/views/new_post_view.coffee
View File

@@ -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) + ' <span class="drop-arrow">▾</span>')
@$(".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)

3
lms/static/sass/application-extend2.scss.mako
View File

@@ -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';

103
lms/static/sass/course/_discussions-inline.scss
View File

@@ -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;

635
lms/static/sass/discussion/_discussion.scss
View File

@@ -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;

116
lms/static/sass/discussion/_mixins.scss Normal file
View File

@@ -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;
}

168
lms/static/sass/discussion/elements/_editor.scss Normal file
View File

@@ -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;
}
}
}

3
lms/static/sass/discussion/elements/_navigation.scss
View File

@@ -1,3 +1,6 @@
// discussion - elements - navigation
// ====================
.forum-nav {
@include box-sizing(border-box);
float: left;

30
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -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;
}
}

224
lms/static/sass/discussion/views/_new-post.scss Normal file
View File

@@ -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;
}
}
}

2
lms/templates/discussion/_filter_dropdown.html
View File

@@ -14,7 +14,7 @@
<%def name="render_entry(entries, entry)">
<li
class="forum-nav-browse-menu-item"
data-discussion-id='${json.dumps(entries[entry])}'
data-discussion-id='${entries[entry]["id"]}'
data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
>
<a href="#" class="forum-nav-browse-title">${entry}</a>

184
lms/templates/discussion/_underscore_templates.html
View File

@@ -257,7 +257,7 @@
)
%>
<span class="forum-nav-thread-votes-count">+${'<%='}${js_block}${'%>'}</span>
<%
<%
js_block = u"""
var fmt;
// Counts in data do not include the post itself, but the UI should
@@ -345,8 +345,7 @@
</tr>
</table>
% endif
</div>
</div>
</script>
<script aria-hidden="true" type="text/template" id="search-alert-template">
@@ -361,107 +360,94 @@
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-tab-template">
<div class="inner-wrapper">
<form class="new-post-form">
<div class="left-column">
<!-- BEGIN topic dropdown -->
${'<%= topic_dropdown_html %>'}
<!-- END topic dropdown -->
<!-- BEGIN options -->
${'<%= options_html %>'}
<!-- END options -->
</div>
<div class="right-column">
<!-- BEGIN errors display -->
<ul class="new-post-form-errors"></ul>
<!-- END errors display -->
<!-- BEGIN content editor -->
${'<%= editor_html %>'}
<!-- END content editor -->
</div>
</form>
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-inline-template">
<div class="inner-wrapper">
<!-- BEGIN errors display -->
<div class="new-post-form-errors">
<script aria-hidden="true" type="text/template" id="new-post-template">
<form class="forum-new-post-form">
<ul class="post-errors" style="display: none"></ul>
${'<% if (mode=="tab") { %>'}
<div class="post-field">
## Using div here instead of label because we are using a non-native control
<div class="field-label">
<span class="field-label-text">
${_("Topic Area:")}
</span><div class="field-input post-topic">
<a href="#" class="post-topic-button">
<span class="sr">${_("Discussion topics; current selection is: ")}</span>
<span class="js-selected-topic"></span>
<span class="drop-arrow" aria-hidden="true">▾</span>
</a>
<div class="topic-menu-wrapper">
<label class="topic-filter-label">
<span class="sr">${_("Filter topics")}</span>
<input type="text" class="topic-filter-input" placeholder="${_('Filter topics')}">
</label>
<ul class="topic-menu" role="menu">${'<%= topics_html %>'}</ul>
</div>
</div>
</div><span class="field-help">
${_("Add your post to a relevant topic to help others find it.")}
</span>
</div>
<!-- END errors display -->
<form class="new-post-form">
<!-- BEGIN content editor -->
${'<%= editor_html %>'}
<!-- END content editor -->
<!-- BEGIN options -->
${'<%= options_html %>'}
<!-- END options -->
</form>
</div>
${'<% } %>'}
${'<% if (cohort_options) { %>'}
<div class="post-field">
<label class="field-label">
<span class="field-label-text">
## Translators: This labels the selector for which group of students can view a post
${_("Visible To:")}
</span><select class="field-input js-group-select" name="group_id">
<option value="">${_("All Groups")}</option>
${'<% _.each(cohort_options, function(opt) { %>'}
<option value="${'<%= opt.value %>'}" ${'<% if (opt.selected) { %>selected<% } %>'}>${'<%- opt.text %>'}</option>
${'<% }); %>'}
</select>
</label><div class="field-help">
${_("Instructors can set whether a post in a cohorted topic is visible to all cohorts or only to a specific cohort.")}
</div>
</div>
${'<% } %>'}
<div class="post-field">
<label class="field-label">
<span class="sr">${_("Title:")}</span>
<input type="text" class="field-input js-post-title" name="title" placeholder="${_('Title')}">
</label><span class="field-help">
${_("Add a clear and descriptive title to encourage participation.")}
</span>
</div>
<div class="post-field js-post-body editor" name="body" data-placeholder="${_(u'Enter your question or comment…')}"></div>
<div class="post-options">
<label class="post-option is-enabled">
<input type="checkbox" name="follow" class="post-option-input js-follow" checked>
<i class="icon icon-star"></i>${_("follow this post")}
</label>
${'<% if (allow_anonymous) { %>'}
<label class="post-option">
<input type="checkbox" name="anonymous" class="post-option-input js-anon">
${_("post anonymously")}
</label>
${'<% } %>'}
${'<% if (allow_anonymous_to_peers) { %>'}
<label class="post-option">
<input type="checkbox" name="anonymous_to_peers" class="post-option-input js-anon-peers">
${_("post anonymously to classmates")}
</label>
${'<% } %>'}
</div>
<div>
<input type="submit" class="submit" value="${_('Add Post')}">
<a href="#" class="cancel">${_('Cancel')}</a>
</div>
</form>
</script>
<script aria-hidden="true" type="text/template" id="new-post-menu-entry-template">
<li role="menuitem"><a href="#" class="topic" data-discussion_id="${'<%- id %>'}" aria-describedby="topic-name-span-${'<%- id %>'}" cohorted="${'<%- is_cohorted %>'}">${'<%- text %>'}</a></li>
</script>
<script aria-hidden="true" type="text/template" id="new-post-menu-category-template">
<li role="menuitem">
<a href="#"><span class="category-menu-span">${'<%- text %>'}</span></a>
<ul role="menu">${'<%= entries %>'}</ul>
<li role="menuitem" class="topic-menu-item">
<a href="#" class="topic-title" data-discussion-id="${'<%- id %>'}" data-cohorted="${'<%- is_cohorted %>'}">${'<%- text %>'}</a>
</li>
</script>
<script aria-hidden="true" type="text/template" id="new-post-topic-dropdown-template">
<span class="topic-dropdown-label" id="topic-dropdown-label">${_("Create new post about:")}</span>
<div class="form-topic-drop">
<a href="#" aria-labelledby="topic-dropdown-label" class="topic_dropdown_button">${_("Show All Discussions")}<span class="drop-arrow" aria-hidden="true">▾</span></a>
<div class="topic_menu_wrapper">
<div class="topic_menu_search" role="menu">
<label class="sr" for="browse-topic-newpost">${_("Filter List")}</label>
<input type="text" id="browse-topic-newpost" class="form-topic-drop-search-input" placeholder="${_('Filter discussion areas')}">
</div>
<ul class="topic_menu" role="menu">${'<%= topics_html %>'}</ul>
</div>
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-options-template">
<div class="options">
<input type="checkbox" name="follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">${_("follow this post")}</label>
${'<% if (allow_anonymous) { %>'}
<br>
<input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous">
<label for="new-post-anonymous">${_("post anonymously")}</label>
${'<% } %>'}
${'<% if (allow_anonymous_to_peers) { %>'}
<br>
<input type="checkbox" name="anonymous_to_peers" class="discussion-anonymous-to-peers" id="new-post-anonymous-to-peers">
<label for="new-post-anonymous-to-peers">${_("post anonymously to classmates")}</label>
${'<% } %>'}
${'<% if (cohort_options) { %>'}
<div class="form-group-label choose-cohort">
## Translators: This labels the selector for which group of students can view a post
${_("Make visible to:")}
<select class="group-filter-select new-post-group" name="group_id">
<option value="">${_("All Groups")}</option>
${'<% _.each(cohort_options, function(opt) { %>'}
<option value="${'<%= opt.value %>'}" ${'<% if (opt.selected) { %>selected<% } %>'}>${'<%- opt.text %>'}</option>
${'<% }); %>'}
</select>
</div>
${'<% } %>'}
</div>
</script>
<script aria-hidden="true" type="text/template" id="new-post-editor-template">
<div class="form-row">
<label class="sr" for="new-post-title">${_("new post title")}</label>
<input type="text" id="new-post-title" class="new-post-title" name="title" placeholder="${_('Title')}">
</div>
<div class="form-row">
<div class="new-post-body" name="body" placeholder="${_(u'Enter your question or comment…')}"></div>
</div>
<input type="submit" id="new-post-submit" class="submit" value="${_('Add post')}">
<a href="#" class="new-post-cancel">${_('Cancel')}</a>
<script aria-hidden="true" type="text/template" id="new-post-menu-category-template">
<li role="menuitem" class="topic-menu-item">
<span class="topic-title">${'<%- text %>'}</span>
<ul role="menu" class="topic-submenu">${'<%= entries %>'}</ul>
</li>
</script>

4
lms/templates/discussion/index.html
View File

@@ -23,8 +23,6 @@
<%include file="_discussion_course_navigation.html" args="active_page='discussion'" />
<article class="new-post-article"></article>
<section class="discussion container" id="discussion-container"
data-roles="${roles}"
data-course-id="${course_id}"
@@ -39,6 +37,8 @@
<div class="discussion-body">
<div class="forum-nav"></div>
<div class="discussion-column">
<article class="new-post-article" style="display: none"></article>
<div class="forum-content"></div>
</div>
</div>
</section>