From 24ca01a10c4b4597d2d362d734bce6c9ae5a9b8d Mon Sep 17 00:00:00 2001 From: James Acklin Date: Sat, 3 Apr 2021 17:30:18 -0400 Subject: [PATCH 1/3] interface: adds clickable instructions to ImageInput, removes truncation in settings fixes urbit/landscape#695, fixes urbit/landscape#581 --- .../components/lib/BackgroundPicker.tsx | 20 +++-- .../src/views/components/ImageInput.tsx | 74 ++++++++++++++----- 2 files changed, 68 insertions(+), 26 deletions(-) diff --git a/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx b/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx index 698843ae4..26b7a0f50 100644 --- a/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx +++ b/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx @@ -1,32 +1,36 @@ import React, { ReactElement } from 'react'; import { - Box, Text, Row, Label, Col, - ManagedRadioButtonField as Radio, + ManagedRadioButtonField as Radio } from '@tlon/indigo-react'; import GlobalApi from '~/logic/api/global'; import { ImageInput } from '~/views/components/ImageInput'; import { ColorInput } from '~/views/components/ColorInput'; -import { StorageState } from '~/types'; export type BgType = 'none' | 'url' | 'color'; export function BackgroundPicker({ bgType, bgUrl, - api, + api }: { bgType: BgType; bgUrl?: string; api: GlobalApi; }): ReactElement { const rowSpace = { my: 0, alignItems: 'center' }; - const colProps = { my: 3, mr: 4, gapY: 1 }; + const colProps = { + my: 3, + mr: 4, + gapY: 1, + minWidth: '266px', + width: ['100%', '288px'] + }; return ( @@ -40,7 +44,7 @@ export function BackgroundPicker({ id="bgUrl" placeholder="Drop or upload a file, or paste a link here" name="bgUrl" - url={bgUrl || ""} + url={bgUrl || ''} /> @@ -48,13 +52,13 @@ export function BackgroundPicker({ Set a hex-based background - + diff --git a/pkg/interface/src/views/components/ImageInput.tsx b/pkg/interface/src/views/components/ImageInput.tsx index 21f40e4cc..159266a01 100644 --- a/pkg/interface/src/views/components/ImageInput.tsx +++ b/pkg/interface/src/views/components/ImageInput.tsx @@ -8,10 +8,10 @@ import { Button, Label, ErrorLabel, - BaseInput + BaseInput, + Text } from '@tlon/indigo-react'; -import { StorageState } from '~/types'; import useStorage from '~/logic/lib/useStorage'; type ImageInputProps = Parameters[0] & { @@ -21,12 +21,9 @@ type ImageInputProps = Parameters[0] & { }; export function ImageInput(props: ImageInputProps): ReactElement { - const { id, label, caption, placeholder } = props; - + const { id, label, caption } = props; const { uploadDefault, canUpload, uploading } = useStorage(); - const [field, meta, { setValue, setError }] = useField(id); - const ref = useRef(null); const onImageUpload = useCallback(async () => { @@ -43,10 +40,55 @@ export function ImageInput(props: ImageInputProps): ReactElement { } }, [ref.current, uploadDefault, canUpload, setValue]); - const onClick = useCallback(() => { + const clickUploadButton = useCallback(() => { ref.current?.click(); }, [ref]); + const Prompt = () => ( + + Paste a link here, or{' '} + + upload + {' '} + a file + + ); + + const Uploading = () => ( + + Uploading... + + ); + + const ErrorRetry = () => ( + + Error, please{' '} + + {' '} + retry + + + ); + return ( @@ -55,25 +97,21 @@ export function ImageInput(props: ImageInputProps): ReactElement { {caption} ) : null} - + + {!field.value && !uploading && meta.error === undefined ? () : null} + {uploading && meta.error === undefined ? () : null} + {meta.touched && meta.error !== undefined ? () : null} {canUpload && ( <> + display='none' + onClick={clickUploadButton} + /> Date: Mon, 12 Apr 2021 16:42:09 -0400 Subject: [PATCH 2/3] profile: imageinput instance fixes fixes urbit/landscape#695 --- .../src/views/apps/profile/components/EditProfile.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pkg/interface/src/views/apps/profile/components/EditProfile.tsx b/pkg/interface/src/views/apps/profile/components/EditProfile.tsx index 0648d7326..d053007d2 100644 --- a/pkg/interface/src/views/apps/profile/components/EditProfile.tsx +++ b/pkg/interface/src/views/apps/profile/components/EditProfile.tsx @@ -64,20 +64,20 @@ export function ProfileHeaderImageEdit(props: any): ReactElement { {contact?.cover ? (
{editCover ? ( - + ) : ( - )}
) : ( - + )} ); From 95b4f4007b9fe96cf9e8d8f70229107eb60a8c78 Mon Sep 17 00:00:00 2001 From: James Acklin Date: Wed, 14 Apr 2021 16:31:21 -0400 Subject: [PATCH 3/3] imageInput: eliminate closures as components fixes urbit/landscape#695 --- .../src/views/components/ImageInput.tsx | 136 ++++++++++-------- 1 file changed, 77 insertions(+), 59 deletions(-) diff --git a/pkg/interface/src/views/components/ImageInput.tsx b/pkg/interface/src/views/components/ImageInput.tsx index 159266a01..447adf40c 100644 --- a/pkg/interface/src/views/components/ImageInput.tsx +++ b/pkg/interface/src/views/components/ImageInput.tsx @@ -7,7 +7,6 @@ import { Row, Button, Label, - ErrorLabel, BaseInput, Text } from '@tlon/indigo-react'; @@ -20,6 +19,71 @@ type ImageInputProps = Parameters[0] & { placeholder?: string; }; +const prompt = (field, uploading, meta, clickUploadButton) => { + if (!field.value && !uploading && meta.error === undefined) { + return ( + + Paste a link here, or{' '} + + upload + {' '} + a file + + ); + } + return null; +}; + +const uploadingStatus = (uploading, meta) => { + if (uploading && meta.error === undefined) { + return ( + + Uploading... + + ); + } + return null; +}; + +const errorRetry = (meta, uploading, clickUploadButton) => { + if (meta.error !== undefined) { + return ( + + {meta.error}{', '}please{' '} + + retry + + + ); + } + return null; +}; + export function ImageInput(props: ImageInputProps): ReactElement { const { id, label, caption } = props; const { uploadDefault, canUpload, uploading } = useStorage(); @@ -43,52 +107,6 @@ export function ImageInput(props: ImageInputProps): ReactElement { const clickUploadButton = useCallback(() => { ref.current?.click(); }, [ref]); - - const Prompt = () => ( - - Paste a link here, or{' '} - - upload - {' '} - a file - - ); - - const Uploading = () => ( - - Uploading... - - ); - - const ErrorRetry = () => ( - - Error, please{' '} - - {' '} - retry - - - ); - return ( @@ -97,15 +115,18 @@ export function ImageInput(props: ImageInputProps): ReactElement { {caption} ) : null} - - {!field.value && !uploading && meta.error === undefined ? () : null} - {uploading && meta.error === undefined ? () : null} - {meta.touched && meta.error !== undefined ? () : null} - + + {prompt(field, uploading, meta, clickUploadButton)} + {uploadingStatus(uploading, meta)} + {errorRetry(meta, uploading, clickUploadButton)} + + + {canUpload && ( <>