vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 21:50:35 +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/card/card-rows.tsx
+35 -33
View File
@@ -1,27 +1,17 @@
import clsx from 'clsx';
import formatDuration from 'format-duration';
import React from 'react';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Text } from '/@/renderer/components/text';
import styles from './card-rows.module.css';
import { AppRoute } from '/@/renderer/router/routes';
import { formatDateAbsolute, formatDateRelative, formatRating } from '/@/renderer/utils/format';
import { Text } from '/@/shared/components/text/text';
import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/shared/types/domain-types';
import { CardRow } from '/@/shared/types/types';
const Row = styled.div<{ $secondary?: boolean }>`
width: 100%;
max-width: 100%;
height: 22px;
padding: 0 0.2rem;
overflow: hidden;
color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
`;
interface CardRowsProps {
data: any;
rows: CardRow<Album>[] | CardRow<AlbumArtist>[] | CardRow<Artist>[];
@@ -33,17 +23,19 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
{rows.map((row, index: number) => {
if (row.arrayProperty && row.route) {
return (
<Row
$secondary={index > 0}
<div
className={clsx(styles.row, {
[styles.secondary]: index > 0,
})}
key={`row-${row.property}-${index}`}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && (
<Text
$noSelect
$secondary
sx={{
isMuted
isNoSelect
style={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
@@ -52,10 +44,10 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
</Text>
)}{' '}
<Text
$link
$noSelect
$secondary={index > 0}
component={Link}
isLink
isMuted={index > 0}
isNoSelect
onClick={(e) => e.stopPropagation()}
overflow="hidden"
size={index > 0 ? 'sm' : 'md'}
@@ -79,17 +71,22 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
</Text>
</React.Fragment>
))}
</Row>
</div>
);
}
if (row.arrayProperty) {
return (
<Row key={`row-${row.property}`}>
<div
className={clsx(styles.row, {
[styles.secondary]: index > 0,
})}
key={`row-${row.property}`}
>
{data[row.property].map((item: any) => (
<Text
$noSelect
$secondary={index > 0}
isMuted={index > 0}
isNoSelect
key={`${data.id}-${item.id}`}
overflow="hidden"
size={index > 0 ? 'sm' : 'md'}
@@ -98,17 +95,22 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
(row.format ? row.format(item) : item[row.arrayProperty])}
</Text>
))}
</Row>
</div>
);
}
return (
<Row key={`row-${row.property}`}>
<div
className={clsx(styles.row, {
[styles.secondary]: index > 0,
})}
key={`row-${row.property}`}
>
{row.route ? (
<Text
$link
$noSelect
component={Link}
isLink
isNoSelect
onClick={(e) => e.stopPropagation()}
overflow="hidden"
to={generatePath(
@@ -125,15 +127,15 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
</Text>
) : (
<Text
$noSelect
$secondary={index > 0}
isMuted={index > 0}
isNoSelect
overflow="hidden"
size={index > 0 ? 'sm' : 'md'}
>
{data && (row.format ? row.format(data) : data[row.property])}
</Text>
)}
</Row>
</div>
);
})}
</>