Abhinav-grd
GitHub
commit
d31525060e
|
|
@ -39,10 +39,7 @@ export default function MessageDialog({
|
|||
centered
|
||||
backdrop={attributes.staticBackdrop ? 'static' : 'true'}
|
||||
>
|
||||
<Modal.Header
|
||||
style={{ borderBottom: 'none' }}
|
||||
closeButton={attributes.close != null}
|
||||
>
|
||||
<Modal.Header style={{ borderBottom: 'none' }} closeButton>
|
||||
{attributes.title && (
|
||||
<Modal.Title>
|
||||
<strong>{attributes.title}</strong>
|
||||
|
|
@ -55,35 +52,51 @@ export default function MessageDialog({
|
|||
</Modal.Body>
|
||||
)}
|
||||
<Modal.Footer style={{ borderTop: 'none' }}>
|
||||
{attributes.close && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.close?.variant ?? 'secondary'
|
||||
}`}
|
||||
onClick={props.onHide}
|
||||
style={{
|
||||
padding: '6px 3em',
|
||||
marginRight: '20px',
|
||||
}}
|
||||
>
|
||||
{attributes.close?.text ?? constants.OK}
|
||||
</Button>
|
||||
)}
|
||||
{attributes.proceed && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.proceed?.variant ?? 'primary'
|
||||
}`}
|
||||
onClick={() => {
|
||||
attributes.proceed.action();
|
||||
props.onHide();
|
||||
}}
|
||||
style={{ padding: '6px 3em', marginRight: '20px' }}
|
||||
disabled={attributes.proceed.disabled}
|
||||
>
|
||||
{attributes.proceed.text}
|
||||
</Button>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
{attributes.close && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.close?.variant ?? 'secondary'
|
||||
}`}
|
||||
onClick={props.onHide}
|
||||
style={{
|
||||
padding: '6px 3em',
|
||||
margin: '0 20px',
|
||||
marginBottom: '20px',
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{attributes.close?.text ?? constants.OK}
|
||||
</Button>
|
||||
)}
|
||||
{attributes.proceed && (
|
||||
<Button
|
||||
variant={`outline-${
|
||||
attributes.proceed?.variant ?? 'primary'
|
||||
}`}
|
||||
onClick={() => {
|
||||
attributes.proceed.action();
|
||||
props.onHide();
|
||||
}}
|
||||
style={{
|
||||
padding: '6px 3em',
|
||||
margin: '0 20px',
|
||||
marginBottom: '20px',
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
disabled={attributes.proceed.disabled}
|
||||
>
|
||||
{attributes.proceed.text}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -90,17 +90,14 @@ const GlobalStyles = createGlobalStyle`
|
|||
.pswp__img {
|
||||
object-fit: contain;
|
||||
}
|
||||
.modal-90w{
|
||||
width:90vw;
|
||||
max-width:960px!important;
|
||||
}
|
||||
|
||||
.modal {
|
||||
z-index: 2000;
|
||||
}
|
||||
.modal-dialog-centered {
|
||||
min-height: -webkit-calc(90% - 3.5rem);
|
||||
min-height: -moz-calc(90% - 3.5rem);
|
||||
min-height: calc(90% - 3.5rem);
|
||||
min-height: -webkit-calc(80% - 3.5rem);
|
||||
min-height: -moz-calc(80% - 3.5rem);
|
||||
min-height: calc(80% - 3.5rem);
|
||||
}
|
||||
.modal .modal-header, .modal .modal-footer {
|
||||
border-color: #444 !important;
|
||||
|
|
@ -126,6 +123,11 @@ const GlobalStyles = createGlobalStyle`
|
|||
background-color:#202020 !important;
|
||||
color:#aaa;
|
||||
}
|
||||
.modal-dialog{
|
||||
max-width:960px!important;
|
||||
width:90%;
|
||||
margin:5% auto;
|
||||
}
|
||||
.download-btn{
|
||||
margin-top:10px;
|
||||
width: 25px;
|
||||
|
|
@ -176,10 +178,6 @@ const GlobalStyles = createGlobalStyle`
|
|||
.alert-primary {
|
||||
background-color: #c4ffd6;
|
||||
}
|
||||
.ente-modal{
|
||||
width: 500px;
|
||||
max-width:100%;
|
||||
}
|
||||
.bm-burger-button {
|
||||
position: fixed;
|
||||
width: 24px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import MessageDialog from 'components/MessageDialog';
|
||||
import React from 'react';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
import constants from 'utils/strings/constants';
|
||||
|
|
@ -15,64 +16,56 @@ function ChoiceModal({
|
|||
...props
|
||||
}: Props) {
|
||||
return (
|
||||
<Modal
|
||||
<MessageDialog
|
||||
{...props}
|
||||
size="lg"
|
||||
aria-labelledby="contained-modal-title-vcenter"
|
||||
centered
|
||||
attributes={{ title: constants.MULTI_FOLDER_UPLOAD }}
|
||||
>
|
||||
<Modal.Body style={{ padding: '24px' }}>
|
||||
<Modal.Header
|
||||
style={{
|
||||
borderColor: 'rgb(16, 176, 2)',
|
||||
fontSize: '20px',
|
||||
marginBottom: '20px',
|
||||
border: 'none',
|
||||
<p>{constants.UPLOAD_STRATEGY_CHOICE}</p>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={() => {
|
||||
props.onHide();
|
||||
showCollectionCreateModal();
|
||||
}}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
flex: 2,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
id="contained-modal-title-vcenter"
|
||||
closeButton
|
||||
>
|
||||
{constants.UPLOAD_STRATEGY_CHOICE}
|
||||
</Modal.Header>
|
||||
{constants.UPLOAD_STRATEGY_SINGLE_COLLECTION}
|
||||
</Button>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
paddingBottom: '20px',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
minWidth: '100px',
|
||||
margin: '2% auto',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={() => {
|
||||
props.onHide();
|
||||
showCollectionCreateModal();
|
||||
}}
|
||||
style={{
|
||||
padding: '12px',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px',
|
||||
}}
|
||||
>
|
||||
{constants.UPLOAD_STRATEGY_SINGLE_COLLECTION}
|
||||
</Button>
|
||||
<strong>{constants.OR}</strong>
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={() =>
|
||||
uploadFiles(UPLOAD_STRATEGY.COLLECTION_PER_FOLDER)
|
||||
}
|
||||
style={{
|
||||
padding: '12px',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px',
|
||||
}}
|
||||
>
|
||||
{constants.UPLOAD_STRATEGY_COLLECTION_PER_FOLDER}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={() =>
|
||||
uploadFiles(UPLOAD_STRATEGY.COLLECTION_PER_FOLDER)
|
||||
}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
flex: 2,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{constants.UPLOAD_STRATEGY_COLLECTION_PER_FOLDER}
|
||||
</Button>
|
||||
</div>
|
||||
</MessageDialog>
|
||||
);
|
||||
}
|
||||
export default ChoiceModal;
|
||||
|
|
|
|||
|
|
@ -71,18 +71,14 @@ function CollectionSelector({
|
|||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
{...props}
|
||||
dialogClassName="modal-90w"
|
||||
style={{ maxWidth: '100%' }}
|
||||
>
|
||||
<Modal {...props} size="xl" centered>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{attributes.title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
justifyContent: 'space-around',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ function PlanSelector(props: Props) {
|
|||
);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!plans) {
|
||||
if (!plans && props.modalView) {
|
||||
const main = async () => {
|
||||
props.setLoading(true);
|
||||
await billingService.updatePlans();
|
||||
|
|
@ -65,7 +65,7 @@ function PlanSelector(props: Props) {
|
|||
};
|
||||
main();
|
||||
}
|
||||
});
|
||||
}, [props.modalView]);
|
||||
|
||||
async function onPlanSelect(plan: Plan) {
|
||||
if (
|
||||
|
|
@ -157,7 +157,7 @@ function PlanSelector(props: Props) {
|
|||
<Modal
|
||||
show={props.modalView}
|
||||
onHide={props.closeModal}
|
||||
dialogClassName="modal-90w"
|
||||
size="xl"
|
||||
centered
|
||||
backdrop={hasPaidSubscription(subscription) ? 'true' : `static`}
|
||||
>
|
||||
|
|
@ -207,8 +207,7 @@ function PlanSelector(props: Props) {
|
|||
justifyContent: 'space-around',
|
||||
flexWrap: 'wrap',
|
||||
minHeight: '212px',
|
||||
marginTop: '24px',
|
||||
marginBottom: '36px',
|
||||
margin: '24px 0',
|
||||
}}
|
||||
>
|
||||
{plans && PlanIcons}
|
||||
|
|
|
|||
|
|
@ -29,13 +29,11 @@ export default function UploadProgress(props: Props) {
|
|||
? () => null
|
||||
: props.closeModal
|
||||
}
|
||||
size="lg"
|
||||
aria-labelledby="contained-modal-title-vcenter"
|
||||
centered
|
||||
backdrop={
|
||||
props.uploadStage !== UPLOAD_STAGES.FINISH ? 'static' : 'true'
|
||||
}
|
||||
dialogClassName="ente-modal"
|
||||
>
|
||||
<Modal.Body>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ const englishConstants = {
|
|||
DELETE_FILE_MESSAGE: 'sure you want to delete selected files?',
|
||||
DELETE_FILE: 'delete files',
|
||||
DELETE: 'delete',
|
||||
MULTI_FOLDER_UPLOAD: 'choose upload strategy',
|
||||
UPLOAD_STRATEGY_CHOICE:
|
||||
'you are uploading multiple folders, would you like us to create',
|
||||
UPLOAD_STRATEGY_SINGLE_COLLECTION: 'a single album for everything',
|
||||
|
|
|
|||
Loading…
Reference in a new issue