From bc85d49f371938f09921a0791d918a31d1e5d937 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 15 Mar 2023 19:45:52 -0500
Subject: [PATCH] [WIP]: Add header and footer config. Also improved
inheritance of font color and background from Dropzone.solor prop
---
.../drop-layer/utils/dropLayerDynamicStyle.ts | 14 +++++---------
.../components/DropzoneFooter/DropzoneFooter.tsx | 2 +-
.../components/DropzoneHeader/DropzoneHeader.tsx | 10 ++++++----
.../dropzone/components/dropzone/Dropzone.scss | 8 ++++----
.../dropzone/components/dropzone/Dropzone.tsx | 7 ++++---
.../components/dropzone/useDropzoneClassName.ts | 11 +++++------
6 files changed, 25 insertions(+), 27 deletions(-)
diff --git a/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts b/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
index 28c80a9..303b726 100644
--- a/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
+++ b/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
@@ -1,4 +1,4 @@
-import { asureColor, colourNameToHex, hexColorToRGB } from "../../../core";
+import { completeAsureColor } from "../../../core";
import { DEFAULT_BORDER_RADIUS } from "../../dropzone/components/dropzone/DropzoneProps";
export const dropLayerDynamicStyle = (styleId: string, color: string | undefined, isDragging: boolean | undefined) => {
@@ -10,19 +10,15 @@ export const dropLayerDynamicStyle = (styleId: string, color: string | undefined
className: `dropzone-ui-layer`,
rules: {
- backgroundColor: hexColorToRGB(
- asureColor(colourNameToHex(color)),
- 0.4
- ), borderRadius: DEFAULT_BORDER_RADIUS,
+ backgroundColor:
+ completeAsureColor(color, 0.4),
+ borderRadius: DEFAULT_BORDER_RADIUS,
position: "absolute",
left: 0,
top: 0,
width: "0%",
height: "0%",
- border: isDragging ? `2px dashed ${hexColorToRGB(
- asureColor(colourNameToHex(color)),
- 1
- )}` : undefined,
+ border: isDragging ? `2px dashed ${completeAsureColor(color, 1)}` : undefined,
zIndex: 20,
},
diff --git a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
index 4cf167d..e4709b2 100644
--- a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
@@ -45,7 +45,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = (
}
const finalClassName = resetStyles
? className
- : addClassName("files-ui-footer files-ui-footer-border", className);
+ : addClassName("files-ui-footer files-ui-footer-border-bg-color", className);
const finalStyle = resetStyles
? style
diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
index 26b6063..d93cb00 100644
--- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -24,6 +24,7 @@ export type DropzoneHeaderProps = {
style?: React.CSSProperties;
className?: string;
resetStyles?: boolean;
+ color?:string;
};
const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
@@ -43,6 +44,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
style,
className = "",
resetStyles,
+ color
} = props;
const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
@@ -60,12 +62,12 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
if (onUploadStart && urlPresent && numberOfValidFiles) {
if (isUploading) {
- result.push(<UploadingProcess spin={true} color="#646c7f" />);
+ result.push(<UploadingProcess spin={true} color={color} />);
} else {
result.push(
<React.Fragment>
<>{DropzoneHeaderLocalizer.uploadFilesMessage}</>
- <Upload color="#646c7f" onClick={handleStartUploading} />
+ <Upload color={color} onClick={handleStartUploading} />
</React.Fragment>
);
}
@@ -90,13 +92,13 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
//clean not valid files on click
if (onClean) {
result.push(
- <Clean color="#646c7f" onClick={handleClean} size="semi-medium" />
+ <Clean color={color} onClick={handleClean} size="semi-medium" />
);
}
if (onReset) {
result.push(
<Cancel
- color="#646c7f"
+ color={color}
onClick={() => onReset?.()}
// colorFill="rgba(255,255,255,0.8)"
/>
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
index 657f0dd..84ad391 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
@@ -17,7 +17,7 @@
//padding: 23px 0px;
/// label
- color: #646c7f;
+ //color: #646c7f;
text-rendering: optimizeLegibility;
font-size: 1.5em;
font-family: inherit;
@@ -65,7 +65,7 @@
font-family: inherit;
//padding-right: 10px;
font-size: 1rem;
- background-color: rgba(0, 128, 128, 0.249);
+ //background-color: rgba(0, 128, 128, 0.249);
@media (max-width: 960px) {
//width: calc(100% - 1px);
//padding-right: 1px;
@@ -89,7 +89,7 @@
align-items: flex-start;
justify-content: center;
border-top: 1px dotted grey;
- background-color: #80808021;
+ //background-color: rgba(128, 128, 128, 0.129);
font-family: "Poppins", sans-serif;
font-family: inherit;
padding-left: 10px;
@@ -103,7 +103,7 @@
-webkit-box-orient: vertical;
- background-color: rgba(0, 128, 128, 0.249);
+ //background-color: rgba(0, 128, 128, 0.249);
@media (max-width: 960px) {
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index c0c64b1..8f2a0af 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -51,6 +51,7 @@ import useDropzoneFileListUpdater from "../../../../hooks/useDropzoneFileUpdater
import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
+import { completeAsureColor } from "../../../../core";
//import { print_manager } from "../../../../../utils";
@@ -691,8 +692,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
<div
ref={fuiRippleRefAbs}
className="dropzone-ui-base-ripple-absolute"
- style={{borderRadius:style?.borderRadius}}
-
+ style={{ borderRadius: style?.borderRadius }}
>
<div
ref={fuiRippleRefRel}
@@ -707,6 +707,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
<>{customHeader}</>
) : (
<DropzoneHeader
+ color={completeAsureColor(color)}
style={styleHeader}
className={classNameHeader}
resetStyles={resetStylesHeader}
@@ -773,7 +774,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
className={dropLayerClassName}
onDragLeave={handleDragLeave}
onDrop={kamui}
- style={{borderRadius:style?.borderRadius}}
+ style={{ borderRadius: style?.borderRadius }}
/>
)}
diff --git a/src/files-ui/components/dropzone/useDropzoneClassName.ts b/src/files-ui/components/dropzone/useDropzoneClassName.ts
index 70c5e8c..67565ef 100644
--- a/src/files-ui/components/dropzone/useDropzoneClassName.ts
+++ b/src/files-ui/components/dropzone/useDropzoneClassName.ts
@@ -1,6 +1,6 @@
import { DynamicSheet, DynamicSheetRule, DynamiCSS } from "@dynamicss/dynamicss";
import * as React from "react";
-import { asureColor, colourNameToHex, hexColorToRGB } from "../../core";
+import { completeAsureColor } from "../../core";
import { DEFAULT_BORDER_RADIUS } from "./components/dropzone/DropzoneProps";
export default function useDropzoneClassName(
@@ -96,20 +96,19 @@ const makeDynamicDropzoneStyleSheet = (
const rootColorBorderStyle: DynamicSheetRule = {
className: `files-ui-dropzone-extra`,
rules: {
- border: `1px dashed ${isDragging?"transparent":hexColorToRGB(
- asureColor(colourNameToHex(color)),
- 1
- )}`,
+ color: completeAsureColor(color),
+ border: `1px dashed ${isDragging ? "transparent" : completeAsureColor(color)}`,
borderRadius: DEFAULT_BORDER_RADIUS,
backgroundColor: backgroundColor,
minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
},
};
const footerBorderStyle: DynamicSheetRule = {
- className: `files-ui-footer-border`,
+ className: `files-ui-footer-border-bg-color`,
rules: {
"border-bottom-left-radius": DEFAULT_BORDER_RADIUS,
"border-bottom-right-radius": DEFAULT_BORDER_RADIUS,
+ backgroundColor: completeAsureColor(color, 0.129)
},
};
const headerBorderStyle: DynamicSheetRule = {
--
GitLab