add divider between share with and public url

This commit is contained in:
Abhinav 2022-01-29 14:17:52 +05:30
parent 22ae94821c
commit 82ba607a3d
3 changed files with 43 additions and 40 deletions

View file

@ -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>
); );

View file

@ -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 () => {

View file

@ -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}`,