Skip to content

Commit

Permalink
CB-5070 refactor: forms design (#2607)
Browse files Browse the repository at this point in the history
* CB-5070 refactor: forms design

* Merge remote-tracking branch 'origin/devel' into refactor/cb-5070/forms-design

* CB-5070 fix: html semantics

* CB-5070 fix: table header styles

* CB-5070 fix: table header styles

---------

Co-authored-by: mr-anton-t <[email protected]>
Co-authored-by: Daria Marutkina <[email protected]>
  • Loading branch information
3 people authored May 14, 2024
1 parent 5fce0a5 commit bac47d2
Show file tree
Hide file tree
Showing 35 changed files with 341 additions and 460 deletions.
11 changes: 8 additions & 3 deletions webapp/packages/core-blocks/src/Containers/Container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,21 @@ import { filterContainerFakeProps, getContainerProps } from './filterContainerFa
import type { IContainerProps } from './IContainerProps';
import elementsSizeStyle from './shared/ElementsSize.m.css';

export const Container = forwardRef<HTMLDivElement, IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(
{ className, ...rest },
interface Props {
as?: 'div' | 'header' | 'footer' | 'section' | 'aside' | 'main' | 'nav';
}

export const Container = forwardRef<HTMLDivElement, Props & IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(
{ as = 'div', className, ...rest },
ref,
) {
const styles = useS(style, elementsSizeStyle);
const divProps = filterContainerFakeProps(rest);
const containerProps = getContainerProps(rest);
const Element = as;

return (
<div
<Element
ref={ref}
{...divProps}
className={s(
Expand Down
4 changes: 4 additions & 0 deletions webapp/packages/core-blocks/src/Containers/Group.m.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
.surface {
composes: theme-background-surface theme-text-on-surface from global;
}
.border {
composes: theme-border-color-background from global;
border: 1px solid;
}
.group {
align-content: baseline;
box-sizing: border-box;
Expand Down
4 changes: 3 additions & 1 deletion webapp/packages/core-blocks/src/Containers/Group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@ interface Props extends IContainerProps {
secondary?: boolean;
center?: boolean;
box?: boolean;
border?: boolean;
hideOverflow?: boolean;
boxNoOverflow?: boolean;
}

export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTMLDivElement>>(function Group(
{ form, center, box, secondary, boxNoOverflow, hideOverflow, className, ...rest },
{ form, center, box, border, secondary, boxNoOverflow, hideOverflow, className, ...rest },
ref,
) {
const styles = useS(style, containerStyles, elementsSizeStyles);
Expand All @@ -51,6 +52,7 @@ export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTM
boxNoOverflow,
hideOverflow,
box,
border,
},
className,
)}
Expand Down
8 changes: 8 additions & 0 deletions webapp/packages/core-blocks/src/Table/TableHeader.m.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
.tableHeader.fixed {
background: var(--theme-surface);
position: sticky;
top: 0;
/* TODO: place TableHeader after TableBody and remove z-index */
z-index: 1;

& > tr {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/
import { observer } from 'mobx-react-lite';

import { Container, Group, GroupTitle, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
import { Container, Group, GroupTitle, Loader, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
import { useService } from '@cloudbeaver/core-di';

import style from './CreateTeam.m.css';
Expand All @@ -24,12 +24,14 @@ export const CreateTeam: React.FC = observer(function CreateTeam() {
}

return (
<Group aria-label={translate('administration_teams_team_creation')} className={s(styles, { box: true })} box boxNoOverflow vertical noWrap>
<Group aria-label={translate('administration_teams_team_creation')} className={s(styles, { box: true })} gap vertical noWrap>
<GroupTitle header keepSize>
<Translate token="administration_teams_team_creation" />
</GroupTitle>
<Container overflow>
<TeamForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
<Container overflow vertical>
<Loader suspense>
<TeamForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
</Loader>
</Container>
</Group>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,15 @@
.group {
position: relative;
}
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/

.group,
.container,
.tableContainer {
.group {
height: 100%;
}

.container {
display: flex;
flex-direction: column;
width: 100%;
& .header {
flex: 0 0 auto;
}
}

.tableContainer {
overflow: auto;
}

.grantedConnectionsTableHeader {
flex: 0 0 auto;
}

.table {
composes: theme-background-surface theme-text-on-surface from global;
width: 100%;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';

import {
Button,
Container,
getComputed,
getSelectedItems,
Group,
Expand All @@ -26,11 +27,11 @@ import {
import { Connection, DBDriverResource } from '@cloudbeaver/core-connections';
import { useService } from '@cloudbeaver/core-di';

import styles from './ConnectionList.m.css';
import { getFilteredConnections } from './getFilteredConnections';
import { GrantedConnectionsTableHeader, IFilterState } from './GrantedConnectionsTableHeader/GrantedConnectionsTableHeader';
import { GrantedConnectionsTableInnerHeader } from './GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader';
import { GrantedConnectionsTableItem } from './GrantedConnectionsTableItem';
import styles from './ConnectionList.m.css';

interface Props {
connectionList: Connection[];
Expand Down Expand Up @@ -60,40 +61,40 @@ export const ConnectionList = observer<Props>(function ConnectionList({ connecti
const keys = connections.map(connection => connection.id);

return (
<Group className={s(style, { group: true })} box medium overflow>
<div className={s(style, { container: true })}>
<GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
<Group className={s(style, { group: true })} box border medium overflow vertical>
<GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
<Container keepSize>
<Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>
{translate('ui_add')}
</Button>
</GrantedConnectionsTableHeader>
<div className={s(style, { tableContainer: true })}>
<Table className={s(style, { table: true })} keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)} size="big">
<GrantedConnectionsTableInnerHeader className={s(style, { grantedConnectionsTableHeader: true })} disabled={disabled} />
<TableBody>
{!connections.length && filterState.filterValue && (
<TableItem item="tableInfo" selectDisabled>
<TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
</TableItem>
)}
{connections.map(connection => {
const driver = driversResource.get(connection.driverId);
return (
<GrantedConnectionsTableItem
key={connection.id}
id={connection.id}
name={connection.name}
tooltip={connection.name}
host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
icon={driver?.icon}
disabled={disabled}
/>
);
})}
</TableBody>
</Table>
</div>
</div>
</Container>
</GrantedConnectionsTableHeader>
<Container overflow>
<Table keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)}>
<GrantedConnectionsTableInnerHeader className={s(style, { header: true })} disabled={disabled} />
<TableBody>
{!connections.length && filterState.filterValue && (
<TableItem item="tableInfo" selectDisabled>
<TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
</TableItem>
)}
{connections.map(connection => {
const driver = driversResource.get(connection.driverId);
return (
<GrantedConnectionsTableItem
key={connection.id}
id={connection.id}
name={connection.name}
tooltip={connection.name}
host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
icon={driver?.icon}
disabled={disabled}
/>
);
})}
</TableBody>
</Table>
</Container>
</Group>
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
import { observer } from 'mobx-react-lite';

import {
ColoredContainer,
Container,
getComputed,
Group,
Expand Down Expand Up @@ -76,7 +75,7 @@ export const GrantedConnections: TabContainerPanelComponent<ITeamFormProps> = ob
return (
<Loader className={s(styles, { loader: true })} state={[state.state]}>
{() => (
<ColoredContainer className={s(styles, { box: true })} parent gap vertical>
<Container className={s(styles, { box: true })} parent gap vertical>
{!connections.length ? (
<Group className={s(styles, { placeholderBox: true })} large>
<TextPlaceholder>{translate('administration_teams_team_granted_connections_empty')}</TextPlaceholder>
Expand All @@ -102,7 +101,7 @@ export const GrantedConnections: TabContainerPanelComponent<ITeamFormProps> = ob
</Container>
</>
)}
</ColoredContainer>
</Container>
)}
</Loader>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,15 @@
.box {
position: relative;
}

.box,
.innerBox,
.tableBox {
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/

.group {
height: 100%;
}

.innerBox {
display: flex;
flex-direction: column;
width: 100%;
}

.header {
flex: 0 0 auto;
}

.tableBox {
overflow: auto;
}

.table {
composes: theme-background-surface theme-text-on-surface from global;
width: 100%;
& .header {
flex: 0 0 auto;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';

import {
Button,
Container,
getComputed,
getSelectedItems,
Group,
Expand Down Expand Up @@ -70,43 +71,45 @@ export const GrantedConnectionList = observer<Props>(function GrantedConnectionL
}

return (
<Group className={s(styles, { box: true })} box medium overflow>
<div className={s(styles, { innerBox: true })}>
<GrantedConnectionsTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
<Group className={s(styles, { group: true })} box border medium overflow vertical>
<GrantedConnectionsTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
<Container keepSize>
<Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>
{translate('ui_delete')}
</Button>
</Container>
<Container keepSize>
<Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>
{translate('ui_edit')}
</Button>
</GrantedConnectionsTableHeader>
<div className={s(styles, { tableBox: true })}>
<Table className={s(styles, { table: true })} keys={keys} selectedItems={selectedSubjects} size="big">
<GrantedConnectionsTableInnerHeader disabled={disabled} />
<TableBody>
{tableInfoText && (
<TableItem item="tableInfo" selectDisabled>
<TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
</TableItem>
)}
{connections.map(connection => {
const driver = driversResource.get(connection.driverId);
return (
<GrantedConnectionsTableItem
key={connection.id}
id={connection.id}
name={connection.name}
tooltip={connection.name}
host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
icon={driver?.icon}
disabled={disabled}
/>
);
})}
</TableBody>
</Table>
</div>
</div>
</Container>
</GrantedConnectionsTableHeader>
<Container overflow>
<Table keys={keys} selectedItems={selectedSubjects}>
<GrantedConnectionsTableInnerHeader disabled={disabled} />
<TableBody>
{tableInfoText && (
<TableItem item="tableInfo" selectDisabled>
<TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
</TableItem>
)}
{connections.map(connection => {
const driver = driversResource.get(connection.driverId);
return (
<GrantedConnectionsTableItem
key={connection.id}
id={connection.id}
name={connection.name}
tooltip={connection.name}
host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
icon={driver?.icon}
disabled={disabled}
/>
);
})}
</TableBody>
</Table>
</Container>
</Group>
);
});
Loading

0 comments on commit bac47d2

Please sign in to comment.