Add maxWidth and ellipsis to music list item name

This commit is contained in:
2023-10-24 05:08:09 +08:00
parent 49c5360680
commit 1fec1bb2f6
1 changed files with 7 additions and 0 deletions

View File

@ -247,6 +247,7 @@ export default class MusicList {
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
gap: '.25rem', gap: '.25rem',
maxWidth: '100%',
}, },
children: [ children: [
...(item.picture ? [Img({ ...(item.picture ? [Img({
@ -254,6 +255,12 @@ export default class MusicList {
style: { width: '2em', height: '2em', borderRadius: '.25em' } style: { width: '2em', height: '2em', borderRadius: '.25em' }
})] : []), })] : []),
Span({ Span({
style: {
flex: 1,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflowX: 'hidden',
},
title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`, title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
textContent: `${item.name} - ${bytesToSize(item.size)}`, textContent: `${item.name} - ${bytesToSize(item.size)}`,
onclick: event => { onclick: event => {