Merge pull request #388 from open-craft/farhaan/bb-7835-fix-styling
fix: Fix styling for components in dropzone
This commit is contained in:
kenclary
@@ -4,33 +4,62 @@ import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Icon, IconButton, Dropzone, InputGroup, FormControl,
|
||||
} from '@edx/paragon';
|
||||
import { ArrowForward, FileUpload } from '@edx/paragon/icons';
|
||||
import { ArrowForward, FileUpload, Close } from '@edx/paragon/icons';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { thunkActions } from '../../data/redux';
|
||||
import * as hooks from './hooks';
|
||||
import * as editorHooks from '../EditorContainer/hooks';
|
||||
import messages from './messages';
|
||||
|
||||
const URLUploader = () => {
|
||||
const [textInputValue, setTextInputValue] = React.useState('');
|
||||
const onURLUpload = hooks.onVideoUpload();
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<div className="d-flex flex-column flex-wrap">
|
||||
<div className="justify-content-center align-self-center bg-light rounded-circle p-4">
|
||||
<Icon src={FileUpload} className="text-muted" />
|
||||
<div className="d-flex flex-column">
|
||||
<div style={{ backgroundColor: '#F2F0EF' }} className="justify-content-center align-self-center rounded-circle p-5">
|
||||
<Icon src={FileUpload} className="text-muted" size="lg" />
|
||||
</div>
|
||||
<div className="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5">
|
||||
<span style={{ fontSize: '1.35rem' }}>{intl.formatMessage(messages.dropVideoFileHere)}</span>
|
||||
<span className="small">{intl.formatMessage(messages.dropVideoFileHere)}</span>
|
||||
<span className="align-self-center" style={{ fontSize: '0.8rem' }}>{intl.formatMessage(messages.info)}</span>
|
||||
</div>
|
||||
<div className="align-self-center justify-content-center mx-2 text-dark">OR</div>
|
||||
<div className="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal">OR</div>
|
||||
<div className="zindex-9 video-id-prompt p-4">
|
||||
<InputGroup>
|
||||
<FormControl
|
||||
placeholder={intl.formatMessage(messages.pasteURL)}
|
||||
aria-label={intl.formatMessage(messages.pasteURL)}
|
||||
aria-describedby="basic-addon2"
|
||||
borderless
|
||||
onClick={(event) => { event.stopPropagation(); }}
|
||||
onChange={(event) => { setTextInputValue(event.target.value); }}
|
||||
/>
|
||||
<div className="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button">
|
||||
<IconButton
|
||||
className="text-muted"
|
||||
alt={intl.formatMessage(messages.submitButtonAltText)}
|
||||
src={ArrowForward}
|
||||
iconAs={Icon}
|
||||
size="inline"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
if (textInputValue.trim() !== '') {
|
||||
onURLUpload(textInputValue);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const VideoUploader = ({ setLoading }) => {
|
||||
const [textInputValue, setTextInputValue] = React.useState('');
|
||||
const onURLUpload = hooks.onVideoUpload();
|
||||
const intl = useIntl();
|
||||
export const VideoUploader = ({ setLoading, onClose }) => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
const handleCancel = editorHooks.handleCancel({ onClose });
|
||||
|
||||
const handleProcessUpload = ({ fileData }) => {
|
||||
dispatch(thunkActions.video.uploadVideo({
|
||||
@@ -41,38 +70,28 @@ export const VideoUploader = ({ setLoading }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex flex-column">
|
||||
<div className="d-flex justify-content-end flex-row">
|
||||
<IconButton
|
||||
className="position-absolute mr-2 mt-2"
|
||||
alt={intl.formatMessage(messages.closeButtonAltText)}
|
||||
src={Close}
|
||||
iconAs={Icon}
|
||||
onClick={handleCancel}
|
||||
/>
|
||||
</div>
|
||||
<Dropzone
|
||||
accept={{ 'video/*': ['.mp4', '.mov'] }}
|
||||
onProcessUpload={handleProcessUpload}
|
||||
inputComponent={<URLUploader />}
|
||||
/>
|
||||
<div className="d-flex video-id-prompt">
|
||||
<InputGroup>
|
||||
<FormControl
|
||||
placeholder={intl.formatMessage(messages.pasteURL)}
|
||||
aria-label={intl.formatMessage(messages.pasteURL)}
|
||||
aria-describedby="basic-addon2"
|
||||
borderless
|
||||
onChange={(event) => { setTextInputValue(event.target.value); }}
|
||||
/>
|
||||
<div className="justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button">
|
||||
<IconButton
|
||||
alt={intl.formatMessage(messages.submitButtonAltText)}
|
||||
src={ArrowForward}
|
||||
iconAs={Icon}
|
||||
size="inline"
|
||||
onClick={() => { onURLUpload(textInputValue); }}
|
||||
/>
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
VideoUploader.propTypes = {
|
||||
setLoading: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default VideoUploader;
|
||||
|
||||
@@ -5,7 +5,42 @@ Object {
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
@@ -22,13 +57,14 @@ Object {
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-wrap"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-4"
|
||||
class="justify-content-center align-self-center rounded-circle p-5"
|
||||
style="background-color: rgb(242, 240, 239);"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
class="pgn__icon pgn__icon__lg text-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -51,7 +87,7 @@ Object {
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
|
||||
>
|
||||
<span
|
||||
style="font-size: 1.35rem;"
|
||||
class="small"
|
||||
>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
@@ -63,62 +99,62 @@ Object {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="align-self-center justify-content-center mx-2 text-dark"
|
||||
class="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex video-id-prompt"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline"
|
||||
type="button"
|
||||
<div
|
||||
class="zindex-9 video-id-prompt p-4"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline text-muted"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,7 +163,42 @@ Object {
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
@@ -144,13 +215,14 @@ Object {
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-wrap"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-4"
|
||||
class="justify-content-center align-self-center rounded-circle p-5"
|
||||
style="background-color: rgb(242, 240, 239);"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
class="pgn__icon pgn__icon__lg text-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -173,7 +245,7 @@ Object {
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
|
||||
>
|
||||
<span
|
||||
style="font-size: 1.35rem;"
|
||||
class="small"
|
||||
>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
@@ -185,62 +257,62 @@ Object {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="align-self-center justify-content-center mx-2 text-dark"
|
||||
class="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex video-id-prompt"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline"
|
||||
type="button"
|
||||
<div
|
||||
class="zindex-9 video-id-prompt p-4"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline text-muted"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,14 +7,181 @@ Object {
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="marked-area"
|
||||
class="d-flex marked-area flex-column p-3"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end close-button-container"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
role="presentation"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="video/*,.mp4,.mov"
|
||||
style="display: none;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center rounded-circle p-5"
|
||||
style="background-color: rgb(242, 240, 239);"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon pgn__icon__lg text-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
|
||||
>
|
||||
<span
|
||||
class="small"
|
||||
>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
<span
|
||||
class="align-self-center"
|
||||
style="font-size: 0.8rem;"
|
||||
>
|
||||
Upload MP4 or MOV files (5 GB max)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
<div
|
||||
class="zindex-9 video-id-prompt p-4"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline text-muted"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div>
|
||||
<div
|
||||
class="d-flex marked-area flex-column p-3"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@@ -42,168 +209,6 @@ Object {
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
role="presentation"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="video/*,.mp4,.mov"
|
||||
style="display: none;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-wrap"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-4"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
|
||||
>
|
||||
<span
|
||||
style="font-size: 1.35rem;"
|
||||
>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
<span
|
||||
class="align-self-center"
|
||||
style="font-size: 0.8rem;"
|
||||
>
|
||||
Upload MP4 or MOV files (5 GB max)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="align-self-center justify-content-center mx-2 text-dark"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex video-id-prompt"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div>
|
||||
<div
|
||||
class="marked-area"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end close-button-container"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
@@ -220,13 +225,14 @@ Object {
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column flex-wrap"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-4"
|
||||
class="justify-content-center align-self-center rounded-circle p-5"
|
||||
style="background-color: rgb(242, 240, 239);"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
class="pgn__icon pgn__icon__lg text-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -249,7 +255,7 @@ Object {
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
|
||||
>
|
||||
<span
|
||||
style="font-size: 1.35rem;"
|
||||
class="small"
|
||||
>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
@@ -261,62 +267,62 @@ Object {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="align-self-center justify-content-center mx-2 text-dark"
|
||||
class="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex video-id-prompt"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline"
|
||||
type="button"
|
||||
<div
|
||||
class="zindex-9 video-id-prompt p-4"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline text-muted"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Icon, IconButton, Spinner,
|
||||
} from '@edx/paragon';
|
||||
import { Close } from '@edx/paragon/icons';
|
||||
import { Spinner } from '@edx/paragon';
|
||||
import './index.scss';
|
||||
import messages from './messages';
|
||||
import { VideoUploader } from './VideoUploader';
|
||||
import * as editorHooks from '../EditorContainer/hooks';
|
||||
|
||||
export const VideoUploadEditor = (
|
||||
{
|
||||
@@ -16,22 +12,13 @@ export const VideoUploadEditor = (
|
||||
},
|
||||
) => {
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const handleCancel = editorHooks.handleCancel({ onClose });
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div>
|
||||
{(!loading) ? (
|
||||
<div className="marked-area">
|
||||
<div className="d-flex justify-content-end close-button-container">
|
||||
<IconButton
|
||||
alt={intl.formatMessage(messages.closeButtonAltText)}
|
||||
src={Close}
|
||||
iconAs={Icon}
|
||||
onClick={handleCancel}
|
||||
/>
|
||||
</div>
|
||||
<VideoUploader setLoading={setLoading} />
|
||||
<div className="d-flex marked-area flex-column p-3">
|
||||
<VideoUploader setLoading={setLoading} onClose={onClose} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-6">
|
||||
|
||||
@@ -7,32 +7,24 @@
|
||||
}
|
||||
|
||||
.pgn__dropzone {
|
||||
height: 100vh;
|
||||
height: 96vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-id-container {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.url-submit-button {
|
||||
position: absolute;
|
||||
left: 85%;
|
||||
margin-left: 17rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.video-id-prompt {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
input::placeholder {
|
||||
color: #454545;
|
||||
// color: #5E35B1;
|
||||
font-family: 'Inter';
|
||||
font-weight: 500;
|
||||
word-wrap: break-word;
|
||||
font-weight: '500';
|
||||
word-wrap: 'break-word';
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -45,8 +37,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.close-button-container {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 30px;
|
||||
.form-control {
|
||||
font-size: 0.875rem !important;
|
||||
width: 308px !important;
|
||||
height: 44px !important;
|
||||
}
|
||||
|
||||
.pgn__icon.pgn__icon__lg {
|
||||
width: 3.625rem !important;
|
||||
height: 3.625rem !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user