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 670 additions and 229 deletions
common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
...@@ -98,7 +98,7 @@ describe "DiscussionThreadListView", -> ...@@ -98,7 +98,7 @@ describe "DiscussionThreadListView", ->
<ul class="forum-nav-browse-submenu"> <ul class="forum-nav-browse-submenu">
<li <li
class="forum-nav-browse-menu-item" class="forum-nav-browse-menu-item"
data-discussion-id='{"sort_key": null, "id": "child"}' data-discussion-id="child"
data-cohorted="false" data-cohorted="false"
> >
<a href="#" class="forum-nav-browse-title">Child</a> <a href="#" class="forum-nav-browse-title">Child</a>
...@@ -106,7 +106,7 @@ describe "DiscussionThreadListView", -> ...@@ -106,7 +106,7 @@ describe "DiscussionThreadListView", ->
</ul> </ul>
<li <li
class="forum-nav-browse-menu-item" class="forum-nav-browse-menu-item"
data-discussion-id='{"sort_key": null, "id": "sibling"}' data-discussion-id="sibling"
data-cohorted="false" data-cohorted="false"
> >
<a href="#" class="forum-nav-browse-title">Sibling</a> <a href="#" class="forum-nav-browse-title">Sibling</a>
...@@ -115,7 +115,7 @@ describe "DiscussionThreadListView", -> ...@@ -115,7 +115,7 @@ describe "DiscussionThreadListView", ->
</li> </li>
<li <li
class="forum-nav-browse-menu-item" class="forum-nav-browse-menu-item"
data-discussion-id='{"sort_key": null, "id": "other"}' data-discussion-id="other"
data-cohorted="false" data-cohorted="false"
> >
<a href="#" class="forum-nav-browse-title">Other Category</a> <a href="#" class="forum-nav-browse-title">Other Category</a>
......
common/static/coffee/src/discussion/discussion_filter.coffee
class @DiscussionFilter 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) -> @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() query = $(e.target).val()
$items = $drop.find('a') $items = $drop.find('.topic-menu-item')
if(query.length == 0) if(query.length == 0)
$items.removeClass('hidden') $items.removeClass('hidden')
...@@ -10,19 +15,14 @@ class @DiscussionFilter ...@@ -10,19 +15,14 @@ class @DiscussionFilter
$items.addClass('hidden') $items.addClass('hidden')
$items.each (i) -> $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) path = $(this).parents(".topic-menu-item").andSelf()
test = false 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') $(this).removeClass('hidden')
# show children # show children
$(this).parent().find('a').removeClass('hidden'); $(this).find('.topic-menu-item').removeClass('hidden');
# show parents # 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? ...@@ -7,7 +7,7 @@ if Backbone?
"click .new-post-btn": "toggleNewPost" "click .new-post-btn": "toggleNewPost"
"keydown .new-post-btn": "keydown .new-post-btn":
(event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost) (event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost)
"click .new-post-cancel": "hideNewPost" "click .cancel": "hideNewPost"
"click .discussion-paginator a": "navigateToPage" "click .discussion-paginator a": "navigateToPage"
paginationTemplate: -> DiscussionUtil.getTemplate("_pagination") paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
......
common/static/coffee/src/discussion/discussion_router.coffee
...@@ -25,7 +25,7 @@ if Backbone? ...@@ -25,7 +25,7 @@ if Backbone?
@newPostView.render() @newPostView.render()
$('.new-post-btn').bind "click", @showNewPost $('.new-post-btn').bind "click", @showNewPost
$('.new-post-btn').bind "keydown", (event) => DiscussionUtil.activateOnSpace(event, @showNewPost) $('.new-post-btn').bind "keydown", (event) => DiscussionUtil.activateOnSpace(event, @showNewPost)
$('.new-post-cancel').bind "click", @hideNewPost @newPostView.$('.cancel').bind "click", @hideNewPost
allThreads: -> allThreads: ->
@nav.updateSidebar() @nav.updateSidebar()
...@@ -45,8 +45,12 @@ if Backbone? ...@@ -45,8 +45,12 @@ if Backbone?
if(@main) if(@main)
@main.cleanup() @main.cleanup()
@main.undelegateEvents() @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.render()
@main.on "thread:responses:rendered", => @main.on "thread:responses:rendered", =>
@nav.updateSidebar() @nav.updateSidebar()
...@@ -59,8 +63,17 @@ if Backbone? ...@@ -59,8 +63,17 @@ if Backbone?
@navigate("", trigger: true) @navigate("", trigger: true)
showNewPost: (event) => showNewPost: (event) =>
@newPost.slideDown(300) $('.forum-content').fadeOut(
$('.new-post-title').focus() duration: 200
complete: =>
@newPost.fadeIn(200)
$('.new-post-title').focus()
)
hideNewPost: (event) => 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 ...@@ -167,7 +167,7 @@ class @DiscussionUtil
@formErrorHandler: (errorsField) -> @formErrorHandler: (errorsField) ->
(xhr, textStatus, error) -> (xhr, textStatus, error) ->
makeErrorElem = (message) -> makeErrorElem = (message) ->
$("<li>").addClass("new-post-form-error").html(message) $("<li>").addClass("post-error").html(message)
errorsField.empty().show() errorsField.empty().show()
if xhr.status == 400 if xhr.status == 400
response = JSON.parse(xhr.responseText) response = JSON.parse(xhr.responseText)
......
common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
...@@ -75,7 +75,7 @@ if Backbone? ...@@ -75,7 +75,7 @@ if Backbone?
#TODO fix this entire chain of events #TODO fix this entire chain of events
addAndSelectThread: (thread) => addAndSelectThread: (thread) =>
commentable_id = thread.get("commentable_id") 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)) @setCurrentTopicDisplay(@getPathText(menuItem))
@retrieveDiscussion commentable_id, => @retrieveDiscussion commentable_id, =>
@trigger "thread:created", thread.get('id') @trigger "thread:created", thread.get('id')
...@@ -242,7 +242,7 @@ if Backbone? ...@@ -242,7 +242,7 @@ if Backbone?
goHome: -> goHome: ->
@template = _.template($("#discussion-home").html()) @template = _.template($("#discussion-home").html())
$(".discussion-column").html(@template) $(".forum-content").html(@template)
$(".forum-nav-thread-list a").removeClass("is-active") $(".forum-nav-thread-list a").removeClass("is-active")
$("input.email-setting").bind "click", @updateEmailNotifications $("input.email-setting").bind "click", @updateEmailNotifications
url = DiscussionUtil.urlFor("notifications_status",window.user.get("id")) url = DiscussionUtil.urlFor("notifications_status",window.user.get("id"))
...@@ -373,7 +373,7 @@ if Backbone? ...@@ -373,7 +373,7 @@ if Backbone?
else else
allItems = item.find(".forum-nav-browse-menu-item").andSelf() allItems = item.find(".forum-nav-browse-menu-item").andSelf()
discussionIds = allItems.filter("[data-discussion-id]").map( discussionIds = allItems.filter("[data-discussion-id]").map(
(i, elem) -> $(elem).data("discussion-id").id (i, elem) -> $(elem).data("discussion-id")
).get() ).get()
@retrieveDiscussions(discussionIds) @retrieveDiscussions(discussionIds)
@$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true) @$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true)
......
lms/static/sass/application-extend2.scss.mako
...@@ -49,7 +49,10 @@ ...@@ -49,7 +49,10 @@
// applications // applications
@import "discussion/utilities/variables"; @import "discussion/utilities/variables";
@import "discussion/mixins";
@import 'discussion/discussion'; // Process old file after definitions but before everything else @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/elements/navigation";
@import 'discussion/utilities/developer'; @import 'discussion/utilities/developer';
@import 'discussion/utilities/shame'; @import 'discussion/utilities/shame';
......
lms/static/sass/course/_discussions-inline.scss
...@@ -177,109 +177,6 @@ ...@@ -177,109 +177,6 @@
margin: auto; 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 { .thread-title {
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
......
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 { .forum-nav {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: left;
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -95,3 +95,33 @@ li[class*=forum-nav-thread-label-] { ...@@ -95,3 +95,33 @@ li[class*=forum-nav-thread-label-] {
display: none !important; 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 @@ ...@@ -14,7 +14,7 @@
<%def name="render_entry(entries, entry)"> <%def name="render_entry(entries, entry)">
<li <li
class="forum-nav-browse-menu-item" 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()}" data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
> >
<a href="#" class="forum-nav-browse-title">${entry}</a> <a href="#" class="forum-nav-browse-title">${entry}</a>
......
lms/templates/discussion/_underscore_templates.html
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
) )
%> %>
<span class="forum-nav-thread-votes-count">+${'<%='}${js_block}${'%>'}</span> <span class="forum-nav-thread-votes-count">+${'<%='}${js_block}${'%>'}</span>
<% <%
js_block = u""" js_block = u"""
var fmt; var fmt;
// Counts in data do not include the post itself, but the UI should // Counts in data do not include the post itself, but the UI should
...@@ -345,8 +345,7 @@ ...@@ -345,8 +345,7 @@
</tr> </tr>
</table> </table>
% endif % endif
</div>
</div>
</script> </script>
<script aria-hidden="true" type="text/template" id="search-alert-template"> <script aria-hidden="true" type="text/template" id="search-alert-template">
...@@ -361,107 +360,94 @@ ...@@ -361,107 +360,94 @@
</div> </div>
</script> </script>
<script aria-hidden="true" type="text/template" id="new-post-tab-template"> <script aria-hidden="true" type="text/template" id="new-post-template">
<div class="inner-wrapper"> <form class="forum-new-post-form">
<form class="new-post-form"> <ul class="post-errors" style="display: none"></ul>
<div class="left-column"> ${'<% if (mode=="tab") { %>'}
<!-- BEGIN topic dropdown --> <div class="post-field">
${'<%= topic_dropdown_html %>'} ## Using div here instead of label because we are using a non-native control
<!-- END topic dropdown --> <div class="field-label">
<!-- BEGIN options --> <span class="field-label-text">
${'<%= options_html %>'} ${_("Topic Area:")}
<!-- END options --> </span><div class="field-input post-topic">
</div> <a href="#" class="post-topic-button">
<div class="right-column"> <span class="sr">${_("Discussion topics; current selection is: ")}</span>
<!-- BEGIN errors display --> <span class="js-selected-topic"></span>
<ul class="new-post-form-errors"></ul> <span class="drop-arrow" aria-hidden="true">▾</span>
<!-- END errors display --> </a>
<!-- BEGIN content editor --> <div class="topic-menu-wrapper">
${'<%= editor_html %>'} <label class="topic-filter-label">
<!-- END content editor --> <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> </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> </div>
<!-- END errors display --> ${'<% } %>'}
<form class="new-post-form"> <div class="post-field">
<!-- BEGIN content editor --> <label class="field-label">
${'<%= editor_html %>'} <span class="sr">${_("Title:")}</span>
<!-- END content editor --> <input type="text" class="field-input js-post-title" name="title" placeholder="${_('Title')}">
<!-- BEGIN options --> </label><span class="field-help">
${'<%= options_html %>'} ${_("Add a clear and descriptive title to encourage participation.")}
<!-- END options --> </span>
</form> </div>
</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>
<script aria-hidden="true" type="text/template" id="new-post-menu-entry-template"> <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>
<script aria-hidden="true" type="text/template" id="new-post-menu-category-template"> <script aria-hidden="true" type="text/template" id="new-post-menu-category-template">
<li role="menuitem"> <li role="menuitem" class="topic-menu-item">
<a href="#"><span class="category-menu-span">${'<%- text %>'}</span></a> <span class="topic-title">${'<%- text %>'}</span>
<ul role="menu">${'<%= entries %>'}</ul> <ul role="menu" class="topic-submenu">${'<%= entries %>'}</ul>
</li> </li>
</script> </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 @@ ...@@ -23,8 +23,6 @@
<%include file="_discussion_course_navigation.html" args="active_page='discussion'" /> <%include file="_discussion_course_navigation.html" args="active_page='discussion'" />
<article class="new-post-article"></article>
<section class="discussion container" id="discussion-container" <section class="discussion container" id="discussion-container"
data-roles="${roles}" data-roles="${roles}"
data-course-id="${course_id}" data-course-id="${course_id}"
...@@ -39,6 +37,8 @@ ...@@ -39,6 +37,8 @@
<div class="discussion-body"> <div class="discussion-body">
<div class="forum-nav"></div> <div class="forum-nav"></div>
<div class="discussion-column"> <div class="discussion-column">
<article class="new-post-article" style="display: none"></article>
<div class="forum-content"></div>
</div> </div>
</div> </div>
</section> </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