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

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

@ -18,7 +18,7 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
import DocumentsTab from "Explorer/Tabs/DocumentsTab";
import { dataExplorerLightTheme } from "Explorer/Theme/ThemeUtil";
import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
import { useSelectedNode } from "Explorer/useSelectedNode";
import { KeyboardAction } from "KeyboardShortcuts";
import { QueryConstants } from "Shared/Constants";
@ -1611,7 +1611,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
);
return (
<FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
<FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
<div
className="tab-pane active"
/* data-bind="

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

@ -1,7 +1,9 @@
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
const cosmosdb: BrandVariants = {
const appThemePortalBrandRamp: BrandVariants = {
10: "#020305",
20: "#111723",
30: "#16263D",
@ -20,6 +22,10 @@ const cosmosdb: BrandVariants = {
160: "#CDD8EF",
};
export const dataExplorerLightTheme: Theme = {
...createLightTheme(cosmosdb),
};
export function getPlatformTheme (platform: Platform) : Theme {
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,
TreeOpenChangeEvent,
} from "@fluentui/react-components";
import { configContext } from "ConfigContext";
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 * as React from "react";
import shallow from "zustand/shallow";
@ -88,7 +89,7 @@ export const ResourceTree2: React.FC<ResourceTreeProps> = ({ container }: Resour
return (
<>
<FluentProvider theme={dataExplorerLightTheme} style={{ overflow: "hidden" }}>
<FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ overflow: "hidden" }}>
<Tree
aria-label="CosmosDB resources"
openItems={openItems}

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

@ -1,4 +1,5 @@
import { Theme, createTheme } from "@fluentui/react";
import { BrandVariants, createLightTheme } from "@fluentui/react-components";
export const appThemeFabric: Theme = createTheme({
palette: {
@ -206,3 +207,24 @@ export const appThemeFabric: Theme = createTheme({
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);