diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx index 37ea3ae9d25297a274c1dc198e492199d696080f..93615bcb9c19af25c45de85f6f4c62be487c56e6 100644 --- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx +++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx @@ -55,7 +55,7 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => { style={{ display: "flex", justifyContent: "center", - backgroundColor: "white", + backgroundColor: "#121212", padding: "25px 0", flexGrow:1 }} diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx index cd00c210de763ee0951df8b37b479176046994af..14216b7c139e9f974632c1c1e7b250858cb73301 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx @@ -1,13 +1,27 @@ import * as React from "react"; -import { ExtFile, FileCard, FileMosaic } from "../../../files-ui"; - -const sampleFileProps: ExtFile = { +import { + ExtFile, + FileCard, + FileCardProps, + FileMosaic, +} from "../../../files-ui"; +const sampleFileProps = { id: "fileId", size: 28 * 1024 * 1024, type: "text/plain", - name: "file created from props.jsx", + name: "sampleFile" + ".jsx", valid: true, }; +const sampleFilePropsCard = (elevationNumber: number): ExtFile => { + return { + id: "fileId", + size: 28 * 1024 * 1024, + type: "text/plain", + name: "elevation=" + elevationNumber + ".jsx", + valid: true, + }; +}; + const DemoFileMosaicDarkMode = (props: { card?: boolean }) => { const removeFile = (id: string | number | undefined) => { console.log("delete button clicked on file: " + id); @@ -19,23 +33,46 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => { style={{ display: "flex", justifyContent: "center", + flexDirection: "column", backgroundColor: "white", + alignItems: "center", padding: "25px 0", - flexGrow:1 + flexGrow: 1, + gap: "7px", }} > - <FileCard {...sampleFileProps} info onDelete={removeFile} /> + {[0, 4, 16, 24].map((elevation) => ( + <FileCard + key={elevation} + {...sampleFilePropsCard(elevation)} + onDelete={removeFile} + info + elevation={elevation as FileCardProps["elevation"]} + /> + ))} </div> <div style={{ display: "flex", + flexDirection: "column", justifyContent: "center", backgroundColor: "#121212", + alignItems: "center", padding: "25px 0", flexGrow: 1, + gap: "7px", }} > - <FileCard {...sampleFileProps} info darkMode onDelete={removeFile} /> + {[0, 4, 16, 24].map((elevation) => ( + <FileCard + key={elevation} + {...sampleFilePropsCard(elevation)} + onDelete={removeFile} + darkMode + info + elevation={elevation as FileCardProps["elevation"]} + /> + ))} </div> </> ); @@ -61,7 +98,6 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => { backgroundColor: "#121212", padding: "15px 0", flexGrow: 1, - }} > <FileMosaic {...sampleFileProps} info darkMode onDelete={removeFile} /> diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx index f1851fe50a7a31a7faa1e9ebb327033a287dd5fa..4164618983b572150cd7b45c24af17ebe78d0e83 100644 --- a/src/pages/demo/FileCardDemoPage.jsx +++ b/src/pages/demo/FileCardDemoPage.jsx @@ -210,84 +210,53 @@ const FileCardDemoPage = (props) => { </section> <section id="dark-mode"> - <SubTitle content="Dark mode" /> + <SubTitle content="Dark mode and Elevation" /> <DescParagraph> The <CodeHighlight>FileCard</CodeHighlight> component supports dark mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "} - <TypeHighlight>true</TypeHighlight>. + <TypeHighlight>true</TypeHighlight>. The elevation can be used to + establish a hierarchy between other content. In practical terms, the + elevation controls the size of the shadow applied to the surface. In + dark mode, raising the elevation also makes the surface lighter. </DescParagraph> - <div style={{ display: "flex", flexWrap: "wrap" }}> + <div + style={{ + display: "flex", + flexWrap: "wrap", + width: "100%", + padding: "25px 0", + }} + > <DemoFileMosaicDarkMode card /> </div> <CodeJSFileMosaicDarkMode card /> </section> - {/* <section id="localization"> - <SubTitle content="Localization" /> + {/* <section id="actions"> + <SubTitle content="Actions: info, delete, see, watch, download" /> <DescParagraph> - The <CodeHighlight>FileMosaic</CodeHighlight> component has - multilanguage support. You can change the language in wich labels - are displayed by setting the{" "} - <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only - the following languages are supported: - <ul> - {[ - "English", - "Spanish", - "French", - "Italian", - "Portuguese", - "Russian", - "Chinnese (simplified)", - "Chinnese (traditional)", - ].map((x) => ( - <li> - <TypeHighlight>{x}</TypeHighlight> - </li> - ))} - </ul> + The <CodeHighlight>FileCard</CodeHighlight> component supports dark + mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "} + <TypeHighlight>true</TypeHighlight>. The elevation can be used to + establish a hierarchy between other content. In practical terms, the + elevation controls the size of the shadow applied to the surface. In + dark mode, raising the elevation also makes the surface lighter. </DescParagraph> - <Paper - variant="outlined" + <div style={{ - padding: "25px", display: "flex", - alignItems: "center", - justifyContent: "center", - flexDirection: "column", - gap: "20px", - }} - > - <DemoFileMosaicLocalization /> - </Paper> - <CodeJSFileMosaicLocalization /> - </section> - - <section id="file-icon"> - <SubTitle content="File Icons (extensive list)" /> - <DescParagraph> - The <CodeHighlight>FileMosaic</CodeHighlight> component supports - several file types to properly set a file icon. The complete list of - file icons is the following: - </DescParagraph> - <Paper - variant="outlined" - style={{ - padding: "25px 0", - display: "flex", - alignItems: "center", - justifyContent: "center", - //flexDirection: "column", - gap: "10px", flexWrap: "wrap", + width: "100%", + padding: "25px 0", }} > - <DemoFileMosaicFileIcons /> - </Paper> - </section> */} + <DemoFileMosaicDarkMode card /> + </div> + <CodeJSFileMosaicDarkMode card /> + </section> */} <section id="api"> <SubTitle content="API" /> <DescParagraph> @@ -356,7 +325,7 @@ const rightMenuItems = [ }, { id: 8, - label: "Dark mode", + label: "Dark mode & elevation", referTo: "/components/file-mosaic#dark-mode", }, ];