random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-01 13:46:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'users/languye/improve-filter-view' of github.com:Azure/cosmos-explorer into users/languye/improve-filter-view

Browse Source
This commit is contained in:
Laurent Nguyen 2024-04-26 18:07:57 +02:00
commit 553aad5cda
4 changed files with 1290 additions and 1261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

14
src/Explorer/Theme/ThemeUtil.ts
View File

@ -1,7 +1,9 @@
import { BrandVariants, Theme, createLightTheme } from "@fluentui/react-components"; import { BrandVariants, Theme, createLightTheme } from "@fluentui/react-components";
import { Platform } from "ConfigContext";
import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
// These are the theme colors for Fluent UI 9 React components // These are the theme colors for Fluent UI 9 React components
const cosmosdb: BrandVariants = { const appThemePortalBrandRamp: BrandVariants = {
10: "#020305", 10: "#020305",
20: "#111723", 20: "#111723",
30: "#16263D", 30: "#16263D",
@ -20,6 +22,10 @@ const cosmosdb: BrandVariants = {
160: "#CDD8EF", 160: "#CDD8EF",
}; };
export const dataExplorerLightTheme: Theme = { export function getPlatformTheme (platform: Platform) : Theme {
...createLightTheme(cosmosdb), if (platform === Platform.Fabric) {
}; return createLightTheme(appThemeFabricTealBrandRamp);
} else {
return createLightTheme(appThemePortalBrandRamp);
}
}

5
src/Explorer/Tree2/ResourceTree.tsx
View File

@ -5,8 +5,9 @@ import {
TreeOpenChangeData, TreeOpenChangeData,
TreeOpenChangeEvent, TreeOpenChangeEvent,
} from "@fluentui/react-components"; } from "@fluentui/react-components";
import { configContext } from "ConfigContext";
import { TreeNode2, TreeNode2Component } from "Explorer/Controls/TreeComponent2/TreeNode2Component"; import { TreeNode2, TreeNode2Component } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
import { dataExplorerLightTheme } from "Explorer/Theme/ThemeUtil"; import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
import { useDatabaseTreeNodes } from "Explorer/Tree2/useDatabaseTreeNodes"; import { useDatabaseTreeNodes } from "Explorer/Tree2/useDatabaseTreeNodes";
import * as React from "react"; import * as React from "react";
import shallow from "zustand/shallow"; import shallow from "zustand/shallow";
@ -88,7 +89,7 @@ export const ResourceTree2: React.FC<ResourceTreeProps> = ({ container }: Resour
return ( return (
<> <>
<FluentProvider theme={dataExplorerLightTheme} style={{ overflow: "hidden" }}> <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ overflow: "hidden" }}>
<Tree <Tree
aria-label="CosmosDB resources" aria-label="CosmosDB resources"
openItems={openItems} openItems={openItems}

22
src/Platform/Fabric/FabricTheme.tsx
View File

@ -1,4 +1,5 @@
import { Theme, createTheme } from "@fluentui/react"; import { Theme, createTheme } from "@fluentui/react";
import { BrandVariants, createLightTheme } from "@fluentui/react-components";
export const appThemeFabric: Theme = createTheme({ export const appThemeFabric: Theme = createTheme({
palette: { palette: {
@ -206,3 +207,24 @@ export const appThemeFabric: Theme = createTheme({
greenLight: "#13a10e", greenLight: "#13a10e",
}, },
}); });
export const appThemeFabricTealBrandRamp: BrandVariants = {
10: '#001919',
20: '#012826',
30: '#01322E',
40: '#033f38',
50: '#054d43',
60: '#0a5c50',
70: '#0c695a',
80: '#117865',
90: '#1f937e',
100: '#2aaC94',
110: '#3abb9f',
120: '#52c7aa',
130: '#78d3b9',
140: '#9ee0cb',
150: '#c0ecdd',
160: '#e3f7ef',
};
export const appThemeFabricV9 = createLightTheme(appThemeFabricTealBrandRamp);