mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-04-14 05:38:54 +01:00
d3722f2c99
* improve how the sidebar reacts to being a smol lil' guy * fix snapshots * shrink minimum sizes to allow small screens to work in some way
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%",
|
|
...shorthands.overflow("auto"),
|
|
},
|
|
tree: {
|
|
width: "fit-content",
|
|
minWidth: "100%",
|
|
rowGap: "0px",
|
|
paddingTop: "0px",
|
|
[treeIconWidth]: "20px",
|
|
[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(),
|
|
paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
|
|
|
|
// 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,
|
|
},
|
|
});
|