fixed delte button on image input, added icon

This commit is contained in:
olivicmic committed 2023-09-27 20:29:10 -07:00
1 parent 8a0330af45
commit fd20050f86
3 files changed
+3 -21

No files matched your search

@@ -19,7 +19,7 @@ export default function FileDetails({ clear = () => {}, file, hideClearDetails,
: null;
return <div {...{ className: "fy-uploader-layout upload-details" }}>
<Icon {...{ className: "fy-uploader-layout-icon", icon }}/>
{ icon && <Icon {...{ className: "fy-uploader-layout-icon", icon }}/> }
<div>
<div {...{ className: "filename" }}>
{ file.name.slice(0, file.name.lastIndexOf(".")) }
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import { a, useSpring } from '@react-spring/web';
import { FileDetails, FileWrapper, FileLabel } from "components/common";
import { faImagePortrait } from "@fortawesome/pro-solid-svg-icons";
import "./ImageInput.scss";
const fileTypes = ["JPG", "GIF", "PNG"];
@@ -34,7 +35,7 @@ export default function ImageInput({ blob = "", clear = n, file, hideActions, hi
<div {...{ className: "fy-image-uploader" }}>
{ file ? <>
<a.img {...{ alt: "file preview", className: "file-preview", onLoad, src: blob, style }} />
<FileDetails {...{ file, hideClearDetails }}/>
<FileDetails {...{ clear, file, hideClearDetails, icon: faImagePortrait }}/>
</> : <>
<svg {...{ className: "image-placeholder", height: 400, viewBox: "0 0 300 300", width: 400 }}>
<path d="m152.42 226c41.8 0 69.49-43.57 73.21-90.87 3.78-47.97-26.06-87.13-75.69-87.13-49.64 0-79.28 39.15-75.69 87.13 3.72 49.79 36.37 90.87 78.17 90.87zm-29.19-50.93c1.62-1.51 4.15-1.42 5.65.2 4.1 4.41 15.31 6.97 21.88 6.97s17.77-2.56 21.88-6.97c1.5-1.62 4.04-1.71 5.65-.2 1.62 1.5 1.92 3.95.2 5.65-6.31 6.27-18.31 9.52-27.74 9.52s-22.16-3.54-27.74-9.52c-1.49-1.61-1.4-4.14.22-5.65zm115.25 112.93h-176.62c-37.67 0-38.24-17.41-27.56-26.36 21.49-18.01 57.18-23.64 114.81-23.64 60.01 0 96.24 4.84 117.41 24.06 10.09 9.16 7.67 25.94-28.04 25.94z"/>
@@ -53,25 +53,6 @@ interface EditorProps {
const softSpring = { config: { mass: 1, tension: 80, friction: 10 } };
// const InputPage = ({ audioProps, imageProps, toggle, style, t }: LipSyncProps ) => {
// return <animated.div {...{ className: "lipsync-editor", style }}>
// <div {...{ className: "grid-heading" }}>
// <h5>{ t("headings.image") }</h5>
// </div>
// <div {...{ className: "grid-heading" }}>
// <h5>{ t("headings.audio") }</h5>
// </div>
// <div {...{ className: "grid-square lipsync-audio col-lg-6" }}>
// <ImageInput {...{ ...imageProps, onRest: () => toggle.image(imageProps.file ? true : false) }}/>
// </div>
// <div {...{ className: "grid-square col-lg-6" }}>
// <AudioInput {...{ ...audioProps, onRest: (p:any,c:any,item:any,l:any) => {
// toggle.audio(!!audioProps.file);
// }, hideActions: true } }/>
// </div>
// </animated.div>};
const InputPage = ({
audioProps,
imageProps,