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

fix: left and right alignment (#167)

Browse Source
This commit is contained in:
Kristin Aoki
2022-12-13 15:04:53 -05:00
committed by GitHub
parent 128b112af7
commit f85d86f796
12 changed files with 102 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,32 +24,32 @@ export const CollapsibleFormWidget = ({
intl,
}) => (
<Collapsible.Advanced
className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
defaultOpen
open={isError || undefined}
>
<Collapsible.Trigger
className="collapsible-trigger d-flex border-0 align-items-center"
className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
style={{ justifyContent: 'unset' }}
>
<Collapsible.Visible whenClosed className="p-0 pb-3">
<div className="d-flex flex-column flex-grow-1">
<div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
{subtitle ? <div className={`${fontSize} mt-3`}>{subtitle}</div> : null}
{subtitle ? <div className={`${fontSize} mb-4 mt-3`}>{subtitle}</div> : <div className="mb-4" />}
</div>
<div className="d-flex flex-row align-self-start">
{isError && <Icon className="alert-icon" src={Info} />}
<IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
</div>
</Collapsible.Visible>
<Collapsible.Visible whenOpen className="p-0">
<Collapsible.Visible whenOpen>
<div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
<div className="align-self-start">
<IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
</div>
</Collapsible.Visible>
</Collapsible.Trigger>
<Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize}`}>
<Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize} pb-4`}>
{children}
</Collapsible.Body>
</Collapsible.Advanced>

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

