diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index 073d27c2e487d37c6223c84bd0f20213e474346f..c74d9a39444f26e7dc12f921ee806808d28afce2 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -41,7 +41,7 @@ const FileMosaicImageVideoPreviews: React.FC<
downloadUrl?: string
) => {
console.log("Download fileId", fileId);
- console.log("Download fileName", files.filter(x=>x.id===fileId)[0]);
+ console.log("Download fileName", files.filter((x) => x.id === fileId)[0]);
console.log("Download downloadUrl", downloadUrl);
if (!downloadUrl) return;
try {
@@ -61,26 +61,28 @@ const FileMosaicImageVideoPreviews: React.FC<
console.log("Download", resJson); */
} catch (error) {
console.log("Download error", error);
- console.error( error);
+ console.error(error);
}
};
const handleDownloadXHR = async (
fileId: FileMosaicProps["id"],
downloadUrl?: string
) => {
-
console.log("Download fileId", fileId);
- console.log("Download fileName", files.filter(x=>x.id===fileId)[0].name);
+ console.log(
+ "Download fileName",
+ files.filter((x) => x.id === fileId)[0].name
+ );
console.log("Download downloadUrl", downloadUrl);
if (!downloadUrl) return;
try {
const request = new XMLHttpRequest();
- request.responseType="blob";
+ request.responseType = "blob";
request.open("get", downloadUrl, true);
request.send();
- request.onreadystatechange=function(){
- if(this.readyState==4 && this.status==200){
+ request.onreadystatechange = function () {
+ if (this.readyState == 4 && this.status == 200) {
const imageURL = window.URL.createObjectURL(this.response);
const anchor = document.createElement("a");
@@ -88,11 +90,10 @@ const FileMosaicImageVideoPreviews: React.FC<
anchor.download = "fileNamess.jpg";
document.body.appendChild(anchor);
anchor.click();
-
- }else{
+ } else {
console.log("not yet");
}
- }
+ };
const image = await fetch(downloadUrl);
const imageBlob = await image.blob();
@@ -174,17 +175,18 @@ const files: ExtFile[] = [
type: "image/jpeg",
size: 282000,
imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
- downloadUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
-
+ //downloadUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
},
{
- id: 2,
- name: "video-preview.mp4",
+ id: 1,
+ name: "ThorArrivesWakandaES.mp4",
type: "video/mp4",
size: 282000,
- downloadUrl: VIDEO_URL,
- extraData: { videoUrl: VIDEO_URL },
+ imageUrl:
+ "https://e0.pxfuel.com/wallpapers/626/685/desktop-wallpaper-avengers-infinity-war-thor-arrives-in-wakanda-bring-me-thanos.jpg",
+ downloadUrl: ThorArrivesWakandaES,
+ extraData: { videoUrl: ThorArrivesWakandaES },
},
{
id: 3,
@@ -199,18 +201,19 @@ const files: ExtFile[] = [
},
{
id: 1,
- name: "ironman.png",
+ name: "facebook logo.png",
type: "image/png",
size: 282000,
downloadUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
-
imageUrl:
- "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
-
+ "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
+ extraData: {
+ backgroundBlurImage: false,
+ },
},
];
-
+/*
const videos: ExtFile[] = [
{
id: 0,
@@ -225,6 +228,8 @@ const videos: ExtFile[] = [
name: "ThorArrivesWakandaES.mp4",
type: "video/mp4",
size: 282000,
+ imageUrl:
+ "https://e0.pxfuel.com/wallpapers/626/685/desktop-wallpaper-avengers-infinity-war-thor-arrives-in-wakanda-bring-me-thanos.jpg",
downloadUrl: ThorArrivesWakandaES,
extraData: { videoUrl: ThorArrivesWakandaES },
},
@@ -246,3 +251,4 @@ const videos: ExtFile[] = [
extraData: { videoUrl: NarutoAndSasukeVsMomoshikiES },
},
];
+ */
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5427abc021023a99fc7ae495a43f40eb70097b4e
--- /dev/null
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
@@ -0,0 +1,142 @@
+import * as React from "react";
+import { Stack, Paper } from "@mui/material";
+import {
+ FileCard,
+ ExtFile,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+} from "../../../files-ui";
+import AnchorToTab from "../../util-components/AnchorToTab";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
+import { ThorArrivesWakandaES } from "../../../data/videoLinks";
+
+interface ExtraComponentsMainPageProps {
+ darkMode?: boolean;
+}
+const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
+ props: ExtraComponentsMainPageProps
+) => {
+ const { darkMode } = props;
+ const [imageSrc, setImageSrc] = React.useState<string | undefined>(undefined);
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+
+ const handleSee = (imageSource: string | undefined) => {
+ console.log("handleSee-imageSource", imageSource);
+ setImageSrc(imageSource);
+ };
+
+ const handleWatch = (videoSource: File | string | undefined) => {
+ console.log("handleWatch videoSource", videoSource);
+ //setVideoSrc(videoSource);
+ //
+ setVideoSrc(videoSource);
+ // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
+ };
+
+ return (
+ <Paper
+ variant="outlined"
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "space-between",
+ padding: "20px 0",
+ boxSizing: "border-box",
+ backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+ height: "100%",
+ }}
+ >
+ <TypeHighlight size="1.1rem">
+ <AnchorToTab href="/components/filecard">
+ <h3 style={{ margin: 0 }}>{"<FileCard/>"}</h3>
+ </AnchorToTab>
+ </TypeHighlight>
+ <Stack
+ direction={"column"}
+ spacing={2}
+ alignItems="center"
+ justifyContent={"space-evenly"}
+ sx={{
+ flexWrap: "wrap",
+ flexGrow: 1,
+ }}
+ >
+ {files.map((f: ExtFile, index: number) => (
+ <FileCard
+ onClick={() => {
+ alert("haaa");
+ }}
+ key={index}
+ //darkMode={darkMode}
+ {...f}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ {...f.extraData}
+ info
+ darkMode={darkMode}
+ />
+ ))}
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </Stack>
+ </Paper>
+ );
+};
+export default ExtraComponentsMainPage;
+
+const files: ExtFile[] = [
+ /* {
+ id: 0,
+ name: "image-preview.png",
+ type: "image/png",
+ size: 282000,
+ imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
+ }, */
+
+ {
+ id: 2,
+ name: "ThorArrivesWakandaES.mp4",
+ type: "video/mp4",
+ size: 282000,
+ imageUrl:
+ "https://e0.pxfuel.com/wallpapers/626/685/desktop-wallpaper-avengers-infinity-war-thor-arrives-in-wakanda-bring-me-thanos.jpg",
+ downloadUrl: ThorArrivesWakandaES,
+ extraData: { videoUrl: ThorArrivesWakandaES },
+ },
+ {
+ id: 3,
+ name: "downloadable-file.png",
+ type: "image/png",
+ size: 282000,
+ imageUrl: "/static/media/files-ui-logo-blue.e28c57506796630aebb5.png",
+ downloadUrl: "/static/media/files-ui-logo-blue.e28c57506796630aebb5.png",
+ extraData: {
+ backgroundBlurImage: false,
+ },
+ },
+ {
+ id: 1,
+ name: "ironman.png",
+ type: "image/png",
+ size: 282000,
+ downloadUrl:
+ "https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg",
+
+ imageUrl:
+ "https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg",
+ },
+];
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d1537b80dfc260b0bf42a24c0e1836ac63c2ed52
--- /dev/null
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Stack, Paper } from "@mui/material";
+import {
+ FileCard,
+ ExtFile,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ FileInputButton,
+ Avatar,
+ MaterialButton,
+} from "../../../files-ui";
+import AnchorToTab from "../../util-components/AnchorToTab";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
+
+interface ExtraComponentsMainPageProps {
+ darkMode?: boolean;
+}
+const ExtraComponentsMainPageAvatar: React.FC<ExtraComponentsMainPageProps> = (
+ props: ExtraComponentsMainPageProps
+) => {
+ const { darkMode } = props;
+ const [isUloading, setIsUploading] = React.useState<boolean>(false);
+
+ const [avatarSrc, setAvatarSrc] = React.useState<string | undefined | File>(
+ "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaKgRXvIBtfmfJ49rSmVbPLTgRqPPYjMA_94o0KD4WtHK55Oh_MYbVF8JmPqyddweUx8Y&usqp=CAU"
+ );
+
+ const handleChange = async (file: File) => {
+ setAvatarSrc(file);
+ };
+ return (
+ <Paper
+ variant="outlined"
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "space-between",
+ padding: "20px 0",
+ boxSizing: "border-box",
+ backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+ height: "100%",
+ flexGrow: 1,
+ }}
+ >
+ <TypeHighlight size="1.1rem">
+ <AnchorToTab href="/components/avatar">
+ <h3 style={{ margin: 0 }}>{"<Avatar/>"}</h3>
+ </AnchorToTab>
+ </TypeHighlight>
+ <Stack
+ direction={"column"}
+ spacing={2}
+ alignItems="center"
+ justifyContent={"space-evenly"}
+ sx={{
+ flexWrap: "wrap",
+ flexGrow: 1,
+ }}
+ >
+ <Avatar
+ src={avatarSrc}
+ onChange={handleChange}
+ isUloading={isUloading}
+ smart={false}
+ variant={"circle"}
+ />
+
+ <MaterialButton
+ onClick={() => setAvatarSrc(undefined)}
+ disabled={avatarSrc === undefined}
+ >
+ remove avatar
+ </MaterialButton>
+ </Stack>
+ </Paper>
+ );
+};
+export default ExtraComponentsMainPageAvatar;
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b6301ef25ae087874c4d0d8f4d52e9e188c6a0ea
--- /dev/null
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Stack, Paper } from "@mui/material";
+import {
+ FileCard,
+ ExtFile,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ FileInputButton,
+} from "../../../files-ui";
+import AnchorToTab from "../../util-components/AnchorToTab";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
+
+interface ExtraComponentsMainPageProps {
+ darkMode?: boolean;
+}
+const ExtraComponentsMainPageInputButton: React.FC<
+ ExtraComponentsMainPageProps
+> = (props: ExtraComponentsMainPageProps) => {
+ const { darkMode } = props;
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+ const updateFile = (incommingFiles: ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <Paper
+ variant="outlined"
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent:"space-between",
+ padding: "20px 0",
+ boxSizing: "border-box",
+ backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+ height: "100%",
+ }}
+ >
+ <TypeHighlight size="1.1rem">
+ <AnchorToTab href="/components/fileinputbutton">
+ <h3 style={{ margin: 0 }}>{"<FileInputButton/>"}</h3>
+ </AnchorToTab>
+ </TypeHighlight>
+ <Stack
+ direction={"column"}
+ spacing={2}
+ alignItems="center"
+ justifyContent={"space-evenly"}
+ sx={{
+ flexWrap: "wrap",
+ flexGrow:1,
+ //height: "100%",
+ }}
+ >
+ {value ? (
+ <FileCard {...value} onDelete={removeFile} info preview darkMode={darkMode}/>
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileCard {...sampleFileProps} info darkMode={darkMode}/>
+ </Stack>
+ </Paper>
+ );
+};
+export default ExtraComponentsMainPageInputButton;
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
index 8668e4f2ba3e3cf276a567419e6bb00478012ad9..607c78af64534731b4cbc0f784411659f8e0cf70 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
@@ -42,50 +42,51 @@ const DemoFileMosaicUploadStatus = (props: { card?: boolean }) => {
return (
<>
<FlexRowContainer card title={"preparing stage"}>
- <FileCard {...preparingFile} />
- <FileCard {...preparingFile} onCancel={handleCancel} />
+ <FileCard {...preparingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...preparingFile} onCancel={handleCancel} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
<FlexRowContainer card title={"uploading stage"}>
- <FileCard {...uploadingFile} />
- <FileCard {...uploadingFile} progress={progress} />
- <FileCard {...uploadingFile} onAbort={handleAbort} />
+ <FileCard {...uploadingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...uploadingFile} progress={progress} onClick={()=>alert("haaaaaa")} />
+ <FileCard {...uploadingFile} onAbort={handleAbort} onClick={()=>alert("haaaaaa")}/>
<FileCard
{...uploadingFile}
onAbort={handleAbort}
- progress={progress}
+ progress={progress} onClick={()=>alert("haaaaaa")}
/>
</FlexRowContainer>
<FlexRowContainer card title={"upload result stage"}>
- <FileCard {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileCard {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileCard {...uploadResultFiles[2]} uploadStatus={status3} />
+ <FileCard {...uploadResultFiles[0]} uploadStatus={status1} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...uploadResultFiles[1]} uploadStatus={status2} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...uploadResultFiles[2]} uploadStatus={status3} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
</>
);
return (
<>
<FlexRowContainer title={"preparing stage"}>
- <FileMosaic {...preparingFile} />
- <FileMosaic {...preparingFile} onCancel={handleCancel} />
+ <FileMosaic {...preparingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileMosaic {...preparingFile} onCancel={handleCancel} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
<FlexRowContainer title={"uploading stage"}>
- <FileMosaic {...uploadingFile} />
- <FileMosaic {...uploadingFile} progress={progress} />
- <FileMosaic {...uploadingFile} onAbort={handleAbort} />
+ <FileMosaic {...uploadingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileMosaic {...uploadingFile} progress={progress} onClick={()=>alert("haaaaaa")}/>
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} onClick={()=>alert("haaaaaa")}/>
<FileMosaic
{...uploadingFile}
onAbort={handleAbort}
progress={progress}
+ onClick={()=>alert("haaaaaa")}
/>
</FlexRowContainer>
<FlexRowContainer title={"upload result stage"}>
- <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
+ <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} onClick={()=>alert("haaaaaa")} />
+ <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} onClick={()=>alert("haaaaaa")} />
+ <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
</>
);
diff --git a/src/components/typeHighlight/TypeHighlight.tsx b/src/components/typeHighlight/TypeHighlight.tsx
index 032a4605192e293bd998c2ef8da14d281f26794d..2451fe4c1c0d58e0e689a2ae42aa74b67e528e4b 100644
--- a/src/components/typeHighlight/TypeHighlight.tsx
+++ b/src/components/typeHighlight/TypeHighlight.tsx
@@ -3,12 +3,20 @@ import "./TypeHighlight.scss";
interface TypeHighlightProps {
children?: React.ReactNode;
- np?:boolean;
+ np?: boolean;
+ size?: string;
}
const TypeHighlight: React.FC<TypeHighlightProps> = (
props: TypeHighlightProps
) => {
- const { children,np } = props;
- return <div className={np?"type-highlight np":"type-highlight"}>{children}</div>;
+ const { children, np, size } = props;
+ return (
+ <div
+ className={np ? "type-highlight np" : "type-highlight"}
+ style={{ fontSize: size }}
+ >
+ {children}
+ </div>
+ );
};
export default TypeHighlight;
diff --git a/src/data/videoLinks.js b/src/data/videoLinks.js
index 01e7e05a8574a7273afb5c10dce4298b5802a061..69dd46eb60fd1920b482a20d3807cfc3ab2ffb69 100644
--- a/src/data/videoLinks.js
+++ b/src/data/videoLinks.js
@@ -1,7 +1,18 @@
-const BASE_URL =
- "http://10.100.179.201:2800/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503/static";
+import ThorEN from "../static/videos/ThorEN.mp4";
+import ThorES from "../static/videos/ThorEN-1.mp4";
+import NarutoEN from "../static/videos/NarutoEN.mp4";
+import NarutoES from "../static/videos/NarutoES.mp4";
-export const ThorArrivesWakandaEN = BASE_URL+"/ThorEN.mp4";
-export const ThorArrivesWakandaES = BASE_URL+"/ThorEN.mp4";
-export const NarutoAndSasukeVsMomoshikiEN = BASE_URL+"/NarutoEN.mp4";
-export const NarutoAndSasukeVsMomoshikiES = BASE_URL+"/NarutoES.mp4";
+/* const BASE_URL =
+ "/static/media/videos";
+
+export const ThorArrivesWakandaEN = BASE_URL+"/ThorEN.cd3bd7cae7054bb5a630.mp4";
+export const ThorArrivesWakandaES = BASE_URL+"/ThorES.cd3bd7cae7054bb5a630.mp4";
+export const NarutoAndSasukeVsMomoshikiEN = BASE_URL+"/NarutoEN.ea6c18d269c6beda2aa3.mp4";
+export const NarutoAndSasukeVsMomoshikiES = BASE_URL+"/NarutoES.64ada0ad3f1f096e0f6f.mp4";
+ */
+
+export const ThorArrivesWakandaEN = ThorEN;
+export const ThorArrivesWakandaES = ThorES;
+export const NarutoAndSasukeVsMomoshikiEN = NarutoEN;
+export const NarutoAndSasukeVsMomoshikiES = NarutoES;
\ No newline at end of file
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
index c9ad7c96658a1b5e85c8de825576b69716f212a5..ec1a995608dd3535a07de2027725c4eb881759ae 100644
--- a/src/files-ui/components/avatar/Avatar.tsx
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -2,13 +2,8 @@ import * as React from "react";
import { mergeProps } from "../overridable/mergeProps";
import { AvatarProps, defaultAvatarProps } from "./AvatarProps";
import "./Avatar.scss";
-import {
- setAvatarClassNameContainer,
- setAvatarClassNameLayerInfo,
-} from "./useAvatarClassName";
import InputHidden from "../input-hidden/InputHidden";
import { useAvatarStyle } from "./useAvatarStyle";
-import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
import { ImagePreview } from "../previews";
import InfiniteLoader from "../loader/InfiniteLoader/InfiniteLoader";
import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
@@ -80,15 +75,13 @@ const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
</div>
</Layer>
) : src ? (
- <>
- <ImagePreview
- className={`fui-avatar-image`}
- src={src}
- alt={alt}
- onError={handleError}
- smart={smart}
- />
- </>
+ <ImagePreview
+ className={`fui-avatar-image`}
+ src={src}
+ alt={alt}
+ onError={handleError}
+ smart={smart}
+ />
) : (
<div className={"fui-avatar-label"}>{emptyLabel}</div>
)}
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
index feb04786b1cbeee3e80f0b9346bc016d62ca5ed4..53384ba479c47a22b69a4122848f4592d1aff5e4 100644
--- a/src/files-ui/components/avatar/AvatarProps.ts
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -2,7 +2,7 @@ import { OverridableComponentProps } from "../overridable/OverridableComponentsP
export interface AvatarFullProps extends OverridableComponentProps {
variant?: "square" | "circle";
borderRadius?: string;
- src?: string;
+ src?: string | File;
onChange?: Function,
/**
* Alternative label when an error occurs
diff --git a/src/files-ui/components/download-hidden/DownloadHidden.tsx b/src/files-ui/components/download-hidden/DownloadHidden.tsx
index 3c3150e66a579084ca9983361904d39ec737bdd3..9596cac9acffca6af0f7cfaf14c5a10a5fb1d8ed 100644
--- a/src/files-ui/components/download-hidden/DownloadHidden.tsx
+++ b/src/files-ui/components/download-hidden/DownloadHidden.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { handleClickUtil } from "../../core";
export type DownloadHiddenProps = {
downloadUrl?: string;
anchorRef: React.RefObject<HTMLAnchorElement>;
@@ -9,13 +10,20 @@ const DownloadHidden: React.FC<DownloadHiddenProps> = (
props: DownloadHiddenProps
) => {
const { downloadUrl, anchorRef, fileName } = props;
+ function handleClick<T extends HTMLAnchorElement>(
+ evt: React.MouseEvent<T, MouseEvent>
+ ): void {
+ evt.stopPropagation();
+ }
if (downloadUrl)
return (
<a
ref={anchorRef}
+ target={"_blank"}
href={downloadUrl}
download={fileName}
- style={{ display: "none" }}
+ hidden
+ onClick={handleClick}
>
download_file
</a>
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index a9c9ebd51f4daace080349bd329e32b62f3440e0..5162e6eaeffacf045b5e444ff8361469fe51d168 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -126,6 +126,7 @@
}
.file-card-upload-layer-container {
+ cursor: default;
display: flex;
box-sizing: border-box;
//background-color: rgba(0, 0, 0, 0.5);
@@ -147,6 +148,8 @@
height: 100%;
}
.file-card-info-layer-container {
+ cursor: default;
+
display: flex;
box-sizing: border-box;
//background-color: rgba(0, 0, 0, 0.5);
@@ -211,4 +214,28 @@
}
}
}
+ &.clickable{
+ cursor: pointer;
+ }
}
+
+//// ICONS
+.files-ui-file-icon {
+ font-size: 0.7rem;
+ min-width: 19px;
+ min-height: 19px;
+ margin: 0;
+ padding: 2px 2px;
+ border-radius: 50%;
+ background-color: rgba(32, 33, 36, 0.65);
+ word-break: break-word;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ }
+ &.dark-mode {
+ background-color: rgba(154, 160, 166, 0.65);
+ &:hover {
+ background-color: rgba(154, 160, 166, 0.85);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 065c9abbc9cfa85901b5c6f8adde2a7e84904d90..10f8b974a13d0949e2890557279144f14ba9bf37 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -3,7 +3,7 @@ import { FileCardProps } from "./FileCardProps";
import "./FileCard.scss";
import "./components/FileCardPaper.scss";
import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
-import { fileSizeFormater, shrinkWord } from "../../core";
+import { fileSizeFormater, handleClickUtil, shrinkWord } from "../../core";
import useProgress from "../file-mosaic/hooks/useProgress";
import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
@@ -15,6 +15,7 @@ import FileCardInfoLayer from "./components/FileCardInfoLayer";
import FileMosaicStatus from "../file-mosaic/components/FileMosaicStatus/FileMosaicStatus";
import FileCardUploadLayer from "./components/FileCardUploadLayer";
import { Tooltip } from "../tooltip";
+import DownloadHidden from "../download-hidden/DownloadHidden";
const setFinalElevation = (elevation: string | number): number => {
// let finalElevation: number = "";
@@ -35,7 +36,8 @@ const setFinalElevation = (elevation: string | number): number => {
const makeFileCardClassName = (
elevation: FileCardProps["elevation"],
darkMode: boolean | undefined,
- className: string | undefined
+ className: string | undefined,
+ clickable?: boolean
): string => {
console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
let finalClassName: string =
@@ -47,6 +49,7 @@ const makeFileCardClassName = (
if (darkMode) {
finalClassName += " dark-mode";
}
+ if (clickable) finalClassName += " clickable";
if (className) {
finalClassName += ` ${className}`;
}
@@ -112,7 +115,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const finalClassName: string = makeFileCardClassName(
elevation,
darkMode,
- className
+ className,
+ onClick !== undefined
);
// local properties from file
@@ -176,14 +180,12 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
React.useEffect(() => {
//console.log("Change isUploading", isUploading);
- if (isUploading && showInfo) {
- handleCloseInfo();
- }
+ if (isUploading && showInfo) handleCloseInfo();
+
// eslint-disable-next-line
}, [isUploading]);
/*************** Click ***************/
- /*************** CLICK ***************/
/**
* TO-DO: Add functionallity on click event
* @param e event object
@@ -198,9 +200,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
evt: React.MouseEvent
): void => {
- alert("double click on file");
+ //alert("double click on file");
evt.preventDefault();
-
onDoubleClick?.(evt);
};
function handleRightClick(evt: React.MouseEvent) {
@@ -235,6 +236,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
}
};
+ const handleAbort = () => {
+ xhr?.abort();
+ onAbort?.(id);
+ };
+
if (isReady) {
return (
<div
@@ -246,10 +252,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
onDoubleClick={handleDoubleClick}
onContextMenu={handleRightClick}
>
- <LayerContainer
- className="files-ui-file-card-main-layer-container"
- style={style}
- >
+ <LayerContainer className="files-ui-file-card-main-layer-container">
<Layer className="file-card-main-layer" visible={true}>
<div className="file-card-icon-plus-data">
{/** ICON + STATUS */}
@@ -262,8 +265,8 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
>
<FileMosaicImageLayer
imageSource={imageSource}
- url={url}
fileName={localName}
+ url={url}
isBlur={true}
/>
</Layer>
@@ -297,15 +300,13 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
</div>
</div>
</Layer>
-
- {/* <Layer
- className="files-ui-file-card-right-layer"
- visible={!isUploading}
- > */}
-
- {/* </Layer> */}
-
- <Layer className="file-card-info-layer-container" visible={showInfo}>
+
+ {/** INFO LAYER */}
+ <Layer
+ className="file-card-info-layer-container"
+ visible={showInfo}
+ onClick={handleClickUtil}
+ >
<FileCardInfoLayer
onCloseInfo={handleCloseInfo}
valid={valid}
@@ -320,30 +321,24 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
<Layer
className="file-card-upload-layer-container"
visible={isUploading}
+ onClick={handleClickUtil}
>
<div className="files-ui-file-card-upload-layer">
<FileCardUploadLayer
uploadStatus={uploadStatus}
progress={localProgress}
onCancel={onCancel ? () => onCancel?.(id) : undefined}
- onAbort={
- onAbort
- ? () => {
- xhr?.abort();
- onAbort?.(id);
- }
- : undefined
- }
+ onAbort={onAbort ? handleAbort : undefined}
localization={localization}
/>
</div>
</Layer>
- </LayerContainer>
+ </LayerContainer>
<FileCardRightActions
deleteIcon={onDelete !== undefined}
onDelete={handleDelete}
- darkMode={darkMode}
+ darkMode={darkMode}
imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined}
@@ -355,7 +350,6 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
isActive={alwaysActive || hovering}
visible={!isUploading && !showInfo}
/>
-
<Tooltip
open={resultOnTooltip}
uploadStatus={uploadStatus}
@@ -363,11 +357,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
errors={errors}
uploadMessage={uploadMessage}
/>
- {downloadUrl && (
- <a ref={downloadRef} href={downloadUrl} download={localName} hidden>
- download_file
- </a>
- )}
+ <DownloadHidden
+ fileName={localName}
+ anchorRef={downloadRef}
+ downloadUrl={downloadUrl}
+ />
</div>
);
}
diff --git a/src/files-ui/components/file-card/components/FileCardRightActions.tsx b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
index 2cb660fb57fe4bd2aed77502de10d51b0e4da399..602a1c2b47d1226c8ac6683c657cdd19e04ac972 100644
--- a/src/files-ui/components/file-card/components/FileCardRightActions.tsx
+++ b/src/files-ui/components/file-card/components/FileCardRightActions.tsx
@@ -51,7 +51,7 @@ const FileCardRightActions: React.FC<FileCardRightActionsProps> = (
if (visible)
return (
<>
- <div className="file-card-right-layer-header">
+ <div className="file-card-right-layer-header" >
{isActive && deleteIcon && (
<Clear
className={
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index 85513f547bea57a1f50be667ef1d87d2c90fec4a..efc624b4cedba0abc07b40b019f2e53b5b16c23e 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -365,6 +365,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
};
// HANDLERS for CLICK
function handleClick(): void {
+ console.log("HAAAAAAAA");
//handleClickUtil(evt);
if (disabled) return;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
index e42acf7d8fd25eef2a1e09d447980a36d59263d4..2ec545930eb6b1d3ef4f614fbc8bb06a743c0120 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
@@ -3,19 +3,25 @@ import { addClassName } from "../../../../core";
import { OverridableComponentProps } from "../../../overridable";
import "./Layer.scss";
-interface LayerProps extends OverridableComponentProps {
+interface LayerPropsMap extends OverridableComponentProps {
visible?: boolean;
}
+type DefDivProps = React.HTMLProps<HTMLDivElement>;
+type DivPropsOmitInputButtonFullProps = Omit<DefDivProps, keyof LayerPropsMap>;
+
+type LayerProps = DivPropsOmitInputButtonFullProps & {
+ [D in keyof LayerPropsMap]: LayerPropsMap[D];
+};
const Layer: React.FC<LayerProps> = (props: LayerProps) => {
- const { style, className, children, visible } = props;
+ const { style, className, children, visible, ...otherProps } = props;
const finalClassName: string = addClassName(
className || "",
"files-ui-layer"
);
if (visible)
return (
- <div className={finalClassName} style={style}>
+ <div className={finalClassName} style={style} {...otherProps}>
{children}
</div>
);
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
index 23e29424be4489b2ddfc784c7907393c639a47b2..aec6fa83682efa0436e6c6e455024c6055a22709 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -164,6 +164,9 @@
}
+ &.clickable{
+ cursor: pointer;
+ }
}
//// ICONS
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index e5806f2dc41e6cb2f0f1e10cc51af6aa8622976d..a1b9c4d9a81fd952e30a7db83351bdeda5e7e366 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -1,5 +1,9 @@
import * as React from "react";
-import { addClassName, fileSizeFormater } from "../../../../core";
+import {
+ addClassName,
+ fileSizeFormater,
+ handleClickUtil,
+} from "../../../../core";
import { FileMosaicProps } from "./FileMosaicProps";
import "./FileMosaic.scss";
import LayerContainer from "../file-mosaic-layer/LayerContainer";
@@ -11,9 +15,11 @@ import useFileMosaicInitializer from "../../hooks/useFileMosaicInitializer";
import FileMosaicImageLayer from "../FIleMosaicImageLayer/FileMosaicImageLayer";
import { useIsUploading } from "../../hooks/useIsUploading";
import { Tooltip } from "../../../tooltip";
-import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer";
+
import FileMosaicInfoLayer from "../FileMosaicInfoLayer/FileMosaicInfoLayer";
import useProgress from "../../hooks/useProgress";
+import DownloadHidden from "../../../download-hidden/DownloadHidden";
+import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer";
const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
const {
@@ -61,13 +67,15 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
onRightClick,
} = props;
- // console.log("FileMosaic progress " + id, progress);
//ref for anchor download element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
const finalClassName: string = addClassName(
- "files-ui-file-mosaic-main-container files-ui-tooltip",
- className
+ addClassName(
+ "files-ui-file-mosaic-main-container files-ui-tooltip",
+ className
+ ),
+ onClick ? "clickable" : undefined
);
const fileMosaicFileNameClassName: string = darkMode
@@ -82,10 +90,6 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
] = getLocalFileItemData(file, propName, propType, propSize);
// handle progress
- /* const localProgress: number | undefined = React.useMemo(
- () => getProgress(progress, xhr),
- [progress, xhr]
- ); */
const localProgress: number | undefined = useProgress(progress, xhr);
//console.log("FileMosaic progress localProgress " + localProgress);
@@ -198,6 +202,10 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
innerDownload();
}
};
+ const handleAbort = () => {
+ xhr?.abort();
+ onAbort?.(id);
+ };
if (isReady)
return (
@@ -265,7 +273,11 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
</Layer>
{/** INFO LAYER */}
- <Layer className="files-ui-file-mosaic-info-layer" visible={showInfo}>
+ <Layer
+ className="files-ui-file-mosaic-info-layer"
+ visible={showInfo}
+ onClick={handleClickUtil}
+ >
<FileMosaicInfoLayer
onCloseInfo={handleCloseInfo}
valid={valid}
@@ -280,19 +292,13 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
<Layer
className="files-ui-file-mosaic-upload-layer"
visible={isUploading}
+ onClick={handleClickUtil}
>
<FileMosaicUploadLayer
uploadStatus={uploadStatus}
progress={localProgress}
onCancel={onCancel ? () => onCancel?.(id) : undefined}
- onAbort={
- onAbort
- ? () => {
- xhr?.abort();
- onAbort?.(id);
- }
- : undefined
- }
+ onAbort={onAbort ? handleAbort : undefined}
localization={localization}
/>
</Layer>
@@ -309,11 +315,11 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
errors={errors}
uploadMessage={uploadMessage}
/>
- {downloadUrl && (
- <a ref={downloadRef} target={"_blank"} href={downloadUrl} download={localName} hidden>
- download_file
- </a>
- )}
+ <DownloadHidden
+ fileName={localName}
+ anchorRef={downloadRef}
+ downloadUrl={downloadUrl}
+ />
</div>
);
return <></>;
diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx
index 8c3ea45a140be99810f8887c08d7b34725b87f22..738852e46547149f2729e84d2c0d94e43fd1702c 100644
--- a/src/files-ui/components/icons/Cancel/Cancel.tsx
+++ b/src/files-ui/components/icons/Cancel/Cancel.tsx
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { CancelProps } from "./CancelProps";
+import { handleClickUtil } from "../../../core";
const Cancel: FC<CancelProps> = (props: CancelProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -9,7 +10,10 @@ const Cancel: FC<CancelProps> = (props: CancelProps) => {
return (
<svg
style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
xmlns="http://www.w3.org/2000/svg"
height={`${finalSize}px`}
viewBox="0 0 24 24"
diff --git a/src/files-ui/components/icons/Clear/Clear.tsx b/src/files-ui/components/icons/Clear/Clear.tsx
index 2ad7d87fb47f9d03b45a9e60a030f1182677f9e1..d3d02038662bb49ae8f6afae71ee9a7cab810fa4 100644
--- a/src/files-ui/components/icons/Clear/Clear.tsx
+++ b/src/files-ui/components/icons/Clear/Clear.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { ClearProps } from "./ClearProps";
+import { handleClickUtil } from "../../../core";
const Clear: React.FC<ClearProps> = (props: ClearProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const Clear: React.FC<ClearProps> = (props: ClearProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0V0z" fill={colorFill || "none"} />
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
diff --git a/src/files-ui/components/icons/CloudDone/CloudDone.tsx b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
index 1f79755dfe13d9d26407b430e097ec757c398513..637cd2750855e264d3d0b5678f766c52e0ea1ba9 100644
--- a/src/files-ui/components/icons/CloudDone/CloudDone.tsx
+++ b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { CloudDoneProps } from "./CloudDoneProps";
+import { handleClickUtil } from "../../../core";
const CloudDone: React.FC<CloudDoneProps> = (props: CloudDoneProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -16,7 +17,10 @@ const CloudDone: React.FC<CloudDoneProps> = (props: CloudDoneProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color || "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0V0z" fill={colorFill || "none"} />
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zm-9-3.82l-2.09-2.09L6.5 13.5 10 17l6.01-6.01-1.41-1.41z" />
diff --git a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
index 99f2a5e997ad56a6d68ec62a0eadfe7beaf43861..b2fd9946161e151851204086f849dea96d649ea7 100644
--- a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
+++ b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { handleClickUtil } from "../../../core";
import { parseSize } from "../utils/utils";
import { DownloadFileProps } from "./DownloadFileProps";
@@ -18,7 +19,10 @@ const DownloadFile: React.FC<DownloadFileProps> = (
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color || "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<g>
<rect fill={colorFill || "none"} height={finalSize} width={finalSize} />
diff --git a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
index 007c28e6435818a04abb030944ede746b79ff938..025f2fcb2d620257288d416cecb054ee28351b25 100644
--- a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
+++ b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { InfoBlackProps } from "./InfoBlackProps";
+import { handleClickUtil } from "../../../core";
const InfoBlack: React.FC<InfoBlackProps> = (props: InfoBlackProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const InfoBlack: React.FC<InfoBlackProps> = (props: InfoBlackProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color || "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0z" fill={colorFill || "none"} />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
diff --git a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
index 299058c421f1f77e0ff02c376aca11634a364b6c..28728757b23e03b11bea222b9cd03a8709535bd6 100644
--- a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
+++ b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { InfoDisneyProps } from "./InfoDisneyProps";
+import { handleClickUtil } from "../../../core";
const InfoDisney: React.FC<InfoDisneyProps> = (props: InfoDisneyProps) => {
const {
@@ -28,7 +29,10 @@ const InfoDisney: React.FC<InfoDisneyProps> = (props: InfoDisneyProps) => {
xmlns="http://www.w3.org/2000/svg"
height={`${finalSize}px`}
width={`${finalSize}px`}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
//style="height: 32px; min-width: 32px; width: 32px; z-index: auto;"
//class="sc-htoDjs bUEQUS"
>
diff --git a/src/files-ui/components/icons/Person/Person.tsx b/src/files-ui/components/icons/Person/Person.tsx
index 75f3b0279123c044a8d1709ff2ba9a454c5b09d0..a80ab2ec117e9042793cba1acd3bb6d59e1af26c 100644
--- a/src/files-ui/components/icons/Person/Person.tsx
+++ b/src/files-ui/components/icons/Person/Person.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { PersonProps } from "./PersonProps";
+import { handleClickUtil } from "../../../core";
const Person: React.FC<PersonProps> = (props: PersonProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const Person: React.FC<PersonProps> = (props: PersonProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0z"
diff --git a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
index 7a6fa22162f5cbddc104aa2b4aadb00535679194..220897f1cacfb8ab7a126f3999b48794449ee6ff 100644
--- a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
+++ b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { PhotoCameraProps } from "./PhotoCameraProps";
+import { handleClickUtil } from "../../../core";
const PhotoCamera: React.FC<PhotoCameraProps> = (props: PhotoCameraProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const PhotoCamera: React.FC<PhotoCameraProps> = (props: PhotoCameraProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Play/PlayIcon.tsx b/src/files-ui/components/icons/Play/PlayIcon.tsx
index 2698476a7e9ae6471180b4cac0450f787a07b516..690eb31b2f434eb3e11a83f073e16bd61e8ffd6c 100644
--- a/src/files-ui/components/icons/Play/PlayIcon.tsx
+++ b/src/files-ui/components/icons/Play/PlayIcon.tsx
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { PlayIconProps } from "./PlayIconProps";
+import { handleClickUtil } from "../../../core";
const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Remove/Remove.tsx b/src/files-ui/components/icons/Remove/Remove.tsx
index 3a83c8c5b000002506a6f4516988151f46f4280d..ee6ebd88425025a48a731a01950c4e3d4df4e260 100644
--- a/src/files-ui/components/icons/Remove/Remove.tsx
+++ b/src/files-ui/components/icons/Remove/Remove.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { RemoveProps } from "./RemoveProps";
+import { handleClickUtil } from "../../../core";
const Remove: React.FC<RemoveProps> = (props: RemoveProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const Remove: React.FC<RemoveProps> = (props: RemoveProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Remove/RemoveOutline.tsx b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
index 711a057f72ebb8307b51bc3ff7f3da974fa27642..a1d6068337dc728f7069cafc535923bf42f01d04 100644
--- a/src/files-ui/components/icons/Remove/RemoveOutline.tsx
+++ b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { parseSize } from "../utils/utils";
import { RemoveProps } from "./RemoveProps";
+import { handleClickUtil } from "../../../core";
const RemoveOutline: React.FC<RemoveProps> = (props: RemoveProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -15,7 +16,10 @@ const RemoveOutline: React.FC<RemoveProps> = (props: RemoveProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path
d="M0 0h24v24H0V0z"
diff --git a/src/files-ui/components/icons/Visibility/Visibility.tsx b/src/files-ui/components/icons/Visibility/Visibility.tsx
index bc805e91da39cd7b8844265c889d31fac57bea28..539862ea8e91567a693333121b839b78f22376a6 100644
--- a/src/files-ui/components/icons/Visibility/Visibility.tsx
+++ b/src/files-ui/components/icons/Visibility/Visibility.tsx
@@ -1,6 +1,7 @@
import React, { FC } from "react";
import { parseSize } from "../utils/utils";
import { VisibilityProps } from "./VisibilityProps";
+import { handleClickUtil } from "../../../core";
const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
const { size, color, colorFill, onClick, style, className } = props;
@@ -16,7 +17,10 @@ const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
viewBox="0 0 24 24"
width={`${finalSize}px`}
fill={color ? color : "#000000"}
- onClick={(e) => onClick?.(e)}
+ onClick={(e) => {
+ handleClickUtil(e);
+ onClick?.(e);
+ }}
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
diff --git a/src/files-ui/components/input-hidden/InputHidden.tsx b/src/files-ui/components/input-hidden/InputHidden.tsx
index 5e29c150246ee6ae6bb9ee45b1e7252f397a45cc..9725bcccc3681ab8cac2a30fd805fe8562a5a0ca 100644
--- a/src/files-ui/components/input-hidden/InputHidden.tsx
+++ b/src/files-ui/components/input-hidden/InputHidden.tsx
@@ -1,8 +1,14 @@
import * as React from "react";
+//import { handleClickUtil } from "../../core";
import { InputHiddenProps } from "./InputHiddenProps";
const InputHidden: React.FC<InputHiddenProps> = (props: InputHiddenProps) => {
const { onChange, inputRef, accept, multiple } = props;
+ /* function handleClick<T extends HTMLInputElement>(
+ evt: React.MouseEvent<T, MouseEvent>
+ ): void {
+ handleClickUtil(evt);
+ } */
return (
<React.Fragment>
<input
@@ -13,6 +19,7 @@ const InputHidden: React.FC<InputHiddenProps> = (props: InputHiddenProps) => {
type="file"
accept={accept}
multiple={multiple}
+ //onClick={handleClick}
/>
</React.Fragment>
);
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
index cdf344a886937a02e3ab7e5f38a697b127e54bd7..3f0c0e489a05c429d701ba71972db939eca72a03 100644
--- a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
@@ -82,7 +82,7 @@ const ImagePreview: React.FC<ImagePreviewProps> = (
onClick={(evt) => {
evt.preventDefault();
}}
- width={finalWidth}
+ width={!smart && !finalWidth?"100%":finalWidth}
height={finalHeight}
src={source}
alt={alt}
diff --git a/src/files-ui/core/download/downloadFile.ts b/src/files-ui/core/download/downloadFile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..709d6e5473b0d1199b7d7923b8287d2ecc92f2ef
--- /dev/null
+++ b/src/files-ui/core/download/downloadFile.ts
@@ -0,0 +1,17 @@
+export const downloadFileAnchor=async(fileName?:string, downloadUrl?:string)=>{
+
+}
+export const downloadFileXHR=async(fileName?:string, downloadUrl?:string)=>{
+
+
+}
+export const downloadFileFetch=async(fileName?:string, downloadUrl?:string)=>{
+
+
+}
+
+export const downloadAnchor=async(fileName?:string, downloadUrl?:string)=>{
+
+const anchorElement:HTMLAnchorElement = document.createElement("a");
+
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/click.utils.ts b/src/files-ui/core/utils/click.utils.ts
index e692f35258d9d6bde0fe04f88f74759c5377e7a8..a91e6a99917705b1bb7be27e4aa5a97a887af925 100644
--- a/src/files-ui/core/utils/click.utils.ts
+++ b/src/files-ui/core/utils/click.utils.ts
@@ -3,7 +3,7 @@
* @param evt click event handler object
*/
export function
- handleClickUtil<T extends HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>
+ handleClickUtil<T extends HTMLDivElement | HTMLButtonElement | HTMLAnchorElement | SVGSVGElement | HTMLInputElement>
(
evt: React.MouseEvent<T, MouseEvent>
) {
@@ -18,6 +18,7 @@ export function
export const handleClickInput = (
input: HTMLInputElement | null
) => {
+ console.log("handleClickInput:", input);
if (!input) return;
input.click();
}
\ No newline at end of file
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 5e8274220a2a0167c24b3aa88c7c877ed7ea553c..d726bf64b7cdb495c7db685225670174d91d72dc 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -10,6 +10,9 @@ import MainFooter from "../components/MainPage/MainFooter";
import FileMosaicImageVideoPreviews from "../components/MainPage/MainRight/FileMosaicImageVideoPreviews";
//import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
import { Divider } from "@mui/material";
+import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
+import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
+import ExtraComponentsMainPageAvatar from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar";
const MainPage = ({ darkMode }) => {
const [darkModeOn, setDarkModeOn] = React.useState(false);
@@ -30,9 +33,17 @@ const MainPage = ({ darkMode }) => {
<div className="fui-main-left">
<div className={"filesui-main-logo-container"}>
{!darkMode ? (
- <img className="fui-logo-img" src={logo_blue} alt={"files-ui-logo-blue"}/>
+ <img
+ className="fui-logo-img"
+ src={logo_blue}
+ alt={"files-ui-logo-blue"}
+ />
) : (
- <img className="fui-logo-img" src={logo_blue_dark} alt={"files-ui-logo-dark"}/>
+ <img
+ className="fui-logo-img"
+ src={logo_blue_dark}
+ alt={"files-ui-logo-dark"}
+ />
)}
</div>
@@ -58,9 +69,35 @@ const MainPage = ({ darkMode }) => {
<FileMosaicImageVideoPreviews darkMode={darkModeOn} />
</div>
</main>
-
+ <section
+ id="more-components"
+ className={
+ darkModeOn
+ ? "files-ui-secondary-container darkmode"
+ : "files-ui-secondary-container"
+ }
+ >
+ <div className="secondary-content">
+ <h2
+ className={!darkModeOn ? "fui-logo-text" : "fui-logo-text darkmode"}
+ >
+ Yes! There are even more components
+ </h2>
+ <div className="secondary-content-flex">
+ <div className="secondary-item">
+ <ExtraComponentsMainPage darkMode={darkModeOn} />
+ </div>
+ <div className="secondary-item">
+ <ExtraComponentsMainPageInputButton darkMode={darkModeOn} />
+ </div>
+ <div className="secondary-item">
+ <ExtraComponentsMainPageAvatar darkMode={darkModeOn} />
+ </div>
+ </div>
+ </div>
+ </section>
<MainFooter />
</div>
);
};
-export default MainPage;
\ No newline at end of file
+export default MainPage;
diff --git a/src/static/videos/NarutoEN.mp4 b/src/static/videos/NarutoEN.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..4b5a4ed9b91b9b0af0af8a5985ded2944c2f6792
Binary files /dev/null and b/src/static/videos/NarutoEN.mp4 differ
diff --git a/src/static/videos/NarutoES.mp4 b/src/static/videos/NarutoES.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..43777a67fdcc7838c8ca7ef3f6b11e51eee59e66
Binary files /dev/null and b/src/static/videos/NarutoES.mp4 differ
diff --git a/src/static/videos/ThorEN-1.mp4 b/src/static/videos/ThorEN-1.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..0f3344c31f37ed954c17d40c0a49f5d6532858fc
Binary files /dev/null and b/src/static/videos/ThorEN-1.mp4 differ
diff --git a/src/static/videos/ThorEN.mp4 b/src/static/videos/ThorEN.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..0f3344c31f37ed954c17d40c0a49f5d6532858fc
Binary files /dev/null and b/src/static/videos/ThorEN.mp4 differ
diff --git a/src/styles/MainPage.scss b/src/styles/MainPage.scss
index 5cd45f529ee14ad2bd72af3a3a2ceb2f16a449dc..33d0e3032cf25ad366d61ad34efc5220c8a14dd9 100644
--- a/src/styles/MainPage.scss
+++ b/src/styles/MainPage.scss
@@ -22,7 +22,7 @@ $border-color-dark: #0a1929;
align-items: center;
flex-direction: column;
justify-content: center;
-
+ color: #0a1929;
.filesui-nav {
transition: all 0.4s ease-in-out;
color: #042354;
@@ -173,7 +173,55 @@ $border-color-dark: #0a1929;
justify-content: center;
gap: 10px;
}
+ .files-ui-secondary-container {
+ width: 100%;
+ background-color: #f3f6f9;
+ &.darkmode {
+ background-color: #001e3c;
+ }
+ padding-bottom: 28px;
+ .secondary-content {
+ margin: auto;
+ width: 100%;
+ max-width: 1280px;
+ //min-height: calc(100vh - 64px);
+
+ .secondary-content-flex {
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ gap: 30px;
+ box-sizing: border-box;
+ padding: 0 28px;
+ flex-wrap: wrap;
+ .secondary-item {
+ flex-grow: 1;
+ min-width: 30%;
+ }
+ }
+ @media (max-width: 900px) {
+ .secondary-right {
+ width: 100%;
+ }
+ .secondary-left {
+ width: 100%;
+ }
+ }
+ .secondary-right {
+ box-sizing: border-box;
+ width: 50%;
+ margin: auto;
+ }
+ .secondary-left {
+ box-sizing: border-box;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+ }
+ }
.gradient-span {
font-weight: 700;
background: linear-gradient(