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
No related branches found
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 @@
box-sizing: border-box;
.file-card-main-layer {
//padding: 5px 0;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
......@@ -31,78 +31,99 @@
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%;
.file-card-icon-plus-data {
display: flex;
align-items: center;
justify-content: flex-start;
gap:5px;
.file-card-icon-container {
//margin: 0 10px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
display: flex;
align-items: 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 {
//filter: blur(0);
//margin: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
&.blur {
overflow: hidden;
img {
filter: blur(4px);
width: 200%;
height: 200%;
//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-data {
line-height: 18px;
font-weight: 500;
width: 250px;
//flex-grow: 1;
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 {
//letter-spacing: 0.09em;
font-size: 1rem;
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-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 {
position: absolute;
left: 0;
......@@ -133,38 +154,4 @@
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";
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";
import FileCardRightLayer from "./FileCardRightLayer";
const setFinalElevation = (elevation: string | number): number => {
// let finalElevation: number = "";
......@@ -251,60 +252,73 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
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 className="file-card-icon-plus-data">
<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={"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 }}
<div
className={
darkMode
? "files-ui-file-icon dark-mode"
: "files-ui-file-icon"
darkMode ? "file-card-data dark-mode" : "file-card-data"
}
color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
onClick={handleDelete}
size="small"
colorFill="transparent"
/>
>
<div className={"file-card-name"}>
{/* {shrinkWord(localName, true)} */}
{localName}
</div>
<div className={"file-card-size"}>{sizeFormatted}</div>
<div className={"file-card-size"}>{shrinkWord(localType)}</div>
</div>
</div>
</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}>
Upload 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.
Finish editing this message first!
Please register or to comment