random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-01-29 14:44:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial Fabric support (#1607)

Browse Source 
* Add Platform.Fabric to run in context of Fabric

* Use separate StyleConstants

We want to have more flexibility with Styles at runtime
but Constants depend on ConfigContext and therefore
get loaded very early at startup.

* Add Fabric specific styles and Fluent theme

documentDBFabric.less contains all styles for Fabric.
We use React.lazy to import them conditionally at
runtime preventing webpack from preprocessing
them into main.css.

* Restyle CommandBar for Fabric
with more roundness and native colors.

* Disable Notebooks when running in Fabric

* Disable Synapse and Scripts commands for Fabric

* Fix code formatting issues

* Fetch encrypted token from sessionStorage for fabric platform

* Fix Tabs style

* Dark refresh icons for Fabric

* Use new ResourceTree2 for Fabric

* Fluent tree should have a fixed width
otherwise the action buttons jump around on hover.

* Disable remaining Script actions in Fabric

* Revert accidentally committed change
which broke a test

* Fix cross-origin error second try

* Adjust @FabrixBoxMargin css

* Hide Database Scale node on Fabric

* Remove all Collection child nodes on Fabric

* Add a comment about why we need FabricPlatform.tsx

* Fix equality checks

* Fix more Colors for Fabric

* Switch resource tree to "medium" size

* Fix formatting again

* Fix formatting again

* Disable no-var-requires error on some intended var import.

* Increase memory limit for build

* Use standard Segoe UI font for Fabric

* Improve Tabs design for Fabric

* Fix active Tab style bug in Portal
introduced with 39a7765aef

---------

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>
This commit is contained in:
Vsevolod Kukol
2023-09-15 17:33:27 +02:00
committed by GitHub
parent c2d2ff3dee
commit 379395567c
34 changed files with 675 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Platform/Fabric/FabricPlatform.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
import "../../../less/documentDBFabric.less";
// This is a dummy export, allowing us to conditionally import documentDBFabric.less
// by lazy-importing this in Main.tsx (see LoadFabricOverrides() there)
export default function InitFabric() {
return <></>;
}

208
src/Platform/Fabric/FabricTheme.tsx Normal file
View File

@@ -0,0 +1,208 @@
import { Theme, createTheme } from "@fluentui/react";
export const appThemeFabric: Theme = createTheme({
palette: {
/**
* Color code for themeDarker.
*/
themeDarker: "#033f38",
/**
* Color code for themeDark.
*/
themeDark: "#0a5c50",
/**
* Color code for themeDarkAlt.
*/
themeDarkAlt: "#0c695a",
/**
* Color code for themePrimary.
*/
themePrimary: "#117865",
/**
* Color code for themeSecondary.
*/
themeSecondary: "#1f937e",
/**
* Color code for themeTertiary.
*/
themeTertiary: "#52c7aa",
/**
* Color code for themeLight.
*/
themeLight: "#9ee0cb",
/**
* Color code for themeLighter.
*/
themeLighter: "#c0ecdd",
/**
* Color code for themeLighterAlt.
*/
themeLighterAlt: "#e3f7ef",
/**
* Color code for the strongest color, which is black in the default theme.
* This is a very light color in inverted themes.
*/
black: "#000000",
/**
* Color code for blackTranslucent40.
*/
blackTranslucent40: "rgba(0, 0, 0, 0.4)",
/**
* Color code for neutralDark.
*/
neutralDark: "#141414",
/**
* Color code for neutralPrimary.
*/
neutralPrimary: "#242424",
/**
* Color code for neutralPrimaryAlt.
*/
neutralPrimaryAlt: "#383838",
/**
* Color code for neutralSecondary.
*/
neutralSecondary: "#5c5c5c",
/**
* Color code for neutralSecondaryAlt.
*/
neutralSecondaryAlt: "#858585",
/**
* Color code for neutralTertiary.
*/
neutralTertiary: "#9e9e9e",
/**
* Color code for neutralTertiaryAlt.
*/
neutralTertiaryAlt: "#c7c7c7",
/**
* Color code for neutralQuaternary.
*/
neutralQuaternary: "#d1d1d1",
/**
* Color code for neutralQuaternaryAlt.
*/
neutralQuaternaryAlt: "#e0e0e0",
/**
* Color code for neutralLight.
*/
neutralLight: "#ebebeb",
/**
* Color code for neutralLighter.
*/
neutralLighter: "#f5f5f5",
/**
* Color code for neutralLighterAlt.
*/
neutralLighterAlt: "#fafafa",
/**
* Color code for the accent.
*/
accent: "#117865",
/**
* Color code for the softest color, which is white in the default theme. This is a very dark color in dark themes.
* This is the page background.
*/
white: "#ffffff",
/**
* Color code for whiteTranslucent40
*/
whiteTranslucent40: "rgba(255, 255, 255, 0.4)",
/**
* Color code for yellowDark.
*/
yellowDark: "#d39300",
/**
* Color code for yellow.
*/
yellow: "#fde300",
/**
* Color code for yellowLight.
*/
yellowLight: "#fef7b2",
/**
* Color code for orange.
*/
orange: "#f7630c",
/**
* Color code for orangeLight.
*/
orangeLight: "#f98845",
/**
* Color code for orangeLighter.
*/
orangeLighter: "#fdcfb4",
/**
* Color code for redDark.
*/
redDark: "#750b1c",
/**
* Color code for red.
*/
red: "#d13438",
/**
* Color code for magentaDark.
*/
magentaDark: "#6b0043",
/**
* Color code for magenta.
*/
magenta: "#bf0077",
/**
* Color code for magentaLight.
*/
magentaLight: "#d957a8",
/**
* Color code for purpleDark.
*/
purpleDark: "#401b6c",
/**
* Color code for purple.
*/
purple: "#5c2e91",
/**
* Color code for purpleLight.
*/
purpleLight: "#c6b1de",
/**
* Color code for blueDark.
*/
blueDark: "#003966",
/**
* Color code for blueMid.
*/
blueMid: "#004e8c",
/**
* Color code for blue.
*/
blue: "#0078d4",
/**
* Color code for blueLight.
*/
blueLight: "#3a96dd",
/**
* Color code for tealDark.
*/
tealDark: "#006666",
/**
* Color code for teal.
*/
teal: "#038387",
/**
* Color code for tealLight.
*/
tealLight: "#00b7c3",
/**
* Color code for greenDark.
*/
greenDark: "#0b6a0b",
/**
* Color code for green.
*/
green: "#107c10",
/**
* Color code for greenLight.
*/
greenLight: "#13a10e",
},
});