refactor(form-builder): improve styles of image and file inputs

sanity-io · Mar 4, 2021 · b2f8056 · b2f8056
1 parent 7a0a1bf
commit b2f8056
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 36 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/files/FileInput/FileInput.tsx b/packages/@sanity/form-builder/src/inputs/files/FileInput/FileInput.tsx
@@ -19,7 +19,6 @@ import {
 import {Box, Button, Container, Dialog, Flex, Grid, Stack, Text, ToastParams} from '@sanity/ui'
 import {PresenceOverlay} from '@sanity/base/presence'
 import {FormFieldPresence} from '@sanity/base/lib/presence'
-
 import WithMaterializedReference from '../../../utils/WithMaterializedReference'
 import {ResolvedUploader, Uploader, UploaderResolver} from '../../../sanity/uploads/types'
 import PatchEvent, {setIfMissing, unset} from '../../../PatchEvent'
@@ -407,6 +406,7 @@ export default class FileInput extends React.PureComponent<Props, FileInputState
                   onFilesOut={this.handleFilesOut}
                   onFocus={this.handleFileTargetFocus}
                   onBlur={this.handleFileTargetBlur}
+                  tone="transparent"
                 >
                   <AssetBackground>
                     <Container padding={3} sizing="border" width={0}>

diff --git a/packages/@sanity/form-builder/src/inputs/files/ImageInput/ImageInput.tsx b/packages/@sanity/form-builder/src/inputs/files/ImageInput/ImageInput.tsx
@@ -9,6 +9,7 @@ import {
   Box,
   Button,
   Dialog,
+  Flex,
   Grid,
   Menu,
   MenuButton,
@@ -39,6 +40,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {PresenceOverlay, FormFieldPresence} from '@sanity/base/presence'
 import * as PathUtils from '@sanity/util/paths'
+import styled from 'styled-components'
 import {FormBuilderInput} from '../../../FormBuilderInput'
 import {
   ResolvedUploader,
@@ -55,7 +57,6 @@ import {FileTarget, Overlay} from '../common/styles'
 import {UploadState} from '../types'
 import {UploadProgress} from '../common/UploadProgress'
 import {urlToFile, base64ToFile} from './utils/image'
-import {AssetBackground} from './styles'
 
 export interface Image extends Partial<BaseImage> {
   _upload?: UploadState
@@ -118,6 +119,19 @@ type ImageInputFieldProps = {
   presence: FormFieldPresence[]
 }
 
+const ImageRatio = styled.div`
+  position: relative;
+  padding-bottom: calc(2 / 3 * 100%);
+
+  & > div {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+  }
+`
+
 function ImageInputField(props: ImageInputFieldProps) {
   const {onChange, field, ...restProps} = props
 
@@ -652,15 +666,18 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
                   onFilesOut={this.handleFilesOut}
                   onFocus={this.handleFileTargetFocus}
                   onBlur={this.handleFileTargetBlur}
+                  tone="transparent"
                 >
-                  <AssetBackground align="center" justify="center" padding={1}>
-                    {value?._upload && this.renderUploadState(value._upload)}
-                    {!value?._upload && value?.asset && this.renderAsset()}
-                    {!value?._upload && !value?.asset && this.renderUploadPlaceholder()}
-                    {!value?._upload && !readOnly && hoveringFiles.length > 0 && (
-                      <Overlay>Drop top upload</Overlay>
-                    )}
-                  </AssetBackground>
+                  <ImageRatio>
+                    <Flex align="center" justify="center">
+                      {value?._upload && this.renderUploadState(value._upload)}
+                      {!value?._upload && value?.asset && this.renderAsset()}
+                      {!value?._upload && !value?.asset && this.renderUploadPlaceholder()}
+                      {!value?._upload && !readOnly && hoveringFiles.length > 0 && (
+                        <Overlay>Drop to upload</Overlay>
+                      )}
+                    </Flex>
+                  </ImageRatio>
                 </FileTarget>
               </ChangeIndicatorWithProvidedFullPath>
             </ChangeIndicatorCompareValueProvider>
@@ -679,16 +696,18 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
                   text="Upload"
                 />
               )}
+
               {!readOnly && this.renderSelectImageButton()}
+
               {showAdvancedEditButton && (
                 <Button
                   icon={readOnly ? EyeOpenIcon : EditIcon}
                   mode="ghost"
-                  title={readOnly ? 'View details' : 'Edit details'}
                   onClick={this.handleStartAdvancedEdit}
-                  text={readOnly ? 'View details' : 'Edit'}
+                  text={readOnly ? 'View details' : 'Edit details'}
                 />
               )}
+
               {value?.asset && !readOnly && (
                 <Button
                   tone="critical"

diff --git a/packages/@sanity/form-builder/src/inputs/files/ImageInput/styles.ts b/packages/@sanity/form-builder/src/inputs/files/ImageInput/styles.ts
diff --git a/packages/@sanity/form-builder/src/inputs/files/common/styles.ts b/packages/@sanity/form-builder/src/inputs/files/common/styles.ts
@@ -1,4 +1,6 @@
-import styled, {css} from 'styled-components'
+/* eslint-disable import/named */
+
+import styled, {css, DefaultTheme, StyledComponent} from 'styled-components'
 import {Card, rem, Theme} from '@sanity/ui'
 import {fileTarget} from '../../common/fileTarget'
 import {focusRingBorderStyle, focusRingStyle} from './focusringUtils'
@@ -27,7 +29,7 @@ const CardWithFocusRing = styled(Card)(({theme}: {theme: Theme}) => {
 
 export const FileTarget = fileTarget(CardWithFocusRing)
 
-export const Overlay: React.ComponentType = styled.div`
+export const Overlay: StyledComponent<'div', DefaultTheme> = styled.div`
   position: absolute;
   display: flex;
   align-items: center;