diff --git a/less/Common/Constants.less b/less/Common/Constants.less index 58cedfdda..737c68fee 100644 --- a/less/Common/Constants.less +++ b/less/Common/Constants.less @@ -10,6 +10,7 @@ @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; @SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; @GrayScale: "grayscale()"; +@NoColor: "brightness(0) saturate(100%)"; @xSmallFontSize: 4px; @smallFontSize: 8px; @@ -147,14 +148,39 @@ // CommandBar @CommandBarButtonHeight: 40px; +/********************************************************************************** + Portal Consts +/**********************************************************************************/ + +@PortalAccentMediumHigh: #0058ad; +@PortalAccentMedium: #004e87; +@PortalAccentLight: #eef7ff; +@PortalAccentAccentExtra: #ddf0ff; + +/********************************************************************************** + Fabric Consts +/**********************************************************************************/ + +@FabricBoxBorderRadius: 8px; +@FabricBoxBorderShadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14); +@FabricBoxMargin: 8px; + +@FabricAccentMediumHigh: #0c695a; +@FabricAccentMedium: #117865; +@FabricAccentLight: #f5f5f5; +@FabricAccentExtra: #ebebeb; + +@FabricButtonBorderRadius: 4px; + + /********************************************************************************** Common Flex Property /**********************************************************************************/ .flex-display(@display: flex) { - display: ~"-webkit-@{display}"; - display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox - display: ~"-ms-@{display}"; // IE11 + display:~"-webkit-@{display}"; + display:~"-ms-@{display}box"; // IE10 uses -ms-flexbox + display:~"-ms-@{display}"; // IE11 display: @display; } @@ -168,13 +194,15 @@ High contrast mode active **************************************************************************************/ -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { +@media all and (-ms-high-contrast: none), +(-ms-high-contrast: active) { + .selectedRadio, .selectedRadio:hover, .selectedRadio:active, .selectedRadio.dirty, - .tab [type="radio"]:checked ~ label, - .tab [type="radio"]:checked ~ label:hover { + .tab [type="radio"]:checked~label, + .tab [type="radio"]:checked~label:hover { -ms-high-contrast-adjust: none; -webkit-text-fill-color: HighlightText; color: HighlightText; @@ -183,6 +211,7 @@ } .queryMetricsSummaryTuple { + th, td { &:nth-child(2) { @@ -302,4 +331,4 @@ width: 0; height: 0; border-color: @InfoPointerColor transparent; -} +} \ No newline at end of file diff --git a/less/documentDBFabric.less b/less/documentDBFabric.less new file mode 100644 index 000000000..e44923db4 --- /dev/null +++ b/less/documentDBFabric.less @@ -0,0 +1,144 @@ +@import "./Common/Constants"; + +body { + background-color: #f5f5f5; +} + +#divExplorer { + background-color: #f5f5f5; +} + +.resourceTreeAndTabs { + border-radius: @FabricBoxBorderRadius; + box-shadow: @FabricBoxBorderShadow; + margin: @FabricBoxMargin; + margin-top: 4px; + background-color: #ffffff; +} + +.tabsManagerContainer { + background-color: #fafafa +} + +.nav-tabs-margin { + padding-top: 8px; + background-color: #fafafa +} + +.commandBarContainer { + background-color: #ffffff; + border-bottom: none; + border-radius: @FabricBoxBorderRadius; + box-shadow: @FabricBoxBorderShadow; + margin: @FabricBoxMargin; + padding-top: 2px; +} + +.dividerContainer { + padding: @SmallSpace 0px @SmallSpace 0px; + .flex-display(); + + span { + border-left: @ButtonBorderWidth solid @BaseMedium; + margin: 0 10px 0 10px; + } +} + +.nav-tabs>li.active>.tabNavContentContainer, +.nav-tabs>li.active>.tabNavContentContainer:focus, +.nav-tabs>li.active>.tabNavContentContainer:hover { + color: #555; + cursor: default; + background-color: @BaseLight; + border-color: @BaseMedium; + border-bottom-color: @BaseLight; + border-style: solid; + border-width: 1px; + height: @ActiveTabHeight; + width: @ActiveTabWidth; +} + + +.resourceTree { + padding: 12px; +} + +.accordion { + .accordionItemContainer { + .accordionItemHeader { + border-radius: 4px; + } + } +} + +.treeComponent { + .nodeItem { + &:focus { + outline: 2px @FabricAccentMedium; + } + + .treeNodeHeader { + padding: 5px 5px; + border-radius: 4px; + + &:hover { + background-color: @FabricAccentLight; + + .treeMenuEllipsis { + opacity: 1; + } + } + + &.showingMenu { + background-color: #eee; + } + } + + .selected { + &>.treeNodeHeader { + background-color: @FabricAccentExtra; + } + } + } +} + + +.dataExplorerErrorConsoleContainer { + border-radius: @FabricBoxBorderRadius; + box-shadow: @FabricBoxBorderShadow; + margin: @FabricBoxMargin; + width: auto; + align-self: auto; +} + + + +.filterbtnstyle { + background: #fff; + color: #000; + border: solid 1px #d1d1d1; + border-radius: 4px; +} + +.filterbtnstyle:hover { + background: @FabricAccentLight; + color: #000; + border: solid 1px #d1d1d1; +} + +.filterbtnstyle:active { + background: @FabricAccentLight; + color: #000; + border: solid 1px #d1d1d1; +} + +.filterbtnstyle:focus { + background: #fff; + color: #000; + border: solid 1px #d1d1d1; +} + + +.gridRowSelected .tabdocumentsGridElement:hover { + background-color: @FabricAccentLight !important; +} \ No newline at end of file diff --git a/src/Common/StyleConstants.ts b/src/Common/StyleConstants.ts index bc682eb29..1fea4cf8e 100644 --- a/src/Common/StyleConstants.ts +++ b/src/Common/StyleConstants.ts @@ -1,2 +1,17 @@ +import { Platform, configContext } from "../ConfigContext"; + export let StyleConstants = require("less-vars-loader!../../less/Common/Constants.less"); +export function updateStyles(): void { + if (configContext.platform == Platform.Fabric) { + StyleConstants.AccentMediumHigh = StyleConstants.FabricAccentMediumHigh; + StyleConstants.AccentMedium = StyleConstants.FabricAccentMedium; + StyleConstants.AccentLight = StyleConstants.FabricAccentLight; + StyleConstants.AccentAccentExtra = StyleConstants.FabricAccentMediumHigh; + } else { + StyleConstants.AccentMediumHigh = StyleConstants.PortalAccentMediumHigh; + StyleConstants.AccentMedium = StyleConstants.PortalAccentMedium; + StyleConstants.AccentLight = StyleConstants.PortalAccentLight; + StyleConstants.AccentAccentExtra = StyleConstants.PortalAccentMediumHigh; + } +} \ No newline at end of file diff --git a/src/Main.tsx b/src/Main.tsx index 6ea26ba9f..e13ae9736 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,5 +1,5 @@ // CSS Dependencies -import { initializeIcons } from "@fluentui/react"; +import { initializeIcons, loadTheme } from "@fluentui/react"; import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel"; import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial"; import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial"; @@ -26,6 +26,8 @@ import "../less/TableStyles/CustomizeColumns.less"; import "../less/TableStyles/EntityEditor.less"; import "../less/TableStyles/fulldatatables.less"; import "../less/TableStyles/queryBuilder.less"; +import * as StyleConstants from "./Common/StyleConstants"; +import { configContext, Platform } from "ConfigContext"; import "../less/documentDB.less"; import "../less/forms.less"; import "../less/infobox.less"; @@ -57,6 +59,7 @@ import "./Libs/jquery"; import "./Shared/appInsights"; import { useConfig } from "./hooks/useConfig"; import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer"; +import { appThemeFabric } from "./Platform/Fabric/FabricTheme"; initializeIcons(); @@ -67,6 +70,10 @@ const App: React.FunctionComponent = () => { const shouldShowModal = useQueryCopilot((state) => state.showFeedbackModal); const config = useConfig(); + if (config?.platform == Platform.Fabric) { + loadTheme(appThemeFabric); + } + StyleConstants.updateStyles(); const explorer = useKnockoutExplorer(config?.platform); const toggleLeftPaneExpanded = () => { @@ -84,6 +91,7 @@ const App: React.FunctionComponent = () => { return (
+
{/* Main Command Bar - Start */} @@ -135,6 +143,18 @@ const App: React.FunctionComponent = () => { ReactDOM.render(, document.body); +function LoadFabricOverrides(): JSX.Element { + + if (configContext.platform == Platform.Fabric) { + const FabricStyle = React.lazy(() => import("./Platform/Fabric/FabricPlatform")); + return ( +
}> + ) + } else { + return (<>); + } +} + function LoadingExplorer(): JSX.Element { return (
diff --git a/src/Platform/Fabric/FabricPlatform.tsx b/src/Platform/Fabric/FabricPlatform.tsx new file mode 100644 index 000000000..d69557ecd --- /dev/null +++ b/src/Platform/Fabric/FabricPlatform.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import "../../../less/documentDBFabric.less"; +export default function InitFabric() { + return ( + <> + ); +} \ No newline at end of file diff --git a/src/Platform/Fabric/FabricTheme.tsx b/src/Platform/Fabric/FabricTheme.tsx new file mode 100644 index 000000000..5cb29441f --- /dev/null +++ b/src/Platform/Fabric/FabricTheme.tsx @@ -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", + } +}); \ No newline at end of file