mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 06:27:09 +01:00
use clearer separator character
This commit is contained in:
parent
19a88fea86
commit
ec69cc22f9
@ -47,3 +47,5 @@ export const hasFeature = (server: ServerListItem | null, feature: ServerFeature
|
||||
|
||||
return server.features[feature] ?? false;
|
||||
};
|
||||
|
||||
export const SEPARATOR_STRING = ' · ';
|
||||
|
15
src/renderer/components/separator/index.tsx
Normal file
15
src/renderer/components/separator/index.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { SEPARATOR_STRING } from '/@/renderer/api/utils';
|
||||
import { Text } from '/@/renderer/components/text';
|
||||
|
||||
export const Separator = () => {
|
||||
return (
|
||||
<Text
|
||||
$noSelect
|
||||
$secondary
|
||||
size="md"
|
||||
style={{ display: 'inline-block', padding: '0px 3px' }}
|
||||
>
|
||||
{SEPARATOR_STRING}
|
||||
</Text>
|
||||
);
|
||||
};
|
@ -7,6 +7,7 @@ import { Text } from '/@/renderer/components/text';
|
||||
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { Skeleton } from '/@/renderer/components/skeleton';
|
||||
import { Separator } from '/@/renderer/components/separator';
|
||||
|
||||
export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
|
||||
if (value === undefined) {
|
||||
@ -29,15 +30,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
|
||||
>
|
||||
{value?.map((item: Artist | AlbumArtist, index: number) => (
|
||||
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
||||
{index > 0 && (
|
||||
<Text
|
||||
$secondary
|
||||
size="md"
|
||||
style={{ display: 'inline-block' }}
|
||||
>
|
||||
,
|
||||
</Text>
|
||||
)}{' '}
|
||||
{index > 0 && <Separator />}
|
||||
{item.id ? (
|
||||
<Text
|
||||
$link
|
||||
|
@ -7,6 +7,7 @@ import { Text } from '/@/renderer/components/text';
|
||||
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { Skeleton } from '/@/renderer/components/skeleton';
|
||||
import { Separator } from '/@/renderer/components/separator';
|
||||
|
||||
export const ArtistCell = ({ value, data }: ICellRendererParams) => {
|
||||
if (value === undefined) {
|
||||
@ -29,15 +30,7 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
|
||||
>
|
||||
{value?.map((item: Artist | AlbumArtist, index: number) => (
|
||||
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
||||
{index > 0 && (
|
||||
<Text
|
||||
$secondary
|
||||
size="md"
|
||||
style={{ display: 'inline-block' }}
|
||||
>
|
||||
,
|
||||
</Text>
|
||||
)}{' '}
|
||||
{index > 0 && <Separator />}
|
||||
{item.id ? (
|
||||
<Text
|
||||
$link
|
||||
|
@ -11,6 +11,7 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
|
||||
import { Text } from '/@/renderer/components/text';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { Skeleton } from '/@/renderer/components/skeleton';
|
||||
import { SEPARATOR_STRING } from '/@/renderer/api/utils';
|
||||
|
||||
const CellContainer = styled(motion.div)<{ height: number }>`
|
||||
display: grid;
|
||||
@ -118,7 +119,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
|
||||
{artists?.length ? (
|
||||
artists.map((artist: Artist | AlbumArtist, index: number) => (
|
||||
<React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
|
||||
{index > 0 ? ', ' : null}
|
||||
{index > 0 ? SEPARATOR_STRING : null}
|
||||
{artist.id ? (
|
||||
<Text
|
||||
$link
|
||||
|
@ -5,6 +5,7 @@ import type { AlbumArtist, Artist } from '/@/renderer/api/types';
|
||||
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 '/@/renderer/components/separator';
|
||||
|
||||
export const GenreCell = ({ value, data }: ICellRendererParams) => {
|
||||
return (
|
||||
@ -16,15 +17,7 @@ export const GenreCell = ({ value, data }: ICellRendererParams) => {
|
||||
>
|
||||
{value?.map((item: Artist | AlbumArtist, index: number) => (
|
||||
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
||||
{index > 0 && (
|
||||
<Text
|
||||
$secondary
|
||||
size="md"
|
||||
style={{ display: 'inline-block' }}
|
||||
>
|
||||
,
|
||||
</Text>
|
||||
)}{' '}
|
||||
{index > 0 && <Separator />}
|
||||
<Text
|
||||
$link
|
||||
$secondary
|
||||
|
@ -10,6 +10,7 @@ import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
|
||||
import { Rating, Spoiler } from '/@/renderer/components';
|
||||
import { sanitize } from '/@/renderer/utils/sanitize';
|
||||
import { SongPath } from '/@/renderer/features/item-details/components/song-path';
|
||||
import { SEPARATOR_STRING } from '/@/renderer/api/utils';
|
||||
|
||||
export type ItemDetailsModalProps = {
|
||||
item: Album | AlbumArtist | Song;
|
||||
@ -43,7 +44,7 @@ const handleRow = <T extends AnyLibraryItem>(t: TFunction, item: T, rule: ItemDe
|
||||
};
|
||||
|
||||
const formatArtists = (item: Album | Song) =>
|
||||
item.albumArtists?.map((artist) => artist.name).join(' · ');
|
||||
item.albumArtists?.map((artist) => artist.name).join(SEPARATOR_STRING);
|
||||
|
||||
const formatComment = (item: Album | Song) =>
|
||||
item.comment ? <Spoiler maxHeight={50}>{replaceURLWithHTMLLinks(item.comment)}</Spoiler> : null;
|
||||
@ -51,7 +52,7 @@ const formatComment = (item: Album | Song) =>
|
||||
const formatDate = (key: string | null) => (key ? dayjs(key).fromNow() : '');
|
||||
|
||||
const formatGenre = (item: Album | AlbumArtist | Song) =>
|
||||
item.genres?.map((genre) => genre.name).join(' · ');
|
||||
item.genres?.map((genre) => genre.name).join(SEPARATOR_STRING);
|
||||
|
||||
const formatRating = (item: Album | AlbumArtist | Song) =>
|
||||
item.userRating !== null ? (
|
||||
@ -162,7 +163,7 @@ const SongPropertyMapping: ItemDetailRow<Song>[] = [
|
||||
{
|
||||
key: 'artists',
|
||||
label: 'entity.artist_other',
|
||||
render: (song) => song.artists.map((artist) => artist.name).join(' · '),
|
||||
render: (song) => song.artists.map((artist) => artist.name).join(SEPARATOR_STRING),
|
||||
},
|
||||
{ key: 'album', label: 'entity.album_one' },
|
||||
{ key: 'discNumber', label: 'common.disc' },
|
||||
|
@ -20,6 +20,7 @@ import { fadeIn } from '/@/renderer/styles';
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
|
||||
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
|
||||
import { Separator } from '/@/renderer/components/separator';
|
||||
|
||||
const ImageWrapper = styled.div`
|
||||
position: relative;
|
||||
@ -236,16 +237,7 @@ export const LeftControls = () => {
|
||||
<LineItem $secondary>
|
||||
{artists?.map((artist, index) => (
|
||||
<React.Fragment key={`bar-${artist.id}`}>
|
||||
{index > 0 && (
|
||||
<Text
|
||||
$link
|
||||
$secondary
|
||||
size="md"
|
||||
style={{ display: 'inline-block' }}
|
||||
>
|
||||
,
|
||||
</Text>
|
||||
)}{' '}
|
||||
{index > 0 && <Separator />}
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
|
Loading…
Reference in New Issue
Block a user