WIP add recrop button for trail images

guardian · Sep 19, 2024 · 76c5298 · 76c5298
1 parent 698e5f1
commit 76c5298
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/fronts-client/src/components/inputs/InputImage.tsx b/fronts-client/src/components/inputs/InputImage.tsx
@@ -24,6 +24,7 @@ import {
   AddImageIcon,
   VideoIcon,
   WarningIcon,
+  CropIcon,
 } from '../icons/Icons';
 import imageDragIcon from 'images/icons/image-drag-icon.svg';
 import {
@@ -49,9 +50,10 @@ const AddImageButton = styled(ButtonDefault)<{ small?: boolean }>`
       small ? theme.colors.greyVeryLight : '#5e5e5e99'};
   }
   width: 100%;
-  height: 100%;
+  flex-grow: 1;
   padding: 0;
   text-shadow: 0 0 2px black;
+  display: inline-block;
 `;
 
 const ImageComponent = styled.div<{
@@ -92,6 +94,7 @@ const AddImageViaGridModalButton = styled.div`
   justify-content: center;
   align-items: center;
   flex-grow: 1;
+  flex-direction: column;
 `;
 
 const AddImageViaUrlInput = styled(InputContainer)`
@@ -391,6 +394,15 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
                     <AddImageIcon size="l" />
                     {!!small ? null : <Label size="sm">{message}</Label>}
                   </AddImageButton>
+                  <AddImageButton
+                    type="button"
+                    onClick={this.openModal}
+                    small={small}
+                    disabled={disabled}
+                  >
+                    <CropIcon size="l" fill={theme.colors.white} />
+                    {!!small ? null : <Label size="sm">Recrop image</Label>}
+                  </AddImageButton>
                 </AddImageViaGridModalButton>
               )}
               {hasVideo && useDefault && (