Skip to content
Snippets Groups Projects
Commit 21a13ad8 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[WIP]: Add FIleCar component and FileCardDemo Page

parent 6e9cd3e5
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/files-ui/components/file-card/FileCard.scss
+ 82
− 95
View file @ 21a13ad8
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
box-sizing: border-box; box-sizing: border-box;
.file-card-main-layer { .file-card-main-layer {
//padding: 5px 0;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
...@@ -31,78 +31,99 @@ ...@@ -31,78 +31,99 @@
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.file-card-icon-container { .file-card-icon-plus-data {
width: 100px; display: flex;
height: 100px; align-items: center;
overflow: hidden; justify-content: flex-start;
position: relative; gap:5px;
box-sizing: border-box; .file-card-icon-container {
//margin: 0 10px;
//background-color: aqua; width: 100px;
.file-card-icon-layer { height: 100px;
position: absolute; overflow: hidden;
left: 0; position: relative;
right: 0;
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px; box-sizing: border-box;
// background-color: aqua;
.file-card-icon-layer {
box-sizing: border-box;
position: absolute;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
//background-color: blue;
img { overflow: hidden;
//filter: blur(0);
//margin: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
&.blur {
img { img {
filter: blur(4px); //filter: blur(0);
width: 200%; //margin: auto;
height: 200%; background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
&.blur {
img {
filter: blur(4px);
width: 200%;
height: 200%;
}
} }
} }
} }
} .file-card-data {
.file-card-data { line-height: 18px;
line-height: 18px; font-weight: 500;
font-weight: 500; width: 250px;
width: 200px; //flex-grow: 1;
word-break: break-all; word-break: break-all;
color: black; color: black;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
&.dark-mode { &.dark-mode {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
.file-card-size { .file-card-size {
font-weight: 400; font-weight: 400;
font-size: 0.95rem; font-size: 0.95rem;
} }
.file-card-name { .file-card-name {
//margin-top: 3px; //letter-spacing: 0.09em;
letter-spacing: 0.125em; font-size: 1rem;
font-size: 1rem; text-align: center;
//white-space: nowrap; overflow: hidden;
//padding: 0.5px; text-overflow: ellipsis;
text-align: center; display: -webkit-box;
overflow: hidden; -webkit-line-clamp: 1; /* number of lines to show */
text-overflow: ellipsis; line-clamp: 1;
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */ &.not-allowed {
line-clamp: 1; background-color: rgba(180, 16, 16, 0.7);
-webkit-box-orient: vertical; }
&.not-allowed {
background-color: rgba(180, 16, 16, 0.7);
} }
} }
} }
} }
.files-ui-file-card-right-layer {
right: 0;
left: unset;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
padding: 3px;
width: 60px;
//background-color: aquamarine;
height: 100%;
}
.file-card-upload-layer { .file-card-upload-layer {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -133,38 +154,4 @@ ...@@ -133,38 +154,4 @@
justify-content: flex-end; justify-content: flex-end;
} }
} }
.file-card-data {
line-height: 18px;
font-weight: 500;
word-break: break-all;
color: black;
&.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);
}
}
}
.files-ui-file-card-right {
min-width: 60px;
}
} }
src/files-ui/components/file-card/FileCard.tsx
+ 62
− 48
View file @ 21a13ad8
...@@ -17,6 +17,7 @@ import { useIsUploading } from "../file-mosaic/hooks/useIsUploading"; ...@@ -17,6 +17,7 @@ import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
import LayerContainer from "../file-mosaic/components/file-mosaic-layer/LayerContainer"; import LayerContainer from "../file-mosaic/components/file-mosaic-layer/LayerContainer";
import Layer from "../file-mosaic/components/file-mosaic-layer/Layer"; import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
import FileMosaicImageLayer from "../file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer"; import FileMosaicImageLayer from "../file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer";
import FileCardRightLayer from "./FileCardRightLayer";
const setFinalElevation = (elevation: string | number): number => { const setFinalElevation = (elevation: string | number): number => {
// let finalElevation: number = ""; // let finalElevation: number = "";
...@@ -251,60 +252,73 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { ...@@ -251,60 +252,73 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
style={style} style={style}
> >
<Layer className="file-card-main-layer" visible={true}> <Layer className="file-card-main-layer" visible={true}>
{/** ICON/IMAGE LAYER */} <div className="file-card-icon-plus-data">
<div className="file-card-icon-container"> <div className="file-card-icon-container">
<LayerContainer className="file-card-icon-layer"> <LayerContainer className="file-card-icon-layer">
{/** IMAGE LAYER BLUR */} {/** IMAGE LAYER BLUR */}
<Layer <Layer
className="file-card-icon-layer blur" className="file-card-icon-layer blur"
visible={backgroundBlurImage} visible={backgroundBlurImage}
> >
<FileMosaicImageLayer <FileMosaicImageLayer
imageSource={imageSource} imageSource={imageSource}
url={url} url={url}
fileName={localName} fileName={localName}
isBlur={true} isBlur={true}
/> />
</Layer> </Layer>
{/** IMAGE LAYER NO BLUR */} {/** IMAGE LAYER NO BLUR */}
<Layer className="file-card-icon-layer" visible={true}> <Layer className="file-card-icon-layer" visible={true}>
<FileMosaicImageLayer <FileMosaicImageLayer
imageSource={imageSource} imageSource={imageSource}
url={url} url={url}
fileName={localName} fileName={localName}
isBlur={false} isBlur={false}
/> />
</Layer> </Layer>
</LayerContainer> </LayerContainer>
</div>
<div
className={
darkMode ? "file-card-data dark-mode" : "file-card-data"
}
>
<div className={"file-card-name"}>
{shrinkWord(localName, true)}
</div> </div>
<div className={"file-card-size"}>{sizeFormatted}</div> <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={ className={
darkMode darkMode ? "file-card-data dark-mode" : "file-card-data"
? "files-ui-file-icon dark-mode"
: "files-ui-file-icon"
} }
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"} >
onClick={handleDelete} <div className={"file-card-name"}>
size="small" {/* {shrinkWord(localName, true)} */}
colorFill="transparent" {localName}
/> </div>
<div className={"file-card-size"}>{sizeFormatted}</div>
<div className={"file-card-size"}>{shrinkWord(localType)}</div>
</div>
</div> </div>
</Layer> </Layer>
<Layer
className="files-ui-file-card-right-layer"
visible={!isUploading}
>
<FileCardRightLayer
deleteIcon={onDelete !== undefined}
onDelete={handleDelete}
darkMode={darkMode}
valid={valid}
uploadStatus={uploadStatus}
localization={localization}
sizeFormatted={sizeFormatted}
imageIcon={isImage && onSee !== undefined}
onSee={() => onSee?.(imageSource)}
videoIcon={isVideo && onWatch !== undefined}
onWatch={() => onWatch?.(file)}
downloadIcon={
onDownload !== undefined || downloadUrl !== undefined
}
onDownload={handleDownload}
infoIcon={info !== undefined}
onOpenInfo={handleOpenInfo}
isActive={alwaysActive || hovering}
/>
</Layer>
<Layer className="file-card-upload-layer" visible={isUploading}> <Layer className="file-card-upload-layer" visible={isUploading}>
Upload Layer Upload Layer
</Layer> </Layer>
......
src/files-ui/components/file-card/FileCardRightLayer.tsx 0 → 100644
+ 131
− 0
View file @ 21a13ad8
import * as React from "react";
import { Localization, UPLOADSTATUS } from "../../core";
import {
Clear,
DownloadFile,
InfoDisney,
PlayIcon,
Visibility,
} from "../icons";
import "./FileMosaicRightLayer.scss";
declare type FileCardRightLayerProps = {
darkMode?: boolean;
deleteIcon?: boolean;
onDelete?: Function;
valid: boolean | null | undefined;
uploadStatus?: UPLOADSTATUS;
localization?: Localization;
sizeFormatted: string;
imageIcon: boolean;
onSee: ((imageSource: string | undefined) => void) | undefined;
videoIcon: boolean;
onWatch: ((videoSource: File | undefined) => void) | undefined;
downloadIcon: boolean;
onDownload: Function | undefined;
infoIcon: boolean;
onOpenInfo: Function | undefined;
isActive?: boolean;
};
const FileCardRightLayer: React.FC<FileCardRightLayerProps> = (
props: FileCardRightLayerProps
) => {
const {
darkMode,
deleteIcon,
downloadIcon,
imageIcon,
infoIcon,
onDelete,
onDownload,
onOpenInfo,
onSee,
onWatch,
sizeFormatted,
valid,
videoIcon,
localization,
uploadStatus,
isActive,
} = props;
return (
<>
<div className="file-card-right-layer-header">
{isActive && deleteIcon && (
<Clear
className={
darkMode ? "files-ui-file-icon dark-mode" : "files-ui-file-icon"
}
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
onClick={onDelete}
size="small"
colorFill="transparent"
/>
)}
</div>
<div className="file-card-right-layer-footer">
{isActive && (
<React.Fragment>
{imageIcon && (
<Visibility
className={
darkMode
? "files-ui-file-icon dark-mode"
: "files-ui-file-icon"
}
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
onClick={onSee}
size="small"
/>
)}
{videoIcon && (
<PlayIcon
className={
darkMode
? "files-ui-file-icon dark-mode"
: "files-ui-file-icon"
}
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
onClick={onWatch}
size="small"
/>
)}
{downloadIcon && (
<DownloadFile
className={
darkMode
? "files-ui-file-icon dark-mode"
: "files-ui-file-icon"
}
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
onClick={onDownload}
size="small"
/>
)}
{infoIcon && (
<InfoDisney
className={
darkMode
? "files-ui-file-icon dark-mode"
: "files-ui-file-icon"
}
onClick={onOpenInfo}
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
size="micro"
/>
)}
</React.Fragment>
)}
</div>
</>
);
};
export default FileCardRightLayer;
src/files-ui/components/file-card/FileMosaicRightLayer.scss 0 → 100644
+ 16
− 0
View file @ 21a13ad8
.file-card-right-layer-header {
display: flex;
align-items: center;
justify-content: flex-end;
height: 20px;
width: 100%;
}
.file-card-right-layer-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
height: 20px;
width: 100%;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment