diff --git a/src/components/MainPage/MainNavBar.jsx b/src/components/MainPage/MainNavBar.jsx
index affa1adbcb748b40c0c04ce078de202cee660c39..d04521603e058d95a8570b418661f34bf202777d 100644
--- a/src/components/MainPage/MainNavBar.jsx
+++ b/src/components/MainPage/MainNavBar.jsx
@@ -5,6 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
//import { useNavigate } from "react-router";
import logo_text_blue from "../../static/files-ui-logo-text-med.png";
import logo_text_blue_dark from "../../static/files-ui-logo-text-med-dark.png";
+import AnchorToTab from "../util-components/AnchorToTab";
const MainNavBar = ({
darkModeOn,
@@ -12,9 +13,9 @@ const MainNavBar = ({
logo_blue_dark,
handleDarkMode,
}) => {
- const handleGoGitRepo = () => {
+ /* const handleGoGitRepo = () => {
window.open("https://github.com/files-ui", "_blank");
- };
+ }; */
return (
<nav className="filesui-nav">
@@ -38,15 +39,17 @@ const MainNavBar = ({
<div className="right-part">
<Tooltip title="Go to Files-ui GitHub repo">
- <IconButton
- style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
- onClick={handleGoGitRepo}
- color="secondary"
- aria-label="upload picture"
- component="label"
- >
- <GitHubIcon /* htmlColor="white" */ />
- </IconButton>
+ <AnchorToTab href="https://github.com/files-ui">
+ <IconButton
+ style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+ //onClick={handleGoGitRepo}
+ color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <GitHubIcon /* htmlColor="white" */ />
+ </IconButton>
+ </AnchorToTab>
</Tooltip>
<DarkModeLightModeButton
darkModeOn={darkModeOn}
diff --git a/src/components/RightMenu/RightMenu.scss b/src/components/RightMenu/RightMenu.scss
index a0e02196a2ec076b0a86bd6b30e47f7c9e62dc8a..4c907e01289ca4d41abf79bbdc39f0e85d568440 100644
--- a/src/components/RightMenu/RightMenu.scss
+++ b/src/components/RightMenu/RightMenu.scss
@@ -4,9 +4,17 @@
padding-left: 5px;
width: 100%;
//word-break: break-all;
+
+ border-left: unset;
+ color: #6f7e8c;
+
&.selected,
&:hover {
- border-left: 2px #b2bac2 solid;
- color: #6f7e8c;
+ border-left-width: 2px;
+ border-left-style: solid;
+ color: rgb(0, 114, 229);
+ &.darkmode {
+ color: rgb(102, 178, 255);
+ }
}
}
diff --git a/src/components/RightMenu/RightMenu.tsx b/src/components/RightMenu/RightMenu.tsx
index b3bb31ae0b9868cee7f5197029aa74b5ed7cf3fd..ce6b2e4332a5ea1ccfc3e49d824beacf051e8c0a 100644
--- a/src/components/RightMenu/RightMenu.tsx
+++ b/src/components/RightMenu/RightMenu.tsx
@@ -3,21 +3,29 @@ import ListSubheader from "@mui/material/ListSubheader/ListSubheader";
import * as React from "react";
import { RightMenuProps } from "./RightMenuProps";
import "./RightMenu.scss";
+import { UserContext } from "../../globals/contexts/UserContext";
const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
- const { items, width } = props;
- const [selectedItem, setSelectedItem] = React.useState<number>(0);
- const handleChangeSelectedItem = (newIndex: number) =>
- setSelectedItem(newIndex);
+ const { items, width, selectedItemProp: selectedItem = 0 } = props;
+ const [usuario, ] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+
const handleClickAnchor = (
e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
onClick: Function | undefined,
id: number
) => {
onClick?.();
- handleChangeSelectedItem(id);
};
+
+ const finalSelectedId = selectedItem;
+
+ const darkmodeClassName = darkMode
+ ? "right-menu-anchor-item darkmode"
+ : "right-menu-anchor-item";
+ //const darkmodeClassName = darkMode?"":"";
return (
<List
+ // className="section-container"
sx={{ width: "100%", maxWidth: width, bgcolor: "background.paper" }}
component="nav"
aria-labelledby="nested-list-subheader"
@@ -31,14 +39,13 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
{items &&
items.map(({ isSelected, label, onClick, referTo, id }, index) => {
const classNameForAnchor: string =
- selectedItem === id
- ? "right-menu-anchor-item selected"
- : "right-menu-anchor-item";
+ finalSelectedId === id
+ ? `${darkmodeClassName} selected`
+ : darkmodeClassName;
return (
<li key={index} style={{ listStyle: "none", margin: 0 }}>
<a
className={classNameForAnchor}
- //href={`${baseUrl}/#${referTo}`}
href={`${referTo}`}
onClick={(e) => handleClickAnchor(e, onClick, id)}
>
diff --git a/src/components/RightMenu/RightMenuProps.ts b/src/components/RightMenu/RightMenuProps.ts
index 2d1388457084692f249fd44c1fc25f78537f623b..e8d14440ffd7721c8ad8a5818378199fbb01981d 100644
--- a/src/components/RightMenu/RightMenuProps.ts
+++ b/src/components/RightMenu/RightMenuProps.ts
@@ -10,4 +10,6 @@ export interface RightMenuProps {
items: RightMenuItem[];
width: string;
baseUrl?: string;
+ selectedItemProp?:number;
+ setSelected?:Function;
}
\ No newline at end of file
diff --git a/src/components/codeHighlight/CodeHighlight.scss b/src/components/codeHighlight/CodeHighlight.scss
index e875b170c843463ab98650c48816681030c3165f..665381cee39f632effbb87a178062be432155075 100644
--- a/src/components/codeHighlight/CodeHighlight.scss
+++ b/src/components/codeHighlight/CodeHighlight.scss
@@ -5,7 +5,7 @@
font-size: 0.9125rem;
padding: 0px 5px;
line-height: 1.6;
- &.dark-mode{
+ &.darkmode {
color: #fff;
background-color: rgba(102, 178, 255, 0.15);
}
diff --git a/src/components/codeHighlight/CodeHighlight.tsx b/src/components/codeHighlight/CodeHighlight.tsx
index 4b0e79ecd708b56f99a999d06cadfa73a434dcf4..0241c3aa7bc8a82ba2ddcd911e1ec2e165b1455a 100644
--- a/src/components/codeHighlight/CodeHighlight.tsx
+++ b/src/components/codeHighlight/CodeHighlight.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
import "./CodeHighlight.scss";
interface CodeHighlightProps {
@@ -8,11 +9,13 @@ interface CodeHighlightProps {
const CodeHighlight: React.FC<CodeHighlightProps> = (
props: CodeHighlightProps
) => {
- const { children, darkMode } = props;
- return (
- <code className={darkMode ? "code-highlight dark-mode" : "code-highlight"}>
- {children}
- </code>
- );
+ const { children } = props;
+ const [usuario, ] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+ const finaldarkmodeclassName = !darkMode
+ ? "code-highlight"
+ : "code-highlight darkmode";
+
+ return <code className={finaldarkmodeclassName}>{children}</code>;
};
export default CodeHighlight;
diff --git a/src/components/demo-components/desc-paragraph/DescParagraphProps.scss b/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
index fc473fdf90cb127c79fcd6d6662b97d26df788b8..18a88260cdde29668d5817ee93a713d3f72e2bae 100644
--- a/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
+++ b/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
@@ -5,7 +5,7 @@
font-weight: 400;
margin-bottom: 16px;
margin-top: 0;
- color: #1a2027;
+ // color: #1a2027;
word-break: break-word;
&.dark-mode{
color: rgba(255, 255, 255, 0.7);
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
index 670d538f43ca34f00035fe43a832ee221c869387..6de6f8cd82f8d60eed80a8389c0962aa4658916f 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
@@ -38,32 +38,31 @@ const splittedCodeJS = `<Dropzone
uploadButton: {},
}}
>
- {extFiles.map((file) => (
- <FileMosaic
- {...file}
- key={file.id}
- onDelete={onDelete}
- onSee={handleSee}
- onWatch={handleWatch}
- onAbort={handleAbort}
- onCancel={handleCancel}
- resultOnTooltip
- alwaysActive
- preview
- info
- />
- ))}
+ {extFiles.map((file) => (
+ <FileMosaic
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
+ resultOnTooltip
+ preview
+ info
+ />
+ ))}
</Dropzone>
<FullScreen
open={imageSrc !== undefined}
onClose={() => setImageSrc(undefined)}
- >
+>
<ImagePreview src={imageSrc} />
</FullScreen>
<FullScreen
open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)}
- >
+>
<VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>`;
const completeCodeJS = `import {
@@ -72,9 +71,9 @@ const completeCodeJS = `import {
FullScreen,
ImagePreview,
VideoPreview,
- } from "@files-ui/react";
+} from "@files-ui/react";
- const BASE_URL =
+const BASE_URL =
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
export default function AdvancedDropzoneDemo() {
@@ -122,26 +121,26 @@ export default function AdvancedDropzoneDemo() {
return (
<>
<Dropzone
- onChange={updateFiles}
- minHeight="195px"
- value={extFiles}
- maxFiles={3}
- // FmaxFileSize={2998000 * 20}
- label="Drag'n drop files here or click to browse"
- // accept=".png,image/*, video/*"
- uploadConfig={{
- // autoUpload: true
- url: BASE_URL + "/file/28048465460",
- cleanOnUpload: true,
+ onChange={updateFiles}
+ minHeight="195px"
+ value={extFiles}
+ maxFiles={3}
+ // FmaxFileSize={2998000 * 20}
+ label="Drag'n drop files here or click to browse"
+ // accept=".png,image/*, video/*"
+ uploadConfig={{
+ // autoUpload: true
+ url: BASE_URL + "/file/28048465460",
+ cleanOnUpload: true,
}}
- onUploadStart={handleStart}
- onUploadFinish={handleFinish}
- //fakeUpload
- actionButtons={{
- position: "after",
- abortButton: {},
- deleteButton: {},
- uploadButton: {},
+ onUploadStart={handleStart}
+ onUploadFinish={handleFinish}
+ //fakeUpload
+ actionButtons={{
+ position: "after",
+ abortButton: {},
+ deleteButton: {},
+ uploadButton: {},
}}
>
{extFiles.map((file) => (
diff --git a/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx b/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
index 4ce2fe463df90586a2482864cf33303ad15e1b22..f355012a7f137469bb9a14bbaa1670133847418c 100644
--- a/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
+++ b/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
@@ -28,7 +28,7 @@ const videoSample = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "video/mp4",
- name: "Thos arrives wakanda.mp4",
+ name: "Thor arrives wakanda.mp4",
videoUrl: ThorArrivesWakandaEN,
};`;
@@ -39,7 +39,7 @@ const videoSample = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "video/mp4",
- name: "Thos arrives wakanda.mp4",
+ name: "Thor arrives wakanda.mp4",
videoUrl: ThorArrivesWakandaEN,
};
@@ -75,7 +75,7 @@ const videoSample: ExtFile = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "video/mp4",
- name: "Thos arrives wakanda.mp4",
+ name: "Thor arrives wakanda.mp4",
videoUrl: ThorArrivesWakandaEN,
};`;
@@ -86,7 +86,7 @@ const videoSample: ExtFile = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "video/mp4",
- name: "Thos arrives wakanda.mp4",
+ name: "Thor arrives wakanda.mp4",
videoUrl: ThorArrivesWakandaEN,
};
diff --git a/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx b/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
index 5f2b83cebb4946ccdfc33646bbd589dcb11ad1a0..763f7f6d972484d8ff1895fd5f1a4b1e467e00f6 100644
--- a/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
+++ b/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
@@ -34,6 +34,6 @@ const videoSample: ExtFile = {
id: "fileId-1",
size: 28 * 1024 * 1024,
type: "video/mp4",
- name: "Thos arrives wakanda.mp4",
+ name: "Thor arrives wakanda.mp4",
videoUrl: ThorArrivesWakandaEN,
};
diff --git a/src/components/demo-components/icons/JSIcon.jsx b/src/components/demo-components/icons/JSIcon.jsx
index 4d2eaa1a68f4b3bc3e073c051bbbea11c6fa2bb2..f4a219decbcf1e54a213d213dbcf7890ff3f2611 100644
--- a/src/components/demo-components/icons/JSIcon.jsx
+++ b/src/components/demo-components/icons/JSIcon.jsx
@@ -9,6 +9,7 @@ const JSIcon = ({ size = "20px", color = "black" }) => {
viewBox="0 0 24 24"
height={size}
width={size}
+ fill={color}
>
<path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"></path>
</svg>
diff --git a/src/components/demo-components/icons/TSIcon.jsx b/src/components/demo-components/icons/TSIcon.jsx
index 9b66ec6cb8833277c3bbceacc9544084864df3f6..889c378bc50c3323227ade6bdd0a14fa07ca55d5 100644
--- a/src/components/demo-components/icons/TSIcon.jsx
+++ b/src/components/demo-components/icons/TSIcon.jsx
@@ -8,6 +8,7 @@ const TSIcon = ({ size = "20px", color = "black" }) => {
viewBox="0 0 24 24"
height={size}
width={size}
+ fill={color}
>
<path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"></path>
</svg>
diff --git a/src/components/demo-components/sub-title/SubTitle.scss b/src/components/demo-components/sub-title/SubTitle.scss
index 99458b7cafcd94b17a35a2ae267f8f5a753f77b8..386c0467b957dc1480265bfaeb704ae0366bdfba 100644
--- a/src/components/demo-components/sub-title/SubTitle.scss
+++ b/src/components/demo-components/sub-title/SubTitle.scss
@@ -2,8 +2,8 @@
font-size: 1.5rem;
line-height: 1.5;
letter-spacing: 0.1px;
- color: #1a2027;
- &.dark-mode{
- color:rgba(255, 255, 255, 0.7);
- }
+ //color: #1a2027;
+ /* &.dark-mode{
+ //color:rgba(255, 255, 255, 0.7);
+ } */
}
diff --git a/src/components/layout-pages/LayoutPage.scss b/src/components/layout-pages/LayoutPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9f435c42dba715fb939824fa771825ec76ee6681
--- /dev/null
+++ b/src/components/layout-pages/LayoutPage.scss
@@ -0,0 +1,6 @@
+.files-ui-layout {
+ color: #1a2027;
+ &.darkmode {
+ color: rgba(255, 255, 255, 0.7);
+ }
+}
diff --git a/src/components/layout-pages/MainContentContainer.jsx b/src/components/layout-pages/MainContentContainer.jsx
index 3d54657ec59e79cf903cf8fccf8963a5e7cb411b..2995cd30e424b75fdb7e0e2815b6635e42696d55 100644
--- a/src/components/layout-pages/MainContentContainer.jsx
+++ b/src/components/layout-pages/MainContentContainer.jsx
@@ -4,6 +4,7 @@ import * as React from "react";
const MainContentContainer = ({ children }) => {
return (
<Box
+
sx={{
overflow: "hidden",
boxSizing: "border-box",
@@ -15,10 +16,12 @@ const MainContentContainer = ({ children }) => {
}}
>
<Box
+ // className="section-container"
sx={{
boxSizing: "border-box",
width: "100%",
//backgroundColor:"grey"
+
}}
>
{children}
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
index fa6eb44b072ba27e5bff57df09fdc8bbe8c569ce..5848356e0b2f1b513575914e00ddb5e2240f81dc 100644
--- a/src/components/layout-pages/MainLayoutPage.jsx
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -1,14 +1,23 @@
import { Stack } from "@mui/material";
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
import NavBarTemplate from "../../templates/NavBarTemplate";
+import "./LayoutPage.scss";
-const MainLayoutPage = ({
- children,
- selectedIndex,
-}) => {
+const MainLayoutPage = ({ children, selectedIndex }) => {
+ const [usuario, ] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+
+ const finalClassName = darkMode
+ ? "files-ui-layout darkmode"
+ : "files-ui-layout";
return (
<NavBarTemplate selectedIndex={selectedIndex}>
- <Stack direction={"row"} sx={{ position: "relative" }}>
+ <Stack
+ direction={"row"}
+ sx={{ position: "relative" }}
+ className={finalClassName}
+ >
{children}
</Stack>
</NavBarTemplate>
diff --git a/src/components/main-title/MainTitle.tsx b/src/components/main-title/MainTitle.tsx
index 6c177be9925baa24dcab1c56a7c90cb9184f97ed..b201c3ef83baa35a50a9853ddaa9ea2f30a3116d 100644
--- a/src/components/main-title/MainTitle.tsx
+++ b/src/components/main-title/MainTitle.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
interface MainTitleProps {
children?: React.ReactNode;
style?: React.CSSProperties;
@@ -6,13 +7,17 @@ interface MainTitleProps {
}
const MainTitle: React.FC<MainTitleProps> = (props: MainTitleProps) => {
const { children, className, style } = props;
+ const [usuario, ] = React.useContext(UserContext);
+
+ // const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const darkMode = usuario.darkMode;
return (
<h1
style={{
fontSize: "2.25rem",
letterSpacing: "0.2px",
lineHeight: "1.22222",
- color: "#0a1929",
+ color: darkMode ? "rgba(255, 255, 255, 0.7)" : "#0a1929",
wordBreak: "break-word",
...style,
}}
diff --git a/src/components/paragraph-main/MainParagraph.scss b/src/components/paragraph-main/MainParagraph.scss
index 288709a0fbfeda2a9dfd7079cd48155072d24e36..468d12247467ed7ece56162add48a7358c1d99d8 100644
--- a/src/components/paragraph-main/MainParagraph.scss
+++ b/src/components/paragraph-main/MainParagraph.scss
@@ -5,5 +5,8 @@
font-weight: 400;
margin-bottom: 16px;
margin-top: 0;
- color: #1A2027;
+ //color: #1A2027;
+ .darkmode{
+ color: rgba(255, 255, 255, 0.7);
+ }
}
diff --git a/src/components/paragraph-main/MainParagraph.tsx b/src/components/paragraph-main/MainParagraph.tsx
index 3722b44c8301dd3cedd7dbc19055e6dc994d8ff5..b5727690f7c56796ebb8f0d7200712fdc503406c 100644
--- a/src/components/paragraph-main/MainParagraph.tsx
+++ b/src/components/paragraph-main/MainParagraph.tsx
@@ -1,10 +1,15 @@
import * as React from "react";
import { ParagraphMainProps } from "./MainParagraphProps";
import "./MainParagraph.scss";
+import { UserContext } from "../../globals/contexts/UserContext";
const MainParagraph: React.FC<ParagraphMainProps> = (
props: ParagraphMainProps
) => {
const { content, children } = props;
- return <p className="paragraph-main">{children || content}</p>;
+ const [usuario, ] = React.useContext(UserContext);
+ const darkModeOn = usuario.darkMode;
+ const className = darkModeOn ? "paragraph-main darkmode" : "paragraph-main";
+
+ return <p className={className}>{children || content}</p>;
};
export default MainParagraph;
diff --git a/src/components/show-demo-code/ShowDemoCode.tsx b/src/components/show-demo-code/ShowDemoCode.tsx
index d79f7fe4a0aa906a73c778f0dec0b3bc05651e4d..9cd76ede050273bf83b2865b2d0c467b99065286 100644
--- a/src/components/show-demo-code/ShowDemoCode.tsx
+++ b/src/components/show-demo-code/ShowDemoCode.tsx
@@ -6,6 +6,7 @@ import * as React from "react";
import JSIcon from "../demo-components/icons/JSIcon";
import TSIcon from "../demo-components/icons/TSIcon";
import { Highlighter } from "rc-highlight";
+import { UserContext } from "../../globals/contexts/UserContext";
interface ShowDemoCodeProps {
codeSandboxJS?: string;
codeSandboxTS?: string;
@@ -30,6 +31,9 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
const [showComplete, setShowComplete] = React.useState(false);
const [showJS, setShowJS] = React.useState(true);
+ const [usuario, ] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+
const code: string = showComplete
? showJS
? codeCompleteJS
@@ -60,7 +64,7 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
//startIcon={}
onClick={() => setShowJS(true)}
>
- <JSIcon />
+ <JSIcon color={darkMode?"rgb(178, 186, 194)":"rgb(45, 56, 67)"}/>
</Button>
<Button
size="small"
@@ -70,7 +74,7 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
// endIcon={}
onClick={() => setShowJS(false)}
>
- <TSIcon />
+ <TSIcon color={darkMode?"rgb(178, 186, 194)":"rgb(45, 56, 67)"}/>
</Button>
</ButtonGroup>
)}
diff --git a/src/components/typeHighlight/TypeHighlight.scss b/src/components/typeHighlight/TypeHighlight.scss
index fbedd9c38bbdde86e5ea2967dbbcf935488e9c38..09626fc33465a15c129168eb98a4473e16731623 100644
--- a/src/components/typeHighlight/TypeHighlight.scss
+++ b/src/components/typeHighlight/TypeHighlight.scss
@@ -1,5 +1,7 @@
.type-highlight {
color: rgb(147, 41, 129);
+ //color: #ef7ed1;
+
font-size: 0.9125rem;
line-height: 1.6;
// word-break: break-all;
@@ -8,4 +10,7 @@
&.np{
padding: 0;
}
+ &.darkmode{
+ color: #ffb6ec;
+ }
}
diff --git a/src/components/typeHighlight/TypeHighlight.tsx b/src/components/typeHighlight/TypeHighlight.tsx
index 2451fe4c1c0d58e0e689a2ae42aa74b67e528e4b..f52e725aee9c52959f5273b06663a9c1ae0f2446 100644
--- a/src/components/typeHighlight/TypeHighlight.tsx
+++ b/src/components/typeHighlight/TypeHighlight.tsx
@@ -1,20 +1,28 @@
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
import "./TypeHighlight.scss";
interface TypeHighlightProps {
children?: React.ReactNode;
np?: boolean;
size?: string;
+ darkMode?: boolean;
}
const TypeHighlight: React.FC<TypeHighlightProps> = (
props: TypeHighlightProps
) => {
const { children, np, size } = props;
+ const [usuario, ] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+ const finaldarkmodeclassName = !darkMode
+ ? "type-highlight"
+ : "type-highlight darkmode";
+ const finalNpclassName = np
+ ? `${finaldarkmodeclassName} np`
+ : finaldarkmodeclassName;
+
return (
- <div
- className={np ? "type-highlight np" : "type-highlight"}
- style={{ fontSize: size }}
- >
+ <div className={finalNpclassName} style={{ fontSize: size }}>
{children}
</div>
);
diff --git a/src/data/ExtFileAPIRows.tsx b/src/data/ExtFileAPIRows.tsx
index 35b4ccae1551cef747bfd7fa045e6269956e0449..146e804fecb8447e5667a73c79691d11419a492b 100644
--- a/src/data/ExtFileAPIRows.tsx
+++ b/src/data/ExtFileAPIRows.tsx
@@ -1,59 +1,62 @@
import CodeHighlight from "../components/codeHighlight/CodeHighlight";
import TypeHighlight from "../components/typeHighlight/TypeHighlight";
import AnchorToTab from "../components/util-components/AnchorToTab";
-export const ExtFileAPIRows = [
+export const ExtFileAPIRows = (darkMode = false) => [
{
name: "id",
type: (
<>
{" "}
- <TypeHighlight np>{"string"}</TypeHighlight> {" | "}
- <TypeHighlight np>{"number"}</TypeHighlight>
+ <TypeHighlight darkMode={darkMode} np>
+ {"string"}
+ </TypeHighlight>{" "}
+ {" | "}
+ <TypeHighlight darkMode={darkMode} np>{"number"}</TypeHighlight>
</>
),
- default: <TypeHighlight np></TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The identifier of the file</>,
},
{
name: "file",
- type: <TypeHighlight np>{"File"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"File"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The file object obtained from client drop or selection</>,
},
{
name: "name",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The name of the file</>,
},
{
name: "type",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The file mime type.</>,
},
{
name: "size",
- type: <TypeHighlight np>{"number"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"number"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The size of the file in bytes.</>,
},
{
name: "valid",
- type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
If present, it will show a valid or rejected message ("valid",
- "denied"). By default valid is <CodeHighlight>undefined</CodeHighlight>.
+ "denied"). By default valid is <CodeHighlight darkMode={darkMode}>undefined</CodeHighlight>.
</>
),
},
{
name: "errors",
- type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
The list of errors according to the validation criteria or the result of
@@ -64,29 +67,27 @@ export const ExtFileAPIRows = [
{
name: "uploadStatus",
type: (
- <TypeHighlight np>
- <AnchorToTab href="/types#uploadstatus">
- {"UPLOADSTATUS"}
- </AnchorToTab>
+ <TypeHighlight darkMode={darkMode} np>
+ <AnchorToTab href="/types#uploadstatus">{"UPLOADSTATUS"}</AnchorToTab>
</TypeHighlight>
),
- default: <TypeHighlight np></TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The current upload status. (e.g. "uploading").</>,
},
{
name: "uploadMessage",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>A message that shows the result of the upload process.</>,
},
{
name: "imageUrl",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
A string representation or web url of the image that will be set to the
- "src" prop of an <CodeHighlight>{"<img/>"}</CodeHighlight> tag. If
+ "src" prop of an <CodeHighlight darkMode={darkMode}>{"<img/>"}</CodeHighlight> tag. If
given, the component will use this image source instead of reading the
image file.
</>
@@ -94,8 +95,8 @@ export const ExtFileAPIRows = [
},
{
name: "downloadUrl",
- type: <TypeHighlight np>string</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>string</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
The url to be used to perform a GET request in order to download the
@@ -105,8 +106,8 @@ export const ExtFileAPIRows = [
},
{
name: "progress",
- type: <TypeHighlight np>number</TypeHighlight>,
- default: <TypeHighlight np>undefined</TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>number</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np>undefined</TypeHighlight>,
description: (
<>
The current percentage of upload progress. This value will have a higher
@@ -116,8 +117,8 @@ export const ExtFileAPIRows = [
},
{
name: "extraUploadData",
- type: <TypeHighlight np>{"Record<string, any>"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"Record<string, any>"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
The additional data that will be sent to the server when files are
@@ -127,26 +128,26 @@ export const ExtFileAPIRows = [
},
{
name: "extraData",
- type: <TypeHighlight np>Object</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>Object</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>Any kind of extra data that could be needed.</>,
},
{
name: "serverResponse",
type: (
- <TypeHighlight np>
+ <TypeHighlight darkMode={darkMode} np>
<AnchorToTab href="/api/dropzone#serverresponse">
ServerResponse
</AnchorToTab>
</TypeHighlight>
),
- default: <TypeHighlight np></TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The upload response from server.</>,
},
{
name: "xhr",
- type: <TypeHighlight np>XMLHttpRequest</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>XMLHttpRequest</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
A reference to the XHR object that allows the upload, progress and abort
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index 5162e6eaeffacf045b5e444ff8361469fe51d168..24ecc2a46c95c074a07d6671261c4c17b0ee9d81 100644
--- a/src/files-ui/components/file-card/FileCard.scss
+++ b/src/files-ui/components/file-card/FileCard.scss
@@ -220,7 +220,7 @@
}
//// ICONS
-.files-ui-file-icon {
+/* .files-ui-file-icon {
font-size: 0.7rem;
min-width: 19px;
min-height: 19px;
@@ -229,6 +229,7 @@
border-radius: 50%;
background-color: rgba(32, 33, 36, 0.65);
word-break: break-word;
+ box-sizing: content-box;
&:hover {
background-color: rgba(32, 33, 36, 0.85);
}
@@ -238,4 +239,4 @@
background-color: rgba(154, 160, 166, 0.85);
}
}
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 7dc71ff89002a3c34ea4ba125e2b92b5c84046fe..a4b68f6138f1cf87f7b000f36d10914d44d688a5 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { FileCardProps } from "./FileCardProps";
import "./FileCard.scss";
+import "./../icons/IconStyles.scss";
import "./components/FileCardPaper.scss";
import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
import useProgress from "../file-mosaic/hooks/useProgress";
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
index c6d2aaf3d6757ad6d02520895fd21d9b079762a2..2a96708b12cc32db423ebc2d275fa279ddb26cb3 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -173,7 +173,7 @@
}
//// ICONS
-.files-ui-file-icon {
+/* .files-ui-file-icon {
font-size: 0.7rem;
min-width: 19px;
min-height: 19px;
@@ -182,6 +182,7 @@
border-radius: 50%;
background-color: rgba(32, 33, 36, 0.65);
word-break: break-word;
+ box-sizing: content-box;
&:hover {
background-color: rgba(32, 33, 36, 0.85);
}
@@ -192,3 +193,4 @@
}
}
}
+ */
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 455a3af3a80d58acae140ea45299d490fe4c51b8..2cc106e334297eb186377ff435eecc9d18fcdeb0 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -5,8 +5,9 @@ import {
getLocalFileItemData,
handleClickUtil,
} from "../../../../core";
-import { FileMosaicProps } from "./FileMosaicProps";
import "./FileMosaic.scss";
+import "./../../../icons/IconStyles.scss";
+import { FileMosaicProps } from "./FileMosaicProps";
import LayerContainer from "../file-mosaic-layer/LayerContainer";
import Layer from "../file-mosaic-layer/Layer";
import FileMosaicName from "../FileMosaicName/FileMosaicName";
@@ -115,7 +116,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
);
//The size formatted and rounded in 2 decimals
- const sizeFormatted: string| undefined = fileSizeFormater(localSize);
+ const sizeFormatted: string | undefined = fileSizeFormater(localSize);
//alwaysActive
const [showInfo, setShowInfo] = React.useState<boolean>(false);
diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx
index 738852e46547149f2729e84d2c0d94e43fd1702c..77709d16585b7c9c661cb50d285e93a4fb35ac96 100644
--- a/src/files-ui/components/icons/Cancel/Cancel.tsx
+++ b/src/files-ui/components/icons/Cancel/Cancel.tsx
@@ -1,9 +1,9 @@
-import React, { FC } from "react";
+import * as React from "react";
import { parseSize } from "../utils/utils";
import { CancelProps } from "./CancelProps";
import { handleClickUtil } from "../../../core";
-const Cancel: FC<CancelProps> = (props: CancelProps) => {
+const Cancel: React.FC<CancelProps> = (props: CancelProps) => {
const { size, color, colorFill, onClick, style, className } = props;
const finalSize = parseSize(size);
const finalStyle = style ? style : {};
diff --git a/src/files-ui/components/icons/IconStyles.scss b/src/files-ui/components/icons/IconStyles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..03d0a0d90a04908379159c2bafb2ada540399169
--- /dev/null
+++ b/src/files-ui/components/icons/IconStyles.scss
@@ -0,0 +1,20 @@
+.files-ui-file-icon {
+ font-size: 0.7rem;
+ min-width: 19px;
+ min-height: 19px;
+ margin: 0;
+ padding: 2px 2px;
+ border-radius: 50%;
+ background-color: rgba(32, 33, 36, 0.65);
+ word-break: break-word;
+ box-sizing: content-box;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ }
+ &.dark-mode {
+ background-color: rgba(154, 160, 166, 0.65);
+ &:hover {
+ background-color: rgba(154, 160, 166, 0.85);
+ }
+ }
+}
diff --git a/src/files-ui/components/material-button/MaterialButton.scss b/src/files-ui/components/material-button/MaterialButton.scss
index d0ef2fe468d0e95fee16737845122b72fbe1485c..42f4a4c4d17e236abdb27f7246c28bb858ec8912 100644
--- a/src/files-ui/components/material-button/MaterialButton.scss
+++ b/src/files-ui/components/material-button/MaterialButton.scss
@@ -1,3 +1,5 @@
+//@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
+
.material-button-root {
border: 0;
cursor: pointer;
diff --git a/src/globals/contexts/UserContext.ts b/src/globals/contexts/UserContext.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a10fd7aa613248e538f571ce0fba1ac1e1643df
--- /dev/null
+++ b/src/globals/contexts/UserContext.ts
@@ -0,0 +1,7 @@
+import * as React from "react";
+import { FuiAction } from "../types/FuiAction";
+import { UserFilesUi } from "../types/UserFilesUi";
+
+export const UserContext: React.Context<[UserFilesUi, React.Dispatch<FuiAction> | undefined]> =
+ React.createContext([{} as UserFilesUi, undefined as React.Dispatch<FuiAction> | undefined]);
+
diff --git a/src/globals/initialValues/userInitialValue.ts b/src/globals/initialValues/userInitialValue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e15e380da56fe636f94ead879c7807661a5c844
--- /dev/null
+++ b/src/globals/initialValues/userInitialValue.ts
@@ -0,0 +1,6 @@
+import { UserFilesUi } from "../types/UserFilesUi";
+
+export const initialUserValue:UserFilesUi={
+ id:undefined,
+ darkMode:false,
+}
diff --git a/src/globals/providers/UserProvider.tsx b/src/globals/providers/UserProvider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a421f69e33a2e8e91dc895f1ba0dc2c50c9c145c
--- /dev/null
+++ b/src/globals/providers/UserProvider.tsx
@@ -0,0 +1,30 @@
+import { UserContext } from "../contexts/UserContext";
+import * as React from "react";
+import { UserFilesUi } from "../types/UserFilesUi";
+import { userInitializer, userReducer } from "../reducers/userReducer";
+import { ThemeProvider } from "@emotion/react";
+import { MUItheme } from "../../theme/mainTheme";
+import { FuiAction } from "../types/FuiAction";
+
+export const UserProvider = (props: {
+ children: React.ReactNode;
+ valorInicial: UserFilesUi;
+}) => {
+ const { children, valorInicial } = props;
+
+ const [usuario, dispatch]: [UserFilesUi, React.Dispatch<FuiAction>] =
+ React.useReducer(userReducer, valorInicial, userInitializer);
+
+ React.useEffect(() => {
+ localStorage.setItem("filesuiuser", JSON.stringify(usuario));
+ console.log("filesuiuser", usuario);
+ }, [usuario]);
+
+ return (
+ <UserContext.Provider value={[usuario, dispatch]}>
+ <ThemeProvider theme={MUItheme(usuario.darkMode ? "dark" : "light")}>
+ {children}
+ </ThemeProvider>
+ </UserContext.Provider>
+ );
+};
diff --git a/src/globals/reducers/userReducer.ts b/src/globals/reducers/userReducer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..edf3f35833a326d8180a774f1505293e3d59c437
--- /dev/null
+++ b/src/globals/reducers/userReducer.ts
@@ -0,0 +1,29 @@
+
+import { FuiAction } from "../types/FuiAction";
+import { UserFilesUi } from "../types/UserFilesUi";
+
+
+export const userReducer = (state: UserFilesUi, action: FuiAction): UserFilesUi => {
+ const { type = "", payload = {} } = action;
+ console.log("userReducer", state, action);
+ switch (type) {
+ case "INICIARSESION":
+ return { ...state, ...payload };
+ case "TURNONLIGHT":
+ return { ...state, darkMode: false };
+ case "TURNOFFLIGHT":
+ return { ...state, darkMode: true };
+ default:
+ return state;
+ }
+};
+
+export const userInitializer = () => {
+ const usuarioEncontrado = localStorage.getItem("filesuiuser");
+
+ if (usuarioEncontrado !== "udefined" && usuarioEncontrado !== null) {
+ return JSON.parse(usuarioEncontrado);
+ } else {
+ return {};
+ }
+};
diff --git a/src/globals/types/FilesUIAction.ts b/src/globals/types/FilesUIAction.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ac078bbd147eeb6a25a7560e3b6a0991288c9d9
--- /dev/null
+++ b/src/globals/types/FilesUIAction.ts
@@ -0,0 +1,6 @@
+import { UserFilesUi } from "./UserFilesUi";
+
+export type FilesUIAction = {
+ type?: string;
+ payload?: UserFilesUi;
+}
\ No newline at end of file
diff --git a/src/globals/types/FuiAction.ts b/src/globals/types/FuiAction.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8973ad6492eb7115e8c9e2b01f8da5f4759f02b
--- /dev/null
+++ b/src/globals/types/FuiAction.ts
@@ -0,0 +1,6 @@
+import { UserFilesUi } from "./UserFilesUi";
+
+export type FuiAction = {
+ type?: string;
+ payload?: UserFilesUi;
+}
\ No newline at end of file
diff --git a/src/globals/types/UserFilesUi.ts b/src/globals/types/UserFilesUi.ts
new file mode 100644
index 0000000000000000000000000000000000000000..98523707d081e934fb54a08ad09ca6b235e47be4
--- /dev/null
+++ b/src/globals/types/UserFilesUi.ts
@@ -0,0 +1,4 @@
+export type UserFilesUi={
+ id?:string;
+ darkMode?:boolean,
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1c6299df607faf3edb0fde9dc2464aa195ea0957..c1c6265b9698acde1b59ba29ce83040ac5a8f533 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,18 +3,19 @@ import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
//import MainPage from "./pages/MainPage";
-import { ThemeProvider } from "@mui/material/styles";
-import { MUItheme } from "./theme/mainTheme";
+/* import { ThemeProvider } from "@mui/material/styles";
+import { MUItheme } from "./theme/mainTheme"; */
import MainRouter from "./routes/MainRouter";
+import { UserProvider } from "./globals/providers/UserProvider";
+import { initialUserValue } from "./globals/initialValues/userInitialValue";
const root = ReactDOM.createRoot(document.getElementById("root"));
-
root.render(
- <ThemeProvider theme={MUItheme}>
- <MainRouter />
- </ThemeProvider>
+ <UserProvider valorInicial={initialUserValue}>
+ <MainRouter />
+ </UserProvider>
);
// If you want to start measuring performance in your app, pass a function
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index d2f99b764bd4fc66319c4eb4a994b6352081e2f6..96f008408399820e538b8ea5614f7f540e193a75 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -12,12 +12,19 @@ import { Divider } from "@mui/material";
import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
import ExtraComponentsMainPageAvatar from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageAvatar";
+import { UserContext } from "../globals/contexts/UserContext";
const MainPage = ({ darkMode }) => {
- const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const [usuario, dispatch] = React.useContext(UserContext);
+
+ // const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const darkModeOn = usuario.darkMode;
+ console.log("userReducer darkModeOn", darkModeOn);
const handleDarkMode = () => {
- setDarkModeOn((darkModeOn) => !darkModeOn);
+ // setDarkModeOn((darkModeOn) => !darkModeOn);
+ if (!darkModeOn) dispatch({ type: "TURNOFFLIGHT" });
+ else dispatch({ type: "TURNONLIGHT" });
};
return (
diff --git a/src/pages/api/AvatarApi.jsx b/src/pages/api/AvatarApi.jsx
index 2a7be2b834fcacbeb21d6cba653bc471cb777844..4a7722572fe1683b4ee14f2aeadd811629dbde73 100644
--- a/src/pages/api/AvatarApi.jsx
+++ b/src/pages/api/AvatarApi.jsx
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { AvatarAPIPropsRows } from "../../data/AvatarAPIPropsRows";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{
@@ -24,6 +25,15 @@ const rightMenuItems = [
];
const AvatarApi = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", scrollHandler);
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -49,7 +59,12 @@ const AvatarApi = (props) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/DropzoneApi.tsx b/src/pages/api/DropzoneApi.tsx
index 25f25b57be1291acc77fa4cb70371db2f5c1b2b5..dc17bba899520f85d49522fdb57d613087b665db 100644
--- a/src/pages/api/DropzoneApi.tsx
+++ b/src/pages/api/DropzoneApi.tsx
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { DropzoneAPIPropsRows } from "../../data/DropzoneAPIPropsRows";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{
id: 0,
@@ -23,6 +24,19 @@ const rightMenuItems = [
];
const DropzoneApi = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
+
return (
<React.Fragment>
<MainContentContainer>
@@ -53,7 +67,12 @@ const DropzoneApi = () => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/FileCardApi.tsx b/src/pages/api/FileCardApi.tsx
index eb80d007cbc47ef4eea6799e36087a3560ed62c4..129261c0bfba6ca2f5b6acb6ae93526e465a2b20 100644
--- a/src/pages/api/FileCardApi.tsx
+++ b/src/pages/api/FileCardApi.tsx
@@ -8,6 +8,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import { FileCardAPIPropsRows } from "../../data/FileCardAPIPropsRows";
+import { scrollHandler } from "../../utils/scrollHandler";
import PropsTableApi from "./PropsTableApi";
const rightMenuItems = [
@@ -24,6 +25,18 @@ const rightMenuItems = [
];
const FileCardApi = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -52,7 +65,12 @@ const FileCardApi = () => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/FileInputButtonApi.jsx b/src/pages/api/FileInputButtonApi.jsx
index 4cc5a8d2c71f89b916db9a4237ce97f32e840873..81c97a142e38ec02a8c9a73de0ab0ea31c89551c 100644
--- a/src/pages/api/FileInputButtonApi.jsx
+++ b/src/pages/api/FileInputButtonApi.jsx
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { FileInputButtonPropsRows } from "../../data/FileInputButtonPropsRows";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{
@@ -23,6 +24,18 @@ const rightMenuItems = [
},
];
const FileInputButtonApi = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -55,7 +68,12 @@ const FileInputButtonApi = (props) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index 20d1ac3a52facfb185c08b143374dd5596c90de7..b13d06b074f65ed04742348b9a14de363a86abf2 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -8,6 +8,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
+import { scrollHandler } from "../../utils/scrollHandler";
import PropsTableApi from "./PropsTableApi";
const rightMenuItems = [
@@ -23,6 +24,18 @@ const rightMenuItems = [
},
];
const FileMosaicApi = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -53,7 +66,12 @@ const FileMosaicApi = (props) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/FullScreenApi.tsx b/src/pages/api/FullScreenApi.tsx
index 071c78db09b02923bc34d8b469dab1a1e38e8abc..5fc7ae70b087fb2aa2046f8404b156239dc97eb6 100644
--- a/src/pages/api/FullScreenApi.tsx
+++ b/src/pages/api/FullScreenApi.tsx
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
import PropsTableApi from "./PropsTableApi";
import { FullScreenAPIPropRows } from "./FullScreenAPIPropRows";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{
@@ -24,6 +25,18 @@ const rightMenuItems = [
];
const FullScreenApi = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -64,7 +77,12 @@ const FullScreenApi = () => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/ImagePreviewApi.tsx b/src/pages/api/ImagePreviewApi.tsx
index f9fefef48ead2540f4d074a7cc0fcff52e37bbfe..fa973d0a62831b5d86b9b7f4a6f3fd2944ed9c1f 100644
--- a/src/pages/api/ImagePreviewApi.tsx
+++ b/src/pages/api/ImagePreviewApi.tsx
@@ -11,6 +11,7 @@ import { ImagePreviewAPIPropsRows } from "./ImagePreviewAPIPropsRows";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{
@@ -26,6 +27,18 @@ const rightMenuItems = [
];
const ImagePreviewApi = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -66,7 +79,12 @@ const ImagePreviewApi = () => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
index 1140eb3019ec12f6b1c7569b4b181abc03ac349b..245164b445052f4c7fc722271f84ec3e74a20907 100644
--- a/src/pages/api/PropsTableApi.jsx
+++ b/src/pages/api/PropsTableApi.jsx
@@ -47,6 +47,8 @@ export default function PropsTableApi({
desc=<></>,
omitDefault = false,
}) {
+
+
const [sorted, setSorted] = React.useState(false);
const [localRows, setLocalRows] = React.useState(rows);
diff --git a/src/pages/api/VideoPreviewApi.tsx b/src/pages/api/VideoPreviewApi.tsx
index 3c6af3ec6ebb474f1e21b572124ea80d47e865da..775f9f6d3690e3bcafdcf53a4c6341efde19bf03 100644
--- a/src/pages/api/VideoPreviewApi.tsx
+++ b/src/pages/api/VideoPreviewApi.tsx
@@ -11,6 +11,7 @@ import { VideoPreviewAPIPropsRows } from "./VideoPreviewAPIPropsRows";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{
@@ -26,6 +27,18 @@ const rightMenuItems = [
];
const VideoPreviewApi = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -66,7 +79,12 @@ const VideoPreviewApi = () => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index edc71e4c42769f52c0334f3de7a5388935ab3255..403e3ae202e72f31b7b9e52b72132a48b2b094e1 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/src/pages/demo/AvatarDemoPage.tsx
@@ -26,11 +26,24 @@ import DemoAvatarLoading from "../../components/demo-components/avatar-demo/Demo
import CodeDemoAvatarLoading from "../../components/demo-components/avatar-demo/CodeDemoAvatarLoading";
import CodeDemoAvatarVariant from "../../components/demo-components/avatar-demo/CodeAvatarVariant";
import CodeDemoAvatarLabels from "../../components/demo-components/avatar-demo/CodeDemoAvatarLabels";
+import { scrollHandler } from "../../utils/scrollHandler";
interface AvatarDemoPageProps {}
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
props: AvatarDemoPageProps
) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -221,8 +234,8 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
not set.
</li>
<li>
- <CodeHighlight>changeLabel</CodeHighlight>: when there is a valid
- source set.
+ <CodeHighlight>changeLabel</CodeHighlight>: when there is a
+ valid source set.
</li>
<li>
<CodeHighlight>loadingLabel</CodeHighlight>: when you want to
@@ -261,7 +274,12 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 01b4c266d843f490e9b0b48d6e74214b809e44db..64640a975a1dfb9346dce0db8151d977414bf1d2 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -39,8 +39,21 @@ import CodeDemoDropzoneClickable from "../../components/demo-components/dropzone
import CodeDemoDropzoneDropLayer from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer";
import CodeDemoDropzoneBehaviour from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour";
import CodeDemoDropzoneLabel from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoLabel";
+import { scrollHandler } from "../../utils/scrollHandler";
const DropzoneDemoPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -642,7 +655,12 @@ const DropzoneDemoPage = (props) => {
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
@@ -730,4 +748,9 @@ const rightMenuItems = [
label: "Localization",
referTo: "/components/dropzone#localization",
},
+ {
+ id: 8,
+ label: "API",
+ referTo: "/components/dropzone#api",
+ },
];
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index c4c96d3f8c74a5093e7d432fd78e9ec2a2ab64a2..30cad0d1e0e2f61ed263342dad20613e813cd3ed 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -25,8 +25,22 @@ import DemoFileCardActions from "../../components/demo-components/filemosaic-dem
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
+import { scrollHandler } from "../../utils/scrollHandler";
const FileCardDemoPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
+
return (
<React.Fragment>
<MainContentContainer>
@@ -74,7 +88,10 @@ const FileCardDemoPage = (props) => {
<CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
component for allowing the user to select files. For further
information of this component check out the{" "}
- <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
+ <AnchorToTab href="/components/fileinputbutton">
+ FileInputButton
+ </AnchorToTab>{" "}
+ page.
</Alert>
<br />
<Alert severity="info">
@@ -374,7 +391,12 @@ const FileCardDemoPage = (props) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 621353cc67d663faa9d4d4c56f3f0ecd11c0d748..8fb9c108a7d19dd966ba0f276b062c572b5fd554 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -34,11 +34,24 @@ import DemoDropzoneUploading from "../../components/demo-components/dropzone-dem
import CodeDemoDropzoneUploading from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneUploading";
import DemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/DemoDropzoneActionButtons";
import CodeDemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons";
+import { scrollHandler } from "../../utils/scrollHandler";
interface FileInputButtonDemoPageProps {}
const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
props: FileInputButtonDemoPageProps
) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -213,9 +226,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<Alert severity="info">
<AlertTitle> "fakeUpload" </AlertTitle>
By giving this prop, the {"<FileInputButton/>"} component will
- simulate the upload operation by randomly setting the upload status and
- message on each uploadable <TypeHighlight>ExtFile</TypeHighlight>.
- It will also set a fake progress.
+ simulate the upload operation by randomly setting the upload status
+ and message on each uploadable{" "}
+ <TypeHighlight>ExtFile</TypeHighlight>. It will also set a fake
+ progress.
</Alert>
<br />
<Alert severity="info">
@@ -453,7 +467,12 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
@@ -518,4 +537,9 @@ const rightMenuItems = [
label: "Localization",
referTo: "/components/fileinputbutton#localization",
},
+ {
+ id: 8,
+ label: "API",
+ referTo: "/components/fileinputbutton#api",
+ },
];
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index a2b4910aedd4a60775591822b06731064e1d0ad4..f879a6cef50c34065d885c04056ebc90aa240cef 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -29,8 +29,22 @@ import DemoFileCardActions from "../../components/demo-components/filemosaic-dem
import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
+import { scrollHandler } from "../../utils/scrollHandler";
const FileMosaicDemoPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
+
return (
<React.Fragment>
<MainContentContainer>
@@ -79,7 +93,10 @@ const FileMosaicDemoPage = (props) => {
<CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
component for allowing the user to select files. For further
information of this component check out the{" "}
- <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
+ <AnchorToTab href="/components/fileinputbutton">
+ FileInputButton
+ </AnchorToTab>{" "}
+ page.
</Alert>
<br />
<Alert severity="info">
@@ -392,12 +409,18 @@ const FileMosaicDemoPage = (props) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
};
export default FileMosaicDemoPage;
+
const rightMenuItems = [
{
id: 0,
diff --git a/src/pages/demo/FullScreenDemoPage.tsx b/src/pages/demo/FullScreenDemoPage.tsx
index aef7d771f00399c926d078a81ffe64b14093d531..18c088163ebb6112aa277e3f4cf44c4e0362dcd8 100644
--- a/src/pages/demo/FullScreenDemoPage.tsx
+++ b/src/pages/demo/FullScreenDemoPage.tsx
@@ -13,10 +13,23 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
+import { scrollHandler } from "../../utils/scrollHandler";
interface FullScreenDemoPageProps {}
const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
props: FullScreenDemoPageProps
) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainContentContainer>
@@ -127,7 +140,12 @@ const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/download-page/FileDownloadPage.tsx b/src/pages/download-page/FileDownloadPage.tsx
index 25cf729c525ad8398d6721146dc762c58aa7fc97..ef7e7db102c78cc98fb9e5a2a35529cdb259b067 100644
--- a/src/pages/download-page/FileDownloadPage.tsx
+++ b/src/pages/download-page/FileDownloadPage.tsx
@@ -16,8 +16,21 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
+import { scrollHandler } from "../../utils/scrollHandler";
const FileDownloadPage = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainLayoutPage selectedIndex={9}>
@@ -25,10 +38,8 @@ const FileDownloadPage = () => {
<MainTitle>File Download</MainTitle>
<MainParagraph>
In this page you will find some demos for downloading files with{" "}
- <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight>{" "}
- and {" "}
- <CodeHighlight>{"<FileCard/>"}</CodeHighlight>{" "}
- components.
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components.
</MainParagraph>
<section id="samehost">
<SubTitle content="Same origin URL" />
@@ -93,13 +104,13 @@ const FileDownloadPage = () => {
<li>
Make a GET request with{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">
- fetch
+ fetch API
</AnchorToTab>{" "}
(you can use{" "}
<AnchorToTab href="https://axios-http.com/">
axios
</AnchorToTab>{" "}
- or any other way to fetch
+ or any other way to fetch resources from internet.
</li>
<li>
Create an{" "}
@@ -162,7 +173,12 @@ const FileDownloadPage = () => {
</MainLayoutPage>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/file-icons/FileIconsPage.jsx b/src/pages/file-icons/FileIconsPage.jsx
index c7032b5f234f94f6cf76d117ee5d14a998f66324..996e48628abb01252d50b364a12581376f57c1e4 100644
--- a/src/pages/file-icons/FileIconsPage.jsx
+++ b/src/pages/file-icons/FileIconsPage.jsx
@@ -12,7 +12,20 @@ import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
+import { scrollHandler } from "../../utils/scrollHandler";
const FileIconsPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
const [component, setComponent] = React.useState("FileMosaic");
const handleChangeComponent = (newVal) => {
setComponent(newVal);
@@ -24,11 +37,11 @@ const FileIconsPage = (props) => {
<MainTitle>File Icons (extensive list)</MainTitle>
<MainParagraph>
Both <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
- <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a file icon
- according to the file mime type. A media type (also known as a
- Multipurpose Internet Mail Extensions or MIME type) indicates the
- nature and format of a document, file, or assortment of bytes. You
- can find more information{" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a
+ file icon according to the file mime type. A media type (also known
+ as a Multipurpose Internet Mail Extensions or MIME type) indicates
+ the nature and format of a document, file, or assortment of bytes.
+ You can find more information{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">
here
</AnchorToTab>
@@ -63,11 +76,15 @@ const FileIconsPage = (props) => {
<DemoFileMosaicFileIcons card={component === "FileCard"} />
</Paper>
</section>
-
- <RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
- </RightMenuContainer>
</MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
+ </RightMenuContainer>
</MainLayoutPage>
</React.Fragment>
);
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
index 6a545ba15cf9e6d53f0e965dca981224b8a6454a..1f5057c3ef2481832169f03f9d3dd9c5b89353ef 100644
--- a/src/pages/getting-started/GettingStartedPage.jsx
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -16,7 +16,22 @@ import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import { scrollHandler } from "../../utils/scrollHandler";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
const GettingStartedPage = ({ darkModeOn }) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
+
return (
<MainLayoutPage selectedIndex={0}>
<MainContentContainer>
@@ -48,8 +63,8 @@ const GettingStartedPage = ({ darkModeOn }) => {
<SubTitle content="Peer dependency" />
<DescParagraph>
- <code className="code">react </code> {">= 17.0.0 "}and{" "}
- <code className="code">react-dom</code>
+ <CodeHighlight>react </CodeHighlight> {">= 17.0.0 "}and{" "}
+ <CodeHighlight>react-dom</CodeHighlight>
{" >= 17.0.0 "} are peer dependencies.
</DescParagraph>
</section>
@@ -63,7 +78,12 @@ const GettingStartedPage = ({ darkModeOn }) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</MainLayoutPage>
);
diff --git a/src/pages/localization/LocalizationPage.jsx b/src/pages/localization/LocalizationPage.jsx
index 730aa0b6ce76dc2409053b9152e117e497683bb0..e1885031556903f831a6af56c38eddbe0f04d333 100644
--- a/src/pages/localization/LocalizationPage.jsx
+++ b/src/pages/localization/LocalizationPage.jsx
@@ -14,8 +14,21 @@ import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
+import { scrollHandler } from "../../utils/scrollHandler";
const LocalizationPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
const [component, setComponent] = React.useState("FileMosaic");
const handleChangeComponent = (newVal) => {
setComponent(newVal);
@@ -80,7 +93,12 @@ const LocalizationPage = (props) => {
</section>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</MainContentContainer>
</MainLayoutPage>
diff --git a/src/pages/server-side/ServerSidePage.tsx b/src/pages/server-side/ServerSidePage.tsx
index ffbd314bde1b9bd41bc1c872752b24fbbb09e468..4252902e75ac3c9c6bb7ee31bce585b800495eba 100644
--- a/src/pages/server-side/ServerSidePage.tsx
+++ b/src/pages/server-side/ServerSidePage.tsx
@@ -13,7 +13,20 @@ import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import { FileMosaic } from "../../files-ui";
import { redirect } from "../../utils/redirect";
+import { scrollHandler } from "../../utils/scrollHandler";
const ServerSidePage = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainLayoutPage selectedIndex={6}>
@@ -63,12 +76,9 @@ const ServerSidePage = () => {
link
</AnchorToTab>
.
-
-
-
</DescParagraph>
</Paper>
- <CodeDemoServerSideExpress splittedOnly/>
+ <CodeDemoServerSideExpress splittedOnly />
</section>
<section id="springboot">
<SubTitle content="Java - Spring boot" />{" "}
@@ -101,12 +111,18 @@ const ServerSidePage = () => {
.
</DescParagraph>
</Paper>
- <CodeDemoServerSideJava splittedOnly/>
+ <CodeDemoServerSideJava splittedOnly />
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
+
</MainLayoutPage>
</React.Fragment>
);
@@ -132,7 +148,6 @@ const logoExpress = {
type: "image/png",
imageUrl: "/serverside/nodeexpress.jpg",
name: "Click me!",
-
};
const logoJava = {
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index 9f9f73223059d23d218cd803621b99c8c6da06b3..21ca8465d6a66ccf299aa7cb62103d8bf16b33ec 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -17,6 +17,8 @@ import { HeaderConfigAPIRows } from "../../data/HeaderConfigAPIRows";
import { ServerResponseAPIRows } from "../../data/ServerResponseAPIRows";
import { UploadConfigAPIRows } from "../../data/UploadConfigAPIRows";
import { ValidateFileResponseAPIrows } from "../../data/ValidateFileResponseAPIrows";
+import { UserContext } from "../../globals/contexts/UserContext";
+import { scrollHandler } from "../../utils/scrollHandler";
import PropsTableApi from "../api/PropsTableApi";
const rightMenuItems = [
@@ -68,6 +70,23 @@ const rightMenuItems = [
];
const TypesPage = (props) => {
+
+const [user,dispatch] = React.useContext(UserContext);
+const darkMode = user.darkMode;
+
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
+
return (
<React.Fragment>
<MainLayoutPage selectedIndex={7}>
@@ -91,7 +110,7 @@ const TypesPage = (props) => {
</>
}
omitDefault
- rows={ExtFileAPIRows}
+ rows={ExtFileAPIRows(darkMode)}
/>
</section>
<section id="validatefileresponse">
@@ -165,7 +184,12 @@ const TypesPage = (props) => {
</MainContentContainer>
</MainLayoutPage>{" "}
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
index 33ace5eeef67d58c1792373ca2cfbeb59c6a775b..f1193068bf5fc8fc1182ce88baa0e9841907f40d 100644
--- a/src/pages/usage/UsagePage.jsx
+++ b/src/pages/usage/UsagePage.jsx
@@ -12,6 +12,7 @@ import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-de
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainTitle from "../../components/main-title/MainTitle";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{ id: 0, label: "Quick start", referTo: "/usage#quick-start" },
{
@@ -21,6 +22,18 @@ const rightMenuItems = [
},
];
const UsagePage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<MainLayoutPage selectedIndex={1}>
<MainContentContainer>
@@ -54,21 +67,21 @@ const UsagePage = (props) => {
demo below. Try adding the <CodeHighlight>accept</CodeHighlight>{" "}
prop to the Dropzone to see the changes:
</DescParagraph>
- {/* <iframe
- title="codesandbox"
- src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
- //src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
- //src="https://codesandbox.io/s/material-ui-u9sy1h"
- style={{
- width: "100%",
- height: "500px",
- border: "0px none",
- borderRadius: "4px",
- overflow: "hidden",
- }}
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe> */}
+ <iframe
+ title="codesandbox"
+ src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
+ //src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
+ //src="https://codesandbox.io/s/material-ui-u9sy1h"
+ style={{
+ width: "100%",
+ height: "500px",
+ border: "0px none",
+ borderRadius: "4px",
+ overflow: "hidden",
+ }}
+ allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+ ></iframe>
</section>
<section id="advanced-example">
@@ -100,7 +113,12 @@ const UsagePage = (props) => {
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</MainLayoutPage>
);
diff --git a/src/styles/GettingStartedPage.scss b/src/styles/GettingStartedPage.scss
index 1c82c86302e16b4ed88454b620ca9bcf5017b613..0f0848900b90f04ece0369b7a3329b04ff95f694 100644
--- a/src/styles/GettingStartedPage.scss
+++ b/src/styles/GettingStartedPage.scss
@@ -8,7 +8,7 @@
}
}
.clipboard-container {
- background-color: rgb(1, 4, 9);
+ background-color: #1e1e1e;
border-radius: 8px;
position: relative;
display: flex;
@@ -23,7 +23,7 @@
box-sizing: border-box;
background-color: gray;
padding: 6px 5px;
- border-radius: 4px;
+ border-radius: 8px;
cursor: pointer;
display: flex;
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index 5df2371bbd567958ff1c7d577982fcf5e175fc70..5fe7b9a0b5f3ef8474dda5554cb6a17e2cdc2116 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -7,7 +7,7 @@ import Drawer from "@mui/material/Drawer";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
-import logoLight from "../static/files-ui-logo-blue-wbg.png";
+import logoLight from "../static/files-ui-logo-blue-dark.png";
import logo_blue from "../static/files-ui-logo-blue.png";
import { IconButton, Stack, styled, Tooltip } from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
@@ -15,6 +15,8 @@ import DarkModeLightModeButton from "../components/MainPage/DarkModeLightModeBut
import MainMenuSideBar from "../components/MainMenu/MainMenuSideBar";
import logo_text_blue from "../static/files-ui-logo-text-med.png";
import logo_text_blue_dark from "../static/files-ui-logo-text-med-dark.png";
+import { UserContext } from "../globals/contexts/UserContext";
+import AnchorToTab from "../components/util-components/AnchorToTab";
const drawerWidth = 280;
const StyledImage = styled("img")(({ theme }) => ({
@@ -27,15 +29,28 @@ const StyledImage = styled("img")(({ theme }) => ({
},
}));
function NavBarTemplate(props) {
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkModeOn = usuario.darkMode;
//const navigate = useNavigateToTop();
- const { window, children, darkModeOn, handleDarkMode, selectedIndex } = props;
+ const {
+ window,
+ children,
+ /* darkModeOn, */ /* handleDarkMode, */ selectedIndex,
+ } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
//const [selectedIndex, setSelectedIndex] = React.useState(0);
+ const handleDarkMode = () => {
+ // setDarkModeOn((darkModeOn) => !darkModeOn);
+ if (!darkModeOn) dispatch({ type: "TURNOFFLIGHT" });
+ else dispatch({ type: "TURNONLIGHT" });
+ };
const handleGoGitRepo = () => {
+ alert("HAAA");
window.open("https://github.com/files-ui", "_blank");
};
+
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
@@ -56,11 +71,13 @@ function NavBarTemplate(props) {
marginRight: "5px",
}}
className="filesui-nav-logo"
+ //src={logo_blue }
src={!darkModeOn ? logo_blue : logoLight}
alt="files-ui-main-logo"
/>
<img
src={darkModeOn ? logo_text_blue_dark : logo_text_blue}
+ // src={darkModeOn ? logo_text_blue_dark : logo_text_blue}
alt="files-ui-main-logo-text"
height={16}
/>
@@ -85,9 +102,10 @@ function NavBarTemplate(props) {
window !== undefined ? () => window().document.body : undefined;
return (
- <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
+ <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } ,transition:"all 0.4s ease-in-out"}}>
<CssBaseline />
<AppBar
+ className="section-container"
position="fixed"
sx={{
width: { sm: `calc(100% - ${drawerWidth}px)` },
@@ -108,7 +126,8 @@ function NavBarTemplate(props) {
</IconButton>
<StyledImage
- src={!darkModeOn ? logo_blue : logoLight}
+ src={ logo_blue }
+ //src={!darkModeOn ? logo_blue : logoLight}
alt="files-ui-main-logo"
/>
@@ -123,17 +142,19 @@ function NavBarTemplate(props) {
</Typography>
<Box style={{ flexGrow: 1 }} />
<Stack direction="row" spacing={1}>
- <Tooltip title="Go to Files-ui GitHub repo">
- <IconButton
- style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
- onClick={handleGoGitRepo}
- color="secondary"
- aria-label="upload picture"
- component="label"
- >
- <GitHubIcon /* htmlColor="white" */ />
- </IconButton>
- </Tooltip>
+ <AnchorToTab href="https://github.com/files-ui">
+ <Tooltip title="Go to Files-ui GitHub repo">
+ <IconButton
+ style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+ //onClick={handleGoGitRepo}
+ color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <GitHubIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ </AnchorToTab>
<DarkModeLightModeButton
darkModeOn={darkModeOn}
onChangeDarkMode={handleDarkMode}
diff --git a/src/theme/mainTheme.js b/src/theme/mainTheme.js
index ee432ee8e784b2ee921fd18b94cb7c742cb90c9e..abf5413b22021680cd4b54145ed9eb924d173f75 100644
--- a/src/theme/mainTheme.js
+++ b/src/theme/mainTheme.js
@@ -1,21 +1,23 @@
import { createTheme } from "@mui/material/styles";
-export const MUItheme = createTheme({
- palette: {
- primary: {
- // light: will be calculated from palette.primary.main,
- main: "#042354",
- // dark: will be calculated from palette.primary.main,
- // contrastText: will be calculated to contrast with palette.primary.main
+export const MUItheme = (modeLight = "light") =>
+ createTheme({
+ palette: {
+ mode: modeLight,
+ primary: {
+ // light: will be calculated from palette.primary.main,
+ main: modeLight === "light" ? "#042354" : "#55b4f2",
+ // dark: will be calculated from palette.primary.main,
+ // contrastText: will be calculated to contrast with palette.primary.main
+ },
+ secondary: {
+ light: "#0066ff",
+ main: "#55b4f2",
+ // dark: will be calculated from palette.secondary.main,
+ //contrastText: '#ffcc00',
+ },
},
- secondary: {
- light: "#0066ff",
- main: "#55b4f2",
- // dark: will be calculated from palette.secondary.main,
- //contrastText: '#ffcc00',
+ typography: {
+ fontFamily: ['"Poppins", sans-serif'],
},
- },
- typography: {
- fontFamily: ['"Poppins", sans-serif'],
- },
-});
+ });
diff --git a/src/utils/scrollHandler.ts b/src/utils/scrollHandler.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67725274acbd6901899b386eb32e2f3ddb90c634
--- /dev/null
+++ b/src/utils/scrollHandler.ts
@@ -0,0 +1,48 @@
+export type RightMenuItemComplete = {
+ id: number;
+ label: string;
+ referTo: string;
+ element?: HTMLElement;
+}
+
+export const scrollHandler = (rightMenuItems: RightMenuItemComplete[],
+ setSelectedItem: React.Dispatch<React.SetStateAction<number>>) => {
+
+ if (rightMenuItems.length === 0) return;
+ let menu: HTMLElement | null = document.querySelector(".section-container");
+ if (menu === null) return;
+
+ const rightMenuItemsWithIdSec = rightMenuItems.map((x) => {
+ return {
+ ...x,
+ idSec: x.referTo.split("#")[1],
+ };
+ });
+
+ const arrElements = rightMenuItemsWithIdSec.map((x) => {
+ return { ...x, element: document.getElementById(x.idSec) };
+ });
+
+ let pos_menu = window.pageYOffset + menu.offsetHeight;
+
+ const arrElementsEnhanced = arrElements.map((x) => {
+ const element = x.element;
+ const postElement = element ? element.offsetTop + element.offsetHeight : Infinity;
+ const distance = Math.round(postElement - pos_menu);
+ return { ...x, distance };
+ });
+
+ let min = Math.min(
+ ...arrElementsEnhanced
+ .map((x) => Math.round(x.distance))
+ .filter((x) => x > 0)
+ );
+
+ arrElementsEnhanced.forEach((x) => {
+ if (x.distance === min) {
+ setSelectedItem((_id) => {
+ return x.id;
+ });
+ }
+ });
+};