Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove usage of createStyles from mantine that is removed in v7

Browse Source
This commit is contained in:
Athou
2023-12-29 21:53:41 +01:00
parent dade873420
commit 2742b7fff6
16 changed files with 415 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
commafeed-client/src/components/sidebar/TreeNode.tsx
View File

@@ -1,6 +1,7 @@
import { Box, Center, createStyles } from "@mantine/core"
import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
import { FeedFavicon } from "components/content/FeedFavicon"
import React, { type ReactNode } from "react"
import { tss } from "tss"
import { UnreadCount } from "./UnreadCount"
interface TreeNodeProps {
@@ -16,40 +17,57 @@ interface TreeNodeProps {
onIconClick?: (e: React.MouseEvent, id: string) => void
}
const useStyles = createStyles((theme, props: TreeNodeProps) => {
let backgroundColor = "inherit"
if (props.selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
const useStyles = tss
.withParams<{
theme: MantineTheme
selected: boolean
hasError: boolean
hasUnread: boolean
}>()
.create(({ theme, selected, hasError, hasUnread }) => {
let backgroundColor = "inherit"
if (selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
let color
if (props.hasError) color = theme.colors.red[6]
else if (theme.colorScheme === "dark") color = props.unread > 0 ? theme.colors.dark[0] : theme.colors.dark[3]
else color = props.unread > 0 ? theme.black : theme.colors.gray[6]
let color
if (hasError) {
color = theme.colors.red[6]
} else if (theme.colorScheme === "dark") {
color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
} else {
color = hasUnread ? theme.black : theme.colors.gray[6]
}
return {
node: {
display: "flex",
alignItems: "center",
cursor: "pointer",
color,
backgroundColor,
"&:hover": {
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
return {
node: {
display: "flex",
alignItems: "center",
cursor: "pointer",
color,
backgroundColor,
"&:hover": {
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
},
},
},
nodeText: {
flexGrow: 1,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
},
}
})
nodeText: {
flexGrow: 1,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
},
}
})
export function TreeNode(props: TreeNodeProps) {
const { classes } = useStyles(props)
const theme = useMantineTheme()
const { classes } = useStyles({
theme,
selected: props.selected,
hasError: props.hasError,
hasUnread: props.unread > 0,
})
return (
<Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
<Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick && props.onIconClick(e, props.id)}>
<Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
<Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
</Box>
<Box className={classes.nodeText}>{props.name}</Box>

5
commafeed-client/src/components/sidebar/UnreadCount.tsx
View File

@@ -1,6 +1,7 @@
import { Badge, createStyles, Tooltip } from "@mantine/core"
import { Badge, Tooltip } from "@mantine/core"
import { tss } from "tss"
const useStyles = createStyles(() => ({
const useStyles = tss.create(() => ({
badge: {
width: "3.2rem",
// for some reason, mantine Badge has "cursor: 'default'"