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

Base component fixes

Browse Source
This commit is contained in:
jeffvli
2022-11-15 15:54:03 -08:00
parent f40c3838a1
commit 67e3a00b26
6 changed files with 107 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/date-picker/index.tsx
+26 -1
View File
@@ -9,7 +9,32 @@ interface DatePickerProps extends MantineDatePickerProps {
width?: number | string;
}
const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>``;
const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
& .mantine-DatePicker-input {
color: var(--input-fg);
background: var(--input-bg);
&::placeholder {
color: var(--input-placeholder-fg);
}
}
& .mantine-DatePicker-icon {
color: var(--input-placeholder-fg);
}
& .mantine-DatePicker-required {
color: var(--secondary-color);
}
& .mantine-DatePicker-label {
font-family: var(--label-font-faimly);
}
& .mantine-DateRangePicker-disabled {
opacity: 0.6;
}
`;
export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
return <StyledDatePicker withinPortal {...props} sx={{ maxWidth, width }} />;
src/renderer/components/dropdown-menu/index.tsx
+10 -1
View File
@@ -61,6 +61,7 @@ const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
background: var(--dropdown-menu-bg);
border: var(--dropdown-menu-border);
border-radius: var(--dropdown-menu-border-radius);
filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
`;
const StyledMenuDivider = styled(MantineMenu.Divider)`
@@ -69,7 +70,15 @@ const StyledMenuDivider = styled(MantineMenu.Divider)`
export const DropdownMenu = ({ children, ...props }: MenuProps) => {
return (
<StyledMenu withinPortal radius="sm" transition="scale" {...props}>
<StyledMenu
withinPortal
radius="sm"
styles={{
dropdown: { filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))' },
}}
transition="scale"
{...props}
>
{children}
</StyledMenu>
);
src/renderer/components/input/index.tsx
+16 -13
View File
@@ -80,6 +80,18 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
}
}
/* & .mantine-NumberInput-rightSection {
color: var(--input-placeholder-fg);
background: var(--input-bg);
} */
& .mantine-NumberInput-controlUp {
svg {
color: white;
fill: white;
}
}
& .mantine-Input-icon {
color: var(--input-placeholder-fg);
}
@@ -146,7 +158,7 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
font-family: var(--label-font-faimly);
}
& .mantine-PasswordInput-disabled {
& .mantine-FileInput-disabled {
opacity: 0.6;
}
`;
@@ -171,6 +183,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
return (
<StyledNumberInput
ref={ref}
hideControls
spellCheck={false}
{...props}
sx={{ maxWidth, width }}
@@ -184,12 +197,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
({ children, width, maxWidth, ...props }: PasswordInputProps, ref) => {
return (
<StyledPasswordInput
ref={ref}
spellCheck={false}
{...props}
sx={{ maxWidth, width }}
>
<StyledPasswordInput ref={ref} {...props} sx={{ maxWidth, width }}>
{children}
</StyledPasswordInput>
);
@@ -199,12 +207,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
({ children, width, maxWidth, ...props }: FileInputProps, ref) => {
return (
<StyledFileInput
ref={ref}
spellCheck={false}
{...props}
sx={{ maxWidth, width }}
>
<StyledFileInput ref={ref} {...props} sx={{ maxWidth, width }}>
{children}
</StyledFileInput>
);
src/renderer/components/popover/index.tsx
+10 -5
View File
@@ -15,15 +15,20 @@ const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
font-size: 0.9em;
font-family: var(--content-font-family);
background-color: var(--dropdown-menu-bg);
& .mantine-Menu-itemIcon {
margin-right: 0.5rem;
}
`;
export const Popover = ({ children, ...props }: PopoverProps) => {
return (
<StyledPopover withArrow withinPortal {...props}>
<StyledPopover
withArrow
withinPortal
styles={{
dropdown: {
filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
},
}}
{...props}
>
{children}
</StyledPopover>
);
src/renderer/components/select/index.tsx
+1
View File
@@ -33,6 +33,7 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
styles={{
dropdown: {
background: 'var(--dropdown-menu-bg)',
filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
},
input: {
background: 'var(--input-bg)',
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
+44 -9
View File
@@ -1,6 +1,6 @@
import React, { MouseEvent } from 'react';
import { Group, UnstyledButtonProps } from '@mantine/core';
import { motion } from 'framer-motion';
import { motion, Variants } from 'framer-motion';
import {
RiPlayFill,
RiMore2Fill,
@@ -8,7 +8,7 @@ import {
RiHeartLine,
} from 'react-icons/ri';
import styled from 'styled-components';
import { Button } from '@/renderer/components/button';
import { _Button } from '@/renderer/components/button';
import { DropdownMenu } from '@/renderer/components/dropdown-menu';
import { LibraryItem, Play, PlayQueueAddOptions } from '@/renderer/types';
@@ -33,6 +33,13 @@ const PlayButton = styled(motion.button)<PlayButtonType>`
}
`;
const SecondaryButton = styled(motion(_Button))`
fill: white !important;
svg: {
fill: white !important;
}
`;
const GridCardControlsContainer = styled.div`
display: flex;
flex-direction: column;
@@ -100,15 +107,30 @@ export const GridCardControls = ({
itemType: LibraryItem;
playButtonBehavior: Play;
}) => {
const buttonVariants: Variants = {
hover: {
opacity: 1,
scale: 1.1,
},
initial: {
opacity: 0.6,
scale: 1,
},
pressed: {
scale: 1,
},
};
return (
<GridCardControlsContainer>
<TopControls />
<CenterControls animate={{ opacity: 1 }} initial={{ opacity: 0 }} />
<BottomControls>
<PlayButton
animate={{ opacity: 0.6 }}
whileHover={{ opacity: 1, scale: 1.1 }}
whileTap={{ scale: 1 }}
initial="initial"
variants={buttonVariants}
whileHover="hover"
whileTap="pressed"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -124,7 +146,15 @@ export const GridCardControls = ({
<RiPlayFill size={25} />
</PlayButton>
<Group spacing="xs">
<Button disabled p={5} variant="subtle">
<SecondaryButton
disabled
p={5}
sx={{ svg: { fill: 'white !important' } }}
variant="subtle"
variants={buttonVariants}
whileHover="hover"
whileTap="pressed"
>
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
{itemData?.isFavorite ? (
<RiHeartFill size={20} />
@@ -132,19 +162,24 @@ export const GridCardControls = ({
<RiHeartLine color="white" size={20} />
)}
</FavoriteWrapper>
</Button>
</SecondaryButton>
<DropdownMenu withinPortal position="bottom-start">
<DropdownMenu.Target>
<Button
<SecondaryButton
initial="initial"
p={5}
sx={{ svg: { fill: 'white !important' } }}
variant="subtle"
variants={buttonVariants}
whileHover="hover"
whileTap="pressed"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<RiMore2Fill color="white" size={20} />
</Button>
</SecondaryButton>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{PLAY_TYPES.filter(