mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-29 06:34:10 +00:00
Dark theme for Explorer (#2185)
* First dark theme commits for command bar * Updated theme on sidebar * Updated tabs, sidebar, splash screen * settings theme changes * Dark theme applied to Monaco editor * Dark theme to stored procedures * Fixed sidebar scroll * Updated scroll issue in sidebar * Command bar items fixed * Fixed lint errors * fixed lint errors * settings side panel fixed * Second last iteration for css * Fixed all the issues of css * Updated the theme icon for now on DE to change the theme from portal/DE itself * Formatting issue resolved * Remove CloudShellTerminalComponent changes - revert to master version * Fixed test issue * Fixed formatting issue * Fix tests: update snapshots and revert xterm imports for compatibility * Fix xterm imports in CloudShellTerminalComponent to use @xterm packages * Fix Cloud Shell component imports for compatibility * Update test snapshots * Fix xterm package consistency across all CloudShell components * Fix TypeScript compilation errors in CloudShell components and query Documents - Standardized xterm package imports across CloudShell components to use legacy 'xterm' package - Fixed Terminal type compatibility issues in CommonUtils.tsx - Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations - Applied code formatting to ensure consistency * Update failing snapshot tests - Updated TreeNodeComponent snapshot tests for loading states - Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000) - All snapshot tests now pass * Fixed test issue * Fixed test issue * Updated the buttons for theme * Updated the Theme changes based on portal theme changes * Updated review comments * Updated the duplicate code and fixed the fabric react error * Few places styling added and resolving few comments * Fixed errors * Fixed comments * Fixed comments * Fixed comments * Fixed full text policy issue for mongoru accounts * Resolved comments for class Name and few others * Added css for homepage in ru accounts * Final commit with all the feedback issues resolved * Lint error resolved * Updated the review comments and few Ui issues * Resolved review comments and changed header bg and active state color * Moved svg code to different file and imported * css fixed for the hpome page boxed for ru account * Lint errors * Fixed boxes issue in ru accounts * Handled the initial theme from the portal * Updated snap * Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests * Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation * Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component --------- Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com> Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
GitHub
@@ -1,5 +1,6 @@
|
||||
import { TriggerDefinition } from "@azure/cosmos";
|
||||
import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react";
|
||||
import { IDropdownOption, IDropdownStyles, Label, TextField } from "@fluentui/react";
|
||||
import { Dropdown } from "@fluentui/react/lib/Dropdown";
|
||||
import { KeyboardAction } from "KeyboardShortcuts";
|
||||
import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
|
||||
import React, { Component } from "react";
|
||||
@@ -17,12 +18,134 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
|
||||
import { EditorReact } from "../Controls/Editor/EditorReact";
|
||||
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import TriggerTab from "./TriggerTab";
|
||||
|
||||
const triggerTypeOptions: IDropdownOption[] = [
|
||||
{ key: "Pre", text: "Pre" },
|
||||
{ key: "Post", text: "Post" },
|
||||
];
|
||||
|
||||
const dropdownStyles: Partial<IDropdownStyles> = {
|
||||
root: {
|
||||
width: "40%",
|
||||
marginTop: "10px",
|
||||
selectors: {
|
||||
"&:hover .ms-Dropdown-title": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
borderColor: "var(--colorNeutralStroke1)",
|
||||
},
|
||||
"&:hover span.ms-Dropdown-title": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:focus .ms-Dropdown-title": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
},
|
||||
"&:focus span.ms-Dropdown-title": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
dropdown: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
borderColor: "var(--colorNeutralStroke1)",
|
||||
},
|
||||
title: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
borderColor: "var(--colorNeutralStroke1)",
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:hover .ms-Dropdown-titleText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:focus .ms-Dropdown-titleText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"& .ms-Dropdown-titleText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
caretDown: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
callout: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
border: "1px solid var(--colorNeutralStroke1)",
|
||||
},
|
||||
dropdownItems: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
},
|
||||
dropdownItem: {
|
||||
backgroundColor: "transparent",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
minHeight: "36px",
|
||||
lineHeight: "36px",
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:hover .ms-Dropdown-optionText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"& .ms-Dropdown-optionText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dropdownItemSelected: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
minHeight: "36px",
|
||||
lineHeight: "36px",
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:hover .ms-Dropdown-optionText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"& .ms-Dropdown-optionText": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dropdownOptionText: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
dropdownItemHeader: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
};
|
||||
|
||||
const triggerOperationOptions: IDropdownOption[] = [
|
||||
{ key: "All", text: "All" },
|
||||
{ key: "Create", text: "Create" },
|
||||
@@ -304,6 +427,23 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
|
||||
value={triggerId}
|
||||
readOnly={!isIdEditable}
|
||||
onChange={this.handleTriggerIdChange}
|
||||
styles={{
|
||||
root: { width: "40%", marginTop: "10px" },
|
||||
fieldGroup: {
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
border: "1px solid var(--colorNeutralStroke1)",
|
||||
},
|
||||
field: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
subComponentStyles: {
|
||||
label: {
|
||||
root: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Dropdown
|
||||
placeholder="Trigger Type"
|
||||
@@ -312,6 +452,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
|
||||
selectedKey={triggerType}
|
||||
className="trigger-field"
|
||||
onChange={(event, selectedKey) => this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")}
|
||||
styles={dropdownStyles}
|
||||
/>
|
||||
<Dropdown
|
||||
placeholder="Trigger Operation"
|
||||
@@ -322,6 +463,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
|
||||
onChange={(event, selectedKey) =>
|
||||
this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation")
|
||||
}
|
||||
styles={dropdownStyles}
|
||||
/>
|
||||
<Label className="trigger-field">Trigger Body</Label>
|
||||
<EditorReact
|
||||
|
||||
Reference in New Issue
Block a user