fix: add support for legacy theme static for the LmsHtmlFragment

fix: RTL bug on progress tab (#804 )
feat: add rtl support for chart on progress tab
2022-01-18 18:19:33 +00:00 · 2022-01-18 18:19:06 +00:00 · 2022-01-18 18:19:06 +00:00 · 2022-01-14 09:34:09 +00:00
8 changed files with 42 additions and 12 deletions
--- a/.env
+++ b/.env
@@ -20,6 +20,7 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
+LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
--- a/.env.development
+++ b/.env.development
@@ -19,6 +19,7 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=2000
--- a/.env.test
+++ b/.env.test
@@ -19,6 +19,7 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+LEGACY_THEME_NAME=''
 MARKETING_SITE_BASE_URL='http://localhost:18000'
 ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=2000
--- a/src/course-home/outline-tab/LmsHtmlFragment.jsx
+++ b/src/course-home/outline-tab/LmsHtmlFragment.jsx
@@ -13,7 +13,7 @@ export default function LmsHtmlFragment({
    <html>
      <head>
        <base href="${getConfig().LMS_BASE_URL}" target="_parent">
-        <link rel="stylesheet" href="/static/css/bootstrap/lms-main.css">
+        <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
        <link rel="stylesheet" type="text/css" href="${getConfig().BASE_URL}/src/course-home/outline-tab/LmsHtmlFragment.css">
      </head>
      <body class="${className}">${html}</body>
--- a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';

-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@edx/paragon';

 import { useModel } from '../../../../generic/model-store';
@@ -23,6 +25,14 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {

  const currentGrade = Number((visiblePercent * 100).toFixed(0));

+  let currentGradeDirection = currentGrade < 50 ? '' : '-';
+
+  const isLocaleRtl = isRtl(getLocale());
+
+  if (isLocaleRtl) {
+    currentGradeDirection = currentGrade < 50 ? '-' : '';
+  }
+
  return (
    <>
      <OverlayTrigger
@@ -37,16 +47,16 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
        )}
      >
        <g>
-          <circle cx={`${Math.min(...[currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
-          <rect className="grade-bar__divider" x={`${Math.min(...[currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
+          <circle cx={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
+          <rect className="grade-bar__divider" x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
        </g>
      </OverlayTrigger>
      <text
        className="x-small"
        textAnchor={currentGrade < 50 ? 'start' : 'end'}
-        x={`${Math.min(...[currentGrade, 100])}%`}
+        x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`}
        y="20px"
-        style={{ transform: `translateX(${currentGrade < 50 ? '' : '-'}3.4em)` }}
+        style={{ transform: `translateX(${currentGradeDirection}3.4em)` }}
      >
        {intl.formatMessage(messages.currentGradeLabel)}
      </text>
--- a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -1,12 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@edx/paragon';

 import messages from '../messages';

 function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
+  const isLocaleRtl = isRtl(getLocale());
+
+  let passingGradeDirection = passingGrade < 50 ? '' : '-';
+
+  if (isLocaleRtl) {
+    passingGradeDirection = passingGrade < 50 ? '-' : '';
+  }
+
  return (
    <>
      <OverlayTrigger
@@ -21,17 +31,17 @@ function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
        )}
      >
        <g>
-          <circle cx={`${passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
-          <circle className="grade-bar--passing" cx={`${passingGrade}%`} cy="50%" r="4.5" />
+          <circle cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
+          <circle className="grade-bar--passing" cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="4.5" />
        </g>
      </OverlayTrigger>

      <text
        className="x-small"
        textAnchor={passingGrade < 50 ? 'start' : 'end'}
-        x={`${passingGrade}%`}
+        x={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`}
        y="90px"
-        style={{ transform: `translateX(${passingGrade < 50 ? '' : '-'}3.4em)` }}
+        style={{ transform: `translateX(${passingGradeDirection}3.4em)` }}
      >
        {intl.formatMessage(messages.passingGradeLabel)}
      </text>
--- a/src/courseware/data/thunks.js
+++ b/src/courseware/data/thunks.js
@@ -237,7 +237,13 @@ export function fetchSequence(sequenceId) {
        dispatch(fetchSequenceSuccess({ sequenceId }));
      }
    } catch (error) {
-      logError(error);
+      // Some errors are expected - for example, CoursewareContainer may request sequence metadata for a unit and rely
+      // on the request failing to notice that it actually does have a unit (mostly so it doesn't have to know anything
+      // about the opaque key structure). In such cases, the backend gives us a 422.
+      const isExpected = error.response && error.response.status === 422;
+      if (!isExpected) {
+        logError(error);
+      }
      dispatch(fetchSequenceFailure({ sequenceId }));
    }
  };
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -108,6 +108,7 @@ initialize({
        TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL || null,
        TWITTER_HASHTAG: process.env.TWITTER_HASHTAG || null,
        TWITTER_URL: process.env.TWITTER_URL || null,
+        LEGACY_THEME_NAME: process.env.LEGACY_THEME_NAME || null,
      }, 'LearnerAppConfig');
    },
  },
Author	SHA1	Message	Date
ihor-romaniuk	eac884bd59	fix: add support for legacy theme static for the LmsHtmlFragment	2022-01-18 18:19:33 +00:00
Carla Duarte	2be382d01f	fix: RTL bug on progress tab (#804 )	2022-01-18 18:19:06 +00:00
ihor-romaniuk	c828a43d0e	feat: add rtl support for chart on progress tab	2022-01-18 18:19:06 +00:00
Michael Terry	1eca5522cd	fix: don't log errors when we ask for sequence metadata for units (#790 )	2022-01-14 09:34:09 +00:00