yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

fix(18-02): add field labels to all track-details states (single/batch, read/edit)

Browse Source
This commit is contained in:
yonlu
2026-03-18 13:40:11 -04:00
parent 9df2d6764a
commit d430ad884b
1 changed files with 91 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/track-details/track-details.ts
+91 -68
View File
@@ -878,33 +878,36 @@ export class TrackDetails extends LitElement {
<span class="batch-header"> <span class="batch-header">
${this.batchTracks.length} tracks selected ${this.batchTracks.length} tracks selected
</span> </span>
${titleField?.mixed <div class="main-field-group">
? html`<span class="mixed-value"> <label class="main-field-label">Title</label>
${this.countDistinctValues('title')} different titles ${titleField?.mixed
</span>` ? html`<span class="mixed-value">
: titleField?.value ${this.countDistinctValues('title')} different titles
? html`<span class="title">
${titleField.value}
</span>` </span>`
: nothing} : html`<span class="title">
${artistField?.mixed ${titleField?.value || 'None'}
? html`<span class="mixed-value"> </span>`}
${this.countDistinctValues('artist')} different artists </div>
</span>` <div class="main-field-group">
: artistField?.value <label class="main-field-label">Artist</label>
? html`<span class="artist"> ${artistField?.mixed
${artistField.value} ? html`<span class="mixed-value">
${this.countDistinctValues('artist')} different artists
</span>` </span>`
: nothing} : html`<span class="artist">
${albumField?.mixed ${artistField?.value || 'Unknown Artist'}
? html`<span class="mixed-value"> </span>`}
${this.countDistinctValues('album')} different albums </div>
</span>` <div class="main-field-group">
: albumField?.value <label class="main-field-label">Album</label>
? html`<span class="album"> ${albumField?.mixed
${albumField.value} ? html`<span class="mixed-value">
${this.countDistinctValues('album')} different albums
</span>` </span>`
: nothing} : html`<span class="album">
${albumField?.value || 'No album'}
</span>`}
</div>
`; `;
} }
@@ -1235,45 +1238,54 @@ export class TrackDetails extends LitElement {
private renderMainFields(t: library.Track) { private renderMainFields(t: library.Track) {
if (this.editing) { if (this.editing) {
return html` return html`
<input <div class="main-field-group">
class="main-input title-input" <label class="main-field-label">Title</label>
.value=${this.getEditValue( <input
'title', class="main-input title-input"
t.TrackName, .value=${this.getEditValue(
)}
@input=${(e: Event) =>
this.onEditInput(
'title', 'title',
e, t.TrackName,
)} )}
placeholder="Title" @input=${(e: Event) =>
/> this.onEditInput(
<input 'title',
class="main-input artist-input" e,
.value=${this.getEditValue( )}
'artist', placeholder="Title"
t.ArtistName, />
)} </div>
@input=${(e: Event) => <div class="main-field-group">
this.onEditInput( <label class="main-field-label">Artist</label>
<input
class="main-input artist-input"
.value=${this.getEditValue(
'artist', 'artist',
e, t.ArtistName,
)} )}
placeholder="Artist" @input=${(e: Event) =>
/> this.onEditInput(
<input 'artist',
class="main-input album-input" e,
.value=${this.getEditValue( )}
'album', placeholder="Artist"
t.Album, />
)} </div>
@input=${(e: Event) => <div class="main-field-group">
this.onEditInput( <label class="main-field-label">Album</label>
<input
class="main-input album-input"
.value=${this.getEditValue(
'album', 'album',
e, t.Album,
)} )}
placeholder="Album" @input=${(e: Event) =>
/> this.onEditInput(
'album',
e,
)}
placeholder="Album"
/>
</div>
<span class="duration"> <span class="duration">
${formatMilliseconds(t.TrackLength)} ${formatMilliseconds(t.TrackLength)}
</span> </span>
@@ -1281,17 +1293,28 @@ export class TrackDetails extends LitElement {
} }
return html` return html`
<span class="title"> <div class="main-field-group">
${t.TrackName || this.fileNameFromPath(t.FilePath)} <label class="main-field-label">Title</label>
</span> <span class="title">
<span class="artist"> ${t.TrackName || this.fileNameFromPath(t.FilePath)}
${t.ArtistName || 'Unknown Artist'} </span>
</span> </div>
${t.Album <div class="main-field-group">
? html`<span class="album" <label class="main-field-label">Artist</label>
>${t.Album}</span <span class="artist">
>` ${t.ArtistName || 'Unknown Artist'}
: nothing} </span>
</div>
<div class="main-field-group">
<label class="main-field-label">Album</label>
${t.Album
? html`<span class="album"
>${t.Album}</span
>`
: html`<span class="album" style="font-style: italic"
>No album</span
>`}
</div>
<span class="duration"> <span class="duration">
${formatMilliseconds(t.TrackLength)} ${formatMilliseconds(t.TrackLength)}
</span> </span>