Merge pull request #1312 from pablo-mayrgundter/1311-canvas-resize-od…

…d-toggling-dpi-mismatch

Address 1311-canvas-resize-odd-toggling-dpi-mismatch

Components.js

@@ -0,0 +1,289 @@
+/**
+ * @param {object} Mui color palette.
+ * @return {object} Mui component overrides.
+ */
+export function getComponentOverrides(palette, typography) {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          // To align 'Search' placeholder with top row buttons
+          margin: '5px',
+          padding: '5px',
+        },
+        // TODO(pablo): We set MuiIcon button styles below for convenience, but it
+        // means resetting other uses like these.
+        clearIndicator: {
+          width: '1em',
+          height: '1em',
+          margin: 0,
+          padding: 0,
+          // border: 'solid 3px blue',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+        },
+      },
+      variants: [{
+        props: {variant: 'rectangular'},
+        style: {
+          border: `1px solid ${palette.primary.main}`,
+        },
+      }],
+    },
+    MuiButtonGroup: {
+      variants: [{
+        props: {orientation: 'horizontal'},
+        style: {
+          '& .MuiButtonBase-root + .MuiButtonBase-root': {
+            marginLeft: '0.25em', // same as vertical
+          },
+        },
+      }, {
+        props: {orientation: 'vertical'},
+        style: {
+          '& .MuiButtonBase-root + .MuiButtonBase-root': {
+            marginTop: '0.25em', // same as horizontal
+          },
+        },
+      }, {
+        props: {variant: 'controls'},
+        style: {},
+      }, {
+        props: {variant: 'contained'},
+        style: ({theme}) => ({
+          boxShadow: theme.shadows[0],
+        }),
+      }, {
+        props: {variant: 'outlined'},
+        style: ({theme}) => ({
+          boxShadow: theme.shadows[0],
+        }),
+      }],
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: StandardButton, // Same as MuiToggleButton
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          // ?? Mui cards don't seem to have theme support for color grading
+          // the different elts.
+          // background: palette.secondary.main,
+          width: '100%',
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          // 'padding': '0px 20px',
+          '& img': {
+            width: '100%',
+          },
+          // TODO(pablo): react-markdown has leading margin on first elt
+          '& p': {
+            marginTop: 0,
+          },
+          // TODO(pablo): react-markdown sets smaller?
+          'fontSize': '1rem',
+          'lineHeight': 1.5,
+        },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          'borderRadius': '10px',
+          'textAlign': 'center',
+          'padding': '0.5em',
+          '& .MuiButtonBase-root': {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            margin: '0.5em',
+            opacity: 0.5,
+          },
+        },
+      },
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          'justifyContent': 'center',
+          'textAlign': 'center',
+          'padding': '1em 0px',
+          '& .MuiButtonBase-root': {
+            marginLeft: 'auto',
+            marginRight: 'auto',
+          },
+        },
+      },
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: '0px 10px',
+          overflowX: 'hidden',
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          textAlign: 'center',
+        },
+      },
+    },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: '.5em 0',
+        },
+      },
+      variants: [{
+        // Used in HelpControl to indicate activity state
+        props: {variant: 'alert'},
+        style: {
+          padding: '.2em 0',
+        },
+      }],
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            backgroundColor: palette.secondary.dark,
+            fontWeight: 'bold',
+          },
+          '&.Mui-selected:hover': {
+            // TODO(pablo): merge with above. Can't figure out combined selector
+            backgroundColor: palette.secondary.dark,
+            fontWeight: 'bold',
+            fontStyle: 'italic',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      variants: [
+        {
+          props: {variant: 'control'},
+          style: ({ownerState, theme}) => ({
+            boxShadow: theme.shadows[ownerState.elevation],
+          }),
+        },
+        {
+          props: {variant: 'background'},
+          style: ({ownerState, theme}) => ({
+            boxShadow: theme.shadows[ownerState.elevation],
+            padding: '10px',
+          }),
+        },
+        {
+          props: {variant: 'page-background'},
+          style: {
+            padding: '10px',
+            borderRadius: '0',
+          },
+        },
+        {
+          props: {variant: 'page'},
+          style: {
+            padding: '10px',
+            borderRadius: '0',
+          },
+        },
+      ],
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: palette.secondary.contrastText,
+          textDecoration: 'underline',
+        },
+      },
+    },
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.secondary.main,
+          borderRadius: '10px',
+        },
+      },
+    },
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          width: '1.5rem',
+          height: '1.5rem',
+          color: palette.secondary.contrastText,
+        },
+      },
+      variants: [{
+        // Used in HelpControl to indicate activity state
+        props: {variant: 'success'},
+        style: {
+          color: palette.success.main,
+        },
+      }],
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        track: {
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected, &.Mui-selected:hover': {
+            color: palette.secondary.contrastText,
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          borderRadius: '10px',
+        },
+      },
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: StandardButton, // Same as MuiIconButton
+      },
+      variants: [{
+        props: {variant: 'control'},
+        style: {
+        },
+      }],
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: palette.secondary.contrastText,
+        },
+      },
+    },
+  }
+}
+
+
+const StandardButton = {
+  fontSize: '1rem',
+  width: '3em',
+  height: '3em',
+  borderRadius: '10px',
+  margin: '5px',
+  padding: '5px',
+  border: 'none',
+}

Styles.jsx

@@ -0,0 +1,70 @@
+import React, {Fragment} from 'react'
+import GlobalStyles from '@mui/material/GlobalStyles'
+
+
+/**
+ * @property {object} theme To set link, icon and scrollbar colors.
+ * @return {React.Component}
+ */
+export default function Styles({theme}) {
+  // For performance
+  // See https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override
+  const globalStyles = (
+    <GlobalStyles
+      styles={{
+        'body': {
+          overscrollBehavior: 'none',
+          overflow: 'hidden',
+          padding: 0,
+          height: '100%',
+          maxHeight: '100%',
+        },
+        '@media (max-width: 768px)': {
+          html: {
+            height: '100%',
+            maxHeight: '100%',
+            overflow: 'hidden',
+            overscrollBehavior: 'none',
+          },
+          body: {
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            maxHeight: '100%',
+          },
+        },
+        'a': {
+          color: theme.palette.primary.main,
+        },
+        '.no-select': {
+          userSelect: 'none',
+        },
+        '.icon-share': {
+          width: '40px',
+          height: '40px',
+          fill: theme.palette.primary.contrastText,
+        },
+        '.icon-small': {
+          width: '15px',
+          height: '15px',
+        },
+        /* icon-nav-* are the sub-icons in NavTree */
+        '.icon-nav-caret': {
+          width: '12px',
+          height: '12px',
+        },
+        '.icon-nav-eye': {
+          width: '12px',
+          height: '12px',
+        },
+        '.icon-nav-glasses': {
+          width: '12px',
+          height: '12px',
+        },
+      }}
+    />
+  )
+  return <Fragment>{globalStyles}</Fragment>
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1213",
+  "version": "1.0.1222",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/NavTree/NavTreeNode.jsx

@@ -99,7 +99,7 @@ export default function NavTreeNode({
         <div
           style={{
             marginLeft: 'auto',
-            paddingRight: 16,
+            paddingRight: '0.5rem',
             display: 'flex',
             alignItems: 'center',
           }}