From 14c73fa5ae8bc696f4bc5ebdbcf0a96dcb97cebd Mon Sep 17 00:00:00 2001
From: vkovtun <vkovtun@ethz.ch>
Date: Thu, 20 Jul 2023 16:15:11 +0200
Subject: [PATCH] SSDM-13579: Fixed the width of the info panel. Made it
scrollable if the content height is too big.
---
.../src/js/components/common/form/Header.jsx | 22 ++++++++++--------
.../database/data-browser/DataBrowser.jsx | 1 -
.../database/data-browser/InfoPanel.jsx | 23 +++++++++++++++----
3 files changed, 30 insertions(+), 16 deletions(-)
diff --git a/ui-admin/src/js/components/common/form/Header.jsx b/ui-admin/src/js/components/common/form/Header.jsx
index f206012c13c..6c555c429fb 100644
--- a/ui-admin/src/js/components/common/form/Header.jsx
+++ b/ui-admin/src/js/components/common/form/Header.jsx
@@ -25,17 +25,19 @@ class Header extends React.PureComponent {
const { styles, classes, size } = this.props
let variant = null
- let className = null
+ let className = this.props.className;
- if (size === 'big') {
- variant = 'h5'
- className = classes.big
- } else if (size === 'medium') {
- variant = 'h6'
- className = classes.medium
- } else if (size === 'small') {
- variant = 'subtitle1'
- className = classes.small
+ if (!className) {
+ if (size === 'big') {
+ variant = 'h5'
+ className = classes.big
+ } else if (size === 'medium') {
+ variant = 'h6'
+ className = classes.medium
+ } else if (size === 'small') {
+ variant = 'subtitle1'
+ className = classes.small
+ }
}
return (
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 52481ddeaf6..ea818cb3d31 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -51,7 +51,6 @@ const styles = theme => ({
content: {
flex: '1 1 100%',
height: 0,
- overflowY: 'hidden'
},
nameCell: {
display: 'flex',
diff --git a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
index 2024f8dcebc..ef4711e56fe 100644
--- a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
+++ b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
@@ -23,17 +23,28 @@ import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
-import Header from '@src/js/components/common/form/Header.jsx';
-import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx';
-import { withStyles } from "@material-ui/core/styles";
+import Header from '@src/js/components/common/form/Header.jsx'
+import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
+import { withStyles } from '@material-ui/core/styles'
const styles = () => ({
container: {
- position: 'sticky'
+ position: 'sticky',
+ overflowX: 'hidden',
+ overflowY: 'auto',
+ width: '24rem'
},
icon: {
verticalAlign: 'middle',
fontSize: '12rem'
+ },
+ fileName: {
+ whiteSpace: 'nowrap',
+ '& *': {
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis'
+ }
}
})
@@ -53,7 +64,9 @@ class InfoPanel extends React.Component {
// TODO: extract strings to messages
return (file &&
<Container className={classes.container}>
- <Header size='big'>{file.name}</Header>
+ <span className={classes.fileName}>
+ <Header size='big'>{file.name}</Header>
+ </span>
<ItemIcon file={file} classes={classes} configuration={configuration} />
<Table>
<TableBody>
--
GitLab