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

fix: font/icon size and color (#152)

Browse Source
This commit is contained in:
Kristin Aoki
2022-11-30 15:31:39 -05:00
committed by GitHub
parent e70800543a
commit 6a2bafb402
22 changed files with 316 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
View File

@@ -23,7 +23,7 @@ export const CollapsibleFormWidget = ({
intl,
}) => (
<Collapsible.Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2"
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
defaultOpen
open={isError || undefined}
>

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
View File

@@ -47,7 +47,9 @@ exports[`HandoutWidget snapshots snapshots: renders as expected with default pro
id="authoring.videoeditor.handout.upload.addHandoutMessage"
/>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
View File

@@ -95,7 +95,13 @@ export const HandoutWidget = ({
) : (
<Stack gap={3}>
<FormattedMessage {...messages.addHandoutMessage} />
<Button iconBefore={FileUpload} onClick={fileInput.click} variant="link">
<Button
className="text-primary-500 font-weight-bold"
size="sm"
iconBefore={FileUpload}
onClick={fileInput.click}
variant="link"
>
<FormattedMessage {...messages.uploadButtonLabel} />
</Button>
</Stack>

6
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
View File

@@ -4,7 +4,7 @@ import {
FormattedMessage,
injectIntl,
} from '@edx/frontend-platform/i18n';
import { Form, Icon } from '@edx/paragon';
import { Icon } from '@edx/paragon';
import {
Attribution,
Copyright,
@@ -29,10 +29,10 @@ export const LicenseBlurb = ({
{details.noDerivatives ? <Icon src={Nd} /> : null}
{details.shareAlike ? <Icon src={Sa} /> : null}
{license === LicenseTypes.allRightsReserved
? <Form.Text><FormattedMessage {...messages.allRightsReservedIconsLabel} /></Form.Text>
? <div><FormattedMessage {...messages.allRightsReservedIconsLabel} /></div>
: null}
{license === LicenseTypes.creativeCommons
? <Form.Text><FormattedMessage {...messages.creativeCommonsIconsLabel} /></Form.Text>
? <div><FormattedMessage {...messages.creativeCommonsIconsLabel} /></div>
: null}
</div>
);

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
View File

@@ -32,15 +32,15 @@ export const LicenseDetails = ({
level !== LicenseLevel.course && details && license !== 'select' ? (
<div className="border-primary-100 border-top pb-3">
<Form.Group>
<Form.Label className="mt-3">
<div className="mt-3">
<FormattedMessage {...messages.detailsSubsectionTitle} />
</Form.Label>
</div>
{license === LicenseTypes.allRightsReserved
? (
<Form.Text>
<div>
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
</Form.Text>
</div>
)
: null}

7
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
View File

@@ -31,7 +31,12 @@ export const LicenseDisplay = ({
<Card.Section>{licenseDescription}</Card.Section>
</Card>
{level !== LicenseLevel.course ? (
<Hyperlink destination="https://creativecommons.org/about" target="_blank">
<Hyperlink
className="text-primary-500"
size="sm"
destination="https://creativecommons.org/about"
target="_blank"
>
<FormattedMessage {...messages.viewLicenseDetailsLabel} />
</Hyperlink>
) : null }

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
View File

@@ -60,7 +60,7 @@ export const LicenseSelector = ({
/>
) : null }
</Form.Row>
<Form.Text>{levelDescription}</Form.Text>
<div>{levelDescription}</div>
</Form.Group>
);
};

24
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
View File

@@ -7,13 +7,13 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
<Icon />
<Icon />
<Icon />
<Form.Text>
<div>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
id="authoring.videoeditor.license.creativeCommonsIcons.label"
/>
</Form.Text>
</div>
</div>
`;
@@ -24,13 +24,13 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
<Icon />
<Icon />
<Icon />
<Form.Text>
<div>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
id="authoring.videoeditor.license.creativeCommonsIcons.label"
/>
</Form.Text>
</div>
</div>
`;
@@ -41,13 +41,13 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
<Icon />
<Icon />
<Icon />
<Form.Text>
<div>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
id="authoring.videoeditor.license.creativeCommonsIcons.label"
/>
</Form.Text>
</div>
</div>
`;
@@ -57,13 +57,13 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
>
<Icon />
<Icon />
<Form.Text>
<div>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
id="authoring.videoeditor.license.creativeCommonsIcons.label"
/>
</Form.Text>
</div>
</div>
`;
@@ -72,13 +72,13 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected with default prop
className="d-flex flex-row flex-row"
>
<Icon />
<Form.Text>
<div>
<FormattedMessage
defaultMessage="All Rights Reserved"
description="Label for row of all rights reserved icons"
id="authoring.videoeditor.license.allRightsReservedIcons.label"
/>
</Form.Text>
</div>
</div>
`;
@@ -87,12 +87,12 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected with license equa
className="d-flex flex-row flex-row"
>
<Icon />
<Form.Text>
<div>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
id="authoring.videoeditor.license.creativeCommonsIcons.label"
/>
</Form.Text>
</div>
</div>
`;

16
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
View File

@@ -7,7 +7,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
className="border-primary-100 border-top pb-3"
>
<Form.Group>
<Form.Label
<div
className="mt-3"
>
<FormattedMessage
@@ -15,7 +15,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
description="Title for license detatils subsection"
id="authoring.videoeditor.license.detailsSubsection.title"
/>
</Form.Label>
</div>
<Stack
gap={3}
>
@@ -154,7 +154,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
className="border-primary-100 border-top pb-3"
>
<Form.Group>
<Form.Label
<div
className="mt-3"
>
<FormattedMessage
@@ -162,14 +162,14 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
description="Title for license detatils subsection"
id="authoring.videoeditor.license.detailsSubsection.title"
/>
</Form.Label>
<Form.Text>
</div>
<div>
<FormattedMessage
defaultMessage="You reserve all rights for your work."
description="All Rights Reserved section message"
id="authoring.videoeditor.license.allRightsReservedSectionMessage"
/>
</Form.Text>
</div>
</Form.Group>
</div>
`;
@@ -181,7 +181,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
className="border-primary-100 border-top pb-3"
>
<Form.Group>
<Form.Label
<div
className="mt-3"
>
<FormattedMessage
@@ -189,7 +189,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
description="Title for license detatils subsection"
id="authoring.videoeditor.license.detailsSubsection.title"
/>
</Form.Label>
</div>
</Form.Group>
</div>
`;

6
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
View File

@@ -54,7 +54,9 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
</Card.Section>
</Card>
<Hyperlink
className="text-primary-500"
destination="https://creativecommons.org/about"
size="sm"
target="_blank"
>
<FormattedMessage
@@ -92,7 +94,9 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
</Card.Section>
</Card>
<Hyperlink
className="text-primary-500"
destination="https://creativecommons.org/about"
size="sm"
target="_blank"
>
<FormattedMessage
@@ -132,7 +136,9 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
</Card.Section>
</Card>
<Hyperlink
className="text-primary-500"
destination="https://creativecommons.org/about"
size="sm"
target="_blank"
>
<FormattedMessage

16
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
View File

@@ -43,13 +43,13 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
tooltipPlacement="top"
/>
</Form.Row>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license is set specifically for this video"
description="Helper text for license type when choosing for a spcific video"
id="authoring.videoeditor.license.defaultLevelDescription.helperText"
/>
</Form.Text>
</div>
</Form.Group>
`;
@@ -84,13 +84,13 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
</option>
</Form.Control>
</Form.Row>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license currently set at the course level"
description="Helper text for license type when using course license"
id="authoring.videoeditor.license.courseLevelDescription.helperText"
/>
</Form.Text>
</div>
</Form.Group>
`;
@@ -137,13 +137,13 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
tooltipPlacement="top"
/>
</Form.Row>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license currently set at the library level"
description="Helper text for license type when using library license"
id="authoring.videoeditor.license.libraryLevelDescription.helperText"
/>
</Form.Text>
</div>
</Form.Group>
`;
@@ -178,12 +178,12 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
</option>
</Form.Control>
</Form.Row>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license currently set at the course level"
description="Helper text for license type when using course license"
id="authoring.videoeditor.license.courseLevelDescription.helperText"
/>
</Form.Text>
</div>
</Form.Group>
`;

14
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
View File

@@ -8,13 +8,13 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
details={Object {}}
license="all-rights-reserved"
/>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license currently set at the course level"
description="Helper text for license type when using course license"
id="authoring.videoeditor.license.courseLevelDescription.helperText"
/>
</Form.Text>
</div>
</div>
}
title="License"
@@ -47,7 +47,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
className="border-primary-100 border-bottom"
/>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -68,13 +70,13 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary t
details={Object {}}
license="all-rights-reserved"
/>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license currently set at the library level"
description="Helper text for license type when using library license"
id="authoring.videoeditor.license.libraryLevelDescription.helperText"
/>
</Form.Text>
</div>
</div>
}
title="License"
@@ -115,13 +117,13 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType
details={Object {}}
license="all-rights-reserved"
/>
<Form.Text>
<div>
<FormattedMessage
defaultMessage="This license is set specifically for this video"
description="Helper text for license type when choosing for a spcific video"
id="authoring.videoeditor.license.defaultLevelDescription.helperText"
/>
</Form.Text>
</div>
</div>
}
title="License"

5
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
View File

@@ -8,7 +8,6 @@ import {
} from '@edx/frontend-platform/i18n';
import {
Button,
Form,
Stack,
} from '@edx/paragon';
import { Add } from '@edx/paragon/icons';
@@ -49,7 +48,7 @@ export const LicenseWidget = ({
subtitle={(
<div>
<LicenseBlurb license={license} details={details} />
<Form.Text>{levelDescription}</Form.Text>
<div>{levelDescription}</div>
</div>
)}
title={intl.formatMessage(messages.title)}
@@ -72,6 +71,8 @@ export const LicenseWidget = ({
<>
<div className="border-primary-100 border-bottom" />
<Button
className="text-primary-500 font-weight-bold"
size="sm"
iconBefore={Add}
variant="link"
onClick={() => updateField({ licenseType: 'select', licenseDetails: {} })}

5
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
View File

@@ -70,7 +70,6 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoTyp
thumbnail={true}
/>
<IconButtonWithTooltip
className="d-inline-block"
iconAs="Icon"
onClick={[Function]}
tooltipContent="Delete"
@@ -133,8 +132,10 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoTyp
}
/>
<Button
className="text-primary-500 font-weight-bold"
disabled={false}
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -241,8 +242,10 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with default p
}
/>
<Button
className="text-primary-500 font-weight-bold"
disabled={true}
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage

10
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
View File

@@ -89,7 +89,6 @@ export const ThumbnailWidget = ({
/>
{ (allowThumbnailUpload && isEdxVideo) ? (
<IconButtonWithTooltip
className="d-inline-block"
tooltipPlacement="top"
tooltipContent={intl.formatMessage(messages.deleteThumbnail)}
iconAs={Icon}
@@ -107,7 +106,14 @@ export const ThumbnailWidget = ({
<FormattedMessage {...messages.aspectRequirements} />
</div>
<FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedImgKeys).join()} />
<Button iconBefore={FileUpload} onClick={fileInput.click} variant="link" disabled={!isEdxVideo}>
<Button
className="text-primary-500 font-weight-bold"
size="sm"
iconBefore={FileUpload}
onClick={fileInput.click}
variant="link"
disabled={!isEdxVideo}
>
<FormattedMessage {...messages.uploadButtonLabel} />
</Button>
</Stack>

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
View File

@@ -78,7 +78,6 @@ export const Transcript = ({
/>
{ language === '' ? (
<IconButton
className="d-inline-block"
iconAs={Icon}
src={Delete}
onClick={() => launchDeleteConfirmation()}

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
View File

@@ -24,7 +24,6 @@ exports[`Transcript Component component component snapshots: renders as expected
title="sOmenUmBer"
/>
<IconButton
className="d-inline-block"
iconAs="Icon"
onClick={[Function]}
/>

217
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
View File

@@ -46,21 +46,40 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
className="decorative-control-label"
onChange={[Function]}
>
<Form.Label>
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Allow transcript downloads"
description="Label for allow transcript downloads checkbox"
id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
alt="Learners will see a link to download the transcript below the video."
iconAs="Icon"
<OverLayTrigger
key="top"
tooltipContent="Learners will see a link to download the transcript below the video."
tooltipPlacement="top"
/>
overlay={
<ToolTip
id="tooltip-top"
>
<FormattedMessage
defaultMessage="Learners will see a link to download the transcript below the video."
description="Message for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
/>
</ToolTip>
}
placement="top"
>
<Icon
style={
Object {
"height": "16px",
"width": "16px",
}
}
/>
</OverLayTrigger>
<ActionRow.Spacer />
</ActionRow>
<Form.Checkbox
@@ -68,15 +87,15 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
className="mt-4.5 decorative-control-label"
onChange={[Function]}
>
<Form.Label
size="sm"
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Show transcript in the video player by default"
description="Label for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
</Form.Group>
<Stack
@@ -84,7 +103,9 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
gap={3}
>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -148,21 +169,40 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
className="decorative-control-label"
onChange={[Function]}
>
<Form.Label>
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Allow transcript downloads"
description="Label for allow transcript downloads checkbox"
id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
alt="Learners will see a link to download the transcript below the video."
iconAs="Icon"
<OverLayTrigger
key="top"
tooltipContent="Learners will see a link to download the transcript below the video."
tooltipPlacement="top"
/>
overlay={
<ToolTip
id="tooltip-top"
>
<FormattedMessage
defaultMessage="Learners will see a link to download the transcript below the video."
description="Message for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
/>
</ToolTip>
}
placement="top"
>
<Icon
style={
Object {
"height": "16px",
"width": "16px",
}
}
/>
</OverLayTrigger>
<ActionRow.Spacer />
</ActionRow>
<Form.Checkbox
@@ -170,15 +210,15 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
className="mt-4.5 decorative-control-label"
onChange={[Function]}
>
<Form.Label
size="sm"
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Show transcript in the video player by default"
description="Label for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
</Form.Group>
<Stack
@@ -186,7 +226,9 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
gap={3}
>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -246,21 +288,40 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
className="decorative-control-label"
onChange={[Function]}
>
<Form.Label>
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Allow transcript downloads"
description="Label for allow transcript downloads checkbox"
id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
alt="Learners will see a link to download the transcript below the video."
iconAs="Icon"
<OverLayTrigger
key="top"
tooltipContent="Learners will see a link to download the transcript below the video."
tooltipPlacement="top"
/>
overlay={
<ToolTip
id="tooltip-top"
>
<FormattedMessage
defaultMessage="Learners will see a link to download the transcript below the video."
description="Message for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
/>
</ToolTip>
}
placement="top"
>
<Icon
style={
Object {
"height": "16px",
"width": "16px",
}
}
/>
</OverLayTrigger>
<ActionRow.Spacer />
</ActionRow>
<Form.Checkbox
@@ -268,15 +329,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
className="mt-4.5 decorative-control-label"
onChange={[Function]}
>
<Form.Label
size="sm"
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Show transcript in the video player by default"
description="Label for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
</Form.Group>
<Stack
@@ -284,7 +345,9 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
gap={3}
>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -348,7 +411,9 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
gap={3}
>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -408,21 +473,40 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
className="decorative-control-label"
onChange={[Function]}
>
<Form.Label>
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Allow transcript downloads"
description="Label for allow transcript downloads checkbox"
id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
alt="Learners will see a link to download the transcript below the video."
iconAs="Icon"
<OverLayTrigger
key="top"
tooltipContent="Learners will see a link to download the transcript below the video."
tooltipPlacement="top"
/>
overlay={
<ToolTip
id="tooltip-top"
>
<FormattedMessage
defaultMessage="Learners will see a link to download the transcript below the video."
description="Message for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
/>
</ToolTip>
}
placement="top"
>
<Icon
style={
Object {
"height": "16px",
"width": "16px",
}
}
/>
</OverLayTrigger>
<ActionRow.Spacer />
</ActionRow>
<Form.Checkbox
@@ -430,15 +514,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
className="mt-4.5 decorative-control-label"
onChange={[Function]}
>
<Form.Label
size="sm"
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Show transcript in the video player by default"
description="Label for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
</Form.Group>
<Stack
@@ -446,7 +530,9 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
gap={3}
>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
@@ -506,21 +592,40 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
className="decorative-control-label"
onChange={[Function]}
>
<Form.Label>
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Allow transcript downloads"
description="Label for allow transcript downloads checkbox"
id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
alt="Learners will see a link to download the transcript below the video."
iconAs="Icon"
<OverLayTrigger
key="top"
tooltipContent="Learners will see a link to download the transcript below the video."
tooltipPlacement="top"
/>
overlay={
<ToolTip
id="tooltip-top"
>
<FormattedMessage
defaultMessage="Learners will see a link to download the transcript below the video."
description="Message for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
/>
</ToolTip>
}
placement="top"
>
<Icon
style={
Object {
"height": "16px",
"width": "16px",
}
}
/>
</OverLayTrigger>
<ActionRow.Spacer />
</ActionRow>
<Form.Checkbox
@@ -528,15 +633,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
className="mt-4.5 decorative-control-label"
onChange={[Function]}
>
<Form.Label
size="sm"
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Show transcript in the video player by default"
description="Label for show by default checkbox"
id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
</Form.Group>
<Stack
@@ -544,7 +649,9 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
gap={3}
>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage

30
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
View File

@@ -12,7 +12,8 @@ import {
Stack,
Icon,
Alert,
IconButtonWithTooltip,
OverlayTrigger,
Tooltip,
ActionRow,
} from '@edx/paragon';
import { Add, Info } from '@edx/paragon/icons';
@@ -122,18 +123,21 @@ export const TranscriptWidget = ({
className="decorative-control-label"
onChange={(e) => updateField({ allowTranscriptDownloads: e.target.checked })}
>
<Form.Label>
<div className="small text-gray-700">
<FormattedMessage {...messages.allowDownloadCheckboxLabel} />
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
<OverlayTrigger
key="top"
tooltipPlacement="top"
tooltipContent={intl.formatMessage(messages.tooltipMessage)}
src={Info}
iconAs={Icon}
alt={intl.formatMessage(messages.tooltipMessage)}
/>
placement="top"
overlay={(
<Tooltip id="tooltip-top">
<FormattedMessage {...messages.tooltipMessage} />
</Tooltip>
)}
>
<Icon src={Info} style={{ height: '16px', width: '16px' }} />
</OverlayTrigger>
<ActionRow.Spacer />
</ActionRow>
<Form.Checkbox
@@ -141,9 +145,9 @@ export const TranscriptWidget = ({
className="mt-4.5 decorative-control-label"
onChange={(e) => updateField({ showTranscriptByDefault: e.target.checked })}
>
<Form.Label size="sm">
<div className="small text-gray-700">
<FormattedMessage {...messages.showByDefaultCheckboxLabel} />
</Form.Label>
</div>
</Form.Checkbox>
</Form.Group>
) : (
@@ -157,6 +161,8 @@ export const TranscriptWidget = ({
<Stack gap={3} className="border-primary-100 border-top">
<Button
className="text-primary-500 font-weight-bold"
size="sm"
iconBefore={Add}
variant="link"
onClick={() => module.hooks.onAddNewTranscript({ transcripts, updateField })}

47
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
View File

@@ -15,7 +15,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
value=""
/>
</div>
<Form.Label
<div
className="mt-3"
>
<FormattedMessage
@@ -23,8 +23,8 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
description="Title for the fallback videos section"
id="authoring.videoeditor.videoSource.fallbackVideo.title"
/>
</Form.Label>
<Form.Text>
</div>
<div>
<FormattedMessage
defaultMessage="To be sure all learners can access the video, edX
recommends providing additional videos in both .mp4 and
@@ -33,7 +33,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
description="Test explaining reason for fallback videos"
id="authoring.videoeditor.videoSource.fallbackVideo.message"
/>
</Form.Text>
</div>
<Form.Row
className="mt-4"
>
@@ -57,30 +57,49 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
className="decorative-control-label"
onChange={[MockFunction]}
>
<Form.Label>
<div
className="small text-gray-700"
>
<FormattedMessage
defaultMessage="Allow video downloads"
description="Label for allow video downloads checkbox"
id="authoring.videoeditor.videoSource.allowDownloadCheckboxLabel"
/>
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
alt="Allow learners to download versions of this video in
different formats if they cannot use the edX video player or do not have
access to YouTube."
iconAs="Icon"
<OverLayTrigger
key="top"
tooltipContent="Allow learners to download versions of this video in
overlay={
<ToolTip
id="tooltip-top"
>
<FormattedMessage
defaultMessage="Allow learners to download versions of this video in
different formats if they cannot use the edX video player or do not have
access to YouTube."
tooltipPlacement="top"
/>
description="Message for allow video downloads checkbox"
id="authoring.videoeditor.videoSource.fallbackVideo.allowDownloadTooltipMessage"
/>
</ToolTip>
}
placement="top"
>
<Icon
style={
Object {
"height": "16px",
"width": "16px",
}
}
/>
</OverLayTrigger>
<ActionRow.Spacer />
</ActionRow>
</Form.Group>
<Button
className="text-primary-500 font-weight-bold"
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage

33
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
View File

@@ -8,6 +8,8 @@ import {
ActionRow,
Icon,
Button,
Tooltip,
OverlayTrigger,
} from '@edx/paragon';
import { Delete, Info, Add } from '@edx/paragon/icons';
import {
@@ -61,12 +63,12 @@ export const VideoSourceWidget = ({
value={source.local}
/>
</div>
<Form.Label className="mt-3">
<div className="mt-3">
<FormattedMessage {...messages.fallbackVideoTitle} />
</Form.Label>
<Form.Text>
</div>
<div>
<FormattedMessage {...messages.fallbackVideoMessage} />
</Form.Text>
</div>
{fallbackVideos.formValue.map((videoUrl, index) => (
<Form.Row className="mt-4">
<Form.Control
@@ -92,22 +94,27 @@ export const VideoSourceWidget = ({
className="decorative-control-label"
onChange={allowDownload.onCheckedChange}
>
<Form.Label>
<div className="small text-gray-700">
<FormattedMessage {...messages.allowDownloadCheckboxLabel} />
</Form.Label>
</div>
</Form.Checkbox>
<IconButtonWithTooltip
<OverlayTrigger
key="top"
tooltipPlacement="top"
tooltipContent={intl.formatMessage(messages.tooltipMessage)}
src={Info}
iconAs={Icon}
alt={intl.formatMessage(messages.tooltipMessage)}
/>
placement="top"
overlay={(
<Tooltip id="tooltip-top">
<FormattedMessage {...messages.tooltipMessage} />
</Tooltip>
)}
>
<Icon src={Info} style={{ height: '16px', width: '16px' }} />
</OverlayTrigger>
<ActionRow.Spacer />
</ActionRow>
</Form.Group>
<Button
className="text-primary-500 font-weight-bold"
size="sm"
iconBefore={Add}
variant="link"
onClick={() => updateField({ fallbackVideos: [...fallbackVideos.formValue, ''] })}

4
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
View File

@@ -2,7 +2,7 @@
exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2"
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
defaultOpen={true}
>
<Trigger
@@ -67,7 +67,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
exports[`CollapsibleFormWidget render snapshots: renders with open={true} when there is error 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2"
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
defaultOpen={true}
open={true}
>