Merge pull request #18 from files-ui/29-refactor-rightside-github-darkmode-filemosaiccardsamples

29 refactor rightside GitHub darkmode file mosaic card samples also right menu auto focus

Author: JinSSJ3

src/components/MainPage/MainNavBar.jsx

@@ -5,16 +5,17 @@ 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,
   logo_blue,
   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}

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);
+    }
   }
 }

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)}
                 >

src/components/RightMenu/RightMenuProps.ts

@@ -10,4 +10,6 @@ export interface RightMenuProps {
     items: RightMenuItem[];
     width: string;
     baseUrl?: string;
+    selectedItemProp?:number;
+    setSelected?:Function;
 }

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);
   }

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;

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);

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) => (

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,
 };
 

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,
 };