Still converting to bootstrap 5. Reworked play/more button

This commit is contained in:
emeric
2022-05-24 23:39:39 +02:00
parent 6fa5cad955
commit 080ed0bc6d
14 changed files with 50 additions and 58 deletions
+4 -6
View File
@@ -6,11 +6,10 @@
<div class="mb-3"> <div class="mb-3">
<h3>${name}</h3> <h3>${name}</h3>
${clusters class="mb-2"} ${clusters class="mb-2"}
<div class="d-flex"> <div class="btn-group">
${play-btn class="btn btn-primary me-2"} ${play-btn class="btn btn-primary"}
<div class="dropdown d-inline-block"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
${more-btn class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"} <ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-shuffled class="btn dropdown-item"}</li> <li>${play-shuffled class="btn dropdown-item"}</li>
<li>${play-last class="btn dropdown-item"}</li> <li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li> <li>${star class="btn dropdown-item"}</li>
@@ -21,7 +20,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
${<if-has-release>} ${<if-has-release>}
${releases class="mb-3"} ${releases class="mb-3"}
${</if-has-release>} ${</if-has-release>}
+1 -1
View File
@@ -4,7 +4,7 @@
<message id="Lms.Explore.Artists.template"> <message id="Lms.Explore.Artists.template">
<div class="mb-3"> <div class="mb-3">
<ul class="nav nav-pills mb-1"> <ul class="nav nav-pills mb-2">
<li class="nav-item"> <li class="nav-item">
${random class="nav-link"} ${random class="nav-link"}
</li> </li>
+2 -2
View File
@@ -15,13 +15,13 @@
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="d-inline-flex me-2"> <div class="d-inline-flex me-2">
<button id="lms-mp-previous" class="btn btn-outline-primary border-0 d-none d-sm-block"> <button id="lms-mp-previous" class="btn btn-sm btn-outline-primary border-0">
<i class="fa fa-fw fa-step-backward"/> <i class="fa fa-fw fa-step-backward"/>
</button> </button>
<button id="lms-mp-playpause" class="btn btn-outline-primary border-0"> <button id="lms-mp-playpause" class="btn btn-outline-primary border-0">
<i class="fa fa-fw fa-play"/> <i class="fa fa-fw fa-play"/>
</button> </button>
<button id="lms-mp-next" class="btn btn-outline-primary border-0"> <button id="lms-mp-next" class="btn btn-sm btn-outline-primary border-0">
<i class="fa fa-fw fa-step-forward"/> <i class="fa fa-fw fa-step-forward"/>
</button> </button>
</div> </div>
+1
View File
@@ -121,6 +121,7 @@
<message id="Lms.Explore.most-played">Most played</message> <message id="Lms.Explore.most-played">Most played</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message> <message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message> <message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message>
<message id="Lms.Explore.play">Play</message>
<message id="Lms.Explore.play-last">Play last</message> <message id="Lms.Explore.play-last">Play last</message>
<message id="Lms.Explore.play-shuffled">Play shuffled</message> <message id="Lms.Explore.play-shuffled">Play shuffled</message>
<message id="Lms.Explore.random">Random</message> <message id="Lms.Explore.random">Random</message>
+1
View File
@@ -121,6 +121,7 @@
<message id="Lms.Explore.most-played">Plus joués</message> <message id="Lms.Explore.most-played">Plus joués</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message> <message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message> <message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message>
<message id="Lms.Explore.play">Jouer</message>
<message id="Lms.Explore.play-last">Jouer en dernier</message> <message id="Lms.Explore.play-last">Jouer en dernier</message>
<message id="Lms.Explore.play-shuffled">Jouer aléatoirement</message> <message id="Lms.Explore.play-shuffled">Jouer aléatoirement</message>
<message id="Lms.Explore.random">Aléatoire</message> <message id="Lms.Explore.random">Aléatoire</message>
+1
View File
@@ -120,6 +120,7 @@
<message id="Lms.Explore.most-played">Più ascoltati</message> <message id="Lms.Explore.most-played">Più ascoltati</message>
<message id="Lms.Explore.musicbrainz-artist">Artista MusicBrainz</message> <message id="Lms.Explore.musicbrainz-artist">Artista MusicBrainz</message>
<message id="Lms.Explore.musicbrainz-release">Album MusicBrainz</message> <message id="Lms.Explore.musicbrainz-release">Album MusicBrainz</message>
<message id="Lms.Explore.play-last">Aggiungi alla coda di riproduzione</message> <message id="Lms.Explore.play-last">Aggiungi alla coda di riproduzione</message>
<message id="Lms.Explore.play-shuffled">Aggiungi alla coda di riproduzione mischiando</message> <message id="Lms.Explore.play-shuffled">Aggiungi alla coda di riproduzione mischiando</message>
<message id="Lms.Explore.random">Casuali</message> <message id="Lms.Explore.random">Casuali</message>
+1
View File
@@ -121,6 +121,7 @@
<message id="Lms.Explore.most-played">播放最多</message> <message id="Lms.Explore.most-played">播放最多</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz 歌手</message> <message id="Lms.Explore.musicbrainz-artist">MusicBrainz 歌手</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz 专辑</message> <message id="Lms.Explore.musicbrainz-release">MusicBrainz 专辑</message>
<message id="Lms.Explore.play-last">播放列表</message> <message id="Lms.Explore.play-last">播放列表</message>
<message id="Lms.Explore.play-shuffled">随机播放</message> <message id="Lms.Explore.play-shuffled">随机播放</message>
<message id="Lms.Explore.random">随机</message> <message id="Lms.Explore.random">随机</message>
+5 -7
View File
@@ -17,13 +17,10 @@
${<if-has-various-release-artists>}<div class="text-secondary">${tr:Lms.Explore.various-artists}</div>${</if-has-various-release-artists>} ${<if-has-various-release-artists>}<div class="text-secondary">${tr:Lms.Explore.various-artists}</div>${</if-has-various-release-artists>}
<div class="small text-muted">${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</div> <div class="small text-muted">${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</div>
${clusters class="mb-2"} ${clusters class="mb-2"}
</div> <div class="btn-group">
<div class="col-12"> ${play-btn class="btn btn-primary"}
<div class="mb-3 d-flex"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
${play-btn class="btn btn-primary me-2"} <ul class="dropdown-menu">
<div class="dropdown d-inline-block">
${more-btn class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-shuffled class="btn dropdown-item"}</li> <li>${play-shuffled class="btn dropdown-item"}</li>
<li>${play-last class="btn dropdown-item"}</li> <li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li> <li>${star class="btn dropdown-item"}</li>
@@ -34,6 +31,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-12">
${container class="d-grid gap-3"} ${container class="d-grid gap-3"}
${<if-has-copyright>} ${<if-has-copyright>}
<div class="pt-1 mt-1 border-top border-dark small text-muted fw-lighter fst-italic">${copyright class="text-reset"}</div> <div class="pt-1 mt-1 border-top border-dark small text-muted fw-lighter fst-italic">${copyright class="text-reset"}</div>
+4 -6
View File
@@ -24,17 +24,15 @@
${all class="nav-link"} ${all class="nav-link"}
</li> </li>
</ul> </ul>
<div class="d-flex"> <div class="btn-group">
${play-btn class="btn btn-primary me-2"} ${play-btn class="btn btn-primary"}
<div class="dropdown d-inline-block"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary"} <ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li> <li>${play-last class="btn dropdown-item"}</li>
<li>${play-shuffled class="btn dropdown-item"}</li> <li>${play-shuffled class="btn dropdown-item"}</li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
${releases} ${releases}
</message> </message>
+4 -6
View File
@@ -25,17 +25,15 @@
${all class="nav-link"} ${all class="nav-link"}
</li> </li>
</ul> </ul>
<div class="d-flex"> <div class="btn-group">
${play-btn class="btn btn-primary me-2"} ${play-btn class="btn btn-primary"}
<div class="dropdown d-inline-block"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary"} <ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li> <li>${play-last class="btn dropdown-item"}</li>
<li>${play-shuffled class="btn dropdown-item"}</li> <li>${play-shuffled class="btn dropdown-item"}</li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
${tracks} ${tracks}
</message> </message>
+1 -2
View File
@@ -138,8 +138,7 @@ Artist::refreshView()
bindString("name", Wt::WString::fromUTF8(artist->getName()), Wt::TextFormat::Plain); bindString("name", Wt::WString::fromUTF8(artist->getName()), Wt::TextFormat::Plain);
bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML); bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.play"), Wt::TextFormat::XHTML)
bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)
->clicked().connect([=] ->clicked().connect([=]
{ {
artistsAction.emit(PlayQueueAction::Play, {_artistId}); artistsAction.emit(PlayQueueAction::Play, {_artistId});
+1 -2
View File
@@ -151,8 +151,7 @@ Release::refreshView()
} }
} }
bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML); bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.play"), Wt::TextFormat::XHTML)
bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)
->clicked().connect([=] ->clicked().connect([=]
{ {
releasesAction.emit(PlayQueueAction::Play, {*releaseId}); releasesAction.emit(PlayQueueAction::Play, {*releaseId});
+1 -2
View File
@@ -66,13 +66,12 @@ Releases::Releases(Filters& filters)
bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), ReleaseCollector::Mode::RecentlyAdded); bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), ReleaseCollector::Mode::RecentlyAdded);
bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), ReleaseCollector::Mode::All); bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), ReleaseCollector::Mode::All);
Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)}; Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.play"), Wt::TextFormat::XHTML)};
playBtn->clicked().connect([this] playBtn->clicked().connect([this]
{ {
releasesAction.emit(PlayQueueAction::Play, getAllReleases()); releasesAction.emit(PlayQueueAction::Play, getAllReleases());
}); });
bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML);
bindNew<Wt::WPushButton>("play-shuffled", Wt::WString::tr("Lms.Explore.play-shuffled"), Wt::TextFormat::Plain) bindNew<Wt::WPushButton>("play-shuffled", Wt::WString::tr("Lms.Explore.play-shuffled"), Wt::TextFormat::Plain)
->clicked().connect([=] ->clicked().connect([=]
{ {
+1 -2
View File
@@ -66,13 +66,12 @@ _trackCollector {filters, _defaultMode, _maxCount}
bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), TrackCollector::Mode::RecentlyAdded); bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), TrackCollector::Mode::RecentlyAdded);
bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), TrackCollector::Mode::All); bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), TrackCollector::Mode::All);
bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML) bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.play"), Wt::TextFormat::XHTML)
->clicked().connect([=] ->clicked().connect([=]
{ {
tracksAction.emit(PlayQueueAction::Play, getAllTracks()); tracksAction.emit(PlayQueueAction::Play, getAllTracks());
}); });
bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML);
bindNew<Wt::WPushButton>("play-shuffled", Wt::WString::tr("Lms.Explore.play-shuffled"), Wt::TextFormat::Plain) bindNew<Wt::WPushButton>("play-shuffled", Wt::WString::tr("Lms.Explore.play-shuffled"), Wt::TextFormat::Plain)
->clicked().connect([=] ->clicked().connect([=]
{ {