mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-11 05:29:54 +00:00
2c31ec2a8d
* 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>
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { makeStyles, shorthands, treeItemLevelToken } from "@fluentui/react-components";
|
|
import { cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
|
|
|
|
export type TreeStyleName = keyof ReturnType<typeof useTreeStyles>;
|
|
|
|
const treeIconWidth = "--cosmos-Tree--iconWidth" as const;
|
|
const leafNodeSpacing = "--cosmos-Tree--leafNodeSpacing" as const;
|
|
const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
|
|
|
|
export const useTreeStyles = makeStyles({
|
|
treeContainer: {
|
|
height: "100%",
|
|
maxHeight: "100vh",
|
|
...shorthands.overflow("auto"),
|
|
},
|
|
tree: {
|
|
width: "fit-content",
|
|
minWidth: "100%",
|
|
rowGap: "0px",
|
|
paddingTop: "0px",
|
|
[treeIconWidth]: "16px",
|
|
[leafNodeSpacing]: "24px",
|
|
},
|
|
nodeIcon: {
|
|
width: `var(${treeIconWidth})`,
|
|
height: `var(${treeIconWidth})`,
|
|
},
|
|
treeItem: {},
|
|
nodeLabel: {
|
|
whiteSpace: "nowrap", // Don't wrap text, there will be a scrollbar.
|
|
},
|
|
treeItemLayout: {
|
|
fontSize: tokens.fontSizeBase300,
|
|
height: tokens.layoutRowHeight,
|
|
...cosmosShorthands.borderBottom(),
|
|
|
|
// Some sneaky CSS variables stuff to change the background color of the action button on hover.
|
|
[actionButtonBackground]: tokens.colorNeutralBackground1,
|
|
"&:hover": {
|
|
[actionButtonBackground]: tokens.colorNeutralBackground1Hover,
|
|
},
|
|
},
|
|
actionsButtonContainer: {
|
|
position: "sticky",
|
|
right: 0,
|
|
},
|
|
actionsButton: {
|
|
backgroundColor: `var(${actionButtonBackground})`,
|
|
},
|
|
treeItemLayoutNoIcon: {
|
|
// Pad the text out by the level, the width of the icon, AND the usual spacing between the icon and the level.
|
|
// It would be nice to see if we can use Grid layout or something here, but that would require overriding a lot of the existing Tree component behavior.
|
|
paddingLeft: `calc((var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL}) + var(${leafNodeSpacing}))`,
|
|
},
|
|
selectedItem: {
|
|
backgroundColor: tokens.colorNeutralBackground1Selected,
|
|
},
|
|
databaseNode: {
|
|
fontWeight: tokens.fontWeightSemibold,
|
|
},
|
|
collectionNode: {
|
|
fontWeight: tokens.fontWeightSemibold,
|
|
},
|
|
loadMoreNode: {
|
|
color: tokens.colorBrandForegroundLink,
|
|
},
|
|
});
|