change post type options to radio buttons actually just reveal them

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

+/*
+  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;