Rework the DAM crop/focus settings UI (#2689)

Co-authored-by: Julia Wegmayr <[email protected]> Co-authored-by: Johannes Obermair <[email protected]>
vivid-planet · Nov 21, 2024 · 4037b4d · 4037b4d
1 parent 54dac48
commit 4037b4d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 25 deletions.
diff --git a/.changeset/proud-ties-arrive.md b/.changeset/proud-ties-arrive.md
@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": minor
+---
+
+Rework the DAM crop/focus settings UI
diff --git a/packages/admin/cms-admin/src/blocks/image/EditImageDialog.tsx b/packages/admin/cms-admin/src/blocks/image/EditImageDialog.tsx
@@ -160,7 +160,7 @@ export function EditImageDialog({ image, initialValues, onSubmit, onClose, inher
                             <div>
                                 {inheritedDamSettings !== undefined && (
                                     <>
-                                        <Box padding={8} paddingBottom={6}>
+                                        <Box padding={8} paddingTop={0}>
                                             <FormSection
                                                 title={<FormattedMessage id="comet.blocks.image.dam" defaultMessage="DAM" />}
                                                 disableMarginBottom
@@ -183,7 +183,7 @@ export function EditImageDialog({ image, initialValues, onSubmit, onClose, inher
                                         {dependencyMap["DamFile"] && damFileId && (
                                             <Box padding={7} paddingTop={0}>
                                                 <Button
-                                                    variant="text"
+                                                    variant="outlined"
                                                     color="inherit"
                                                     onClick={async () => {
                                                         const path = await dependencyMap["DamFile"].resolvePath({
@@ -199,7 +199,7 @@ export function EditImageDialog({ image, initialValues, onSubmit, onClose, inher
                                                 </Button>
                                             </Box>
                                         )}
-                                        <Divider />
+                                        <Divider sx={{ marginLeft: 8, marginRight: 8 }} />
                                     </>
                                 )}
                                 <Box padding={8}>

diff --git a/packages/admin/cms-admin/src/common/image/ChooseFocalPoint.tsx b/packages/admin/cms-admin/src/common/image/ChooseFocalPoint.tsx
@@ -1,6 +1,6 @@
 import { FocusPointCenter, FocusPointNortheast, FocusPointNorthwest, FocusPointSoutheast, FocusPointSouthwest } from "@comet/admin-icons";
 import { AdminComponentSection } from "@comet/blocks-admin";
-import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { FormattedMessage } from "react-intl";
 
 import { GQLFocalPoint } from "../../graphql.generated";
@@ -12,7 +12,10 @@ interface ChooseFocalPointProps {
 
 export const ChooseFocalPoint = ({ focalPoint, onChangeFocalPoint }: ChooseFocalPointProps) => {
     return (
-        <AdminComponentSection title={<FormattedMessage id="comet.blocks.image.focalPoint" defaultMessage="Set manual focus point" />}>
+        <AdminComponentSection
+            title={<FormattedMessage id="comet.blocks.image.focalPoint" defaultMessage="Set manual focus point" />}
+            disableBottomMargin
+        >
             <ToggleButtonGroup
                 value={focalPoint}
                 onChange={(event, newFocalPoint: GQLFocalPoint) => {
@@ -40,12 +43,6 @@ export const ChooseFocalPoint = ({ focalPoint, onChangeFocalPoint }: ChooseFocal
                     <FocusPointSoutheast />
                 </ToggleButton>
             </ToggleButtonGroup>
-            <Typography variant="body2" component="p" color="textSecondary">
-                <FormattedMessage
-                    id="comet.blocks.image.hintSelectFocalPoint"
-                    defaultMessage="You can also select the focus point by clicking on the bullets in the image."
-                />
-            </Typography>
         </AdminComponentSection>
     );
 };
diff --git a/packages/admin/cms-admin/src/dam/FileForm/CropSettingsFields.tsx b/packages/admin/cms-admin/src/dam/FileForm/CropSettingsFields.tsx
@@ -1,6 +1,7 @@
 import { Field, FieldContainer, FormSection } from "@comet/admin";
 import { Reset } from "@comet/admin-icons";
-import { Box, Button, FormControlLabel, Switch, Typography } from "@mui/material";
+import { AdminComponentSection } from "@comet/blocks-admin";
+import { Button, FormControlLabel, Switch } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ChangeEvent } from "react";
 import { useForm, useFormState } from "react-final-form";
@@ -35,33 +36,54 @@ export function CropSettingsFields({ disabled }: Props): JSX.Element {
     return (
         <Container>
             <FormSection title={<FormattedMessage id="comet.dam.file.cropSettings.sectionTitle" defaultMessage="Crop/Focus settings" />}>
-                <FieldContainer>
-                    <FormControlLabel
-                        control={<Switch checked={focalPoint === "SMART"} onChange={handleSmartFocalPointChange} />}
-                        label={<FormattedMessage id="comet.dam.file.smartFocusPoint" defaultMessage="Smart focus point" />}
-                    />
-                    <Box mt={2} pl={2}>
-                        <Typography variant="body2" paragraph>
+                <FieldContainer
+                    fullWidth
+                    helperText={
+                        <>
                             <FormattedMessage
                                 id="comet.dam.file.croppingInfoText"
                                 defaultMessage="Cropping selects the maximum visible area. Depending on the aspect ratio, the image may be cropped further on the page."
                             />
-                        </Typography>
-                        <Typography variant="body2">
+                            <br />
+                            <br />
                             <FormattedMessage
                                 id="comet.dam.file.focusPointInfoText"
                                 defaultMessage="The focus point marks the most important part of the image, which is always visible. Choose it wisely."
                             />
-                        </Typography>
-                    </Box>
+                        </>
+                    }
+                >
+                    <AdminComponentSection
+                        title={<FormattedMessage id="comet.dam.file.cropSettings.smartFocusPoint.title" defaultMessage="Smart focus point" />}
+                    >
+                        <FormControlLabel
+                            control={<Switch checked={focalPoint === "SMART"} onChange={handleSmartFocalPointChange} />}
+                            label={
+                                focalPoint === "SMART" ? (
+                                    <FormattedMessage id="comet.dam.file.smartFocusPoint.yes" defaultMessage="Yes" />
+                                ) : (
+                                    <FormattedMessage id="comet.dam.file.smartFocusPoint.no" defaultMessage="No" />
+                                )
+                            }
+                        />
+                    </AdminComponentSection>
                 </FieldContainer>
                 {showChooseManualFocusPointButtons && (
-                    <Field name="focalPoint">
+                    <Field
+                        name="focalPoint"
+                        fullWidth
+                        helperText={
+                            <FormattedMessage
+                                id="comet.blocks.image.hintSelectFocalPoint"
+                                defaultMessage="You can also select the focus point by clicking on the bullets in the image."
+                            />
+                        }
+                    >
                         {({ input: { value, onChange } }) => <ChooseFocalPoint focalPoint={value} onChangeFocalPoint={onChange} />}
                     </Field>
                 )}
                 {showResetCropAreaButton && (
-                    <Field name="crop">
+                    <Field name="crop" fullWidth>
                         {({ input: { value, onChange } }) => (
                             <Button
                                 startIcon={<Reset />}
@@ -75,6 +97,7 @@ export function CropSettingsFields({ disabled }: Props): JSX.Element {
                                     });
                                 }}
                                 color="info"
+                                variant="outlined"
                             >
                                 <FormattedMessage id="comet.dam.file.resetCropArea" defaultMessage="Reset crop area" />
                             </Button>