From 0dc447078d19d8213fc5e4d8672a8927e4d5926b Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 9 Mar 2023 00:37:01 -0500
Subject: [PATCH] [WIP]: Fix layout for darkmode and upload demo components
---
.../CodeJSFileMosaicDarkMode.tsx | 34 +++++++++----------
.../DemoFileMosaicDarkMode.tsx | 6 ++--
.../filemosaic-demo/DemoFileMosaicUpload.scss | 20 +++++++++++
.../DemoFileMosaicUploadStatus.tsx | 18 ++++++----
src/pages/demo/FileCardDemoPage.jsx | 14 ++------
5 files changed, 52 insertions(+), 40 deletions(-)
create mode 100644 src/components/demo-components/filemosaic-demo/DemoFileMosaicUpload.scss
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
index d9e90d7..37ea3ae 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
@@ -39,14 +39,14 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
console.log("delete button clicked on file: " + id);
};
return (
- <>
+ <div style={{ display: "flex", flexWrap: "wrap" }}>
<div
style={{
display: "flex",
justifyContent: "center",
- width: "50%",
backgroundColor: "white",
- padding: "10px 0",
+ padding: "25px 0",
+ flexGrow:1
}}
>
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
@@ -55,18 +55,17 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
style={{
display: "flex",
justifyContent: "center",
- width: "50%",
- backgroundColor: "#121212",
- padding: "10px 0",
+ backgroundColor: "white",
+ padding: "25px 0",
+ flexGrow:1
}}
>
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
</div>
- </>
+ </div>
);
};
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;
-`;
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
const completeCodeTS = (card?: boolean) => `import * as React from "react";
import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
@@ -82,14 +81,14 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
console.log("delete button clicked on file: " + id);
};
return (
- <>
+ <div style={{ display: "flex", flexWrap: "wrap" }}>
<div
style={{
display: "flex",
justifyContent: "center",
- width: "50%",
backgroundColor: "white",
- padding: "10px 0",
+ padding: "25px 0",
+ flexGrow:1
}}
>
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
@@ -98,15 +97,14 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
style={{
display: "flex",
justifyContent: "center",
- width: "50%",
- backgroundColor: "#121212",
- padding: "10px 0",
+ backgroundColor: "white",
+ padding: "25px 0",
+ flexGrow:1
}}
>
<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
</div>
- </>
+ </div>
);
};
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;
-`;
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
index e1cbbec..cd00c21 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
@@ -19,9 +19,8 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
style={{
display: "flex",
justifyContent: "center",
- minWidth: "50%",
backgroundColor: "white",
- padding: "15px 0",
+ padding: "25px 0",
flexGrow:1
}}
>
@@ -31,9 +30,8 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
style={{
display: "flex",
justifyContent: "center",
- minWidth: "50%",
backgroundColor: "#121212",
- padding: "15px 0",
+ padding: "25px 0",
flexGrow: 1,
}}
>
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUpload.scss b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUpload.scss
new file mode 100644
index 0000000..a90ac86
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUpload.scss
@@ -0,0 +1,20 @@
+/* .flex-container-group-group {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+} */
+.flex-container-group-card {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+.flex-container-group-mosaic {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ }
+
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
index 2a3dcc0..8668e4f 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
@@ -7,8 +7,8 @@ import {
FileCard,
} from "../../../files-ui";
import TypeHighlight from "../../typeHighlight/TypeHighlight";
-import DemoContainerFileMosaic from "./DemoContainerFileMosaic";
+import "./DemoFileMosaicUpload.scss";
const DemoFileMosaicUploadStatus = (props: { card?: boolean }) => {
const progress = useFakeProgress();
@@ -95,14 +95,20 @@ export default DemoFileMosaicUploadStatus;
const FlexRowContainer = (props: {
children: React.ReactNode;
card?: boolean;
- title?:string
+ title?: string;
}) => {
+ const { children, card, title } = props;
return (
<React.Fragment>
- <TypeHighlight>{props.title}</TypeHighlight>
- <DemoContainerFileMosaic card={props.card}>
- {props.children}
- </DemoContainerFileMosaic>
+ {!card && <h4 style={{ margin: 0 }}>{title}</h4>}
+ <div
+ className={
+ card ? "flex-container-group-card" : "flex-container-group-mosaic"
+ }
+ >
+ {card && <h4 style={{ margin: 0 }}>{title}</h4>}
+ {children}
+ </div>
</React.Fragment>
);
};
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 641e39c..f1851fe 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -217,19 +217,9 @@ const FileCardDemoPage = (props) => {
<TypeHighlight>true</TypeHighlight>.
</DescParagraph>
- <Paper
- variant="outlined"
- style={{
- padding: "25px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- flexDirection: "column",
- gap: "20px",
- }}
- >
+ <div style={{ display: "flex", flexWrap: "wrap" }}>
<DemoFileMosaicDarkMode card />
- </Paper>
+ </div>
<CodeJSFileMosaicDarkMode card />
</section>
--
GitLab