vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 04:50:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to Mantine v8 and Design Changes (#961)

Browse Source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff
2025-06-24 00:04:36 -07:00
committed by GitHub
parent bea55d48a8
commit c1330d92b2
473 changed files with 12469 additions and 11607 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/context-menu/context-menu.module.css
+35
View File
@@ -0,0 +1,35 @@
.container {
position: absolute;
z-index: 1000;
padding: var(--theme-spacing-xs);
background: var(--theme-colors-surface);
border: 1px solid var(--theme-colors-border);
border-radius: var(--theme-radius-md);
box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
}
.context-menu-button {
display: flex;
padding: var(--theme-spacing-sm);
font-family: var(--theme-content-font-family);
font-size: var(--theme-font-size-sm);
font-weight: 500;
color: var(--theme-colors-surface-foreground);
text-align: left;
cursor: default;
background: var(--theme-colors-surface);
border: none;
&:hover {
background: lighten(var(--theme-colors-surface), 10%);
}
&:disabled {
background: transparent;
opacity: 0.6;
}
}
.left {
margin-right: 3rem;
}
src/renderer/components/context-menu/context-menu.tsx
+91
View File
@@ -0,0 +1,91 @@
import { motion, Variants } from 'motion/react';
import { ComponentPropsWithoutRef, forwardRef, ReactNode, Ref } from 'react';
import styles from './context-menu.module.css';
import { Group } from '/@/shared/components/group/group';
interface ContextMenuProps {
children: ReactNode;
maxWidth?: number;
minWidth?: number;
xPos: number;
yPos: number;
}
export const ContextMenuButton = forwardRef(
(
{
children,
leftIcon,
rightIcon,
...props
}: ComponentPropsWithoutRef<'button'> & {
leftIcon?: ReactNode;
rightIcon?: ReactNode;
},
ref: any,
) => {
return (
<button
{...props}
className={styles.contextMenuButton}
disabled={props.disabled}
key={props.key}
onClick={props.onClick}
ref={ref}
>
<Group
justify="space-between"
w="100%"
>
<Group
className={styles.left}
gap="md"
>
{leftIcon}
{children}
</Group>
{rightIcon}
</Group>
</button>
);
},
);
const variants: Variants = {
closed: {
opacity: 0,
transition: {
duration: 0.1,
},
},
open: {
opacity: 1,
transition: {
duration: 0.1,
},
},
};
export const ContextMenu = forwardRef(
({ children, maxWidth, minWidth, xPos, yPos }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
return (
<motion.div
animate="open"
className={styles.container}
initial="closed"
ref={ref}
style={{
left: xPos,
maxWidth,
minWidth,
top: yPos,
}}
variants={variants}
>
{children}
</motion.div>
);
},
);
src/renderer/components/context-menu/index.tsx
-127
View File
@@ -1,127 +0,0 @@
import { Box, Flex, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
import { motion, Variants } from 'framer-motion';
import { ComponentPropsWithoutRef, forwardRef, ReactNode, Ref } from 'react';
import styled from 'styled-components';
interface ContextMenuProps {
children: ReactNode;
maxWidth?: number;
minWidth?: number;
xPos: number;
yPos: number;
}
const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children'>>`
position: absolute;
top: ${({ yPos }) => yPos}px !important;
left: ${({ xPos }) => xPos}px !important;
z-index: 1000;
min-width: ${({ minWidth }) => minWidth}px;
max-width: ${({ maxWidth }) => maxWidth}px;
background: var(--dropdown-menu-bg);
border-radius: var(--dropdown-menu-border-radius);
box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
button:first-child {
border-top-left-radius: var(--dropdown-menu-border-radius);
border-top-right-radius: var(--dropdown-menu-border-radius);
}
button:last-child {
border-bottom-right-radius: var(--dropdown-menu-border-radius);
border-bottom-left-radius: var(--dropdown-menu-border-radius);
}
`;
export const StyledContextMenuButton = styled(UnstyledButton)`
padding: var(--dropdown-menu-item-padding);
font-family: var(--content-font-family);
font-weight: 500;
color: var(--dropdown-menu-fg);
text-align: left;
cursor: default;
background: var(--dropdown-menu-bg);
border: none;
& .mantine-Button-inner {
justify-content: flex-start;
}
&:hover {
background: var(--dropdown-menu-bg-hover);
}
&:disabled {
background: transparent;
opacity: 0.6;
}
`;
export const ContextMenuButton = forwardRef(
(
{
children,
leftIcon,
rightIcon,
...props
}: ComponentPropsWithoutRef<'button'> &
UnstyledButtonProps & {
leftIcon?: ReactNode;
rightIcon?: ReactNode;
},
ref: any,
) => {
return (
<StyledContextMenuButton
{...props}
as="button"
disabled={props.disabled}
key={props.key}
onClick={props.onClick}
ref={ref}
>
<Group position="apart">
<Group align="center">
<Flex>{leftIcon}</Flex>
<Box mr="2rem">{children}</Box>
</Group>
<Box>{rightIcon}</Box>
</Group>
</StyledContextMenuButton>
);
},
);
const variants: Variants = {
closed: {
opacity: 0,
transition: {
duration: 0.1,
},
},
open: {
opacity: 1,
transition: {
duration: 0.1,
},
},
};
export const ContextMenu = forwardRef(
({ children, maxWidth, minWidth, xPos, yPos }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
return (
<ContextMenuContainer
animate="open"
initial="closed"
maxWidth={maxWidth}
minWidth={minWidth}
ref={ref}
variants={variants}
xPos={xPos}
yPos={yPos}
>
{children}
</ContextMenuContainer>
);
},
);