StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

File manager cleanup for mobile devices

Browse source
This commit is contained in:
Dane Everitt 2020-09-13 10:33:12 -07:00
parent 6ec2ae9df8
commit 47283700a8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 53 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/scripts/components/elements/ConfirmationModal.tsx
View file

@ -19,11 +19,11 @@ const ConfirmationModal = ({ title, children, buttonText, onConfirmed }: Props)
<>
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
<p css={tw`text-sm`}>{children}</p>
<div css={tw`flex items-center justify-end mt-8`}>
<Button isSecondary onClick={() => dismiss()}>
<div css={tw`flex flex-wrap items-center justify-end mt-8`}>
<Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto`}>
Cancel
</Button>
<Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
<Button color={'red'} css={tw`w-full sm:w-auto mt-4 sm:mt-0 sm:ml-4`} onClick={() => onConfirmed()}>
{buttonText}
</Button>
</div>

40
resources/scripts/components/elements/Modal.tsx
View file

@ -1,9 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import styled, { css } from 'styled-components/macro';
import { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
@ -26,25 +24,27 @@ export const ModalMask = styled.div`
background: rgba(0, 0, 0, 0.70);
`;
const ModalContainer = styled.div<{ alignTop?: boolean }>`
${breakpoint('xs')`
max-width: 95%;
`};
${breakpoint('md')`
max-width: 50%;
`};
const ModalContainer = styled.div<{ alignTop?: boolean }>`
max-width: 95%;
max-height: calc(100vh - 8rem);
${breakpoint('md')`max-width: 75%`};
${breakpoint('lg')`max-width: 50%`};
${tw`relative flex flex-col w-full m-auto`};
max-height: calc(100vh - 8rem);
// @todo max-w-screen-lg perhaps?
${props => props.alignTop && 'margin-top: 10%'};
${props => props.alignTop && css`
margin-top: 20%;
${breakpoint('md')`margin-top: 10%`};
`};
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
top: -2rem;
top: -2.5rem;
&:hover {${tw`transform rotate-90`}}
& > svg {
${tw`w-6 h-6`};
}
}
`;
@ -80,6 +80,7 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
>
<ModalMask
onClick={e => e.stopPropagation()}
onContextMenu={e => e.stopPropagation()}
onMouseDown={e => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
@ -92,7 +93,14 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
<ModalContainer alignTop={top}>
{isDismissable &&
<div className={'close-icon'} onClick={() => setRender(false)}>
<FontAwesomeIcon icon={faTimes}/>
<svg xmlns={'http://www.w3.org/2000/svg'} fill={'none'} viewBox={'0 0 24 24'} stroke={'currentColor'}>
<path
strokeLinecap={'round'}
strokeLinejoin={'round'}
strokeWidth={'2'}
d={'M6 18L18 6M6 6l12 12'}
/>
</svg>
</div>
}
{showSpinnerOverlay &&