New inline discussion home view UI

TNL-4756

common/static/common/js/discussion/discussion_module_view.js

@@ -74,6 +74,7 @@ NewPostView */
                 this.toggleDiscussionBtn = this.$('.discussion-show');
                 match = this.page_re.exec(window.location.href);
                 this.context = options.context || 'course';
+                this.readOnly = $('.discussion-module').data('read-only');
                 if (match) {
                     this.page = parseInt(match[1]);
                 } else {
@@ -169,6 +170,7 @@ NewPostView */
                 });
                 $discussion = _.template($('#inline-discussion-template').html())({
                     'threads': response.discussion_data,
+                    read_only: this.readOnly,
                     'discussionId': discussionId
                 });
                 if (this.$('section.discussion').length) {

common/static/common/templates/discussion/inline-discussion.underscore

-<section class="discussion" data-discussion-id="<%= discussionId %>">
+<section class="discussion inline-discussion" data-discussion-id="<%= discussionId %>">
+    <div class="add_post_btn_container">
+        <button class="btn-link new-post-btn <%if (read_only) {%>is-hidden<%} %>"><%- gettext("Add a Post") %></button>
+    </div>
+
     <article class="new-post-article"></article>
 
     <section class="threads">

common/test/acceptance/pages/lms/teams.py

@@ -569,7 +569,7 @@ class TeamPage(CoursePage, PaginatedUIMixin, BreadcrumbsMixin):
     @property
     def new_post_button_present(self):
         """ Returns True if New Post button is present else False """
-        return self.q(css='.discussion-module .new-post-btn').present
+        return self.q(css='.discussion-module .new-post-btn').visible
 
     @property
     def edit_team_button_present(self):

common/test/acceptance/tests/discussion/test_discussion.py

@@ -1051,6 +1051,11 @@ class InlineDiscussionTest(UniqueCourseTest, DiscussionResponsePaginationTestMix
         # Check if 'thread-wrapper' is focused after expanding thread
         self.assertFalse(thread_page.check_if_selector_is_focused(selector='.thread-wrapper'))
 
+    def test_add_a_post_is_present_if_can_create_thread_when_expanded(self):
+        self.discussion_page.expand_discussion()
+        # Add a Post link is present
+        self.assertTrue(self.discussion_page.q(css='.new-post-btn').present)
+
     def test_initial_render(self):
         self.assertFalse(self.discussion_page.is_discussion_expanded())
 
@@ -1096,14 +1101,8 @@ class InlineDiscussionTest(UniqueCourseTest, DiscussionResponsePaginationTestMix
             [Comment(id="comment1", user_id="other"), Comment(id="comment2", user_id=self.user_id)])
         thread_fixture.push()
         self.setup_thread_page(thread.get("id"))
-        self.assertFalse(self.discussion_page.element_exists(".new-post-btn"))
         self.assertFalse(self.thread_page.has_add_response_button())
-        self.assertFalse(self.thread_page.is_response_editable("response1"))
-        self.assertFalse(self.thread_page.is_add_comment_visible("response1"))
-        self.assertFalse(self.thread_page.is_comment_editable("comment1"))
-        self.assertFalse(self.thread_page.is_comment_editable("comment2"))
-        self.assertFalse(self.thread_page.is_comment_deletable("comment1"))
-        self.assertFalse(self.thread_page.is_comment_deletable("comment2"))
+        self.assertFalse(self.thread_page.is_element_visible("action-more"))
 
     def test_dual_discussion_xblock(self):
         """
@@ -1124,13 +1123,16 @@ class InlineDiscussionTest(UniqueCourseTest, DiscussionResponsePaginationTestMix
         """
         self.discussion_page.wait_for_page()
         self.additional_discussion_page.wait_for_page()
+        self.discussion_page.expand_discussion()
         self.discussion_page.click_new_post_button()
         with self.discussion_page.handle_alert():
             self.discussion_page.click_cancel_new_post()
+        self.additional_discussion_page.expand_discussion()
         self.additional_discussion_page.click_new_post_button()
         self.assertFalse(self.discussion_page._is_element_visible(".new-post-article"))
         with self.additional_discussion_page.handle_alert():
             self.additional_discussion_page.click_cancel_new_post()
+        self.discussion_page.expand_discussion()
         self.discussion_page.click_new_post_button()
         self.assertFalse(self.additional_discussion_page._is_element_visible(".new-post-article"))
 

common/test/acceptance/tests/lms/test_teams.py

@@ -1705,7 +1705,6 @@ class TeamPageTest(TeamsTabBase):
         assertion = self.assertTrue if should_have_permission else self.assertFalse
         assertion(discussion.q(css='.post-header-actions').present)
         assertion(discussion.q(css='.add-response').present)
-        assertion(discussion.q(css='.new-post-btn').present)
 
     def test_discussion_on_my_team_page(self):
         """

lms/djangoapps/courseware/tests/test_discussion_xblock.py

@@ -241,14 +241,11 @@ class TestTemplates(TestDiscussionXBlock):
 
         self.block.has_permission = lambda perm: permission_dict[perm]
         fragment = self.block.student_view()
-
+        read_only = 'false' if permissions[0] else 'true'
         self.assertIn('data-discussion-id="{}"'.format(self.discussion_id), fragment.content)
         self.assertIn('data-user-create-comment="{}"'.format(json.dumps(permissions[1])), fragment.content)
         self.assertIn('data-user-create-subcomment="{}"'.format(json.dumps(permissions[2])), fragment.content)
-        if permissions[0]:
-            self.assertIn("Add a Post", fragment.content)
-        else:
-            self.assertNotIn("Add a Post", fragment.content)
+        self.assertIn('data-read-only="{read_only}"'.format(read_only=read_only), fragment.content)
 
 
 @ddt.ddt

lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js

@@ -108,19 +108,17 @@ define([
                 var requests = AjaxHelpers.requests(this),
                     view = createTeamProfileView(requests, {});
 
-                expect(view.$('.new-post-btn').length).toEqual(0);
                 teamModel.set('membership', DEFAULT_MEMBERSHIP);  // This should re-render the view.
                 view.render();
-                expect(view.$('.new-post-btn').length).toEqual(1);
+                expect(view.$('.btn-link.new-post-btn.is-hidden').length).toEqual(0);
             });
 
             it('hides New Post button when user left a team', function() {
                 var requests = AjaxHelpers.requests(this),
                     view = createTeamProfileView(requests, {membership: DEFAULT_MEMBERSHIP});
 
-                expect(view.$('.new-post-btn').length).toEqual(1);
                 clickLeaveTeam(requests, view, {cancel: false});
-                expect(view.$('.new-post-btn').length).toEqual(0);
+                expect(view.$('.new-post-btn.is-hidden').length).toEqual(0);
             });
         });
 

lms/djangoapps/teams/static/teams/js/views/team_discussion.js

@@ -13,6 +13,7 @@
                 render: function() {
                     var discussionModuleView = new DiscussionModuleView({
                         el: this.$el,
+                        readOnly: this.$el.data('read-only') === true,
                         context: 'standalone'
                     });
                     discussionModuleView.render();

lms/djangoapps/teams/static/teams/js/views/team_profile.js

@@ -55,7 +55,8 @@
                         })
                     );
                     this.discussionView = new TeamDiscussionView({
-                        el: this.$('.discussion-module')
+                        el: this.$('.discussion-module'),
+                        readOnly: this.$('.discussion-module').data('read-only') === true
                     });
                     this.discussionView.render();
 

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

@@ -4,11 +4,6 @@
                 data-read-only="<%- readOnly %>"
                 data-user-create-comment="<%- !readOnly %>"
                 data-user-create-subcomment="<%- !readOnly %>">
-            <% if ( !readOnly) { %>
-                <button class="btn-brand btn-small new-post-btn">
-                    <%- gettext("Add a Post") %>
-                </button>
-            <% } %>
         </div>
     </div>
 

lms/static/sass/base/_headings.scss

@@ -125,7 +125,11 @@ $headings-base-color:                       $gray-d2;
             margin-bottom: 0;
             font-size: 1.5em;
         }
+
+        &.discussion-module-title {
+            margin-bottom: 0;
+            display: inline-block;
+        }
     }
 }
 
-

lms/static/sass/course/courseware/_courseware.scss

@@ -121,6 +121,7 @@ html.video-fullscreen {
 
     h1 {
       margin: 0 0 lh();
+      letter-spacing: 0;
     }
     div.timed-exam {
       h3 {

lms/static/sass/discussion/_discussion-v1.scss

@@ -18,8 +18,11 @@
     box-shadow: none;
     height: 40px;
     text-shadow: none;
+    font-family: $f-sans-serif; // without this, it would fallback to lms button tag style
     font-size: 14px;
     font-weight: 600;
+    word-wrap: break-word;
+    white-space: nowrap;
 
     // Display: block, one button per line, full width
     &.block {

lms/static/sass/discussion/_discussion.scss

@@ -299,7 +299,7 @@ body.discussion {
   position: relative;
   margin: $baseline 0;
   padding: $baseline;
-  background: #f6f6f6 !important;
+  border: 1px solid $forum-color-border !important;
   border-radius: $forum-border-radius;
 
   header {
@@ -308,9 +308,30 @@ body.discussion {
     }
   }
 
-  .new-post-btn {
-    @include float(right);
-    @include margin-right(4px);
+  .inline-discussion-topic {
+    width: flex-grid(12);
+    font-size: $forum-small-font-size;
+
+    .inline-discussion-topic-title {
+      font-weight: bold;
+    }
+  }
+
+  .discussion-module-header {
+    @include float(left);
+    width: flex-grid(7);
+  }
+
+  .add_post_btn_container {
+    @include text-align(right);
+    position: relative;
+    top: -45px;
+  }
+
+  .discussion {
+    &.inline-discussion {
+      padding-top: $baseline * 3;
+    }
   }
 
   div.add-response.post-extended-content {
@@ -324,27 +345,17 @@ body.discussion {
 }
 
 .discussion-show {
+  @include float(right);
   position: relative;
   top: 3px;
   font-size: $forum-base-font-size;
   text-align: center;
 
   &.shown {
-    .show-hide-discussion-icon {
-      background-position: 0 0;
-    }
+    background-color: $btn-default-background-color;
+    color: $uxpl-primary-blue;
   }
 
-  .show-hide-discussion-icon {
-    display: inline-block;
-    position: relative;
-    top: 5px;
-    @include margin-right(6px);
-    width: 21px;
-    height: 19px;
-    background: url('#{$static-path}/images/show-hide-discussion-icon.png') no-repeat;
-    background-position: -21px 0;
-  }
 }
 
 section.discussion {

lms/static/sass/discussion/utilities/_variables-v1.scss

@@ -35,3 +35,7 @@ $forum-small-font-size: 12px;
 
 // borders
 $forum-border-radius: 3px;
+
+// btn colors
+$uxpl-primary-blue: $blue !default;
+$btn-default-background-color: $white;

lms/static/sass/discussion/utilities/_variables-v2.scss

@@ -35,3 +35,8 @@ $forum-small-font-size: font-size(x-small);
 
 // borders
 $forum-border-radius: $component-border-radius;
+
+
+// btn colors
+$uxpl-primary-blue: palette(primary, base) !default;
+$btn-default-background-color: $lms-container-background-color;

lms/static/sass/discussion/views/_response.scss

@@ -145,6 +145,7 @@
   > li {
     border-top: 1px solid $forum-color-border;
     padding: ($baseline/2) $baseline;
+    position: relative;
   }
 
   blockquote {

lms/static/sass/discussion/views/_thread.scss

@@ -80,6 +80,9 @@
 
     .comment-actions-list {
         @include float(right);
+        @include right($baseline / 2);
+        position: absolute;
+        top: $baseline / 2;
     }
 }
 

lms/static/sass/elements/_controls.scss

@@ -461,6 +461,7 @@
     background-image: none;
     box-shadow: none;
     text-shadow: none;
+    white-space: nowrap;
 
     @extend %t-action3;
     @extend %t-strong;

lms/templates/discussion/_discussion_inline.html

@@ -8,13 +8,17 @@ from json import dumps as json_dumps
 from openedx.core.djangolib.js_utils import js_escaped_string
 %>
 
-<div class="discussion-module" data-discussion-id="${discussion_id}" data-user-create-comment="${json_dumps(can_create_comment)}" data-user-create-subcomment="${json_dumps(can_create_subcomment)}" data-read-only="false">
-    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id}" role="button">
-        <span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
-    </a>
-    % if can_create_thread:
-        <button class="btn-brand btn-small new-post-btn">${_("Add a Post")}</button>
-    % endif
+<div class="discussion-module" data-discussion-id="${discussion_id}"
+    data-user-create-comment="${json_dumps(can_create_comment)}"
+    data-user-create-subcomment="${json_dumps(can_create_subcomment)}"
+    data-read-only="${'false' if can_create_thread else 'true'}">
+    <div class="discussion-module-header">
+        <h3 class="discussion-module-title">${_(display_name)}</h3>
+        <div class="inline-discussion-topic"><span class="inline-discussion-topic-title">${_("Topic:")}</span> ${discussion_category} / ${discussion_target}</div>
+    </div>
+    <button class="discussion-show btn btn-brand" data-discussion-id="${discussion_id}">
+        <span class="button-text">${_("Show Discussion")}</span>
+    </button>
 </div>
 <script type="text/javascript">
 /* global DiscussionModuleView */

openedx/core/lib/xblock_builtin/xblock_discussion/xblock_discussion.py

@@ -169,8 +169,11 @@ class DiscussionXBlock(XBlock, StudioEditableXBlockMixin, XmlParserMixin):
 
         context = {
             'discussion_id': self.discussion_id,
+            'display_name': self.display_name if (self.display_name) else _("Discussion"),
             'user': self.django_user,
             'course_id': self.course_key,
+            'discussion_category': self.discussion_category,
+            'discussion_target': self.discussion_target,
             'can_create_thread': self.has_permission("create_thread"),
             'can_create_comment': self.has_permission("create_comment"),
             'can_create_subcomment': self.has_permission("create_sub_comment"),