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 above title/artist/album inputs in batch edit mode

Browse Source
This commit is contained in:
yonlu
2026-03-18 13:32:08 -04:00
parent 5f21804b20
commit 9df2d6764a
1 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/track-details/track-details.ts
+59 -36
View File
@@ -510,6 +510,20 @@ export class TrackDetails extends LitElement {
color: var(--yj-text-tertiary, #888); color: var(--yj-text-tertiary, #888);
} }
.main-field-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.main-field-label {
font-size: var(--yj-text-xs);
font-weight: 500;
color: var(--yj-text-tertiary, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mixed-value { .mixed-value {
color: var(--yj-text-tertiary, #888); color: var(--yj-text-tertiary, #888);
font-style: italic; font-style: italic;
@@ -812,42 +826,51 @@ export class TrackDetails extends LitElement {
<span class="batch-header"> <span class="batch-header">
Editing ${this.batchTracks.length} tracks Editing ${this.batchTracks.length} tracks
</span> </span>
<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"
titleField?.value ?? '', .value=${this.getEditValue(
)} 'title',
@input=${(e: Event) => titleField?.value ?? '',
this.onEditInput('title', e)} )}
placeholder=${titleField?.mixed @input=${(e: Event) =>
? 'Multiple values' this.onEditInput('title', e)}
: 'Title'} placeholder=${titleField?.mixed
/> ? 'Multiple values'
<input : 'Title'}
class="main-input artist-input" />
.value=${this.getEditValue( </div>
'artist', <div class="main-field-group">
artistField?.value ?? '', <label class="main-field-label">Artist</label>
)} <input
@input=${(e: Event) => class="main-input artist-input"
this.onEditInput('artist', e)} .value=${this.getEditValue(
placeholder=${artistField?.mixed 'artist',
? 'Multiple values' artistField?.value ?? '',
: 'Artist'} )}
/> @input=${(e: Event) =>
<input this.onEditInput('artist', e)}
class="main-input album-input" placeholder=${artistField?.mixed
.value=${this.getEditValue( ? 'Multiple values'
'album', : 'Artist'}
albumField?.value ?? '', />
)} </div>
@input=${(e: Event) => <div class="main-field-group">
this.onEditInput('album', e)} <label class="main-field-label">Album</label>
placeholder=${albumField?.mixed <input
? 'Multiple values' class="main-input album-input"
: 'Album'} .value=${this.getEditValue(
/> 'album',
albumField?.value ?? '',
)}
@input=${(e: Event) =>
this.onEditInput('album', e)}
placeholder=${albumField?.mixed
? 'Multiple values'
: 'Album'}
/>
</div>
`; `;
} }