random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-26 15:37:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update fluent ui v9 dependency. Color columns separation. Fix refresh button placement to not interfere with header cell width.

Browse Source
This commit is contained in:
Laurent Nguyen 2024-05-15 12:39:06 +02:00
parent 17c36f18b3
commit e0a9750a77
5 changed files with 807 additions and 612 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
less/documentDB.less
View File

@ -2579,6 +2579,18 @@ a:link {
cursor: pointer; cursor: pointer;
} }
.documentsTab {
.documentsTable {
.documentsTableCell {
border-left: 1px solid @BaseMedium;
height: 100%;
}
.documentsTableHeader {
border-bottom: 1px solid @BaseMedium;
}
}
}
.querydropdown { .querydropdown {
border: 1px solid @BaseMedium; border: 1px solid @BaseMedium;
font-style: normal; font-style: normal;

1382
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -13,7 +13,7 @@
"@babel/plugin-proposal-class-properties": "7.12.1", "@babel/plugin-proposal-class-properties": "7.12.1",
"@babel/plugin-proposal-decorators": "7.12.12", "@babel/plugin-proposal-decorators": "7.12.12",
"@fluentui/react": "8.112.1", "@fluentui/react": "8.112.1",
"@fluentui/react-components": "9.34.0", "@fluentui/react-components": "9.51.0",
"@jupyterlab/services": "6.0.2", "@jupyterlab/services": "6.0.2",
"@jupyterlab/terminal": "3.0.3", "@jupyterlab/terminal": "3.0.3",
"@microsoft/applicationinsights-web": "2.6.1", "@microsoft/applicationinsights-web": "2.6.1",

9
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -1668,7 +1668,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
return ( return (
<FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}> <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
<div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}> <div className="tab-pane active documentsTab" role="tabpanel" style={{ display: "flex" }}>
{isFilterCreated && ( {isFilterCreated && (
<div className="filterdivs"> <div className="filterdivs">
{!isFilterExpanded && !isPreferredApiMongoDB && ( {!isFilterExpanded && !isPreferredApiMongoDB && (
@ -1763,14 +1763,17 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
{/* <Split> doesn't like to be a flex child */} {/* <Split> doesn't like to be a flex child */}
<div style={{ overflow: "hidden", height: "100%" }}> <div style={{ overflow: "hidden", height: "100%" }}>
<Split> <Split>
<div style={{ minWidth: 120, width: "35%", overflow: "hidden" }} ref={tableContainerRef}> <div
style={{ minWidth: 120, width: "35%", overflow: "hidden", position: "relative" }}
ref={tableContainerRef}
>
<Button <Button
appearance="transparent" appearance="transparent"
aria-label="Refresh" aria-label="Refresh"
size="small" size="small"
icon={<ArrowClockwise16Filled />} icon={<ArrowClockwise16Filled />}
style={{ style={{
position: "relative", position: "absolute",
top: 6, top: 6,
right: 0, right: 0,
float: "right", float: "right",

14
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -136,6 +136,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
{columns.map((column) => ( {columns.map((column) => (
<TableCell <TableCell
key={column.columnId} key={column.columnId}
className="documentsTableCell"
onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))} onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
onKeyDown={() => onIdClicked(index)} onKeyDown={() => onIdClicked(index)}
{...columnSizing.getTableCellProps(column.columnId)} {...columnSizing.getTableCellProps(column.columnId)}
@ -222,9 +223,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
}; };
return ( return (
<Table noNativeElements {...tableProps}> <Table className="documentsTable" noNativeElements {...tableProps}>
<TableHeader> <TableHeader className="documentsTableHeader">
<TableRow> <TableRow style={{ width: size ? size.width - 15 : "100%" }}>
<TableSelectionCell <TableSelectionCell
checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false} checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
onClick={toggleAllRows} onClick={toggleAllRows}
@ -234,7 +235,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
{columns.map((column /* index */) => ( {columns.map((column /* index */) => (
<Menu openOnContext key={column.columnId}> <Menu openOnContext key={column.columnId}>
<MenuTrigger> <MenuTrigger>
<TableHeaderCell key={column.columnId} {...columnSizing.getTableHeaderCellProps(column.columnId)}> <TableHeaderCell
className="documentsTableCell"
key={column.columnId}
{...columnSizing.getTableHeaderCellProps(column.columnId)}
>
{column.renderHeaderCell()} {column.renderHeaderCell()}
</TableHeaderCell> </TableHeaderCell>
</MenuTrigger> </MenuTrigger>
@ -256,6 +261,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
itemSize={30} itemSize={30}
width={size ? size.width : 0} width={size ? size.width : 0}
itemData={rows} itemData={rows}
style={{ overflowY: "scroll" }}
> >
{RenderRow} {RenderRow}
</List> </List>