Skip to content

E
edx-platform
Commit 029060f7 by alisan617 Committed by GitHub
Options

Merge pull request #14467 from edx/alisan/discussion-new-post-form-TNL-6366 

Reveal radio buttons in discussion post form post type options
parents 9d1deefc ef481417
Showing with 88 additions and 76 deletions
common/static/common/js/discussion/views/discussion_thread_edit_view.js
......@@ -58,7 +58,7 @@
save: function() {
var title = this.$('.edit-post-title').val(),
threadType = this.$('.post-type-input:checked').val(),
threadType = this.$('.input-radio:checked').val(),
body = this.$('.edit-post-body textarea').val(),
postData = {
title: title,
......
common/static/common/js/discussion/views/new_post_view.js
......@@ -132,7 +132,7 @@
var anonymous, anonymousToPeers, body, follow, group, threadType, title, topicId, url,
self = this;
event.preventDefault();
threadType = this.$('.post-type-input:checked').val();
threadType = this.$('.input-radio:checked').val();
title = this.$('.js-post-title').val();
body = this.$('.js-post-body').find('.wmd-input').val();
group = this.$('.js-group-select option:selected').attr('value');
......
common/static/common/js/spec/discussion/view/new_post_view_spec.js
......@@ -214,9 +214,9 @@
view.$('.js-post-title').val('Test Title');
view.$('.js-post-body textarea').val('Test body');
view.$('.wmd-preview p').html('Test body');
view.$('.js-follow').prop('checked', false);
view.$('.js-anon').prop('checked', true);
view.$('.js-anon-peers').prop('checked', true);
view.$('input[name=follow]').prop('checked', false);
view.$('input[name=anonymous]').prop('checked', true);
view.$('input[name=anonymous_to_peers]').prop('checked', true);
if (mode === 'tab') {
view.$("a[data-discussion-id='2b3a858d0c884eb4b272dbbe3f2ffddd']").click();
}
......@@ -227,9 +227,9 @@
expect($("input[id$='post-type-question']")).not.toBeChecked();
expect(view.$('.js-post-title').val()).toEqual('');
expect(view.$('.js-post-body textarea').val()).toEqual('');
expect(view.$('.js-follow')).toBeChecked();
expect(view.$('.js-anon')).not.toBeChecked();
expect(view.$('.js-anon-peers')).not.toBeChecked();
expect(view.$('input[name=follow]')).toBeChecked();
expect(view.$('input[name=anonymous]')).not.toBeChecked();
expect(view.$('input[name=anonymous_to_peers]')).not.toBeChecked();
if (mode === 'tab') {
return expect(view.$('.post-topic option:selected').text()).toEqual('General');
}
......
common/static/common/templates/discussion/new-post.underscore
......@@ -46,20 +46,22 @@
<div class="js-post-body editor" aria-describedby="new-post-editor-description" name="body"></div>
</div>
<div class="post-options">
<label class="post-option is-enabled">
<input type="checkbox" name="follow" class="post-option-input js-follow" checked>
<span class="icon fa fa-star" aria-hidden="true"></span><%- gettext("follow this post") %>
<label class="field-label label-inline">
<input type="checkbox" name="follow" class="field-input input-checkbox" checked>
<span class="field-input-label">
<span class="icon fa fa-star" aria-hidden="true"></span><%- gettext("follow this post") %>
</span>
</label>
<% if (allow_anonymous) { %>
<label class="post-option">
<input type="checkbox" name="anonymous" class="post-option-input js-anon">
<%- gettext("post anonymously") %>
<label class="field-label label-inline">
<input type="checkbox" name="anonymous" class="field-input input-checkbox">
<span class="field-input-label"><%- gettext("post anonymously") %></span>
</label>
<% } %>
<% if (allow_anonymous_to_peers) { %>
<label class="post-option">
<input type="checkbox" name="anonymous_to_peers" class="post-option-input js-anon-peers">
<%- gettext("post anonymously to classmates") %>
<label class="field-label label-inline">
<input type="checkbox" name="anonymous_to_peers" class="field-input input-checkbox">
<span class="field-input-label"><%- gettext("post anonymously to classmates") %></span>
</div>
<% } %>
</div>
......
common/static/common/templates/discussion/thread-edit.underscore
<h4><%- gettext("Editing post") %></h4>
<h3 class="thread-title"><%- gettext("Editing post") %></h3>
<ul class="post-errors"></ul>
<div class="forum-edit-post-form-wrapper"></div>
<div class="post-field">
......
common/static/common/templates/discussion/thread-type.underscore
<div class="post-field">
<div class="field-label">
<label class="field-label">
<span class="field-label-text">
<% // Translators: This is the label for a control to select a forum post type %>
<%- gettext("Post type") %>
......@@ -10,19 +10,23 @@
<div class="field-label">
<fieldset class="field-input">
<legend class="sr"><%- gettext("Post type") %></legend>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-question" value="question">
<label for="<%= form_id %>-post-type-question" class="post-type-label">
<span class="icon fa fa-question" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Question") %>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="field-input input-radio" id="<%= form_id %>-post-type-question" value="question">
<span class="field-input-label">
<span class="icon fa fa-question" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Question") %>
</span>
</label>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
<label for="<%= form_id %>-post-type-discussion" class="post-type-label">
<span class="icon fa fa-comments" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Discussion") %>
<input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="field-input input-radio" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
<span class="field-input-label">
<span class="icon fa fa-comments" aria-hidden="true"></span>
<% // Translators: This is a forum post type %>
<%- gettext("Discussion") %>
</span>
</label>
</fieldset>
</div>
</div>
</label>
</div>
common/static/common/templates/discussion/topic.underscore
<div class="post-field">
<label class="field-label">
<span class="field-label-text">
<%- gettext("Topic area") %>
</span>
<div class="field-help" id="field_help_topic_area">
<%- gettext("Add your post to a relevant topic to help others find it. (Required)") %>
</div>
<div class="field-input">
<select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<%= edx.HtmlUtils.ensureHtml(topics_html) %>
</select>
</div>
</label>
</div>
<label class="field-label">
<span class="field-label-text">
<%- gettext("Topic area") %>
</span>
<div class="field-help" id="field_help_topic_area">
<%- gettext("Add your post to a relevant topic to help others find it. (Required)") %>
</div>
<div class="field-input">
<select class="post-topic field-input" aria-describedby="field_help_topic_area" required>
<%= edx.HtmlUtils.ensureHtml(topics_html) %>
</select>
</div>
</label>
common/static/sass/edx-pattern-library-shims/_form.scss 0 → 100644
/*
This file mirror UXPL Form field styles
*/
@import 'base/variables';
.post-type-label {
@include margin-right($baseline);
display: inline-block;
line-height: 100%;
}
.field-label {
.post-options & {
display: inline-block;
}
.field-input:checked + .field-input-label {
color: $uxpl-blue-base;
}
}
.input-radio, .input-checkbox {
@include margin-right($baseline / 2);
}
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -37,7 +37,6 @@
.field-input {
display: inline-block;
width: 70%;
vertical-align: top;
&:not([type="text"]) {
border-width: 0;
......@@ -66,7 +65,7 @@
line-height: 1.5;
&#field_help_post_type {
margin-top: ($baseline / 2) 0 ($baseline / 3) 0;
@include margin($baseline / 2, 0, $baseline * 0.75, 0);
}
&#new-post-editor-description {
......@@ -81,7 +80,15 @@
}
.post-options {
margin-bottom: ($baseline/2);
margin: $baseline 0;
.field-label {
@include margin-right($baseline);
}
.icon {
@include margin-right($baseline / 4);
}
}
}
......@@ -137,39 +144,10 @@
// UI: inputs
.forum-new-post-form,
.edit-post-form {
.post-type-input {
@extend %text-sr;
}
.post-type-label {
@include margin(0, $baseline / 2, 0, 0);
@include white-button;
font-size: $forum-base-font-size;
box-sizing: border-box;
display: inline-block;
padding: 0 $baseline;
height: 36px;
text-align: center;
@include margin-right($baseline);
color: $gray-d3;
border: 1px solid $forum-color-border;
font-weight: 600;
line-height: 36px;
.icon {
@include margin-right($baseline/4);
}
}
.post-type-input:checked + .post-type-label {
border: none;
background-color: $forum-color-active-thread;
color: $forum-color-active-text;
background-image: none;
box-shadow: none;
}
.post-type-input:focus + .post-type-label {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 0 2px 2px $blue;
}
input[type=text].field-input {
......@@ -177,6 +155,7 @@
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 $baseline/2;
width: 70%;
height: 40px;
color: #333;
font-size: $forum-large-font-size;
......
lms/static/sass/discussion/views/_inline.scss
// forums - inline discussion styling
// ====================
@import '../../edx-pattern-library-shims/form';
.discussion.inline-discussion {
.inline-threads {
border: 1px solid $forum-color-border;
......
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