Merge pull request #16390 from edx/naa/encircle-numbered-highlights

Section Highlights UI: Encircle numbered highlights in Studio

cms/static/js/spec/views/pages/course_outline_spec.js

@@ -532,7 +532,7 @@ define(['jquery', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers', 'common/j
             describe('Section Highlights', function() {
                 var createCourse, createCourseWithHighlights, createCourseWithHighlightsDisabled, mockHighlightValues,
                     highlightsLink, highlightInputs, openHighlights, saveHighlights, setHighlights,
-                    expectHighlightLinkTextToBe, expectHighlightsToBe, expectServerHandshakeWithHighlights,
+                    expectHighlightLinkNumberToBe, expectHighlightsToBe, expectServerHandshakeWithHighlights,
                     expectHighlightsToUpdate,
                     maxNumHighlights = 5;
 
@@ -591,8 +591,10 @@ define(['jquery', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers', 'common/j
                     }
                 };
 
-                expectHighlightLinkTextToBe = function(expectedValue) {
-                    expect(highlightsLink()).toContainText(expectedValue);
+                expectHighlightLinkNumberToBe = function(expectedNumber) {
+                    var link = highlightsLink();
+                    expect(link).toContainText('Section Highlights');
+                    expect(link.find('.number-highlights')).toHaveHtml(expectedNumber);
                 };
 
                 expectHighlightsToBe = function(expectedHighlights) {
@@ -645,13 +647,13 @@ define(['jquery', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers', 'common/j
 
                 it('displays link when no highlights exist', function() {
                     createCourseWithHighlights([]);
-                    expectHighlightLinkTextToBe('Enter Section Highlights');
+                    expectHighlightLinkNumberToBe(0);
                 });
 
                 it('displays link when highlights exist', function() {
                     var highlights = mockHighlightValues(2);
                     createCourseWithHighlights(highlights);
-                    expectHighlightLinkTextToBe('Section Highlights: 2 entered');
+                    expectHighlightLinkNumberToBe(2);
                 });
 
                 it('can view when no highlights exist', function() {

cms/static/sass/views/_outline.scss

@@ -640,10 +640,24 @@
     color: theme-color("primary");
   }
 
+  .number-highlights {
+    background: theme-color("primary");
+    border-radius: 50%;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    color: $white;
+    display: inline-block;
+    font-weight: bold;
+    line-height: 18px;
+    margin-right: 2px;
+    text-align: center;
+    width: 18px;
+  }
+
   .highlight-input-text {
     width: 100%;
-    margin-bottom: 5px;
-    margin-top: 5px;
+    margin-bottom: ($baseline/4);
+    margin-top: ($baseline/4);
   }
 
   .highlights-description {

cms/templates/js/course-outline.underscore

@@ -201,20 +201,13 @@ if (is_proctored_exam) {
               </div>
             <% } %>
             <% if (xblockInfo.get('highlights_enabled') && course.get('self_paced') && xblockInfo.isChapter()) { %>
-              <div class="block-highlights">
-                    <span class="sr block-highlights-label"><%- gettext('Highlights:') %></span>
+                <div class="block-highlights">
                     <% var number_of_highlights = (xblockInfo.get('highlights') || []).length; %>
-                    <% if (number_of_highlights > 0) { %>
                         <span class="block-highlights-value highlights-button action-button">
-                            <%- edx.StringUtils.interpolate(
-                                gettext('Section Highlights: {number_of_highlights} entered'),
-                                {number_of_highlights: number_of_highlights}
-                            ) %>
+                            <span class="number-highlights"><%- number_of_highlights %></span>
+                            <%- gettext('Section Highlights') %>
                         </span>
-                    <% } else { %>
-                        <span class="block-highlights-value highlights-button action-button"><%- gettext('Enter Section Highlights') %></span>
-                    <% } %>
-              </div>
+                </div>
             <% } %>
             <% if (xblockInfo.get('is_time_limited')) { %>
                 <div class="status-timed-proctored-exam">