use clearer separator character

This commit is contained in:
Kendall Garner 2024-04-14 21:58:25 -07:00
parent 19a88fea86
commit ec69cc22f9
No known key found for this signature in database
GPG Key ID: 18D2767419676C87
8 changed files with 31 additions and 41 deletions

View File

@ -47,3 +47,5 @@ export const hasFeature = (server: ServerListItem | null, feature: ServerFeature
return server.features[feature] ?? false;
};
export const SEPARATOR_STRING = ' · ';

View 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>
);
};

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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' },

View File

@ -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}