Skip to content

E
edx-platform
Commit 854621be by Greg Price
Options

Update forum new post form 

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>
parent e33d9b73
Showing with 849 additions and 1081 deletions
common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
......@@ -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>
......
common/static/coffee/spec/discussion/view/new_post_view_spec.coffee
......@@ -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 ->
@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"
}
},
@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
}),
"children": ["Basic Question Types"],
"entries": {}
},
"allow_anonymous": true,
"allow_anonymous_to_peers": true
})
@view = new NewPostView(
el: $(".new-post-article"),
collection: @discussion,
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()
common/static/coffee/src/discussion/discussion_filter.coffee
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(' ')
if(thisText.toLowerCase().search(query.toLowerCase()) == -1)
test = false
path = $(this).parents(".topic-menu-item").andSelf()
pathTitles = path.children(".topic-title").map((i, elem) -> $(elem).text()).get()
pathText = pathTitles.join(" / ").toLowerCase()
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');
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")
......
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)
)
common/static/coffee/src/discussion/utils.coffee
......@@ -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)
......
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)
......
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"
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})
getEditorHTML: () ->
_.template($("#new-post-editor-template").html(), {})
getOptionsHTML: () ->
# cohort options?
@dropdownButton = @$(".post-topic-button")
@topicMenu = @$(".topic-menu-wrapper")
@hideTopicDropdown()
@setTopic(@$("a.topic-title").first())
DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "js-post-body"
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
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)
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';
......
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;
......
lms/static/sass/discussion/_discussion.scss
// 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;
......
lms/static/sass/discussion/_mixins.scss 0 → 100644
// 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
lms/static/sass/discussion/elements/_editor.scss 0 → 100644
// 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;
}
}
}
lms/static/sass/discussion/elements/_navigation.scss
// discussion - elements - navigation
// ====================
.forum-nav {
@include box-sizing(border-box);
float: left;
......
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;
}
}
lms/static/sass/discussion/views/_new-post.scss 0 → 100644
// 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;
}
}
}
lms/templates/discussion/_filter_dropdown.html
......@@ -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>
......
lms/templates/discussion/_underscore_templates.html
......@@ -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 -->
<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>
${'<% } %>'}
${'<% 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>
</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">
</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>
${'<% } %>'}
<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>
<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-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">
<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="${_(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>
lms/templates/discussion/index.html
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment