Simplify Icon usage, add names

This commit is contained in:
Christoph Hagen
2025-01-26 20:59:38 +01:00
parent 42fa08b43d
commit 628f3ad520
12 changed files with 291 additions and 159 deletions

View File

@ -12,7 +12,7 @@ struct AudioPlayer: HtmlProducer {
<div class='top'>
<div>&nbsp;</div>
<div class='top-center'>\(playingText)</div>
<div class='show-playlist'><svg><use href='#\(AudioPlayerPlaylistIcon.name)'></use></svg></div>
<div class='show-playlist'>\(Icon.AudioPlayer.Playlist.usageString)</div>
</div>
"""
}
@ -47,12 +47,12 @@ struct AudioPlayer: HtmlProducer {
private var controls: String {
"""
<div id="audio-player-controls">
<svg id="previous" class="amplitude-prev"><use href='#\(AudioPlayerPreviousIcon.name)'></use></svg>
<svg id="previous" class="amplitude-prev"><\(Icon.AudioPlayer.Previous.usageContent)</svg>
<div class="amplitude-play-pause" id="play-pause">
<svg class="play-icon"><use href='#\(AudioPlayerPlayIcon.name)'></use></svg>
<svg class="pause-icon"><use href='#\(AudioPlayerPauseIcon.name)'></use></svg>
<svg class="play-icon">\(Icon.AudioPlayer.Play.usageContent)</svg>
<svg class="pause-icon">\(Icon.AudioPlayer.Pause.usageContent)</svg>
</div>
<svg id="next" class="amplitude-next"><use href='#\(AudioPlayerNextIcon.name)'></use></svg>
<svg id="next" class="amplitude-next">\(Icon.AudioPlayer.Next.usageContent)</svg>
</div>
"""
}
@ -62,7 +62,7 @@ struct AudioPlayer: HtmlProducer {
<div id="playlist-container">
<div class="top">
<div class="queue">\(playlistText)</div>
<div class="close-playlist"><svg><use href='#\(AudioPlayerCloseIcon.name)'></use></svg></div>
<div class="close-playlist">\(Icon.AudioPlayer.Close.usageString)</div>
</div>
<div class="playlist">
"""
@ -80,12 +80,12 @@ struct AudioPlayer: HtmlProducer {
<span data-amplitude-song-info="artist" class="song-artist"></span>
</div>
<div class="playlist-control-wrapper">
<svg class="amplitude-prev" id="playlist-previous"><use href='#\(AudioPlayerPreviousIcon.name)'></use></svg>
<svg class="amplitude-prev" id="playlist-previous">\(Icon.AudioPlayer.Previous.usageContent)</svg>
<div class="amplitude-play-pause" id="playlist-play-pause">
<svg class="play-icon"><use href='#\(AudioPlayerPlayIcon.name)'></use></svg>
<svg class="pause-icon"><use href='#\(AudioPlayerPauseIcon.name)'></use></svg>
<svg class="play-icon">\(Icon.AudioPlayer.Play.usageContent)</svg>
<svg class="pause-icon">\(Icon.AudioPlayer.Pause.usageContent)</svg>
</div>
<svg class="amplitude-next" id="playlist-next"><use href='#\(AudioPlayerNextIcon.name)'></use></svg>
<svg class="amplitude-next" id="playlist-next">\(Icon.AudioPlayer.Next.usageContent)</svg>
</div>
</div>
</div>