From d54850b7de57a45e4e2b6b8ff7c9eb524b6d4cbf Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Wed, 3 Aug 2022 16:34:39 +0530 Subject: [PATCH 1/4] fixed ui break through css Signed-off-by: msivasubramaniaan --- src/webview/cluster/app/cluster.style.tsx | 23 ++++++++-- src/webview/cluster/app/cluster.tsx | 54 ++++++++++++----------- 2 files changed, 48 insertions(+), 29 deletions(-) diff --git a/src/webview/cluster/app/cluster.style.tsx b/src/webview/cluster/app/cluster.style.tsx index d90eb9e01..f3afa0ec1 100644 --- a/src/webview/cluster/app/cluster.style.tsx +++ b/src/webview/cluster/app/cluster.style.tsx @@ -35,8 +35,8 @@ export default (theme: Theme) => }, cardTransform: { width: '27em', + height: 'auto', marginRight: theme.spacing(4), - position: 'relative', transform: 'scale(0.95)', '&:hover': { transform: 'scale(1)', @@ -48,15 +48,30 @@ export default (theme: Theme) => padding: theme.spacing(2), borderBottom: '0 solid transparent' }, + cardBody: { + maxHeight: '14em', + overflowX: 'hidden', + overflowY:'scroll', + '&::-webkit-scrollbar':{ + width:0, + } + }, cardButton: { display: 'block', - marginBottom: theme.spacing(2) + margin: theme.spacing(2) }, button: { + minWidth: '5rem', + maxWidth: '18rem', + maxHeight: '3rem', + height: '2rem', + textAlign: 'center', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', color: 'var(--vscode-button-foreground)', backgroundColor: '#EE0000', '&:hover': { - color: 'var(--vscode-button-foreground)', backgroundColor: '#BE0000', }, textTransform: "none" @@ -70,4 +85,4 @@ export default (theme: Theme) => maxHeight: '100%', maxWidth: '100%' } - }) \ No newline at end of file + }) diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index 2534dde3c..14b49ce30 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -16,7 +16,7 @@ import { Tooltip, Typography } from '@material-ui/core'; - +import { CardBody, CardFooter } from '@patternfly/react-core'; import AddClusterView from './clusterView'; import AddSandboxView from './sandboxView'; import clusterStyle from './cluster.style'; @@ -108,35 +108,39 @@ export default function Header() { - + {list.imageUrl.map((url: string, index: string | number) => ( ))} - - - - - + + + + + + + - - -
- handleView(index)} style={{ textDecoration: 'none' }} href={clusterTypes[index].redirectLink || '#'}> - - -
- - + + + + + + + ))} From 56f446ef21f91a01bd95af61d45651b6ee03d555 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Wed, 3 Aug 2022 20:10:06 +0530 Subject: [PATCH 2/4] added button autoformat Signed-off-by: msivasubramaniaan --- src/webview/cluster/app/cluster.style.tsx | 24 ++++++++++++++++++----- src/webview/cluster/app/cluster.tsx | 4 ++-- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/webview/cluster/app/cluster.style.tsx b/src/webview/cluster/app/cluster.style.tsx index f3afa0ec1..4a4900b1b 100644 --- a/src/webview/cluster/app/cluster.style.tsx +++ b/src/webview/cluster/app/cluster.style.tsx @@ -48,6 +48,20 @@ export default (theme: Theme) => padding: theme.spacing(2), borderBottom: '0 solid transparent' }, + cardImageContainer: { + display: 'inherit', + padding: '10px', + height: '50px', + maxHeight: '10rem', + maxWidth: '15rem' + }, + cardImageTableContainer: { + display: 'table', + marginLeft: '3rem', + height: '50px', + maxHeight: '10rem', + maxWidth: '15rem' + }, cardBody: { maxHeight: '14em', overflowX: 'hidden', @@ -61,12 +75,12 @@ export default (theme: Theme) => margin: theme.spacing(2) }, button: { - minWidth: '5rem', - maxWidth: '18rem', - maxHeight: '3rem', + display: 'table-cell', + minWidth: '8rem', + maxWidth: '20rem', + maxHeight: '5rem', height: '2rem', textAlign: 'center', - whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--vscode-button-foreground)', @@ -74,7 +88,7 @@ export default (theme: Theme) => '&:hover': { backgroundColor: '#BE0000', }, - textTransform: "none" + textTransform: 'none' }, cardContent: { background: 'var(--vscode-settings-focusedRowBackground)', diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index 14b49ce30..bf397cb1f 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -108,9 +108,9 @@ export default function Header() { - + {list.imageUrl.map((url: string, index: string | number) => ( - + ))} From d33ddd18a358d4d8a828da25847ff651d78bfaa4 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Thu, 4 Aug 2022 21:50:24 +0530 Subject: [PATCH 3/4] done additional css changes to make ui better Signed-off-by: msivasubramaniaan --- src/webview/cluster/app/cluster.style.tsx | 17 ++++++++++------- src/webview/cluster/app/cluster.tsx | 5 +++-- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/webview/cluster/app/cluster.style.tsx b/src/webview/cluster/app/cluster.style.tsx index 4a4900b1b..0758c1535 100644 --- a/src/webview/cluster/app/cluster.style.tsx +++ b/src/webview/cluster/app/cluster.style.tsx @@ -56,20 +56,23 @@ export default (theme: Theme) => maxWidth: '15rem' }, cardImageTableContainer: { - display: 'table', - marginLeft: '3rem', - height: '50px', - maxHeight: '10rem', - maxWidth: '15rem' + display: 'inline-block', + verticalAlign: 'top', + height: '15%', + width: 'auto', + marginTop: '1rem' }, cardBody: { - maxHeight: '14em', - overflowX: 'hidden', + maxHeight: '15em', + overflow: 'hidden', overflowY:'scroll', '&::-webkit-scrollbar':{ width:0, } }, + cardBodyMargin: { + marginTop: theme.spacing(3) + }, cardButton: { display: 'block', margin: theme.spacing(2) diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index bf397cb1f..73cd76064 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -16,6 +16,7 @@ import { Tooltip, Typography } from '@material-ui/core'; +import clsx from 'clsx'; import { CardBody, CardFooter } from '@patternfly/react-core'; import AddClusterView from './clusterView'; import AddSandboxView from './sandboxView'; @@ -108,12 +109,12 @@ export default function Header() { - + {list.imageUrl.map((url: string, index: string | number) => ( ))} - + Date: Fri, 5 Aug 2022 12:30:24 +0530 Subject: [PATCH 4/4] removed patternfly dependency Signed-off-by: msivasubramaniaan --- src/webview/cluster/app/cluster.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/webview/cluster/app/cluster.tsx b/src/webview/cluster/app/cluster.tsx index 73cd76064..cb7569023 100644 --- a/src/webview/cluster/app/cluster.tsx +++ b/src/webview/cluster/app/cluster.tsx @@ -17,7 +17,6 @@ import { Typography } from '@material-ui/core'; import clsx from 'clsx'; -import { CardBody, CardFooter } from '@patternfly/react-core'; import AddClusterView from './clusterView'; import AddSandboxView from './sandboxView'; import clusterStyle from './cluster.style'; @@ -114,7 +113,7 @@ export default function Header() { ))} - +
- +
- +
@@ -141,7 +140,7 @@ export default function Header() {
- +
))}