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

[WIP]: Fix layout for darkmode and upload demo components

parent f7cba20b
No related branches found
No related tags found
No related merge requests found
......@@ -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;`;
......@@ -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,
}}
>
......
/* .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;
}
......@@ -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>
);
};
......
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment