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

handle title combined column on compact sizing

Browse Source
This commit is contained in:
jeffvli
2025-11-23 15:13:31 -08:00
parent af7e52295a
commit 56162b650c
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
+6 -2
View File
@@ -9,10 +9,14 @@
.text-container { .text-container {
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 2px; gap: var(--theme-spacing-xs);
min-width: 0; min-width: 0;
} }
.text-container.compact {
gap: 0;
}
.title { .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -23,7 +27,7 @@
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.875rem; font-size: var(--theme-font-size-xs) !important;
color: var(--theme-colors-foreground-muted); color: var(--theme-colors-foreground-muted);
white-space: nowrap; white-space: nowrap;
user-select: none; user-select: none;
src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+13 -5
View File
@@ -1,3 +1,4 @@
import clsx from 'clsx';
import { CSSProperties, useMemo } from 'react'; import { CSSProperties, useMemo } from 'react';
import { generatePath, Link } from 'react-router'; import { generatePath, Link } from 'react-router';
@@ -46,13 +47,13 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
return ( return (
<TableColumnContainer <TableColumnContainer
className={styles['title-combined']} className={styles.titleCombined}
containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties} containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties}
{...props} {...props}
> >
<Image containerClassName={styles.image} src={row.imageUrl as string} /> <Image containerClassName={styles.image} src={row.imageUrl as string} />
<div className={styles['text-container']}> <div className={styles.textContainer}>
<Text className={styles.title} isNoSelect {...titleLinkProps}> <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
{row.name as string} {row.name as string}
</Text> </Text>
<div className={styles.artists}> <div className={styles.artists}>
@@ -63,6 +64,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
isLink isLink
isMuted isMuted
isNoSelect isNoSelect
size="sm"
state={{ item: artist }} state={{ item: artist }}
to={artist.path} to={artist.path}
> >
@@ -122,15 +124,20 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
return ( return (
<TableColumnContainer <TableColumnContainer
className={styles['title-combined']} className={styles.titleCombined}
containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties} containerStyle={{ '--row-height': `${rowHeight}px` } as CSSProperties}
{...props} {...props}
> >
<Image containerClassName={styles.image} src={row.imageUrl as string} /> <Image containerClassName={styles.image} src={row.imageUrl as string} />
<div className={styles['text-container']}> <div
className={clsx(styles.textContainer, {
[styles.compact]: props.size === 'compact',
})}
>
<Text <Text
className={styles.title} className={styles.title}
isNoSelect isNoSelect
size="md"
{...titleLinkProps} {...titleLinkProps}
style={textStyles} style={textStyles}
> >
@@ -144,6 +151,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
isLink isLink
isMuted isMuted
isNoSelect isNoSelect
size="sm"
state={{ item: artist }} state={{ item: artist }}
to={artist.path} to={artist.path}
> >