vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20: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/virtual-table/cells/actions-cell.tsx
+6 -9
View File
@@ -1,24 +1,21 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { RiMoreFill } from 'react-icons/ri';
import { Button } from '/@/renderer/components/button';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
export const ActionsCell = ({ api, context }: ICellRendererParams) => {
return (
<CellContainer $position="center">
<Button
compact
<CellContainer position="center">
<ActionIcon
icon="ellipsisHorizontal"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
context.onCellContextMenu(undefined, api, e);
}}
size="sm"
variant="subtle"
>
<RiMoreFill />
</Button>
/>
</CellContainer>
);
};
src/renderer/components/virtual-table/cells/album-artist-cell.tsx
+9 -9
View File
@@ -5,16 +5,16 @@ import React from 'react';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import { Separator } from '/@/renderer/components/separator';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { AppRoute } from '/@/renderer/router/routes';
import { Separator } from '/@/shared/components/separator/separator';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer $position="left">
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
@@ -24,9 +24,9 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
}
return (
<CellContainer $position="left">
<CellContainer position="left">
<Text
$secondary
isMuted
overflow="hidden"
size="md"
>
@@ -35,9 +35,9 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
{index > 0 && <Separator />}
{item.id ? (
<Text
$link
$secondary
component={Link}
isLink
isMuted
overflow="hidden"
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
@@ -48,7 +48,7 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
</Text>
) : (
<Text
$secondary
isMuted
overflow="hidden"
size="md"
>
src/renderer/components/virtual-table/cells/artist-cell.tsx
+9 -9
View File
@@ -5,16 +5,16 @@ import React from 'react';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import { Separator } from '/@/renderer/components/separator';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { AppRoute } from '/@/renderer/router/routes';
import { Separator } from '/@/shared/components/separator/separator';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
export const ArtistCell = ({ data, value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer $position="left">
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
@@ -24,9 +24,9 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
}
return (
<CellContainer $position="left">
<CellContainer position="left">
<Text
$secondary
isMuted
overflow="hidden"
size="md"
>
@@ -35,9 +35,9 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
{index > 0 && <Separator />}
{item.id ? (
<Text
$link
$secondary
component={Link}
isLink
isMuted
overflow="hidden"
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
@@ -48,7 +48,7 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
</Text>
) : (
<Text
$secondary
isMuted
overflow="hidden"
size="md"
>
src/renderer/components/virtual-table/cells/combined-title-cell-controls.module.css
+35
View File
@@ -0,0 +1,35 @@
.play-button {
position: absolute;
width: 30px;
height: 30px;
background: var(--theme-colors-white);
border: none;
border-radius: 50%;
opacity: 0.7;
transition: scale 0.1s ease-in-out;
svg {
color: var(--theme-colors-black);
fill: var(--theme-colors-black);
}
&:hover {
background-color: var(--theme-colors-white);
opacity: 1;
}
&:active {
opacity: 1;
}
}
.list-controls-container {
position: absolute;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
src/renderer/components/virtual-table/cells/combined-title-cell-controls.tsx
+13 -54
View File
@@ -1,62 +1,21 @@
import type { UnstyledButtonProps } from '@mantine/core';
import clsx from 'clsx';
import React, { MouseEvent } from 'react';
import { RiPlayFill } from 'react-icons/ri';
import styled from 'styled-components';
import styles from './combined-title-cell-controls.module.css';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
type PlayButtonType = React.ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;
const PlayButton = styled.button<PlayButtonType>`
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background-color: rgb(255 255 255);
border: none;
border-radius: 50%;
opacity: 0.8;
transition: scale 0.1s ease-in-out;
&:hover {
opacity: 1;
scale: 1.1;
}
&:active {
opacity: 1;
scale: 1;
}
svg {
fill: rgb(0 0 0);
stroke: rgb(0 0 0);
}
`;
const ListConverControlsContainer = styled.div`
position: absolute;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
`;
export const ListCoverControls = ({
className,
context,
itemData,
itemType,
uniqueId,
}: {
className?: string;
context: Record<string, any>;
itemData: any;
itemType: LibraryItem;
@@ -66,7 +25,7 @@ export const ListCoverControls = ({
const handlePlayQueueAdd = usePlayQueueAdd();
const isQueue = Boolean(context?.isQueue);
const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
const handlePlay = async (e: React.MouseEvent<HTMLButtonElement>, playType?: Play) => {
e.preventDefault();
e.stopPropagation();
@@ -88,12 +47,12 @@ export const ListCoverControls = ({
};
return (
<>
<ListConverControlsContainer className="card-controls">
<PlayButton onClick={isQueue ? handlePlayFromQueue : handlePlay}>
<RiPlayFill size={20} />
</PlayButton>
</ListConverControlsContainer>
</>
<div className={clsx(styles.listControlsContainer, className)}>
<ActionIcon
classNames={{ root: styles.playButton }}
icon="mediaPlay"
onClick={isQueue ? handlePlayFromQueue : handlePlay}
/>
</div>
);
};
src/renderer/components/virtual-table/cells/combined-title-cell.module.css
+50
View File
@@ -0,0 +1,50 @@
.cell-container {
display: grid;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
gap: 0.5rem;
align-items: center;
justify-items: center;
width: 100%;
max-width: 100%;
height: 100%;
letter-spacing: 0.5px;
&:hover {
.play-button {
opacity: 1;
}
}
}
.play-button {
opacity: 0;
}
.image-wrapper {
position: relative;
display: flex;
grid-area: image;
align-items: center;
justify-content: center;
height: 100%;
}
.metadata-wrapper {
display: flex;
flex-direction: column;
grid-area: info;
justify-content: center;
width: 100%;
}
.metadata-wrapper > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.skeleton-metadata {
height: var(--theme-font-size-md);
}
src/renderer/components/virtual-table/cells/combined-title-cell.tsx
+53 -106
View File
@@ -1,67 +1,19 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Center } from '@mantine/core';
import { motion } from 'framer-motion';
import React, { useMemo } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
import styled from 'styled-components';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import styles from './combined-title-cell.module.css';
import { ListCoverControls } from '/@/renderer/components/virtual-table/cells/combined-title-cell-controls';
import { AppRoute } from '/@/renderer/router/routes';
import { SEPARATOR_STRING } from '/@/shared/api/utils';
import { Image } from '/@/shared/components/image/image';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
import { AlbumArtist, Artist } from '/@/shared/types/domain-types';
const CellContainer = styled(motion.div)<{ height: number }>`
display: grid;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
grid-auto-columns: 1fr;
gap: 0.5rem;
width: 100%;
max-width: 100%;
height: 100%;
letter-spacing: 0.5px;
.card-controls {
opacity: 0;
}
&:hover {
.card-controls {
opacity: 1;
}
}
`;
const ImageWrapper = styled.div`
position: relative;
display: flex;
grid-area: image;
align-items: center;
justify-content: center;
height: 100%;
`;
const MetadataWrapper = styled.div`
display: flex;
flex-direction: column;
grid-area: info;
justify-content: center;
width: 100%;
`;
const StyledImage = styled(SimpleImg)`
img {
object-fit: var(--image-fit);
}
`;
export const CombinedTitleCell = ({
context,
data,
@@ -76,60 +28,55 @@ export const CombinedTitleCell = ({
if (value === undefined) {
return (
<CellContainer height={node.rowHeight || 40}>
<Skeleton>
<ImageWrapper />
</Skeleton>
<MetadataWrapper>
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton
height="1rem"
mt="0.5rem"
width="60%"
/>
</MetadataWrapper>
</CellContainer>
<div
className={styles.cellContainer}
style={{ gridTemplateColumns: `${node.rowHeight || 40}px minmax(0, 1fr)` }}
>
<div
className={styles.imageWrapper}
style={{
height: `${(node.rowHeight || 40) - 10}px`,
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<Skeleton className={styles.image} />
</div>
<Skeleton
className={styles.skeletonMetadata}
height="1rem"
width="80%"
/>
</div>
);
}
return (
<CellContainer height={node.rowHeight || 40}>
<ImageWrapper>
{value.imageUrl ? (
<StyledImage
alt="cover"
height={(node.rowHeight || 40) - 10}
placeholder={value.imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={value.imageUrl}
style={{}}
width={(node.rowHeight || 40) - 10}
/>
) : (
<Center
sx={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: `${(node.rowHeight || 40) - 10}px`,
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<RiAlbumFill
color="var(--placeholder-fg)"
size={35}
/>
</Center>
)}
<div
className={styles.cellContainer}
style={{ gridTemplateColumns: `${node.rowHeight || 40}px minmax(0, 1fr)` }}
>
<div
className={styles.imageWrapper}
style={{
height: `${(node.rowHeight || 40) - 10}px`,
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<Image
alt="cover"
className={styles.image}
src={value.imageUrl}
/>
<ListCoverControls
className={styles.playButton}
context={context}
itemData={value}
itemType={context.itemType}
uniqueId={data?.uniqueId}
/>
</ImageWrapper>
<MetadataWrapper>
</div>
<div className={styles.metadataWrapper}>
<Text
className="current-song-child"
overflow="hidden"
@@ -138,7 +85,7 @@ export const CombinedTitleCell = ({
{value.name}
</Text>
<Text
$secondary
isMuted
overflow="hidden"
size="md"
>
@@ -148,12 +95,12 @@ export const CombinedTitleCell = ({
{index > 0 ? SEPARATOR_STRING : null}
{artist.id ? (
<Text
$link
$secondary
component={Link}
isLink
isMuted
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
style={{ width: 'fit-content' }}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
@@ -162,10 +109,10 @@ export const CombinedTitleCell = ({
</Text>
) : (
<Text
$secondary
isMuted
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
style={{ width: 'fit-content' }}
>
{artist.name}
</Text>
@@ -173,10 +120,10 @@ export const CombinedTitleCell = ({
</React.Fragment>
))
) : (
<Text $secondary>—</Text>
<Text isMuted>—</Text>
)}
</Text>
</MetadataWrapper>
</CellContainer>
</div>
</div>
);
};
src/renderer/components/virtual-table/cells/favorite-cell.tsx
+9 -16
View File
@@ -1,10 +1,8 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { RiHeartFill, RiHeartLine } from 'react-icons/ri';
import { Button } from '/@/renderer/components/button';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
export const FavoriteCell = ({ data, node, value }: ICellRendererParams) => {
const createMutation = useCreateFavorite({});
@@ -47,21 +45,16 @@ export const FavoriteCell = ({ data, node, value }: ICellRendererParams) => {
};
return (
<CellContainer $position="center">
<Button
compact
onClick={handleToggleFavorite}
sx={{
svg: {
fill: !value
? 'var(--main-fg-secondary) !important'
: 'var(--primary-color) !important',
},
<CellContainer position="center">
<ActionIcon
icon="favorite"
iconProps={{
fill: !value ? undefined : 'primary',
}}
onClick={handleToggleFavorite}
size="sm"
variant="subtle"
>
{!value ? <RiHeartLine size="1.3em" /> : <RiHeartFill size="1.3em" />}
</Button>
/>
</CellContainer>
);
};
src/renderer/components/virtual-table/cells/full-width-disc-cell.module.css
+6
View File
@@ -0,0 +1,6 @@
.container {
display: flex;
height: 100%;
padding: 0.5rem 1rem;
border: 1px solid transparent;
}
src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx
+10 -18
View File
@@ -1,19 +1,12 @@
import { ICellRendererParams } from '@ag-grid-community/core';
import { Group } from '@mantine/core';
import { useState } from 'react';
import { RiCheckboxBlankLine, RiCheckboxLine } from 'react-icons/ri';
import styled from 'styled-components';
import { Button } from '/@/renderer/components/button';
import { Paper } from '/@/renderer/components/paper';
import styles from './full-width-disc-cell.module.css';
import { getNodesByDiscNumber, setNodeSelection } from '/@/renderer/components/virtual-table/utils';
const Container = styled(Paper)`
display: flex;
height: 100%;
padding: 0.5rem 1rem;
border: 1px solid transparent;
`;
import { Button } from '/@/shared/components/button/button';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
const [isSelected, setIsSelected] = useState(false);
@@ -31,21 +24,20 @@ export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
};
return (
<Container>
<div className={styles.container}>
<Group
position="apart"
justify="space-between"
w="100%"
>
<Button
compact
leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
leftSection={isSelected ? <Icon icon="squareCheck" /> : <Icon icon="square" />}
onClick={handleToggleDiscNodes}
size="md"
size="compact-md"
variant="subtle"
>
{data.name}
</Button>
</Group>
</Container>
</div>
);
};
src/renderer/components/virtual-table/cells/generic-cell.module.css
+19
View File
@@ -0,0 +1,19 @@
.cell-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
letter-spacing: 0.5px;
}
.cell-container.right {
justify-content: flex-end;
}
.cell-container.center {
justify-content: center;
}
.cell-container.left {
justify-content: flex-start;
}
src/renderer/components/virtual-table/cells/generic-cell.tsx
+31 -22
View File
@@ -1,24 +1,12 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import clsx from 'clsx';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import styles from './generic-cell.module.css';
export const CellContainer = styled.div<{ $position?: 'center' | 'left' | 'right' }>`
display: flex;
align-items: center;
justify-content: ${(props) =>
props.$position === 'right'
? 'flex-end'
: props.$position === 'center'
? 'center'
: 'flex-start'};
width: 100%;
height: 100%;
letter-spacing: 0.5px;
`;
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
type Options = {
array?: boolean;
@@ -36,7 +24,7 @@ export const GenericCell = (
if (value === undefined) {
return (
<CellContainer $position={position || 'left'}>
<CellContainer position={position || 'left'}>
<Skeleton
height="1rem"
width="80%"
@@ -46,12 +34,12 @@ export const GenericCell = (
}
return (
<CellContainer $position={position || 'left'}>
<CellContainer position={position || 'left'}>
{isLink ? (
<Text
$link={isLink}
$secondary={!primary}
component={Link}
isLink={isLink}
isMuted={!primary}
overflow="hidden"
size="md"
to={displayedValue.link}
@@ -60,8 +48,8 @@ export const GenericCell = (
</Text>
) : (
<Text
$noSelect={false}
$secondary={!primary}
isMuted={!primary}
isNoSelect={false}
overflow="hidden"
size="md"
>
@@ -71,3 +59,24 @@ export const GenericCell = (
</CellContainer>
);
};
export const CellContainer = ({
children,
position,
}: {
children: React.ReactNode;
position: 'center' | 'left' | 'right';
}) => {
return (
<div
className={clsx({
[styles.cellContainer]: true,
[styles.center]: position === 'center',
[styles.left]: position === 'left' || !position,
[styles.right]: position === 'right',
})}
>
{children}
</div>
);
};
src/renderer/components/virtual-table/cells/genre-cell.tsx
+6 -6
View File
@@ -4,17 +4,17 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
import React from 'react';
import { generatePath, Link } from 'react-router-dom';
import { Separator } from '/@/renderer/components/separator';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
import { Separator } from '/@/shared/components/separator/separator';
import { Text } from '/@/shared/components/text/text';
export const GenreCell = ({ data, value }: ICellRendererParams) => {
const genrePath = useGenreRoute();
return (
<CellContainer $position="left">
<CellContainer position="left">
<Text
$secondary
isMuted
overflow="hidden"
size="md"
>
@@ -22,9 +22,9 @@ export const GenreCell = ({ data, value }: ICellRendererParams) => {
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && <Separator />}
<Text
$link
$secondary
component={Link}
isLink
isMuted
overflow="hidden"
size="md"
to={generatePath(genrePath, { genreId: item.id })}
src/renderer/components/virtual-table/cells/note-cell.tsx
+5 -5
View File
@@ -2,10 +2,10 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
import { useMemo } from 'react';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
export const NoteCell = ({ value }: ICellRendererParams) => {
const formattedValue = useMemo(() => {
@@ -18,7 +18,7 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer $position="left">
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
@@ -28,9 +28,9 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
}
return (
<CellContainer $position="left">
<CellContainer position="left">
<Text
$secondary
isMuted
overflow="hidden"
>
{formattedValue}
src/renderer/components/virtual-table/cells/rating-cell.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Rating } from '/@/renderer/components/rating';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { useSetRating } from '/@/renderer/features/shared';
import { Rating } from '/@/shared/components/rating/rating';
export const RatingCell = ({ node, value }: ICellRendererParams) => {
const updateRatingMutation = useSetRating({});
@@ -25,7 +25,7 @@ export const RatingCell = ({ node, value }: ICellRendererParams) => {
};
return (
<CellContainer $position="center">
<CellContainer position="center">
<Rating
onChange={handleUpdateRating}
size="xs"
src/renderer/components/virtual-table/cells/row-index-cell.tsx
+28 -24
View File
@@ -1,9 +1,8 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { RiPlayFill } from 'react-icons/ri';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { Icon } from '/@/shared/components/icon/icon';
import { Text } from '/@/shared/components/text/text';
// const AnimatedSvg = () => {
// return (
@@ -14,7 +13,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
// >
// <g>
// <rect
// fill="var(--primary-color)"
// fill="var(--theme-colors-primary-filled)"
// height="80"
// id="bar-1"
// width="12"
@@ -33,7 +32,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
// />
// </rect>
// <rect
// fill="var(--primary-color)"
// fill="var(--theme-colors-primary-filled)"
// height="80"
// id="bar-2"
// width="12"
@@ -52,7 +51,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
// />
// </rect>
// <rect
// fill="var(--primary-color)"
// fill="var(--theme-colors-primary-filled)"
// height="80"
// id="bar-3"
// width="12"
@@ -71,7 +70,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
// />
// </rect>
// <rect
// fill="var(--primary-color)"
// fill="var(--theme-colors-primary-filled)"
// height="80"
// id="bar-4"
// width="12"
@@ -143,23 +142,28 @@ export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
classList.contains('current-song-cell') || classList.contains('current-playlist-song-cell');
return (
<CellContainer $position="right">
{isPlaying &&
(isCurrentSong ? (
<RiPlayFill
color="var(--primary-color)"
size="1.2rem"
/>
) : null)}
<Text
$secondary
align="right"
className="current-song-child current-song-index"
overflow="hidden"
size="md"
>
{value}
</Text>
<CellContainer position="right">
{isPlaying && isCurrentSong ? (
<Icon
fill="primary"
icon="mediaPlay"
/>
) : isCurrentSong ? (
<Icon
fill="primary"
icon="mediaPause"
/>
) : (
<Text
className="current-song-child current-song-index"
isMuted
overflow="hidden"
size="md"
style={{ textAlign: 'right' }}
>
{value}
</Text>
)}
</CellContainer>
);
};
src/renderer/components/virtual-table/cells/title-cell.tsx
+4 -4
View File
@@ -1,13 +1,13 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
export const TitleCell = ({ value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer $position="left">
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
@@ -17,7 +17,7 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
}
return (
<CellContainer $position="left">
<CellContainer position="left">
<Text
className="current-song-child"
overflow="hidden"