From 21a13ad8352e240b5334e9ef878a70edfc37685e Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 7 Mar 2023 18:41:18 -0500
Subject: [PATCH] [WIP]: Add FIleCar component and FileCardDemo Page
---
.../components/file-card/FileCard.scss | 177 ++++++++----------
.../components/file-card/FileCard.tsx | 110 ++++++-----
.../file-card/FileCardRightLayer.tsx | 131 +++++++++++++
.../file-card/FileMosaicRightLayer.scss | 16 ++
4 files changed, 291 insertions(+), 143 deletions(-)
create mode 100644 src/files-ui/components/file-card/FileCardRightLayer.tsx
create mode 100644 src/files-ui/components/file-card/FileMosaicRightLayer.scss
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index 17103c4..4c3c8d0 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -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;
- }
}
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index be8004a..2dabd5a 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -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>
diff --git a/src/files-ui/components/file-card/FileCardRightLayer.tsx b/src/files-ui/components/file-card/FileCardRightLayer.tsx
new file mode 100644
index 0000000..c2e766d
--- /dev/null
+++ b/src/files-ui/components/file-card/FileCardRightLayer.tsx
@@ -0,0 +1,131 @@
+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;
diff --git a/src/files-ui/components/file-card/FileMosaicRightLayer.scss b/src/files-ui/components/file-card/FileMosaicRightLayer.scss
new file mode 100644
index 0000000..ccb4ecc
--- /dev/null
+++ b/src/files-ui/components/file-card/FileMosaicRightLayer.scss
@@ -0,0 +1,16 @@
+.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%;
+}
--
GitLab