Still converting to bootstrap 5. Converted some dropdowns + some nav menus

approot/artists.xml

@@ -3,10 +3,31 @@
 <!--FORMS message blocks-->
 
 <message id="Lms.Explore.Artists.template">
-	${mode class="nav nav-pills mb-1"}
-	<div class="row mb-3">
+	<div class="mb-3">
+		<ul class="nav nav-pills mb-1">
+			<li class="nav-item">
+				${random class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${starred class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${recently-played class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${most-played class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${recently-added class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${all class="nav-link"}
+			</li>
+		</ul>
+		<div class="row">
 			<div class="col-lg-3">
-			${link-type}
+				${link-type class="form-select"}
+			</div>
 		</div>
 	</div>
 	${artists}

approot/release.xml

@@ -19,9 +19,9 @@
 			${clusters class="mb-2"}
 		</div>
 		<div class="col-12">
-			<div class="mb-3">
+			<div class="mb-3 d-flex">
 				${play-btn class="btn btn-outline-primary me-2"}
-				<span class="dropdown">
+				<div class="dropdown d-inline-block">
 					${more-btn class="btn btn-outline-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>
@@ -32,7 +32,7 @@
 						${</if-has-mbid>}
 						<li>${download class="btn dropdown-item"}</li>
 					</ul>
-				</span>
+				</div>
 			</div>
 			${container class="d-grid gap-3"}
 		</div>
@@ -80,16 +80,16 @@
 		<div class="p-2 d-none d-sm-block text-muted">
 			${duration}
 		</div>
-		<div class="p-2">
+		<div class="p-2 d-flex">
 			${play-btn class="btn btn-sm btn-outline-secondary border-0"}
-			<span class="dropdown">
+			<div class="dropdown d-inline-block">
 				${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
 				<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
 					<li>${play-last class="btn dropdown-item"}</li>
 					<li>${star class="btn dropdown-item"}</li>
 					<li>${download class="btn dropdown-item"}</li>
 				</ul>
-			</span>
+			</div>
 		</div>
 	</div>
 </message>

approot/releases.xml

@@ -24,7 +24,16 @@
 				${all class="nav-link"}
 			</li>
 		</ul>
-		${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
+		<div class="d-flex">
+			${play-btn class="btn btn-outline-primary me-2"}
+			<div class="dropdown d-inline-block">
+				${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-outline-primary"}
+				<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
+					<li>${play-last class="btn dropdown-item"}</li>
+					<li>${play-shuffled class="btn dropdown-item"}</li>
+				</ul>
+			</div>
+		</div>
 	</div>
 	${releases}
 </message>

approot/tracks.xml

@@ -5,8 +5,36 @@
 
 <message id="Lms.Explore.Tracks.template">
 	<div class="mb-3">
-		${mode class="nav nav-pills mb-2"}
-		${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
+		<ul class="nav nav-pills mb-2">
+			<li class="nav-item">
+				${random class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${starred class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${recently-played class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${most-played class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${recently-added class="nav-link"}
+			</li>
+			<li class="nav-item">
+				${all class="nav-link"}
+			</li>
+		</ul>
+		<div class="d-flex">
+			${play-btn class="btn btn-outline-primary me-2"}
+			<div class="dropdown d-inline-block">
+				${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-outline-primary"}
+				<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
+					<li>${play-last class="btn dropdown-item"}</li>
+					<li>${play-shuffled class="btn dropdown-item"}</li>
+				</ul>
+			</div>
+		</div>
 	</div>
 	${tracks}
 </message>
@@ -27,15 +55,17 @@
 			</div>
 			<div class="col-2 col-sm-2 col-md-2">
 				${duration}
+				<div class="d-flex">
 					${play-btn class="btn btn-sm btn-outline-secondary border-0"}
-				<span class="dropdown">
+					<div class="dropdown d-inline-block">
 						${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
 						<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
 							<li>${play-last class="btn dropdown-item"}</li>
 							<li>${star class="btn dropdown-item"}</li>
 							<li>${download class="btn dropdown-item"}</li>
 						</ul>
-				</span>
+					</div>
+				</div>
 			</div>
 		</div>
 </message>

src/lms/ui/explore/ArtistsView.cpp

@@ -19,7 +19,7 @@
 
 #include "ArtistsView.hpp"
 
-#include <Wt/WMenu.h>
+#include <Wt/WPushButton.h>
 
 #include "services/database/Artist.hpp"
 #include "services/database/Session.hpp"
@@ -45,25 +45,30 @@ Artists::Artists(Filters& filters)
 {
 	addFunction("tr", &Wt::WTemplate::Functions::tr);
 
+	auto bindMenuItem {[this](const std::string& var, const Wt::WString& title, ArtistCollector::Mode mode)
 	{
-		auto* menu {bindNew<Wt::WMenu>("mode")};
-
-		auto addItem = [this](Wt::WMenu& menu,const Wt::WString& str, ArtistCollector::Mode mode)
+		auto *menuItem {bindNew<Wt::WPushButton>(var, title)};
+		menuItem->clicked().connect([=]
 		{
-			auto* item {menu.addItem(str)};
-			item->clicked().connect([this, mode] { refreshView(mode); });
+			refreshView(mode);
+			_currentActiveItem->removeStyleClass("active");
+			menuItem->addStyleClass("active");
+			_currentActiveItem = menuItem;
+		});
 
 		if (mode == _defaultMode)
-				item->renderSelected(true);
-		};
-
-		addItem(*menu, Wt::WString::tr("Lms.Explore.random"), ArtistCollector::Mode::Random);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.starred"), ArtistCollector::Mode::Starred);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.recently-played"), ArtistCollector::Mode::RecentlyPlayed);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.most-played"), ArtistCollector::Mode::MostPlayed);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.recently-added"), ArtistCollector::Mode::RecentlyAdded);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.all"), ArtistCollector::Mode::All);
+		{
+			_currentActiveItem = menuItem;
+			_currentActiveItem->addStyleClass("active");
 		}
+	}};
+
+	bindMenuItem("random", Wt::WString::tr("Lms.Explore.random"), ArtistCollector::Mode::Random);
+	bindMenuItem("starred", Wt::WString::tr("Lms.Explore.starred"), ArtistCollector::Mode::Starred);
+	bindMenuItem("recently-played", Wt::WString::tr("Lms.Explore.recently-played"), ArtistCollector::Mode::RecentlyPlayed);
+	bindMenuItem("most-played", Wt::WString::tr("Lms.Explore.most-played"), ArtistCollector::Mode::MostPlayed);
+	bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), ArtistCollector::Mode::RecentlyAdded);
+	bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), ArtistCollector::Mode::All);
 
 	_linkType = bindNew<Wt::WComboBox>("link-type");
 	_linkType->setModel(std::make_shared<ArtistLinkModel>());

src/lms/ui/explore/ArtistsView.hpp

@@ -48,6 +48,7 @@ namespace UserInterface
 			static constexpr std::size_t _batchSize {30};
 			static constexpr std::size_t _maxCount {256};
 
+			Wt::WWidget*				_currentActiveItem {};
 			InfiniteScrollingContainer* _container {};
 			ArtistCollector				_artistCollector;
 			Wt::WComboBox*				_linkType {};

src/lms/ui/explore/ReleasesView.cpp

@@ -19,14 +19,13 @@
 
 #include "ReleasesView.hpp"
 
-#include <Wt/WMenu.h>
-#include <Wt/WPopupMenu.h>
 #include <Wt/WPushButton.h>
-#include <Wt/WText.h>
 
 #include "services/database/Release.hpp"
 #include "services/database/Session.hpp"
+
 #include "common/InfiniteScrollingContainer.hpp"
+#include "common/Template.hpp"
 #include "ReleaseListHelpers.hpp"
 #include "Filters.hpp"
 #include "LmsApplication.hpp"
@@ -36,10 +35,11 @@ using namespace Database;
 namespace UserInterface {
 
 Releases::Releases(Filters& filters)
-: Wt::WTemplate {Wt::WString::tr("Lms.Explore.Releases.template")}
+: Template {Wt::WString::tr("Lms.Explore.Releases.template")}
 , _releaseCollector {filters, _defaultMode, _maxCount}
 {
 	addFunction("tr", &Wt::WTemplate::Functions::tr);
+	addFunction("id", &Wt::WTemplate::Functions::id);
 
 	auto bindMenuItem {[this](const std::string& var, const Wt::WString& title, ReleaseCollector::Mode mode)
 	{
@@ -71,25 +71,19 @@ Releases::Releases(Filters& filters)
 	{
 		releasesAction.emit(PlayQueueAction::Play, getAllReleases());
 	});
-	Wt::WPushButton* moreBtn {bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
-	moreBtn->clicked().connect([=]
-	{
-		Wt::WPopupMenu* popup {LmsApp->createPopupMenu()};
 
-		popup->addItem(Wt::WString::tr("Lms.Explore.play-shuffled"))
-			->triggered().connect([this]
+	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)
+		->clicked().connect([=]
 		{
 			releasesAction.emit(PlayQueueAction::PlayShuffled, getAllReleases());
 		});
-		popup->addItem(Wt::WString::tr("Lms.Explore.play-last"))
-			->triggered().connect([this]
+	bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last"), Wt::TextFormat::Plain)
+		->clicked().connect([=]
 		{
 			releasesAction.emit(PlayQueueAction::PlayLast, getAllReleases());
 		});
 
-		popup->popup(moreBtn);
-	});
-
 	_container = bindNew<InfiniteScrollingContainer>("releases", Wt::WString::tr("Lms.Explore.Releases.template.container"));
 	_container->onRequestElements.connect([this]
 	{

src/lms/ui/explore/ReleasesView.hpp

@@ -19,12 +19,11 @@
 
 #pragma once
 
-#include <unordered_map>
-
 #include <Wt/WContainerWidget.h>
-#include <Wt/WTemplate.h>
 
 #include "services/database/Types.hpp"
+
+#include "common/Template.hpp"
 #include "PlayQueueAction.hpp"
 #include "ReleaseCollector.hpp"
 
@@ -33,7 +32,7 @@ namespace UserInterface
 	class Filters;
 	class InfiniteScrollingContainer;
 
-	class Releases : public Wt::WTemplate
+	class Releases : public Template
 	{
 		public:
 			Releases(Filters& filters);

src/lms/ui/explore/SearchView.hpp

@@ -19,9 +19,6 @@
 
 #pragma once
 
-#include <string>
-#include <string_view>
-#include <vector>
 #include <unordered_map>
 
 #include <Wt/WContainerWidget.h>

src/lms/ui/explore/TrackCollector.hpp

@@ -19,8 +19,6 @@
 
 #pragma once
 
-#include <vector>
-
 #include "services/database/Object.hpp"
 #include "services/database/TrackId.hpp"
 #include "DatabaseCollectorBase.hpp"

src/lms/ui/explore/TracksView.cpp

@@ -19,10 +19,7 @@
 
 #include "TracksView.hpp"
 
-#include <Wt/WMenu.h>
-#include <Wt/WPopupMenu.h>
 #include <Wt/WPushButton.h>
-#include <Wt/WText.h>
 
 #include "services/database/Session.hpp"
 #include "services/database/Track.hpp"
@@ -38,56 +35,55 @@ using namespace Database;
 namespace UserInterface {
 
 Tracks::Tracks(Filters& filters)
-: Wt::WTemplate {Wt::WString::tr("Lms.Explore.Tracks.template")},
+: Template {Wt::WString::tr("Lms.Explore.Tracks.template")},
 _trackCollector {filters, _defaultMode, _maxCount}
 {
 	addFunction("tr", &Wt::WTemplate::Functions::tr);
+	addFunction("id", &Wt::WTemplate::Functions::id);
 
+	auto bindMenuItem {[this](const std::string& var, const Wt::WString& title, TrackCollector::Mode mode)
 	{
-		auto* menu {bindNew<Wt::WMenu>("mode")};
-
-		auto addItem = [this](Wt::WMenu& menu,const Wt::WString& str, TrackCollector::Mode mode)
+		auto *menuItem {bindNew<Wt::WPushButton>(var, title)};
+		menuItem->clicked().connect([=]
 		{
-			auto* item {menu.addItem(str)};
-			item->clicked().connect([this, mode] { refreshView(mode); });
+			refreshView(mode);
+			_currentActiveItem->removeStyleClass("active");
+			menuItem->addStyleClass("active");
+			_currentActiveItem = menuItem;
+		});
 
 		if (mode == _defaultMode)
-				item->renderSelected(true);
-		};
-
-		addItem(*menu, Wt::WString::tr("Lms.Explore.random"), TrackCollector::Mode::Random);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.starred"), TrackCollector::Mode::Starred);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.recently-played"), TrackCollector::Mode::RecentlyPlayed);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.most-played"), TrackCollector::Mode::MostPlayed);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.recently-added"), TrackCollector::Mode::RecentlyAdded);
-		addItem(*menu, Wt::WString::tr("Lms.Explore.all"), TrackCollector::Mode::All);
+		{
+			_currentActiveItem = menuItem;
+			_currentActiveItem->addStyleClass("active");
 		}
+	}};
 
-	Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
-	playBtn->clicked().connect([=]
+	bindMenuItem("random", Wt::WString::tr("Lms.Explore.random"), TrackCollector::Mode::Random);
+	bindMenuItem("starred", Wt::WString::tr("Lms.Explore.starred"), TrackCollector::Mode::Starred);
+	bindMenuItem("recently-played", Wt::WString::tr("Lms.Explore.recently-played"), TrackCollector::Mode::RecentlyPlayed);
+	bindMenuItem("most-played", Wt::WString::tr("Lms.Explore.most-played"), TrackCollector::Mode::MostPlayed);
+	bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), TrackCollector::Mode::RecentlyAdded);
+	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)
+		->clicked().connect([=]
 		{
 			tracksAction.emit(PlayQueueAction::Play, getAllTracks());
 		});
 
-	Wt::WPushButton* moreBtn {bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
-	moreBtn->clicked().connect([=]
-	{
-		Wt::WPopupMenu* popup {LmsApp->createPopupMenu()};
-
-		popup->addItem(Wt::WString::tr("Lms.Explore.play-shuffled"))
-			->triggered().connect(this, [this]
+	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)
+		->clicked().connect([=]
 		{
 			tracksAction.emit(PlayQueueAction::PlayShuffled, getAllTracks());
 		});
-		popup->addItem(Wt::WString::tr("Lms.Explore.play-last"))
-			->triggered().connect(this, [this]
+	bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last"), Wt::TextFormat::Plain)
+		->clicked().connect([=]
 		{
 			tracksAction.emit(PlayQueueAction::PlayLast, getAllTracks());
 		});
 
-		popup->popup(moreBtn);
-	});
-
 	_container = bindNew<InfiniteScrollingContainer>("tracks");
 	_container->onRequestElements.connect([this]
 	{

src/lms/ui/explore/TracksView.hpp

@@ -19,22 +19,18 @@
 
 #pragma once
 
-#include <unordered_map>
-
-#include <Wt/WContainerWidget.h>
-#include <Wt/WTemplate.h>
-
 #include "services/database/Types.hpp"
+
+#include "common/Template.hpp"
 #include "PlayQueueAction.hpp"
 #include "TrackCollector.hpp"
 
 namespace UserInterface
 {
-
 	class Filters;
 	class InfiniteScrollingContainer;
 
-	class Tracks : public Wt::WTemplate
+	class Tracks : public Template
 	{
 		public:
 			Tracks(Filters& filters);
@@ -52,9 +48,9 @@ namespace UserInterface
 			static constexpr std::size_t _batchSize {6};
 			static constexpr std::size_t _maxCount {160};
 
+			Wt::WWidget*				_currentActiveItem {};
 			InfiniteScrollingContainer* _container {};
 			TrackCollector				_trackCollector;
 	};
-
 } // namespace UserInterface