Theme update (#96)

* new build;

* add build

* another build

* new build

* correct build

* update theme

* theme: introduce theme + light/dark mode and clean up setting and toolbar refactor toolbar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "0.1.0-r273",
+  "version": "0.1.0-r249",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "scripts": {

src/BaseRoutes.jsx

@@ -6,15 +6,14 @@ import {
   useLocation,
   useNavigate
 } from 'react-router-dom'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
 import Share from './Share'
+import debug from './utils/debug'
 
 // TODO: This isn't used.
 // If icons-material isn't imported somewhere, mui dies
 import AccountCircle from '@mui/icons-material/AccountCircle'
 
 
-const debug = 0;
 /**
  * From URL design: https://github.com/buildrs/Share/wiki/URL-Structure
  * ... We adopt a URL structure similar to Google Apps URL structure:
@@ -42,17 +41,15 @@ export default function BaseRoutes({testElt = null}) {
     }
     if (location.pathname === installPrefix
         || location.pathname === (installPrefix + '/')) {
-      if (debug) {
-        console.log('BaseRoutes: forwarding to: ', installPrefix + '/share');
-      }
+      debug().log('BaseRoutes: forwarding to: ', installPrefix + '/share');
       navigate(installPrefix + '/share');
     }
   }, []);
 
   const basePath = installPrefix + "/*";
   return (
     <Routes>
-      <Route path={basePath} element={<Themed/>}>
+      <Route path={basePath} element={<Outlet/>}>
         <Route path="share/*"
                element={
                  testElt || <Share installPrefix={installPrefix}
@@ -62,17 +59,3 @@ export default function BaseRoutes({testElt = null}) {
     </Routes>
   )
 }
-
-
-const theme = createTheme({
-  status: {
-    danger: 'foo',
-  },
-});
-
-
-const Themed = () => (
-  <ThemeProvider theme={theme}>
-    <Outlet/>
-  </ThemeProvider>
-)

src/Components/Settings.jsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import { makeStyles, useTheme } from '@mui/styles'
+import Toggle from './Toggle'
+import { ColorModeContext } from '../Share'
+import PkgJson from '../../package.json'
+import SettingsIcon from '../assets/Settings.svg'
+
+
+export default function Settings ({toggleTheme, mode}) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const classes = useStyles();
+  const theme = useContext(ColorModeContext);
+  const themeMode = useTheme()
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-label='account of current user'
+        aria-controls='menu-appbar'
+        aria-haspopup='true'
+        onClick={handleMenu}
+        color='inherit'
+      >
+        <SettingsIcon className = {classes.icon}/>
+      </IconButton>
+
+      <Menu
+        id='menu-appbar'
+        elevation={2}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        open={open}
+        onClose={handleClose}
+        style = {{height:180}}
+        PaperProps={{
+            style: {
+              transform: 'translateX(12px) translateY(50px)',
+            }
+          }}
+      >
+      <MenuItem className={classes.menuItem} disableRipple>Version: {PkgJson.version}</MenuItem>
+      <MenuItem className={classes.menuItem} disableRipple >
+        <div>Theme: {themeMode.palette.mode}</div>
+        <Toggle defaultChecked onChange={() => { theme.toggleColorMode('dark') }}/>
+      </MenuItem>
+      </Menu>
+    </div>
+  )
+}
+
+
+const useStyles = makeStyles(() => ({
+  icon:{
+    width: '30px',
+    height: '30px',
+  },
+  menuItem:{
+    height:'30px'
+  }
+}))

src/Components/Toggle.jsx

@@ -0,0 +1,18 @@
+import Switch from '@mui/material/Switch'
+import { alpha, styled } from '@mui/material/styles'
+import { grey } from '@mui/material/colors'
+
+
+const Toggle = styled(Switch)(() => ({
+  '& .MuiSwitch-switchBase.Mui-checked': {
+    color: grey[600],
+    '&:hover': {
+      backgroundColor: alpha(grey[600]),
+    },
+  },
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+    backgroundColor: grey[600],
+  },
+}));
+
+export default Toggle;

src/Components/ToolBar.jsx

@@ -1,15 +1,46 @@
-import React from 'react';
-import Toolbar from '@mui/material/Toolbar';
-import AppBar from '@mui/material/AppBar';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import { makeStyles } from '@mui/styles';
-import { AboutIcon } from './AboutPanel';
-import LoginMenu from './LoginMenu';
-import Logo from '../assets/Logo.svg';
-import Folder from '../assets/Folder.svg';
-import { alpha, styled } from '@mui/material/styles';
-import { grey } from '@mui/material/colors';
+import React from 'react'
+import AppBar from '@mui/material/AppBar'
+import IconButton from '@mui/material/IconButton'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { makeStyles } from '@mui/styles'
+import Settings from './Settings'
+import { AboutIcon } from './AboutPanel'
+import Logo from '../assets/Logo.svg'
+import Folder from '../assets/Folder.svg'
+
+
+export default function ToolBar({ fileOpen, offsetTop }) {
+  const classes = useStyles();
+
+  return (
+    <AppBar
+      elevation={0}
+      position='absolute'
+      color='primary'
+      className = {classes.appBar}>
+      <Toolbar variant='regular' className={classes.toolBar} >
+        <div className={classes.leftContainer} >
+          <Typography variant='h6' className={classes.title}>
+            <Logo className = {classes.logo}/>
+          </Typography>
+          <IconButton
+            edge='start'
+            color='secondary'
+            aria-label='menu'
+            onClick={fileOpen}
+          >
+            <Folder className = {classes.folder}/>
+          </IconButton>
+        </div>
+        <div className = {classes.rightContainer}>
+          <AboutIcon offsetTop = {offsetTop}/>
+          <Settings />
+      </div>
+      </Toolbar>
+    </AppBar>
+  )
+}
 
 
 const useStyles = makeStyles({
@@ -24,7 +55,6 @@ const useStyles = makeStyles({
   },
   toolBar:{
     borderBottom: '1px solid 	#696969',
-    backgroundColor: '#D8D8D8',
     display: 'flex',
     justifyContent: 'space-between',
   },
@@ -59,38 +89,4 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     borderBottom: '1px solid #737373'
   },
-});
-
-
-const ToolBar = ({ fileOpen, offsetTop }) => {
-  const classes = useStyles();
-  return (
-    <AppBar
-      elevation={0}
-      position='absolute'
-      color='primary'
-      className = {classes.appBar}>
-      <Toolbar variant='regular' className={classes.toolBar} >
-        <div className={classes.leftContainer} >
-          <Typography variant='h6' className={classes.title}>
-            <Logo className = {classes.logo}/>
-          </Typography>
-          <IconButton
-            edge='start'
-            color='secondary'
-            aria-label='menu'
-            onClick={fileOpen}
-          >
-            <Folder className = {classes.folder}/>
-          </IconButton>
-        </div>
-        <div className = {classes.rightContainer}>
-          <AboutIcon offsetTop = {offsetTop}/>
-          <LoginMenu />
-      </div>
-      </Toolbar>
-    </AppBar>
-  );
-};
-
-export default ToolBar;
+})

src/Containers/CadView.jsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
-import { makeStyles } from '@mui/styles'
+import { makeStyles } from '@mui/styles' // useTheme, see TODO below
 import { Color } from 'three'
 import { IfcViewerAPI } from 'web-ifc-viewer'
 import SearchIndex from './SearchIndex.js'
@@ -15,6 +15,7 @@ import debug from '../utils/debug'
 import { computeElementPath, setupLookupAndParentLinks } from '../utils/TreeUtils'
 
 
+
 export default function CadView({installPrefix, appPrefix, pathPrefix}) {
   const classes = useStyles();
   const [showSearchBar, setShowSearchBar] = useState(false);
@@ -38,7 +39,16 @@ export default function CadView({installPrefix, appPrefix, pathPrefix}) {
 
   const navigate = useNavigate();
   const urlParams = useParams();
+  //const theme = useTheme()
+
 
+  //useEffect(()=>{
+  //  if (viewer.context) {
+  //  // TODO: should work
+  //  // viewer.context.renderer.renderer.setClearColor(0xff0000)
+  //  // viewer.context.scene.color = new THREE.Color(0xff0000)
+  //  }
+  //}, [theme])
 
   /**
    * On a change to urlParams, setting a new model path will clear the
@@ -355,7 +365,7 @@ function initViewer(pathPrefix) {
   container.textContent = '';
   const viewer = new IfcViewerAPI({
     container,
-    backgroundColor: new Color('#E0E0E0'),
+    backgroundColor: new Color('#a0a0a0'),
   });
   debug().log('CadView#initViewer: viewer created: ', viewer);
   // Path to web-ifc.wasm in serving directory.
@@ -364,6 +374,7 @@ function initViewer(pathPrefix) {
   viewer.addGrid(50, 50);
   viewer.clipper.active = true;
 
+
   // Highlight items when hovering over them
   window.onmousemove = (event) => {
     viewer.prePickIfcItem(event);