opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-24 11:35:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

cb-2961/table sticky header (#1341)

Browse Source 
* CB-2961 fix: table's header sticky styles

* CB-2961 styles: add MenuBarSmallItem

* CB-2961 chore: use color instead of shadow for splitter

* CB-2961 styles: log viewer message details panel

* CB-2961 fix: menu bar small item click area

Co-authored-by: kseniaguzeeva <112612526+kseniaguzeeva@users.noreply.github.com>
This commit is contained in:
Alexey
2022-12-22 15:18:54 +03:00
committed by GitHub
co-authored by kseniaguzeeva
parent f5a2799ec9
commit 6f0defa2ef
24 changed files with 227 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.tsx
+1 -7
View File
@@ -22,12 +22,6 @@ const styles = css`
Pane {
composes: theme-background-surface theme-text-on-surface from global;
}
TableHeader {
composes: theme-background-surface from global;
position: sticky;
top: 0;
z-index: 1;
}
Split {
height: 100%;
flex-direction: column;
@@ -66,7 +60,7 @@ export const ExecutionPlanTreeBlock = observer<Props>(function ExecutionPlanTree
<Pane>
{state.nodes.length && state.columns.length ? (
<Table selectedItems={state.selectedNodes} onSelect={state.selectNode}>
<TableHeader>
<TableHeader fixed>
{state.columns.map(property => {
const name = property.displayName;
const columnTooltip = `${name} ${property.description ? '(' + property.description + ')' : ''}`;
webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/PropertiesPanel/PropertiesPanel.tsx
+2 -12
View File
@@ -9,7 +9,6 @@
import { computed } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useMemo } from 'react';
import styled, { css } from 'reshadow';
import { Table, TableHeader, TableColumnHeader, TableBody, TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
import type { ObjectPropertyInfo, SqlExecutionPlanNode } from '@cloudbeaver/core-sdk';
@@ -17,15 +16,6 @@ import type { ObjectPropertyInfo, SqlExecutionPlanNode } from '@cloudbeaver/core
import { isVisibleProperty } from '../useExecutionPlanTreeState';
import { PropertiesPanelItemsGroup } from './PropertiesPanelItemsGroup';
const styles = css`
TableColumnHeader {
composes: theme-background-surface from global;
position: sticky;
top: 0;
z-index: 1;
}
`;
interface Props {
selectedNode: string;
nodeList: SqlExecutionPlanNode[];
@@ -63,9 +53,9 @@ export const PropertiesPanel = observer<Props>(function PropertiesPanel({ select
const nameColumnTitle = translate('sql_execution_plan_properties_panel_name');
const valueColumnTitle = translate('sql_execution_plan_properties_panel_value');
return styled(styles)(
return (
<Table className={className}>
<TableHeader>
<TableHeader fixed>
<TableColumnHeader title={nameColumnTitle}>
{nameColumnTitle}
</TableColumnHeader>