Link field: add compact option

Author: FilipChalupa

src/link/admin/LinkField.tsx

@@ -6,53 +6,72 @@ import {
 	Component,
 	DiscriminatedBlocks,
 	Field,
+	FieldView,
 	HasOne,
 	SelectField,
+	Stack,
 	TextField,
 	useEntity,
 } from '@contember/admin'
+import { Gap } from '../../gap/admin'
 
 export interface LinkFieldProps {
 	field: string
 	label?: string
 	titleField?: boolean
 	allowDisconnect?: boolean
 	allowTargetBlank?: boolean
+	compact?: boolean
 }
 
 export const LinkField = Component<LinkFieldProps>(
-	({ field, label, titleField = true, allowDisconnect = false, allowTargetBlank = false }) => {
+	({ field, label, titleField = true, allowDisconnect = false, allowTargetBlank = false, compact = true }) => {
 		const rootEntity = useEntity()
 
 		const insideContent = (
 			<HasOne field={field}>
 				{titleField && <TextField field="title" label="Title" />}
-				<DiscriminatedBlocks field="type" label="Type">
-					<Block discriminateBy="internal" label="Internal">
-						<SelectField field="internalLink" label="URL" options="Linkable.url" />
-					</Block>
-					<Block discriminateBy="external" label="External">
-						<TextField field="externalLink" label="URL" />
-					</Block>
-				</DiscriminatedBlocks>
+				<Stack direction={compact ? 'horizontal' : 'vertical'}>
+					<DiscriminatedBlocks field="type" label="Type">
+						<Block discriminateBy="internal" label="Internal">
+							<SelectField field="internalLink" label="URL" options="Linkable.url" />
+						</Block>
+						<Block discriminateBy="external" label="External">
+							<TextField field="externalLink" label="URL" />
+						</Block>
+					</DiscriminatedBlocks>
+				</Stack>
 				{allowTargetBlank && (
-					<CheckboxField
-						field="isTargetBlank"
-						label="Target blank"
-						defaultValue={false}
-						labelDescription={
-							<>
-								Force link to open in new tab.{' '}
-								<span style={{ color: 'red' }}>
-									This feature is highly discouraged.{' '}
-									<a href="https://css-tricks.com/use-target_blank/" target="_blank" rel="noreferrer">
-										Read more
-									</a>
-									.
-								</span>
-							</>
-						}
-					/>
+					<>
+						<Gap />
+						<CheckboxField
+							field="isTargetBlank"
+							label="Target blank"
+							defaultValue={false}
+							labelDescription={
+								<FieldView<boolean>
+									field="isTargetBlank"
+									render={field => (
+										<>
+											Force link to open in new tab.
+											{field.value && (
+												<>
+													{' '}
+													<span style={{ color: 'red' }}>
+														This feature is highly discouraged.{' '}
+														<a href="https://css-tricks.com/use-target_blank/" target="_blank" rel="noreferrer">
+															Read more
+														</a>
+														.
+													</span>
+												</>
+											)}
+										</>
+									)}
+								/>
+							}
+						/>
+					</>
 				)}
 			</HasOne>
 		)