Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Section Highlights Studio UI: Encircle number of highlights

Browse Source
This commit is contained in:
Nimisha Asthagiri
2017-10-30 17:11:42 -04:00
parent dbad9fbcd4
commit 30dfa98bf0
3 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cms/static/js/spec/views/pages/course_outline_spec.js
View File

@@ -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() {

18
cms/static/sass/views/_outline.scss
View File

@@ -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 {

15
cms/templates/js/course-outline.underscore
View File

@@ -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">