Merge pull request #14448 from edx/alisan/discussion-luv-TNL-6173-6176

Discussion loading indicator and user role style change, show hide button focus, and copy change to discussion filter

common/static/common/js/discussion/utils.js

@@ -127,7 +127,8 @@
 
         DiscussionUtil.showLoadingIndicator = function(element, takeFocus) {
             var animElem = edx.HtmlUtils.joinHtml(
-                edx.HtmlUtils.HTML("<div class='loading-animation' tabindex='0'><span class='sr'>"),
+                edx.HtmlUtils.HTML("<div class='loading-animation' tabindex='0'>"),
+                edx.HtmlUtils.HTML("<span class='icon fa fa-spinner' aria-hidden='true'></span><span class='sr'>"),
                 gettext('Loading content'),
                 edx.HtmlUtils.HTML('</span></div>')
             );

common/static/common/js/discussion/views/discussion_inline_view.js

@@ -193,6 +193,7 @@
                     });
                 }
             }
+            this.toggleDiscussionBtn.focus();
         },
 
         hideDiscussion: function() {

common/static/common/templates/discussion/post-user-display.underscore

 <% if (username) { %>
 <a href="<%- user_url %>" class="username"><%- username %></a>
     <% if (is_community_ta) { %>
-    <span class="user-label-community-ta"><%- gettext("Community TA") %></span>
+    <span class="user-label-community-ta"><%- gettext("(Community TA)") %></span>
     <% } else if (is_staff) { %>
-    <span class="user-label-staff"><%- gettext("Staff") %></span>
+    <span class="user-label-staff"><%- gettext("(Staff)") %></span>
     <% } %>
 <% } else { %>
     <%- gettext('anonymous') %>

lms/static/sass/base/_base.scss

@@ -183,12 +183,9 @@ span.edx {
 }
 
 .loading-animation {
-  position: absolute;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin-left: -($baseline/2);
-  background: url('#{$static-path}/images/spinner.gif') no-repeat;
+  @include animation(fa-spin 2s infinite linear);
+  text-align: center;
+  width: 100%;
 }
 
 mark {

lms/static/sass/discussion/_discussion.scss

@@ -86,9 +86,6 @@
     margin-bottom: $baseline;
   }
 
-  .loading-animation {
-    background-image: url('#{$static-path}/images/spinner.gif');
-  }
 }
 
 .discussion-show {

lms/static/sass/discussion/_mixins.scss

@@ -87,16 +87,3 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-
-@mixin forum-user-label($color) {
-  @include margin-left($baseline/4);
-  @extend %t-weight5;
-  font-size: $forum-small-font-size;
-  vertical-align: middle;
-  border-radius: $forum-border-radius;
-  padding: 0 ($baseline/5);
-  background: $color;
-  font-style: normal;
-  color: white;
-  white-space: nowrap;
-}

lms/static/sass/discussion/elements/_actions.scss

@@ -135,6 +135,7 @@
       color: $gray-l1;
 
       .icon {
+        @include margin-right(0);
         vertical-align: middle;
       }
     }

lms/static/sass/discussion/elements/_labels.scss

@@ -42,13 +42,13 @@
     }
   }
 
-  .user-label-staff {
-    @include forum-user-label($forum-color-staff);
-  }
-
+  .user-label-staff,
   .user-label-community-ta {
-    @include forum-user-label($forum-color-community-ta);
+    color: $forum-color-copy-light;
+    font-size: $forum-small-font-size;
+    white-space: nowrap;
   }
+
 }
 
 // Make post labels tighter when shown inside the left nav

lms/templates/discussion/_thread_list_template.html

@@ -8,12 +8,12 @@
                 <span class="sr">${_("Filter:")}</span>
                 <select class="forum-nav-filter-main-control">
                     ## Translators: This is a menu option for showing all forum threads unfiltered
-                    <option value="all">${_("Show all")}</option>
+                    <option value="all">${_("Show all posts")}</option>
                     ## Translators: This is a menu option for showing only unread forum threads
-                    <option value="unread">${_("Unread")}</option>
+                    <option value="unread">${_("Unread posts")}</option>
                     ## Translators: This is a menu option for showing only unanswered forum
                     ## question threads
-                    <option value="unanswered">${_("Unanswered")}</option>
+                    <option value="unanswered">${_("Unanswered posts")}</option>
                     %if flag_moderator:
                         ## Translators: This is a menu option for showing only forum threads flagged
                         ## for abuse

lms/templates/student_account/finish_auth.html

@@ -14,6 +14,6 @@
     <div class="finish-auth-inner">
         <h1>${_('Please wait')}</h1>
 
-        <div class="loading-animation"></div>
+        <div class="loading-animation"><span class='icon fa fa-spinner' aria-hidden='true'></span></div>
     </div>
 </div>