Andal.LND/frontend-app-learning
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: RTL bug on progress tab (#804)

Browse Source
This commit is contained in:
Carla Duarte
2022-01-14 15:09:11 -05:00
committed by Sofiane Bébert
parent c828a43d0e
commit 2be382d01f
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
View File

@@ -2,7 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { injectIntl, intlShape, isRtl } from '@edx/frontend-platform/i18n'; import {
getLocale, injectIntl, intlShape, isRtl,
} from '@edx/frontend-platform/i18n';
import { OverlayTrigger, Popover } from '@edx/paragon'; import { OverlayTrigger, Popover } from '@edx/paragon';
import { useModel } from '../../../../generic/model-store'; import { useModel } from '../../../../generic/model-store';
@@ -25,7 +27,9 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
let currentGradeDirection = currentGrade < 50 ? '' : '-'; let currentGradeDirection = currentGrade < 50 ? '' : '-';
if (isRtl) { const isLocaleRtl = isRtl(getLocale());
if (isLocaleRtl) {
currentGradeDirection = currentGrade < 50 ? '-' : ''; currentGradeDirection = currentGrade < 50 ? '-' : '';
} }
@@ -43,14 +47,14 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
)} )}
> >
<g> <g>
<circle cx={`${Math.min(...[isRtl ? 100 - currentGrade : currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" /> <circle cx={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
<rect className="grade-bar__divider" x={`${Math.min(...[isRtl ? 100 - currentGrade : currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} /> <rect className="grade-bar__divider" x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
</g> </g>
</OverlayTrigger> </OverlayTrigger>
<text <text
className="x-small" className="x-small"
textAnchor={currentGrade < 50 ? 'start' : 'end'} textAnchor={currentGrade < 50 ? 'start' : 'end'}
x={`${Math.min(...[isRtl ? 100 - currentGrade : currentGrade, 100])}%`} x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`}
y="20px" y="20px"
style={{ transform: `translateX(${currentGradeDirection}3.4em)` }} style={{ transform: `translateX(${currentGradeDirection}3.4em)` }}
> >

14
src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
View File

@@ -1,15 +1,19 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { injectIntl, intlShape, isRtl } from '@edx/frontend-platform/i18n'; import {
getLocale, injectIntl, intlShape, isRtl,
} from '@edx/frontend-platform/i18n';
import { OverlayTrigger, Popover } from '@edx/paragon'; import { OverlayTrigger, Popover } from '@edx/paragon';
import messages from '../messages'; import messages from '../messages';
function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) { function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
const isLocaleRtl = isRtl(getLocale());
let passingGradeDirection = passingGrade < 50 ? '' : '-'; let passingGradeDirection = passingGrade < 50 ? '' : '-';
if (isRtl) { if (isLocaleRtl) {
passingGradeDirection = passingGrade < 50 ? '-' : ''; passingGradeDirection = passingGrade < 50 ? '-' : '';
} }
@@ -27,15 +31,15 @@ function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
)} )}
> >
<g> <g>
<circle cx={`${isRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="8.5" fill="transparent" /> <circle cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
<circle className="grade-bar--passing" cx={`${isRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="4.5" /> <circle className="grade-bar--passing" cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="4.5" />
</g> </g>
</OverlayTrigger> </OverlayTrigger>
<text <text
className="x-small" className="x-small"
textAnchor={passingGrade < 50 ? 'start' : 'end'} textAnchor={passingGrade < 50 ? 'start' : 'end'}
x={`${isRtl ? 100 - passingGrade : passingGrade}%`} x={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`}
y="90px" y="90px"
style={{ transform: `translateX(${passingGradeDirection}3.4em)` }} style={{ transform: `translateX(${passingGradeDirection}3.4em)` }}
> >