mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-08 13:00:13 +02:00
fix image on context menu preview
This commit is contained in:
jeffvli
@@ -1,91 +0,0 @@
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: var(--theme-spacing-xs) 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-top: 1px solid var(--theme-colors-border);
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--theme-spacing-sm) var(--theme-spacing-md);
|
||||
border-radius: var(--theme-radius-sm);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
gap: var(--theme-spacing-sm);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-sm);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(0 0 0 / 10%) 100%);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--theme-colors-surface) 0%,
|
||||
var(--theme-colors-background) 100%
|
||||
);
|
||||
border: 1px solid var(--theme-colors-border);
|
||||
border-radius: var(--theme-radius-sm);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--theme-font-size-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--theme-colors-foreground);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: var(--theme-font-size-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--theme-colors-foreground-muted);
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import { memo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import styles from './context-menu-preview.module.css';
|
||||
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
|
||||
interface ContextMenuPreviewProps {
|
||||
items: unknown[];
|
||||
itemType?: LibraryItem;
|
||||
}
|
||||
|
||||
const getItemName = (item: unknown): string => {
|
||||
if (item && typeof item === 'object') {
|
||||
if ('name' in item && typeof item.name === 'string') {
|
||||
return item.name;
|
||||
}
|
||||
if ('title' in item && typeof item.title === 'string') {
|
||||
return item.title;
|
||||
}
|
||||
}
|
||||
return 'Item';
|
||||
};
|
||||
|
||||
const getItemImage = (item: unknown): null | string => {
|
||||
if (item && typeof item === 'object') {
|
||||
if ('imageUrl' in item && typeof item.imageUrl === 'string') {
|
||||
return item.imageUrl;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewProps) => {
|
||||
const { t } = useTranslation();
|
||||
const itemCount = items.length;
|
||||
const firstItem = items[0];
|
||||
const itemName = firstItem ? getItemName(firstItem) : 'Item';
|
||||
const itemImage = firstItem ? getItemImage(firstItem) : null;
|
||||
const isMultiple = itemCount > 1;
|
||||
|
||||
if (itemCount === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.divider} />
|
||||
<div className={styles.preview}>
|
||||
<div className={styles.content}>
|
||||
{itemImage ? (
|
||||
<div className={styles.imageContainer}>
|
||||
<img alt={itemName} className={styles.image} src={itemImage} />
|
||||
<div className={styles.imageOverlay} />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.iconContainer}>
|
||||
{itemType === LibraryItem.ALBUM && <Icon icon="album" size="md" />}
|
||||
{itemType === LibraryItem.SONG && <Icon icon="itemSong" size="md" />}
|
||||
{itemType === LibraryItem.ALBUM_ARTIST && (
|
||||
<Icon icon="artist" size="md" />
|
||||
)}
|
||||
{itemType === LibraryItem.ARTIST && <Icon icon="artist" size="md" />}
|
||||
{itemType === LibraryItem.PLAYLIST && (
|
||||
<Icon icon="playlist" size="md" />
|
||||
)}
|
||||
{itemType === LibraryItem.GENRE && <Icon icon="genre" size="md" />}
|
||||
{itemType === LibraryItem.FOLDER && <Icon icon="folder" size="md" />}
|
||||
{!itemType && <Icon icon="library" size="md" />}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.textContainer}>
|
||||
<Text className={styles.name} isNoSelect>
|
||||
{itemName}
|
||||
</Text>
|
||||
{isMultiple && (
|
||||
<Text className={styles.count} isNoSelect>
|
||||
+{t('common.itemsMore', { count: itemCount - 1 })}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
ContextMenuPreview.displayName = 'ContextMenuPreview';
|
||||
Reference in New Issue
Block a user