opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-09-24 16:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: drivers icon size

Browse Source 
CB-257
This commit is contained in:
Wroud
2020-09-07 13:24:30 +03:00
parent a397e03959
commit d22d4a9ff9
5 changed files with 11 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
+1
View File
@@ -20,6 +20,7 @@ const styles = css`
StaticImage {
box-sizing: border-box;
width: 32px;
max-height: 32px;
}
`;
webapp/packages/core-connections/src/DriverSelectDialog/Driver.tsx
-38
View File
@@ -1,38 +0,0 @@
/*
* cloudbeaver - Cloud Database Manager
* Copyright (C) 2020 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import { observer } from 'mobx-react';
import { useCallback } from 'react';
import {
ListItem, ListItemIcon, ListItemName, ListItemDescription, StaticImage
} from '@cloudbeaver/core-blocks';
export interface IDriver {
id: string;
icon?: string;
name?: string;
description?: string;
}
type DriverProps = {
driver: IDriver;
onSelect(driverId: string): void;
}
export const Driver = observer(function Driver({ driver, onSelect }: DriverProps) {
const select = useCallback(() => onSelect(driver.id), [driver]);
return (
<ListItem onClick={select}>
<ListItemIcon><StaticImage icon={driver.icon}/></ListItemIcon>
<ListItemName>{driver.name}</ListItemName>
<ListItemDescription title={driver.description}>{driver.description}</ListItemDescription>
</ListItem>
);
});
webapp/packages/core-connections/src/DriverSelectDialog/DriverSelectDialog.tsx
-56
View File
@@ -1,56 +0,0 @@
/*
* cloudbeaver - Cloud Database Manager
* Copyright (C) 2020 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { useEffect, useMemo } from 'react';
import styled, { css } from 'reshadow';
import { Loader } from '@cloudbeaver/core-blocks';
import { useService } from '@cloudbeaver/core-di';
import { CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs';
import { useTranslate } from '@cloudbeaver/core-localization';
import { DBDriverResource } from '../DBDriverResource';
import { DriverSelector } from './DriverSelector';
const styles = css`
CommonDialogWrapper {
max-height: 550px;
min-height: 550px;
}
DriverSelector {
flex: 1;
}
`;
export const DriverSelectDialog = observer(function DriverSelectDialog({
resolveDialog,
rejectDialog,
}: DialogComponentProps<null, string>) {
const dbDriverResource = useService(DBDriverResource);
const title = useTranslate('connections_administration_new_connection');
useEffect(() => { dbDriverResource.loadAll(); }, []);
const isLoading = dbDriverResource.isLoading();
const drivers = useMemo(() => computed(() => (
Array.from(dbDriverResource.data.values())
.sort((a, b) => dbDriverResource.compare(a, b))
)), [dbDriverResource.data]);
return styled(styles)(
<CommonDialogWrapper
title={title}
noBodyPadding
onReject={rejectDialog}
>
{isLoading && <Loader />}
{!isLoading && <DriverSelector drivers={drivers.get()} onSelect={resolveDialog}/>}
</CommonDialogWrapper>
);
});
webapp/packages/core-connections/src/DriverSelectDialog/DriverSelector.tsx
-37
View File
@@ -1,37 +0,0 @@
/*
* cloudbeaver - Cloud Database Manager
* Copyright (C) 2020 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import { observer } from 'mobx-react';
import { useState, useMemo } from 'react';
import { ItemListSearch, ItemList } from '@cloudbeaver/core-blocks';
import { Driver, IDriver } from './Driver';
type DriverSelectorProps = {
drivers: IDriver[];
className?: string;
onSelect(driverId: string): void;
}
export const DriverSelector = observer(function DriverSelector({ drivers, className, onSelect }: DriverSelectorProps) {
const [search, setSearch] = useState('');
const filteredDrivers = useMemo(() => {
if (!search) {
return drivers;
}
return drivers.filter(driver => driver.name?.toUpperCase().includes(search.toUpperCase()));
}, [search, drivers]);
return (
<ItemList className={className}>
<ItemListSearch onSearch={setSearch} />
{filteredDrivers.map(driver => <Driver key={driver.id} driver={driver} onSelect={onSelect}/>)}
</ItemList>
);
});
webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/Driver.tsx
+10 -1
View File
@@ -8,6 +8,7 @@
import { observer } from 'mobx-react';
import { useCallback } from 'react';
import styled, { css } from 'reshadow';
import {
ListItem, ListItemIcon, ListItemName, ListItemDescription, StaticImage
@@ -20,6 +21,14 @@ export interface IDriver {
description?: string;
}
const styles = css`
StaticImage {
box-sizing: border-box;
width: 24px;
max-height: 24px;
}
`;
type DriverProps = {
driver: IDriver;
onSelect(driverId: string): void;
@@ -28,7 +37,7 @@ type DriverProps = {
export const Driver = observer(function Driver({ driver, onSelect }: DriverProps) {
const select = useCallback(() => onSelect(driver.id), [driver]);
return (
return styled(styles)(
<ListItem onClick={select}>
<ListItemIcon><StaticImage icon={driver.icon}/></ListItemIcon>
<ListItemName>{driver.name}</ListItemName>