Adjust CSS for Nextcloud

- Nextcloud includes CSS rules for <button> and <input>
  tags, which need to be overriden
- Nextcloud's header has a z-index of 2000, which needs
  to be overriden
- add AppBar to test rendering in dev server

src/App.css

@@ -1,23 +1,70 @@
 .dataContent {
- display: flex;
- border-radius: 0.25em;
- margin-bottom: 1rem;
- margin-top: 1rem;
- justify-content: left;
- background-color: #cecece;
+ display: block;
+ border-radius: 0.25em;
+ margin-bottom: 1rem;
+ margin-top: 1rem;
+ justify-content: left;
+ background-color: #cecece;
+ font-family: 'Courier New', Courier, monospace;
 }
 
-.form {
- max-width: 1440px;
- margin: auto;
- border: 1px solid gray;
- padding: 2em;
+.MuiAutocomplete-popper {
+ z-index: 2002 !important;
+}
+
+#metadataform {
+ max-width: 1440px;
+ min-width: 600px;
+ margin-top: 3rem;
+ margin-left: 1rem;
+ margin-right: 1rem;
+ border: 1px solid gray;
+ padding: 2em;
+ z-index: 1000;
+}
+
+/* heighten z-index of our dialogs above Nextloud (2000) */
+#metadataeditor + div[role='dialog'] {
+ z-index: 2002;
 }
 
 #datasetdata {
- white-space: -moz-pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- white-space: pre-wrap;
- padding: 1em;
+ white-space: -moz-pre-wrap;
+ white-space: -o-pre-wrap;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ padding: 1em;
 }
+
+#metadataeditor button {
+ font-size: 13px;
+ background-color: none;
+ color: var(--color-main-text);
+ border: 1px solid var(--color-border-dark);
+ outline: none;
+ cursor: text;
+ font-weight: normal;
+ border-radius: var(--border-radius-pill);
+}
+
+#metadataeditor .MuiStepper-horizontal {
+ margin-bottom: 1em;
+}
+
+/* override Nextcloud border of input elements */
+#metadataeditor input {
+ border: 0px;
+}
+
+/* override Nextcloud button stylings for date picker, date picker is outside of #metadataeditor */
+div.MuiCalendarPicker-root button {
+ width: 36px;
+ font-size: 13px;
+ background-color: transparent;
+ height: 36px;
+ padding: 0px;
+ border: 0px;
+ font-weight: normal;
+}
+
+/* a86f-dcdb-server.css | https://localhost:8210/index.php/css/core/a86f-dcdb-server.css?v=b92d206521717ac032f8aa58d3c7ff2f- */

src/App.jsx

@@ -59,13 +59,15 @@ export default function App(props) {
 
  return (
  <Dialog
- fullScreen
+ fullScreen={true}
  open={open}
  onClose={handleClose}
- style={{ zIndex: 3000 }} // Nextcloud header is 2000
+ style={{ zIndex: 2001 }} // Nextcloud header is 2000
  TransitionComponent={Transition}
+ id={'metadataeditor'}
+ className={'remove-all-styles'}
  >
- <AppBar sx={{ position: 'relative' }}>
+ <AppBar>
  <Toolbar>
  <IconButton
  edge="start"
@@ -87,7 +89,7 @@ export default function App(props) {
  </Button>
  </Toolbar>
  </AppBar>
- <div>{content}</div>
+ {content}
  </Dialog>
  )
 }

src/Dataset.jsx

@@ -1,5 +1,6 @@
 import { materialCells, materialRenderers } from '@jsonforms/material-renderers'
 import { JsonForms } from '@jsonforms/react'
+// import { createAjv } from '@jsonforms/core'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import './App.css'
@@ -15,8 +16,10 @@ export default function Dataset(props) {
  props.setData(data)
  }, [data])
 
+ // const handleDefaultsAjv = createAjv({ useDefaults: true })
+
  return (
- <div className="form">
+ <div id="metadataform">
  <JsonForms
  schema={metadataSchema}
  uischema={uischema}

src/index.js

@@ -6,11 +6,19 @@ import App from './App'
 import './App.css'
 import Dataset from './Dataset'
 import { themeOptions } from './themeOptions'
-
-const theme = createTheme(themeOptions)
+import CloseIcon from '@mui/icons-material/Close'
+import AppBar from '@mui/material/AppBar'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import IconButton from '@mui/material/IconButton'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import CssBaseline from '@mui/material/CssBaseline'
 
 const containerId = 'files_metadataeditor'
 
+// $(document).ready($('#content').append('<div id=files_metadataeditor></div>'))
+
 let contentTag = document.getElementById('content')
 let container = document.createElement('div')
 container?.setAttribute('id', containerId)
@@ -32,6 +40,8 @@ if ('OC' in window) {
  __webpack_nonce__ = btoa(OC.requestToken)
 
  const renderEditor = (filename, context) => {
+ const theme = createTheme(themeOptions)
+
  ReactDOM.render(
  <ThemeProvider theme={theme}>
  <App
@@ -85,9 +95,31 @@ if ('OC' in window) {
  OC.Plugins.register('OCA.Files.NewFileMenu', newFileMenuPlugin)
 } else {
  // Render only Dataset JSONForms
+ const theme = createTheme(themeOptions)
+
  ReactDOM.render(
  <ThemeProvider theme={theme}>
- <Dataset initialData={null} setData={() => {}} />
+ <Dialog
+ fullScreen
+ open={true}
+ style={{ zIndex: 2001 }} // Nextcloud header is 2000
+ id={'metadataeditor'}
+ >
+ <AppBar sx={{ position: 'relative' }}>
+ <Toolbar>
+ <IconButton edge="start" color="inherit" aria-label="close">
+ <CloseIcon />
+ </IconButton>
+ <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+ {'metadata.json'}
+ </Typography>
+ <Button autoFocus color="inherit" onClick={() => {}}>
+ save
+ </Button>
+ </Toolbar>
+ </AppBar>
+ <Dataset initialData={null} setData={() => {}} />
+ </Dialog>
  </ThemeProvider>,
  document.getElementById(containerId)
  )

src/themeOptions.js

@@ -44,7 +44,7 @@ export const themeOptions = {
  },
  MuiList: {
  defaultProps: {
- dense: false,
+ dense: true,
  },
  },
  MuiFormControl: {