vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: replace menu icon with 'Menu' text in tracklist header

Browse source
This commit is contained in:
Julien Maille 2026-01-18 19:23:50 +01:00
parent 81854c1ffb
commit 66ab529b32
2 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
js/ui.js
View file

@ -1233,7 +1233,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
${this.createSkeletonTracks(10, false)} ${this.createSkeletonTracks(10, false)}
`; `;
@ -1287,7 +1287,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
`; `;
@ -1465,7 +1465,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> `; </div> `;
this.renderListWithTracks(tracklistContainer, updatedPlaylist.tracks, true); this.renderListWithTracks(tracklistContainer, updatedPlaylist.tracks, true);
@ -1536,7 +1536,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
${this.createSkeletonTracks(10, true)} ${this.createSkeletonTracks(10, true)}
`; `;
@ -1588,7 +1588,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
`; `;
@ -1687,7 +1687,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
`; `;
@ -1750,7 +1750,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
${this.createSkeletonTracks(10, true)} ${this.createSkeletonTracks(10, true)}
`; `;
@ -1791,7 +1791,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span> <span style="width: 40px; text-align: center;">#</span>
<span>Title</span> <span>Title</span>
<span class="duration-header">Duration</span> <span class="duration-header">Duration</span>
<span style="display: flex; justify-content: flex-end; opacity: 0.8;">${SVG_MENU}</span> <span style="display: flex; justify-content: flex-end; opacity: 0.8;">Menu</span>
</div> </div>
`; `;

7
styles.css
View file

@ -1118,6 +1118,13 @@ body.has-page-background .track-item:hover {
display: flex; display: flex;
} }
:root[data-track-actions-mode='inline'] .track-list-header,
:root[data-track-actions-mode='inline'] .track-item,
:root[data-track-actions-mode='inline'] .skeleton-track,
:root[data-track-actions-mode='inline'] #playlist-detail-tracklist .track-list-header {
grid-template-columns: 40px 1fr 80px 175px;
}
.track-item:hover .track-actions-inline { .track-item:hover .track-actions-inline {
opacity: 1; opacity: 1;
} }