diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
index a878f3fa86f042b278fbd84c9add44021d3925ed..a65af2237e54eab3e71943cb5e8797a62c04b1ee 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { ExtFile, FileMosaic } from "../../../files-ui";
+import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
const sampleFileProps: ExtFile = {
id: "fileId",
@@ -7,10 +7,37 @@ const sampleFileProps: ExtFile = {
type: "text/plain",
name: "file created from props.jsx",
};
-const DemoFileMosaicDarkMode = () => {
+const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
const removeFile = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id);
};
+ if (props.card)
+ return (
+ <>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "white",
+ padding: "15px 0",
+ }}
+ >
+ <FileCard {...sampleFileProps} info onDelete={removeFile} />
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ width: "50%",
+ backgroundColor: "#121212",
+ padding: "15px 0",
+ }}
+ >
+ <FileCard {...sampleFileProps} info darkMode onDelete={removeFile} />
+ </div>
+ </>
+ );
return (
<>
<div
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index 37faae4fd4c79760fa5903ab1accc098e41c085b..17103c4452d982fc31e6c97204ce77a711bd526b 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -1,6 +1,7 @@
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
.files-ui-file-card-main-container {
border-radius: 8px;
+ overflow: hidden;
color: rgba(0, 0, 0, 0.858);
display: flex;
flex-direction: row;
@@ -8,12 +9,130 @@
margin: 10px;
min-height: 100px;
box-sizing: border-box;
- padding: 10px;
position: relative;
font-size: 15px;
font-weight: 400;
- min-width: 280px;
+ width: 380px;
+ .files-ui-file-card-main-layer-container {
+ width: 380px;
+ box-sizing: border-box;
+ height: 100px;
+ box-sizing: border-box;
+ .file-card-main-layer {
+ box-sizing: border-box;
+
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ box-sizing: border-box;
+ align-items: center;
+ justify-content: space-between;
+ .file-card-icon-container {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ position: relative;
+ box-sizing: border-box;
+
+ //background-color: aqua;
+ .file-card-icon-layer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 5px;
+
+ img {
+ //filter: blur(0);
+ //margin: auto;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ }
+ &.blur {
+ img {
+ filter: blur(4px);
+ width: 200%;
+ height: 200%;
+ }
+ }
+ }
+ }
+ .file-card-data {
+ line-height: 18px;
+ font-weight: 500;
+ width: 200px;
+ word-break: break-all;
+ color: black;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ height: 100%;
+ &.dark-mode {
+ color: rgba(255, 255, 255, 0.7);
+ }
+ .file-card-size {
+ font-weight: 400;
+ font-size: 0.95rem;
+ }
+ .file-card-name {
+ //margin-top: 3px;
+ letter-spacing: 0.125em;
+ font-size: 1rem;
+ //white-space: nowrap;
+ //padding: 0.5px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 1; /* number of lines to show */
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ &.not-allowed {
+ background-color: rgba(180, 16, 16, 0.7);
+ }
+ }
+ }
+ }
+ .file-card-upload-layer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ box-sizing: border-box;
+ //background-color: rgba(0, 0, 0, 0.5);
+ background: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 0.25),
+ rgba(0, 0, 0, 0.3),
+ rgba(0, 0, 0, 0.5),
+ rgba(0, 0, 0, 0.75),
+ rgba(0, 0, 0, 0.85),
+ rgba(0, 0, 0, 0.85),
+ rgba(0, 0, 0, 0.85),
+ rgba(0, 0, 0, 0.85),
+ rgba(0, 0, 0, 0.85)
+ );
+ color: rgba(255, 255, 255, 0.8);
+ font-weight: 500;
+ font-size: 1em;
+ position: relative;
+ overflow: hidden;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ }
.file-card-data {
line-height: 18px;
font-weight: 500;
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 4b6a2c425cdc0d4e6fabef40dfdc9b68b4463a05..be8004a50c6dcbcc93abc10b5aec029899688f5c 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -14,6 +14,9 @@ import MainLayerBodyNeo from "../file-item/components/FileItemMainLayer/MainLaye
import useProgress from "../file-mosaic/hooks/useProgress";
import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
+import LayerContainer from "../file-mosaic/components/file-mosaic-layer/LayerContainer";
+import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
+import FileMosaicImageLayer from "../file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer";
const setFinalElevation = (elevation: string | number): number => {
// let finalElevation: number = "";
@@ -96,7 +99,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
onClick,
onRightClick,
- elevation=2,
+ elevation = 4,
//} = mergeProps(props, FileCardPropsDefault);
} = props;
@@ -238,10 +241,75 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
className={finalClassName}
style={style}
onClick={handleClick}
+ onMouseEnter={handleOnHoverEnter}
+ onMouseLeave={handleOnHoverLeave}
onDoubleClick={handleDoubleClick}
onContextMenu={handleRightClick}
>
- <FileItemImage
+ <LayerContainer
+ className="files-ui-file-card-main-layer-container"
+ style={style}
+ >
+ <Layer className="file-card-main-layer" visible={true}>
+ {/** ICON/IMAGE LAYER */}
+ <div className="file-card-icon-container">
+ <LayerContainer className="file-card-icon-layer">
+ {/** IMAGE LAYER BLUR */}
+ <Layer
+ className="file-card-icon-layer blur"
+ visible={backgroundBlurImage}
+ >
+ <FileMosaicImageLayer
+ imageSource={imageSource}
+ url={url}
+ fileName={localName}
+ isBlur={true}
+ />
+ </Layer>
+ {/** IMAGE LAYER NO BLUR */}
+ <Layer className="file-card-icon-layer" visible={true}>
+ <FileMosaicImageLayer
+ imageSource={imageSource}
+ url={url}
+ fileName={localName}
+ isBlur={false}
+ />
+ </Layer>
+ </LayerContainer>
+ </div>
+
+ <div
+ className={
+ darkMode ? "file-card-data dark-mode" : "file-card-data"
+ }
+ >
+ <div className={"file-card-name"}>
+ {shrinkWord(localName, true)}
+ </div>
+
+ <div className={"file-card-size"}>{sizeFormatted}</div>
+ <div className={"file-card-size"}>{shrinkWord(localType)}</div>
+ </div>
+ <div className="files-ui-file-card-right">
+ <Clear
+ style={{ position: "absolute", right: 0, top: 0 }}
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={handleDelete}
+ size="small"
+ colorFill="transparent"
+ />
+ </div>
+ </Layer>
+ <Layer className="file-card-upload-layer" visible={isUploading}>
+ Upload Layer
+ </Layer>
+ </LayerContainer>
+ {/* <FileItemImage
imageSource={imageSource}
url={url}
fileName={localName}
@@ -277,7 +345,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
hovering={true}
onCancel={onCancel}
/>
- </div>
+ </div> */}
</div>
);
}
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 74f2126a2b1ac8a2b692eb371a434a63e0adc022..58f248a21ee1a13a656496f9bc15a54f0cc5f594 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -18,6 +18,9 @@ import { AlertTitle } from "@mui/material";
import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
+import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
+import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
const FileCardDemoPage = (props) => {
return (
@@ -116,20 +119,114 @@ const FileCardDemoPage = (props) => {
image preview will be shown in order to save memory.
</Alert>
</section>
- <section id="validation">
- <SubTitle content="Validation" />
+ {/** VALIDATION UPLOAD AND MORE */}
+ <section id="dark-mode">
+ <SubTitle content="Dark mode" />
<DescParagraph>
- The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
- <TypeHighlight>true</TypeHighlight>,{" "}
- <TypeHighlight>false</TypeHighlight> or{" "}
- <TypeHighlight>undefined</TypeHighlight>
+ The <CodeHighlight>FileCard</CodeHighlight> component supports
+ dark mode by setting the prop{" "}
+ <TypeHighlight>darkMode</TypeHighlight> to{" "}
+ <TypeHighlight>true</TypeHighlight>.
</DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- {/* <BasicDemoDropzone /> */}
+ <Paper
+ variant="outlined"
+ style={{
+ //padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ width: "100%",
+ }}
+ >
+ <DemoFileMosaicDarkMode card />
</Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
+
+ <CodeJSFileMosaicDarkMode card />
+ </section>
+ {/* <section id="localization">
+ <SubTitle content="Localization" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> component has
+ multilanguage support. You can change the language in wich labels
+ are displayed by setting the{" "}
+ <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
+ the following languages are supported:
+ <ul>
+ {[
+ "English",
+ "Spanish",
+ "French",
+ "Italian",
+ "Portuguese",
+ "Russian",
+ "Chinnese (simplified)",
+ "Chinnese (traditional)",
+ ].map((x) => (
+ <li>
+ <TypeHighlight>{x}</TypeHighlight>
+ </li>
+ ))}
+ </ul>
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap: "20px",
+ }}
+ >
+ <DemoFileMosaicLocalization />
+ </Paper>
+ <CodeJSFileMosaicLocalization />
+ </section>
+
+ <section id="file-icon">
+ <SubTitle content="File Icons (extensive list)" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> component supports
+ several file types to properly set a file icon. The complete list of
+ file icons is the following:
+ </DescParagraph>
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px 0",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ //flexDirection: "column",
+ gap: "10px",
+ flexWrap: "wrap",
+ }}
+ >
+ <DemoFileMosaicFileIcons />
+ </Paper>
+ </section> */}
+
+ <section id="api">
+ <SubTitle content="API" />
+ <DescParagraph>
+ See the documentation below for a complete reference to all of the
+ props available to the components mentioned here.
+ </DescParagraph>
+ <ul>
+ <li>
+ <AnchorToTab href="/api/filecard">
+ {"<FileMosaic/>"}
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/api/fileinputbuttom">
+ {"<FileInputButton/>"}
+ </AnchorToTab>
+ </li>
+ </ul>
</section>
</MainContentContainer>
<RightMenuContainer>