@@ -31,16 +31,16 @@ export const LicenseDetails = ({
updateField,
}) => (
level !== LicenseLevel.course && details && license !== 'select' ? (
<div className="x-small border-primary-100 border-bottom m-0">
<div className="x-small border-primary-100 border-bottom m-0 pr-1">
<Form.Group className="pb-2">
<div className="mb-3">
<FormattedMessage {...messages.detailsSubsectionTitle} />
</div>
{license === LicenseTypes.allRightsReserved ? (
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
<div className="mt-2">
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
</div>
) : null}
{license === LicenseTypes.creativeCommons
? (
<Stack gap={4}>

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

@@ -7,6 +7,7 @@ import {
intlShape,
} from '@edx/frontend-platform/i18n';
import {
ActionRow,
Form,
Icon,
IconButtonWithTooltip,
@@ -31,10 +32,11 @@ export const LicenseSelector = ({
const onLicenseChange = hooks.onSelectLicense({ dispatch: useDispatch() });
const ref = React.useRef();
return (
<Form.Group className="mx-2 my-0">
<Form.Row className="flex-nowrap">
<>
<ActionRow>
<Form.Control
as="select"
className="w-100 m-0 p-0"
ref={ref}
defaultValue={license}
disabled={level === LicenseLevel.course}
@@ -48,21 +50,24 @@ export const LicenseSelector = ({
})}
</Form.Control>
{level !== LicenseLevel.course ? (
<IconButtonWithTooltip
iconAs={Icon}
src={Delete}
onClick={() => {
ref.current.value = courseLicenseType;
updateField({ licenseType: '', licenseDetails: {} });
}}
tooltipPlacement="top"
tooltipContent={<FormattedMessage {...messages.deleteLicenseSelection} />}
/>
<>
<ActionRow.Spacer />
<IconButtonWithTooltip
iconAs={Icon}
src={Delete}
onClick={() => {
ref.current.value = courseLicenseType;
updateField({ licenseType: '', licenseDetails: {} });
}}
tooltipPlacement="top"
tooltipContent={<FormattedMessage {...messages.deleteLicenseSelection} />}
/>
</>
) : null }
</Form.Row>
</ActionRow>
<div className="x-small mt-3">{levelDescription}</div>
{license === LicenseTypes.select ? null : <div className="border-primary-100 mt-4 border-bottom" />}
</Form.Group>
{license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
</>
);
};

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

@@ -4,7 +4,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with default pr
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
<div
className="x-small border-primary-100 border-bottom m-0"
className="x-small border-primary-100 border-bottom m-0 pr-1"
>
<Form.Group
className="pb-2"
@@ -152,7 +152,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to all rights reserved 1`] = `
<div
className="x-small border-primary-100 border-bottom m-0"
className="x-small border-primary-100 border-bottom m-0 pr-1"
>
<Form.Group
className="pb-2"
@@ -166,11 +166,15 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
id="authoring.videoeditor.license.detailsSubsection.title"
/>
</div>
<FormattedMessage
defaultMessage="You reserve all rights for your work."
description="All Rights Reserved section message"
id="authoring.videoeditor.license.allRightsReservedSectionMessage"
/>
<div
className="mt-2"
>
<FormattedMessage
defaultMessage="You reserve all rights for your work."
description="All Rights Reserved section message"
id="authoring.videoeditor.license.allRightsReservedSectionMessage"
/>
</div>
</Form.Group>
</div>
`;
@@ -179,7 +183,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = `
<div
className="x-small border-primary-100 border-bottom m-0"
className="x-small border-primary-100 border-bottom m-0 pr-1"
>
<Form.Group
className="pb-2"

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

@@ -1,14 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LicenseSelector snapshots snapshots: renders as expected with block level 1`] = `
<Form.Group
className="mx-2 my-0"
>
<Form.Row
className="flex-nowrap"
>
<Fragment>
<ActionRow>
<Form.Control
as="select"
className="w-100 m-0 p-0"
defaultValue="all-rights-reserved"
disabled={false}
floatingLabel="License Type"
@@ -30,6 +27,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
Creative Commons
</option>
</Form.Control>
<ActionRow.Spacer />
<IconButtonWithTooltip
iconAs="Icon"
onClick={[Function]}
@@ -42,7 +40,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
}
tooltipPlacement="top"
/>
</Form.Row>
</ActionRow>
<div
className="x-small mt-3"
>
@@ -53,20 +51,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
/>
</div>
<div
className="border-primary-100 mt-4 border-bottom"
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
</Fragment>
`;
exports[`LicenseSelector snapshots snapshots: renders as expected with default props 1`] = `
<Form.Group
className="mx-2 my-0"
>
<Form.Row
className="flex-nowrap"
>
<Fragment>
<ActionRow>
<Form.Control
as="select"
className="w-100 m-0 p-0"
defaultValue="all-rights-reserved"
disabled={true}
floatingLabel="License Type"
@@ -88,7 +83,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
Creative Commons
</option>
</Form.Control>
</Form.Row>
</ActionRow>
<div
className="x-small mt-3"
>
@@ -99,20 +94,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
/>
</div>
<div
className="border-primary-100 mt-4 border-bottom"
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
</Fragment>
`;
exports[`LicenseSelector snapshots snapshots: renders as expected with library level 1`] = `
<Form.Group
className="mx-2 my-0"
>
<Form.Row
className="flex-nowrap"
>
<Fragment>
<ActionRow>
<Form.Control
as="select"
className="w-100 m-0 p-0"
defaultValue="all-rights-reserved"
disabled={false}
floatingLabel="License Type"
@@ -134,6 +126,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
Creative Commons
</option>
</Form.Control>
<ActionRow.Spacer />
<IconButtonWithTooltip
iconAs="Icon"
onClick={[Function]}
@@ -146,7 +139,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
}
tooltipPlacement="top"
/>
</Form.Row>
</ActionRow>
<div
className="x-small mt-3"
>
@@ -157,20 +150,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
/>
</div>
<div
className="border-primary-100 mt-4 border-bottom"
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
</Fragment>
`;
exports[`LicenseSelector snapshots snapshots: renders as expected with no license 1`] = `
<Form.Group
className="mx-2 my-0"
>
<Form.Row
className="flex-nowrap"
>
<Fragment>
<ActionRow>
<Form.Control
as="select"
className="w-100 m-0 p-0"
defaultValue=""
disabled={true}
floatingLabel="License Type"
@@ -192,7 +182,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
Creative Commons
</option>
</Form.Control>
</Form.Row>
</ActionRow>
<div
className="x-small mt-3"
>
@@ -203,7 +193,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
/>
</div>
<div
className="border-primary-100 mt-4 border-bottom"
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
</Fragment>
`;

11
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
View File

@@ -55,9 +55,14 @@ export const LanguageSelector = ({
dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
});
return (
<div className="col col-11">
<Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100">
<Form.Control as="select" aria-label={intl.formatMessage(messages.languageSelectLabel)} defaultValue={language} onChange={(e) => onLanguageChange(e)}>
<div className="col col-11 p-0">
<Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100 m-0">
<Form.Control
as="select"
aria-label={intl.formatMessage(messages.languageSelectLabel)}
defaultValue={language}
onChange={(e) => onLanguageChange(e)}
>
{Object.entries(videoTranscriptLanguages).map(([lang, text]) => {
if (language === lang) { return (<option value={lang} selected>{text}</option>); }
if (lang === 'placeholder') { return (<option hidden>{intl.formatMessage(messages.languageSelectPlaceholder)}</option>); }

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

@@ -4,8 +4,11 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
Card, Button, IconButton, Row,
Card,
Button,
IconButton,
Icon,
ActionRow,
} from '@edx/paragon';
import { Delete } from '@edx/paragon/icons';
@@ -71,11 +74,12 @@ export const Transcript = ({
</Card>
)
: (
<Row className="flex-nowrap">
<ActionRow>
<LanguageSelector
title={index}
language={language}
/>
<ActionRow.Spacer />
{ language === '' ? (
<IconButton
iconAs={Icon}
@@ -89,8 +93,7 @@ export const Transcript = ({
launchDeleteConfirmation={launchDeleteConfirmation}
/>
)}
</Row>
</ActionRow>
)}
</>
);

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
View File

@@ -2,10 +2,10 @@
exports[`LanguageSelector snapshot transcript option 1`] = `
<div
className="col col-11"
className="col col-11 p-0"
>
<Form.Group
className="mw-100"
className="mw-100 m-0"
controlId="selectLanguage-form-undefined"
>
<Form.Control
@@ -49,10 +49,10 @@ exports[`LanguageSelector snapshot transcript option 1`] = `
exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all should be disabled 1`] = `
<div
className="col col-11"
className="col col-11 p-0"
>
<Form.Group
className="mw-100"
className="mw-100 m-0"
controlId="selectLanguage-form-undefined"
>
<Form.Control

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

@@ -2,36 +2,34 @@
exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete 1`] = `
<Fragment>
<Component
className="flex-nowrap"
>
<ActionRow>
<LanguageSelector
language="lAnG"
title="sOmenUmBer"
/>
<ActionRow.Spacer />
<TranscriptActionMenu
index="sOmenUmBer"
language="lAnG"
launchDeleteConfirmation={[MockFunction launchDeleteConfirmation]}
/>
</Component>
</ActionRow>
</Fragment>
`;
exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete, language is blank so delete is shown instead of action menu 1`] = `
<Fragment>
<Component
className="flex-nowrap"
>
<ActionRow>
<LanguageSelector
language=""
title="sOmenUmBer"
/>
<ActionRow.Spacer />
<IconButton
iconAs="Icon"
onClick={[Function]}
/>
</Component>
</ActionRow>
</Fragment>
`;

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

@@ -63,7 +63,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
/>
</div>
<Form.Row
className="mt-3.5 flex-nowrap"
className="mt-3.5 mx-0 flex-nowrap"
>
<Form.Control
floatingLabel="Video URL"

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

@@ -86,7 +86,7 @@ export const VideoSourceWidget = ({
<FormattedMessage {...messages.fallbackVideoMessage} />
</div>
{fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
<Form.Row className="mt-3.5 flex-nowrap">
<Form.Row className="mt-3.5 mx-0 flex-nowrap">
<Form.Control
floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
onChange={fallbackVideos.onChange(index)}

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

@@ -2,11 +2,11 @@
exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
defaultOpen={true}
>
<Trigger
className="collapsible-trigger d-flex border-0 align-items-center"
className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
style={
Object {
"justifyContent": "unset",
@@ -26,7 +26,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
tiTLE
</div>
<div
className=" mt-3"
className=" mb-4 mt-3"
>
SuBTItle
</div>
@@ -42,7 +42,6 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
</div>
</Visible>
<Visible
className="p-0"
whenOpen={true}
>
<div
@@ -62,7 +61,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
</Visible>
</Trigger>
<Body
className="collapsible-body rounded px-0 "
className="collapsible-body rounded px-0 pb-4"
>
<p>
Some test string
@@ -73,12 +72,12 @@ 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 p-4 text-primary-500"
className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
defaultOpen={true}
open={true}
>
<Trigger
className="collapsible-trigger d-flex border-0 align-items-center"
className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
style={
Object {
"justifyContent": "unset",
@@ -98,7 +97,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
tiTLE
</div>
<div
className=" mt-3"
className=" mb-4 mt-3"
>
SuBTItle
</div>
@@ -117,7 +116,6 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
</div>
</Visible>
<Visible
className="p-0"
whenOpen={true}
>
<div
@@ -137,7 +135,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
</Visible>
</Trigger>
<Body
className="collapsible-body rounded px-0 "
className="collapsible-body rounded px-0 pb-4"
>
<p>
Some test string