add divider between share with and public url
This commit is contained in:
parent
22ae94821c
commit
82ba607a3d
|
@ -18,7 +18,7 @@ import SubmitButton from './SubmitButton';
|
||||||
import MessageDialog from './MessageDialog';
|
import MessageDialog from './MessageDialog';
|
||||||
import { Collection } from 'types/collection';
|
import { Collection } from 'types/collection';
|
||||||
import { appendCollectionKeyToShareURL } from 'utils/collection';
|
import { appendCollectionKeyToShareURL } from 'utils/collection';
|
||||||
import { Row, Value } from './Container';
|
import { FlexWrapper } from './Container';
|
||||||
import { CodeBlock } from './CodeBlock';
|
import { CodeBlock } from './CodeBlock';
|
||||||
import { ButtonVariant, getVariantColor } from './pages/gallery/LinkButton';
|
import { ButtonVariant, getVariantColor } from './pages/gallery/LinkButton';
|
||||||
import { handleSharingErrors } from 'utils/error';
|
import { handleSharingErrors } from 'utils/error';
|
||||||
|
@ -138,7 +138,7 @@ function CollectionShare(props: Props) {
|
||||||
content: constants.DISABLE_PUBLIC_SHARING_MESSAGE,
|
content: constants.DISABLE_PUBLIC_SHARING_MESSAGE,
|
||||||
close: { text: constants.CANCEL },
|
close: { text: constants.CANCEL },
|
||||||
proceed: {
|
proceed: {
|
||||||
text: constants.DELETE,
|
text: constants.DISABLE,
|
||||||
action: disablePublicSharingHelper,
|
action: disablePublicSharingHelper,
|
||||||
variant: ButtonVariant.danger,
|
variant: ButtonVariant.danger,
|
||||||
},
|
},
|
||||||
|
@ -240,41 +240,7 @@ function CollectionShare(props: Props) {
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
<Row style={{ margin: '10px' }}>
|
{props.collection.sharees?.length > 0 ? (
|
||||||
<Value width="auto" style={{ paddingTop: '5px' }}>
|
|
||||||
{constants.PUBLIC_SHARING}
|
|
||||||
</Value>
|
|
||||||
<Form.Switch
|
|
||||||
style={{ marginLeft: '20px' }}
|
|
||||||
checked={!!publicShareUrl}
|
|
||||||
id="collection-public-sharing-toggler"
|
|
||||||
className="custom-switch-md"
|
|
||||||
onChange={handleCollectionPublicSharing}
|
|
||||||
/>
|
|
||||||
</Row>
|
|
||||||
<Row
|
|
||||||
style={{
|
|
||||||
margin: '10px',
|
|
||||||
color: getVariantColor(ButtonVariant.danger),
|
|
||||||
}}>
|
|
||||||
{sharableLinkError}
|
|
||||||
</Row>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '1px',
|
|
||||||
margin: '10px 0px',
|
|
||||||
background: '#444',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{publicShareUrl && (
|
|
||||||
<div style={{ width: '100%', wordBreak: 'break-all' }}>
|
|
||||||
<>{constants.PUBLIC_URL}</>
|
|
||||||
<CodeBlock key={publicShareUrl} code={publicShareUrl} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{props.collection.sharees?.length > 0 && (
|
|
||||||
<>
|
<>
|
||||||
<p>{constants.SHAREES}</p>
|
<p>{constants.SHAREES}</p>
|
||||||
|
|
||||||
|
@ -290,12 +256,48 @@ function CollectionShare(props: Props) {
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
</>
|
</>
|
||||||
)}
|
) : (
|
||||||
{props.collection.sharees?.length === 0 && !publicShareUrl && (
|
|
||||||
<div style={{ marginTop: '12px' }}>
|
<div style={{ marginTop: '12px' }}>
|
||||||
{constants.ZERO_SHAREES()}
|
{constants.ZERO_SHAREES()}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '1px',
|
||||||
|
margin: '10px 0px',
|
||||||
|
background: '#444',
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
<FlexWrapper>
|
||||||
|
<FlexWrapper style={{ paddingTop: '5px' }}>
|
||||||
|
{constants.PUBLIC_SHARING}
|
||||||
|
</FlexWrapper>
|
||||||
|
<Form.Switch
|
||||||
|
style={{ marginLeft: '20px' }}
|
||||||
|
checked={!!publicShareUrl}
|
||||||
|
id="collection-public-sharing-toggler"
|
||||||
|
className="custom-switch-md"
|
||||||
|
onChange={handleCollectionPublicSharing}
|
||||||
|
/>
|
||||||
|
</FlexWrapper>
|
||||||
|
{sharableLinkError && (
|
||||||
|
<FlexWrapper
|
||||||
|
style={{
|
||||||
|
marginTop: '10px',
|
||||||
|
color: getVariantColor(ButtonVariant.danger),
|
||||||
|
}}>
|
||||||
|
{sharableLinkError}
|
||||||
|
</FlexWrapper>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{publicShareUrl && (
|
||||||
|
<div style={{ width: '100%', wordBreak: 'break-all' }}>
|
||||||
|
<>{constants.PUBLIC_URL}</>
|
||||||
|
<CodeBlock key={publicShareUrl} code={publicShareUrl} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</DeadCenter>
|
</DeadCenter>
|
||||||
</MessageDialog>
|
</MessageDialog>
|
||||||
);
|
);
|
||||||
|
|
|
@ -146,6 +146,7 @@ export default function LandingPage() {
|
||||||
await router.push(PAGES.VERIFY);
|
await router.push(PAGES.VERIFY);
|
||||||
}
|
}
|
||||||
await initLocalForage();
|
await initLocalForage();
|
||||||
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const initLocalForage = async () => {
|
const initLocalForage = async () => {
|
||||||
|
|
|
@ -357,7 +357,7 @@ const englishConstants = {
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
PUBLIC_URL: 'publicly sharable url',
|
PUBLIC_URL: 'public link',
|
||||||
SHARE_WITH_SELF: 'oops, you cannot share with yourself',
|
SHARE_WITH_SELF: 'oops, you cannot share with yourself',
|
||||||
ALREADY_SHARED: (email) =>
|
ALREADY_SHARED: (email) =>
|
||||||
`oops, you're already sharing this with ${email}`,
|
`oops, you're already sharing this with ${email}`,
|
||||||
|
|
Loading…
Reference in a new issue