From 01e6db6d9271aff524af33c9fb4af4b8a4cc577b Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Tue, 30 May 2023 19:03:21 +0200
Subject: [PATCH] SSDM-13579: Implemented proper grid view for files.
---
.../components/database/DatabaseComponent.jsx | 2 +-
.../database/data-browser/GridView.jsx | 10 +++++++--
.../database/data-browser/GridViewItem.jsx | 21 ++++++++++++++-----
3 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/ui-admin/src/js/components/database/DatabaseComponent.jsx b/ui-admin/src/js/components/database/DatabaseComponent.jsx
index 64cf60e40b0..a91ed0a93b1 100644
--- a/ui-admin/src/js/components/database/DatabaseComponent.jsx
+++ b/ui-admin/src/js/components/database/DatabaseComponent.jsx
@@ -79,7 +79,7 @@ class DatabaseComponent extends React.PureComponent {
return (
this.state.showDataBrowser
?
- <DataBrowser viewType='list'/>
+ <DataBrowser viewType='grid'/>
:
<Container>
<pre>{JSON.stringify(this.state.json || {}, null, 2)}</pre>
diff --git a/ui-admin/src/js/components/database/data-browser/GridView.jsx b/ui-admin/src/js/components/database/data-browser/GridView.jsx
index 69163f7a8b5..61c6561eb8f 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -3,7 +3,13 @@ import { withStyles } from '@material-ui/core/styles'
import GridViewItem from "@src/js/components/database/data-browser/GridViewItem.jsx";
import Container from "@src/js/components/common/form/Container.jsx";
-const styles = theme => ({
+const styles = (theme) => ({
+ container: {
+ fontFamily: theme.typography.fontFamily,
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
+ gridGap: '0.5rem'
+ }
})
class GridView extends React.Component {
@@ -11,7 +17,7 @@ class GridView extends React.Component {
render() {
const { classes, configuration, files } = this.props
return (
- <Container>
+ <Container className={classes.container}>
{files.map((file) => <GridViewItem file={file} configuration={configuration}/>)}
</Container>
)
diff --git a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
index 624509fae67..a3e2f74ff6a 100644
--- a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
@@ -3,11 +3,22 @@ import { withStyles } from '@material-ui/core/styles'
import FolderIcon from "@material-ui/icons/FolderOpen";
import FileIcon from "@material-ui/icons/InsertDriveFileOutlined";
import autoBind from "auto-bind";
-
-const styles = theme => ({
+import Container from "@src/js/components/common/form/Container.jsx";
+
+const styles = (theme) => ({
+ cell: {
+ display: 'block',
+ position: 'relative',
+ width: '6rem',
+ height: '8rem',
+ overflow: 'hidden',
+ margin: '0.25rem',
+ // border: '1px solid black',
+ textAlign: 'center'
+ },
icon: {
verticalAlign: 'middle',
- fontSize: '4rem'
+ fontSize: '6rem'
},
})
@@ -42,9 +53,9 @@ class GridViewItem extends React.Component {
const { classes, file } = this.props
return (
- <div>
+ <Container className={classes.cell}>
<>{this.getIcon(file)} {file.name}</>
- </div>
+ </Container>
)
}
}
--
GitLab