(null)
@@ -97,6 +78,8 @@ export default function FileUploadDialog() {
}
}
+ const tabLabels = ['From your computer', 'Add external data']
+
const isWebkitDirectorySupported = 'webkitdirectory' in document.createElement('input')
if (!isWebkitDirectorySupported) return null
@@ -132,142 +115,113 @@ export default function FileUploadDialog() {
-
-
-
-
-
-
-
-
- theme.palette.primary.main,
- },
- }}
- >
- ) => {
- if (ev.target.files) {
- await store.addFiles(ev.target.files)
- store.openDialog('openLocation')
- }
+
+
+
+ theme.palette.primary.main,
+ },
}}
- />
-
-
-
+ >
+ ) => {
+ if (ev.target.files) {
+ await store.addFiles(ev.target.files)
+ store.openDialog('openLocation')
+ }
+ }}
+ />
+
+
+
+
+ Add one or more Excel or csv files
+
+ Select
+
- Add one or more Excel or csv files
-
- Select
-
-
-
- theme.palette.primary.main,
- },
- }}
- >
- ) => {
- if (ev.target.files) {
- store.addFiles(ev.target.files)
- store.closeDialog()
- }
+
+ theme.palette.primary.main,
+ },
}}
- // @ts-expect-error
- webkitdirectory=""
- />
-
-
-
+ >
+ ) => {
+ if (ev.target.files) {
+ store.addFiles(ev.target.files)
+ store.closeDialog()
+ }
+ }}
+ // @ts-expect-error
+ webkitdirectory=""
+ />
+
+
+
+
+ Add one or more folders
+
+ Select
+
- Add one or more folders
-
- Select
-
-
-
-
-
-
-
-
+
+
+
- Link to the external table:
-
-
-
- {loading ? (
-
+ Link to the external table:
+
+
+
- ) : null}
+ {loading ? (
+
+ ) : null}
+
+ onAddRemoteConfirm(remoteUrlValue)}
+ />
- onAddRemoteConfirm(remoteUrlValue)}
- />
-
-
+
+
)
}
-function CustomTabPanel(props: {
- children?: React.ReactNode
- index: number
- value: number
-}) {
- const { children, value, index, ...other } = props
-
- return (
-
- {value === index && {children}}
-
- )
-}
-
function AddRemoteTextfield(props: {
errorMessage?: string
value: string
diff --git a/client/components/Application/Dialogs/IndexFiles.tsx b/client/components/Application/Dialogs/IndexFiles.tsx
index 1f22f56de..482a22a06 100644
--- a/client/components/Application/Dialogs/IndexFiles.tsx
+++ b/client/components/Application/Dialogs/IndexFiles.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import DeleteIcon from '@mui/icons-material/Delete'
-import ConfirmDialog from '../../Parts/Dialogs/OneButton'
+import OneButtonDialog from '../../Parts/Dialogs/OneButton'
import LinearSensor from '../../Parts/Sensors/Linear'
import * as store from '@client/store'
import { client } from '@client/client'
@@ -10,7 +10,7 @@ export default function IndexFilesDialog() {
const notIndexedFiles = store.useStore(store.getNotIndexedFiles)
return (
-
{progress > 0 && progress < 100 && }
-
+
)
}
diff --git a/client/components/Application/Dialogs/Publish.tsx b/client/components/Application/Dialogs/Publish.tsx
index 1a327999f..0cc922674 100644
--- a/client/components/Application/Dialogs/Publish.tsx
+++ b/client/components/Application/Dialogs/Publish.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'
import Link from '@mui/material/Link'
import LinearProgress from '@mui/material/LinearProgress'
import CheckIcon from '@mui/icons-material/Check'
-import ConfirmDialog from '../../Parts/Dialogs/OneButton'
+import OneButtonDialog from '../../Parts/Dialogs/OneButton'
import PortalEditor from '../../Editors/Portal'
import * as helpers from '../../../helpers'
import * as types from '../../../types'
@@ -29,7 +29,7 @@ export default function PublishDialog() {
}
return (
-
-
+
{
@@ -62,6 +62,6 @@ export default function PublishDialog() {
{' '}
)}
-
+
)
}
diff --git a/client/components/Application/Dialogs/assets/dialog_publish.png b/client/components/Application/Dialogs/assets/dialog_publish.png
new file mode 100644
index 000000000..6ca3f2033
Binary files /dev/null and b/client/components/Application/Dialogs/assets/dialog_publish.png differ
diff --git a/client/components/Editors/Base/Help.tsx b/client/components/Editors/Base/Help.tsx
index a902126b7..d214136c7 100644
--- a/client/components/Editors/Base/Help.tsx
+++ b/client/components/Editors/Base/Help.tsx
@@ -4,13 +4,19 @@ import * as types from '../../../types'
interface EditorHelpProps {
helpItem: types.IHelpItem
+ withIcon?: boolean
}
export default function EditorHelp(props: EditorHelpProps) {
- const { helpItem } = props
+ const { helpItem, withIcon } = props
return (
-
+
{helpItem.description}
diff --git a/client/components/Editors/Base/Section.tsx b/client/components/Editors/Base/Section.tsx
index 857dbb691..ff1d4db1e 100644
--- a/client/components/Editors/Base/Section.tsx
+++ b/client/components/Editors/Base/Section.tsx
@@ -5,7 +5,7 @@ import Columns from '../../Parts/Grids/Columns'
import HeadingBox from './Heading/Box'
export interface EditorItemProps {
- name: string
+ name?: string
onHeadingClick?: () => void
onBackClick?: () => void
}
@@ -26,7 +26,7 @@ export default function EditorItem(props: React.PropsWithChildren
props.onHeadingClick && props.onHeadingClick()}>
- {props.name}
+ {props.name ? {props.name} : null}
diff --git a/client/components/Editors/Portal/Layout.tsx b/client/components/Editors/Portal/Layout.tsx
index 97f35c87b..392954483 100644
--- a/client/components/Editors/Portal/Layout.tsx
+++ b/client/components/Editors/Portal/Layout.tsx
@@ -1,43 +1,38 @@
import Box from '@mui/material/Box'
-import Columns from '../../Parts/Grids/Columns'
-import MenuPanel from '../../Parts/Panels/Menu'
-import EditorHelp from '../Base/Help'
+import publishDialogImg from '../../Application/Dialogs/assets/dialog_publish.png'
import CkanSection from './Sections/Ckan'
import GithubSection from './Sections/Github'
import ZenodoSection from './Sections/Zenodo'
-import { useStore } from './store'
-import * as types from '../../../types'
-
-const MENU_ITEMS: types.IMenuItem[] = [
- { section: 'ckan', name: 'Ckan' },
- { section: 'github', name: 'Github' },
- { section: 'zenodo', name: 'Zenodo' },
-]
+import DialogTabs from '../../Parts/Tabs/Dialog'
export default function Layout() {
- const section = useStore((state) => state.descriptor.type)
- const helpItem = useStore((state) => state.helpItem)
- const updateHelp = useStore((state) => state.updateHelp)
- const updateDescriptor = useStore((state) => state.updateDescriptor)
+ const tabLabels = ['Ckan', 'Github', 'Zenodo']
+
return (
-
- {
- if (section === newSection) return
- updateHelp(newSection)
- // @ts-ignore
- updateDescriptor({ type: newSection })
- }}
- >
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/client/components/Editors/Portal/Sections/Ckan.tsx b/client/components/Editors/Portal/Sections/Ckan.tsx
index 5908fa43e..f450a63a2 100644
--- a/client/components/Editors/Portal/Sections/Ckan.tsx
+++ b/client/components/Editors/Portal/Sections/Ckan.tsx
@@ -2,15 +2,20 @@ import EditorSection from '../../Base/Section'
import InputField from '../../../Parts/Fields/Input'
import YesNoField from '../../../Parts/Fields/YesNo'
import { useStore } from '../store'
+import Box from '@mui/material/Box'
export default function CkanSection() {
const updateHelp = useStore((state) => state.updateHelp)
return (
- updateHelp('ckan')}>
-
-
-
-
+ updateHelp('ckan')}>
+
+
+
+
+
+
+
+
)
}
diff --git a/client/components/Editors/Portal/Sections/Github.tsx b/client/components/Editors/Portal/Sections/Github.tsx
index a3dadd40e..1785398c5 100644
--- a/client/components/Editors/Portal/Sections/Github.tsx
+++ b/client/components/Editors/Portal/Sections/Github.tsx
@@ -1,15 +1,21 @@
import EditorSection from '../../Base/Section'
import InputField from '../../../Parts/Fields/Input'
import { useStore } from '../store'
+import Box from '@mui/material/Box'
export default function GithubSection() {
const updateHelp = useStore((state) => state.updateHelp)
return (
- updateHelp('github')}>
-
-
-
-
+ updateHelp('github')}>
+
+ {' '}
+
+
+
+
+
+ {' '}
+
)
}
diff --git a/client/components/Editors/Portal/Sections/Zenodo.tsx b/client/components/Editors/Portal/Sections/Zenodo.tsx
index bfb1d6cc1..30b8ab2ce 100644
--- a/client/components/Editors/Portal/Sections/Zenodo.tsx
+++ b/client/components/Editors/Portal/Sections/Zenodo.tsx
@@ -2,15 +2,21 @@ import EditorSection from '../../Base/Section'
import MultilineField from '../../../Parts/Fields/Multiline'
import InputField from '../../../Parts/Fields/Input'
import { useStore } from '../store'
+import Box from '@mui/material/Box'
export default function ZenodoSection() {
const updateHelp = useStore((state) => state.updateHelp)
return (
- updateHelp('zenodo')}>
-
-
-
-
+ updateHelp('zenodo')}>
+
+ {' '}
+
+
+
+
+
+
+
)
}
diff --git a/client/components/Parts/Cards/Help.tsx b/client/components/Parts/Cards/Help.tsx
index 43df19bb1..aa9bfa1f6 100644
--- a/client/components/Parts/Cards/Help.tsx
+++ b/client/components/Parts/Cards/Help.tsx
@@ -1,9 +1,12 @@
import * as React from 'react'
import Card from '@mui/material/Card'
-import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
-import CardActions from '@mui/material/CardActions'
+import Link from '@mui/material/Link'
import CardContent from '@mui/material/CardContent'
+import iconInfoImg from '../../../assets/icon_info.png'
+import CardActions from '@mui/material/CardActions'
+import Button from '@mui/material/Button'
// TODO: review geometry porps/logic
@@ -12,10 +15,41 @@ interface HelpCardProps {
subtitle: string
link: string
height?: string
+ withIcon?: boolean
}
export default function HelpCard(props: React.PropsWithChildren) {
+ if(props.withIcon)
+ return ()
+ else return ()
+
+}
+
+export function HelpCardWithIcon(props: React.PropsWithChildren){
return (
+
+
+
+
+
+ {props.children}
+
+ {' '}Learn More
+
+
+
+
+ )
+}
+
+export function HelpCardNoIcon(props: React.PropsWithChildren){
+ return (
)
gutterBottom
>
Help
-
-
+
+
{props.title}
{props.subtitle}
{props.children}
-
-
+
+
- )
-}
+ )
+}
\ No newline at end of file
diff --git a/client/components/Parts/Dialogs/Note.tsx b/client/components/Parts/Dialogs/Note.tsx
index 4f235eaed..03124b24e 100644
--- a/client/components/Parts/Dialogs/Note.tsx
+++ b/client/components/Parts/Dialogs/Note.tsx
@@ -67,4 +67,4 @@ export default function NoteDialog(props: NoteDialogProps) {
)
-}
+}
\ No newline at end of file
diff --git a/client/components/Parts/Dialogs/OneButton.tsx b/client/components/Parts/Dialogs/OneButton.tsx
index 2fb3c8c14..b5691aa50 100644
--- a/client/components/Parts/Dialogs/OneButton.tsx
+++ b/client/components/Parts/Dialogs/OneButton.tsx
@@ -82,7 +82,7 @@ export default function OneButtonDialog(props: OneButtonDialogProps) {
)}
-
+
{
items: string[]
@@ -106,14 +106,14 @@ export default function PickDialog(props: PickDialogProps) {
)
return (
-
onConfirm(propsItems.filter((_, index) => leftChecked.includes(index)))
}
>
{customList('Items', available)}
-
+
)
}
diff --git a/client/components/Parts/Dialogs/TwoButton.tsx b/client/components/Parts/Dialogs/TwoButton.tsx
index 901ffd0a9..7f34f8b27 100644
--- a/client/components/Parts/Dialogs/TwoButton.tsx
+++ b/client/components/Parts/Dialogs/TwoButton.tsx
@@ -25,7 +25,7 @@ export interface TwoButtonDialogProps {
disableClosing?: boolean
}
-export default function ConfirmDialog(props: TwoButtonDialogProps) {
+export default function TwoButtonDialog(props: TwoButtonDialogProps) {
const handleCancel = () => props.onCancel && props.onCancel()
const handleConfirm = () => props.onConfirm && props.onConfirm()
diff --git a/client/components/Parts/Fields/Input.tsx b/client/components/Parts/Fields/Input.tsx
index 65c2a1383..a45878b12 100644
--- a/client/components/Parts/Fields/Input.tsx
+++ b/client/components/Parts/Fields/Input.tsx
@@ -1,5 +1,6 @@
import noop from 'lodash/noop'
import TextField from '@mui/material/TextField'
+import { styled } from '@mui/material/styles'
// TODO: rework all the fields wrappign props (see buttons)
// TODO: fix it loosing focus
@@ -30,14 +31,14 @@ export default function InputField(props: InputFieldProps) {
const onFocus = props.onFocus || noop
const onBlur = props.onBlur || noop
return (
- onChange(ev.target.value)}
@@ -52,3 +53,25 @@ export default function InputField(props: InputFieldProps) {
/>
)
}
+
+
+export const StyledTextField = styled(TextField)(() => ({
+ width: '100%',
+ '& label.Mui-focused': {
+ color: '#00D1FF',
+ },
+ '& .MuiInput-underline:after': {
+ borderBottomColor: '#00D1FF',
+ },
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'gray',
+ },
+ '&:hover fieldset': {
+ borderColor: '#00D1FF',
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: '#00D1FF',
+ },
+ },
+}))
\ No newline at end of file
diff --git a/client/components/Parts/Fields/Multiline.tsx b/client/components/Parts/Fields/Multiline.tsx
index 5b38191c6..d6ae45ca5 100644
--- a/client/components/Parts/Fields/Multiline.tsx
+++ b/client/components/Parts/Fields/Multiline.tsx
@@ -1,5 +1,5 @@
-import TextField from '@mui/material/TextField'
import noop from 'lodash/noop'
+import { StyledTextField } from './Input'
// TODO: shall we open a modal editor for this field?
@@ -20,7 +20,7 @@ interface MultilineFieldProps {
export default function MultilineField(props: MultilineFieldProps) {
const onFocus = props.onFocus || noop
return (
-
)
-}
+}
\ No newline at end of file
diff --git a/client/components/Parts/Fields/Multiselect.tsx b/client/components/Parts/Fields/Multiselect.tsx
index f351bc11d..a26ae6417 100644
--- a/client/components/Parts/Fields/Multiselect.tsx
+++ b/client/components/Parts/Fields/Multiselect.tsx
@@ -1,6 +1,6 @@
import noop from 'lodash/noop'
import MenuItem from '@mui/material/MenuItem'
-import TextField from '@mui/material/TextField'
+import { StyledTextField } from './Input'
// TODO: rework? merge with SelectField?
// TODO: handle different value types properly (string/number/etc)
@@ -22,7 +22,7 @@ export default function MultiselectField(props: MultiselectFieldProps) {
)
return (
-
))}
-
+
)
}
diff --git a/client/components/Parts/Fields/Select.tsx b/client/components/Parts/Fields/Select.tsx
index 8112dd32b..5bacc78ef 100644
--- a/client/components/Parts/Fields/Select.tsx
+++ b/client/components/Parts/Fields/Select.tsx
@@ -1,6 +1,6 @@
import MenuItem from '@mui/material/MenuItem'
-import TextField from '@mui/material/TextField'
import { noop } from 'lodash'
+import { StyledTextField } from './Input'
// TODO: rework? merge with SelectField?
// TODO: handle different value types properly (string/number/etc)
@@ -27,7 +27,7 @@ export default function SelectField(props: SelectFieldProps) {
typeof option === 'string' ? { label: option || 'select', value: option } : option
)
return (
-
))}
-
+
)
}
diff --git a/client/components/Parts/Fields/YesNo.tsx b/client/components/Parts/Fields/YesNo.tsx
index e7cd5626a..5c251bb74 100644
--- a/client/components/Parts/Fields/YesNo.tsx
+++ b/client/components/Parts/Fields/YesNo.tsx
@@ -1,6 +1,6 @@
import noop from 'lodash/noop'
-import TextField from '@mui/material/TextField'
import MenuItem from '@mui/material/MenuItem'
+import { StyledTextField } from './Input'
interface YesNoFieldProps {
label: string
@@ -13,9 +13,9 @@ interface YesNoFieldProps {
export default function YesNoField(props: YesNoFieldProps) {
const onFocus = props.onFocus || noop
return (
-
-
+
)
}
diff --git a/client/components/Parts/Tabs/Dialog.tsx b/client/components/Parts/Tabs/Dialog.tsx
new file mode 100644
index 000000000..e05d37e24
--- /dev/null
+++ b/client/components/Parts/Tabs/Dialog.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+
+export default function DialogTabs(props: any) {
+
+ const [currentTabIndex, setCurrentTabIndex] = React.useState(0)
+
+ function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ }
+ }
+
+ // by default the height of the tabs is set by its content, to avoid the height jump
+ // when changing the tabs we assign the second tab whatever is the height of the first one
+ const tabRefForHeight = React.useRef(null)
+
+ // the event needs to be passed even if not used, disabling here so there's
+ // no unused variable error in the typescript check
+ // @ts-ignore
+ const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+ setCurrentTabIndex(newValue)
+ }
+
+ const isWebkitDirectorySupported = 'webkitdirectory' in document.createElement('input')
+ if (!isWebkitDirectorySupported) return null
+
+ return (
+
+
+ theme.palette.OKFNBlue.main,
+ },
+ '& .MuiButtonBase-root.MuiTab-root': {
+ color: (theme) => theme.palette.OKFNGray500.main,
+ transition: 'color 0.2s ease-in-out',
+ '&:hover': {
+ opacity: 0.7,
+ },
+ '&.Mui-selected': {
+ color: (theme) => theme.palette.OKFNBlue.main,
+ },
+ },
+ }}
+ >
+ {props.labels.map((label: string, index: number) => (
+
+ ))}
+
+
+ {React.Children.map(props.children, (child, index) => (
+
+
+ {child}
+
+
+ ))}
+
+
+ )
+}
+
+function CustomTabPanel(props: {
+ children?: React.ReactNode
+ index: number
+ value: number
+}) {
+ const { children, value, index, ...other } = props
+
+ return (
+
+ {value === index && {children}}
+
+ )
+}
\ No newline at end of file