Major 3.0 (#118)

Co-authored-by: Maison da Silva <maisonmdsgreen@hotmail.com>
2026-04-22 07:58:01 +03:00 · 2025-07-30 15:02:26 +03:00
parent d6996031b6
commit 2bd9337e63
200 changed files with 19452 additions and 3339 deletions
@@ -0,0 +1,154 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+export const useStyles_GroupView = makeStyles({
+	root:
+	{
+		display: "flex",
+		flexFlow: "column",
+		alignSelf: "normal",
+
+		padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
+		paddingBottom: tokens.spacingVerticalNone,
+		borderRadius: tokens.borderRadiusLarge,
+
+		"&:hover .GroupView-toolbar, &:focus-within .GroupView-toolbar":
+		{
+			visibility: "visible"
+		},
+
+		"&:hover":
+		{
+			backgroundColor: tokens.colorNeutralBackground1Hover
+		}
+	},
+	header:
+	{
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "flex-end",
+		gap: tokens.spacingHorizontalM,
+
+		borderBottom: `${tokens.strokeWidthThick} solid var(--border)`,
+		borderBottomLeftRadius: tokens.borderRadiusLarge
+	},
+	verticalHeader:
+	{
+		borderBottomLeftRadius: tokens.borderRadiusNone
+	},
+	title:
+	{
+		display: "grid",
+		gridAutoFlow: "column",
+		alignItems: "center",
+		minHeight: "12px",
+		minWidth: "24px",
+		gap: tokens.spacingHorizontalXS,
+		width: "max-content",
+		maxWidth: "160px",
+
+		padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
+		paddingBottom: tokens.spacingVerticalXS,
+		marginBottom: "-2px",
+
+		border: `${tokens.strokeWidthThick} solid var(--border)`,
+		borderRadius: `${tokens.borderRadiusLarge} ${tokens.borderRadiusLarge} ${tokens.borderRadiusNone} ${tokens.borderRadiusLarge}`,
+		borderBottom: "none",
+		backgroundColor: "var(--border)",
+		color: "var(--text)"
+	},
+	verticalTitle:
+	{
+		borderBottomLeftRadius: tokens.borderRadiusNone
+	},
+	pinned:
+	{
+		backgroundColor: "transparent"
+	},
+	toolbar:
+	{
+		display: "flex",
+		gap: tokens.spacingHorizontalS,
+		visibility: "hidden"
+	},
+	showToolbar:
+	{
+		visibility: "visible"
+	},
+	openAllLink:
+	{
+		whiteSpace: "nowrap"
+	},
+	empty:
+	{
+		display: "flex",
+		flexFlow: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		color: tokens.colorNeutralForeground3,
+		minWidth: "160px",
+		height: "120px",
+		marginBottom: tokens.spacingVerticalSNudge
+	},
+	verticalEmpty:
+	{
+		height: "auto",
+		padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`
+	},
+	list:
+	{
+		display: "flex",
+		columnGap: tokens.spacingHorizontalS,
+		rowGap: tokens.spacingHorizontalSNudge,
+		height: "100%",
+		position: "relative"
+	},
+	verticalList:
+	{
+		flexFlow: "column"
+	},
+	verticalListCollapsed:
+	{
+		maxHeight: "136px",
+		overflow: "clip"
+	},
+	horizontalListCollapsed:
+	{
+		maxWidth: "400px",
+		overflow: "clip"
+	},
+	listContainer:
+	{
+		padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,
+		paddingBottom: tokens.spacingVerticalNone,
+		height: "100%"
+	},
+	verticalListContainer:
+	{
+		borderLeft: `${tokens.strokeWidthThick} solid var(--border)`,
+		padding: tokens.spacingVerticalSNudge,
+		marginBottom: tokens.spacingVerticalSNudge,
+		borderTopLeftRadius: tokens.borderRadiusNone,
+		borderBottomLeftRadius: tokens.borderRadiusNone,
+		borderTop: "none"
+	},
+	pinnedColor:
+	{
+		"--border": tokens.colorNeutralStrokeAccessible,
+		"--text": tokens.colorNeutralForeground1
+	},
+	dragOverlay:
+	{
+		backgroundColor: tokens.colorNeutralBackground1Hover,
+		transform: "scale(1.05)",
+		cursor: "grabbing !important",
+		boxShadow: `${tokens.shadow16} !important`,
+		"& > div":
+		{
+			pointerEvents: "none"
+		}
+	},
+	dragging:
+	{
+		visibility: "hidden"
+	}
+});