Still converting

approot/artists.xml

@@ -3,27 +3,21 @@
 <!--FORMS message blocks-->
 
 <message id="Lms.Explore.Artists.template">
-	<div class="Lms-header">
-		${mode class="nav nav-pills Lms-explore-mode-container"}
-		<div class="row">
-			<div class="col-sm-2">
+	${mode class="nav nav-pills mb-1"}
+	<div class="row mb-3">
+		<div class="col-lg-3">
 			${link-type}
 		</div>
 	</div>
-	</div>
 	${artists}
 </message>
 
 <message id="Lms.Explore.Artists.template.entry">
-	<div class="Lms-explore-artists-entry Lms-entry-hoverable">
-		 <h4>${name class="Lms-btn Lms-artistname text-primary"}</h4>
-	</div>
+	${name}
 </message>
 
 <message id="Lms.Explore.Artists.template.entry-small">
-	<div class="Lms-explore-artists-entry-small Lms-entry-hoverable">
-		${name class="Lms-btn Lms-artistname text-primary"}
-	</div>
+	${name}
 </message>
 
 </messages>

approot/main.xml

@@ -1,8 +1,16 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <messages xmlns:if="Wt.WTemplate.conditions">
 
-<message id="Lms.template">
-	<nav class="navbar navbar-expand-md navbar-light bg-light">
+<message id="Lms.main.template">
+	${navbar}
+	<div class="container">
+		${contents class="Lms-contents"}
+	</div>
+	${player class="fixed-bottom bg-light Lms-player"}
+</message>
+
+<message id="Lms.main.template.navbar">
+	<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
 		<div class="container">
 			<form class="d-flex">
 				${search class="form-control me-2" type="search"}
@@ -13,22 +21,22 @@
 			<div class="collapse navbar-collapse" id="navbarSupportedContent">
 				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
 					<li class="nav-item">
-						${releases class="nav-link Lms-btn"}
+						${releases class="nav-link"}
 					</li>
 					<li class="nav-item">
-						${artists class="nav-link Lms-btn"}
+						${artists class="nav-link"}
 					</li>
 					<li class="nav-item">
-						${tracks class="nav-link Lms-btn"}
+						${tracks class="nav-link"}
 					</li>
 					<li class="nav-item">
-						${playqueue class="nav-link Lms-btn"}
+						${playqueue class="nav-link"}
 					</li>
 					<li class="nav-item">
 						${filters class="nav-link Lms-clusters-control"}
 					</li>
 				</ul>
-				<div class="navbar-nav me-auto mb-2 mb-lg-0">
+				<div class="navbar-nav mb-2 mb-lg-0">
 				${<if-is-admin>}
 					<li class="nav-item dropdown">
 						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="${tr:Lms.administration}">
@@ -55,20 +63,6 @@
 			</div>
 		</div>
 	</nav>
-	<div class="container">
-		${contents class="Lms-contents"}
-	</div>
-	${player class="Lms-player"}
-</message>
-
-<message id="Lms.LoadingIndicator.template">
-	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
-	<span class="sr-only">${tr:Lms.loading}</span>
-</message>
-
-<message id="Lms.infinite-scrolling-container">
-	${elements}
-	${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
 </message>
 
 </messages>

approot/misc.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<messages xmlns:if="Wt.WTemplate.conditions">
+
+<message id="Lms.LoadingIndicator.template">
+	<div class="my-5 text-center">
+		<div class="spinner-border" role="status">
+			<span class="visually-hidden">${tr:Lms.loading}</span>
+		</div>
+	</div>
+</message>
+
+<message id="Lms.infinite-scrolling-container">
+	${elements}
+	${loading-indicator}
+</message>
+
+</messages>

approot/release.xml

@@ -7,52 +7,46 @@
 </message>
 
 <message id="Lms.Explore.Release.template">
-	<div class="row Lms-explore-release">
+	<div class="row mb-3">
 		<div class="col-md-4">
 			${cover class="Lms-explore-release-cover"}
 		</div>
 		<div class="col-md-8">
-			<div class="Lms-header">
-				<h3><div class="Lms-releasename text-primary">${name}</div></h3>
+			<div class="mb-3">
+				${name}
 				${<if-has-release-artists>}${artists}${</if-has-release-artists>}
-				${<if-has-various-release-artists>}<div class="Lms-artistname text-muted">${tr:Lms.Explore.various-artists}</div>${</if-has-various-release-artists>}
-				<div class="text-muted"><small>${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</small></div>
+				${<if-has-various-release-artists>}${tr:Lms.Explore.various-artists}${</if-has-various-release-artists>}
+				<small>${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</small>
 				${clusters}
-				${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
+				${play-btn}${more-btn}
 			</div>
 			${container}
 		</div>
 	</div>
 	<div class="row">
 		${<if-has-similar-releases>}
-		<div class="col-12 col-md-8">
-			<div class="well well-sm">
+		<div class="col-12">
 			<h3>${tr:Lms.Explore.Release.similar-releases}</h3>
 			${similar-releases class="row"}
 		</div>
-		</div>
 		${</if-has-similar-releases>}
 		${<if-has-copyright>}
-		<div class="col-xs-12 col-md-4">
-			<div class="well well-sm">
+		<div class="col-12 col-md-4">
 			<h3>${tr:Lms.Explore.Release.copyright}</h3>
 			${copyright class="text-muted"}
 		</div>
-		</div>
 		${</if-has-copyright>}
 		${<if-has-mbid>}
-		<div class="col-xs-12 col-md-4">
-			<div class="well well-sm">
+		<div class="col-12 col-md-4">
 			<h3>${tr:Lms.Explore.links}</h3>
 			${mbid-link class="Lms-btn text-muted"}
 		</div>
-		</div>
 		${</if-has-mbid>}
 	</div>
 </message>
 
 <message id="Lms.Explore.Release.template.entry-release-artist">
-	<h4>${artist class="Lms-btn Lms-artistname text-muted"}</h4>
+	${artist}
 </message>
 
 <message id="Lms.Explore.Release.template.entry-disc">

approot/releases.xml

@@ -3,16 +3,16 @@
 <messages xmlns:if="Wt.WTemplate.conditions">
 
 <message id="Lms.Explore.Releases.template">
-	<div>
-		${mode class="nav nav-pills Lms-explore-mode-container"}
-		${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
+	${mode class="nav nav-pills Lms-explore-mode-container mb-1"}
+	<div class="mb-3">
+		${play-btn}${more-btn}
 	</div>
 	${releases}
 </message>
 
 <message id="Lms.Explore.Releases.template.entry-grid">
 		<div class="card border-0">
-			${cover class="card-img-top"}
+			${cover class="shadow-sm"}
 			${release-name}
 			${<if-has-year>}${year}${</if-has-year>}
 			${<if-has-artist>}${artist-name}${</if-has-artist>}
@@ -22,7 +22,7 @@
 
 <message id="Lms.Explore.Releases.template.container">
 	${elements class="row gy-4"}
-	${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
+	${loading-indicator}
 </message>
 
 

approot/tracks.xml

@@ -4,9 +4,9 @@
 <!--FORMS message blocks-->
 
 <message id="Lms.Explore.Tracks.template">
-	<div class="Lms-header">
-		${mode class="nav nav-pills Lms-explore-mode-container"}
-		${play-btn class="Lms-explore-btn Lms-btn"}${more-btn class="Lms-explore-btn Lms-btn"}
+	${mode class="nav nav-pills Lms-explore-mode-container mb-1"}
+	<div class="mb-3">
+		${play-btn}${more-btn}
 	</div>
 	${tracks}
 </message>
@@ -40,13 +40,4 @@
 	<small>${artist class="Lms-btn Lms-artistname text-muted"}</small>
 </message>
 
-<message id="Lms.Explore.Tracks.template.container">
-	<div class="row">
-		<div class="col-lg-8">
-			${elements}
-			${loading-indicator class="Lms-horizontal-center Lms-loading-indicator"}
-		</div>
-	</div>
-</message>
-
 </messages>

src/lms/ui/LmsApplication.cpp

@@ -20,6 +20,7 @@
 #include "LmsApplication.hpp"
 
 #include <Wt/WAnchor.h>
+#include <Wt/WBootstrap5Theme.h>
 #include <Wt/WEnvironment.h>
 #include <Wt/WLineEdit.h>
 #include <Wt/WPopupMenu.h>
@@ -162,7 +163,13 @@ LmsApplication::~LmsApplication() = default;
 void
 LmsApplication::init()
 {
+	setTheme(std::make_shared<Wt::WBootstrap5Theme>());
+
 	useStyleSheet("resources/font-awesome/css/font-awesome.min.css");
+	useStyleSheet("css/lms.css");
+	require("js/mediaplayer.js");
+
+	setTitle("LMS");
 
 	// Add a resource bundle
 	messageResourceBundle().use(appRoot() + "admin-database");
@@ -175,24 +182,17 @@ LmsApplication::init()
 	messageResourceBundle().use(appRoot() + "error");
 	messageResourceBundle().use(appRoot() + "explore");
 	messageResourceBundle().use(appRoot() + "login");
+	messageResourceBundle().use(appRoot() + "main");
 	messageResourceBundle().use(appRoot() + "mediaplayer");
 	messageResourceBundle().use(appRoot() + "messages");
+	messageResourceBundle().use(appRoot() + "misc");
 	messageResourceBundle().use(appRoot() + "playqueue");
 	messageResourceBundle().use(appRoot() + "release");
 	messageResourceBundle().use(appRoot() + "releases");
 	messageResourceBundle().use(appRoot() + "search");
 	messageResourceBundle().use(appRoot() + "settings");
-	messageResourceBundle().use(appRoot() + "templates");
 	messageResourceBundle().use(appRoot() + "tracks");
 
-	// Require js here to avoid async problems
-	requireJQuery("js/jquery-1.10.2.min.js");
-	require("js/bootstrap-notify.js");
-	require("js/bootstrap.min.js");
-	require("js/mediaplayer.js");
-
-	setTitle("LMS");
-
 	// Handle Media Scanner events and other session events
 	enableUpdates(true);
 
@@ -218,8 +218,6 @@ LmsApplication::processPasswordAuth()
 		}
 	}
 
-	setTheme();
-
 	// If here is no account in the database, launch the first connection wizard
 	bool firstConnection {};
 	{
@@ -244,19 +242,6 @@ LmsApplication::processPasswordAuth()
 	}
 }
 
-void
-LmsApplication::setTheme()
-{
-	Database::UITheme theme {Database::User::defaultUITheme};
-	{
-		auto transaction {getDbSession().createSharedTransaction()};
-		if (const auto user {getUser()})
-			theme = user->getUITheme();
-	}
-
-	WApplication::setTheme(std::make_unique<LmsTheme>(theme));
-}
-
 void
 LmsApplication::finalize()
 {
@@ -320,22 +305,24 @@ LmsApplication::createCluster(Database::Cluster::pointer cluster, bool canDelete
 {
 	auto getStyleClass = [](const Database::Cluster::pointer cluster)
 	{
-		switch (cluster->getType()->getId().getValue() % 6)
+		switch (cluster->getType()->getId().getValue() % 8)
 		{
-			case 0: return "label-info";
-			case 1: return "label-warning";
-			case 2: return "label-primary";
-			case 3: return "label-default";
-			case 4: return "label-success";
-			case 5: return "label-danger";
+			case 0: return "bg-primary";
+			case 1: return "bg-secondary";
+			case 2: return "bg-success";
+			case 3: return "bg-danger";
+			case 4: return "bg-warning text-dark";
+			case 5: return "bg-info text-dark";
+			case 6: return "bg-light text-dark";
+			case 7: return "bg-dark";
 		}
-		return "label-default";
+		return "bg-primary";
 	};
 
 	const std::string styleClass {getStyleClass(cluster)};
 	auto res {std::make_unique<Wt::WText>(std::string {} + (canDelete ? "<i class=\"fa fa-times-circle\"></i> " : "") + Wt::WString::fromUTF8(cluster->getName()), Wt::TextFormat::UnsafeXHTML)};
 
-	res->setStyleClass("Lms-cluster label " + styleClass);
+	res->setStyleClass("badge me-1 " + styleClass);
 	res->setToolTip(cluster->getType()->getName(), Wt::TextFormat::Plain);
 	res->setInline(true);
 
@@ -439,7 +426,6 @@ LmsApplication::logoutUser()
 void
 LmsApplication::onUserLoggedIn()
 {
-	setTheme();
 	root()->clear();
 
 	LMS_LOG(UI, INFO) << "User '" << getUserLoginName() << "' logged in from '" << environment().clientAddress() << "', user agent = " << environment().userAgent();
@@ -468,37 +454,39 @@ LmsApplication::createHome()
 	declareJavaScriptFunction("onLoadCover", "function(id) { id.className += \" Lms-cover-loaded\"}");
 	doJavaScript("$('body').tooltip({ selector: '[data-toggle=\"tooltip\"]'})");
 
-	Wt::WTemplate* main {root()->addWidget(std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.template")))};
+	Wt::WTemplate* main {root()->addWidget(std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.main.template")))};
 
 	main->addFunction("tr", &Wt::WTemplate::Functions::tr);
 
+	Wt::WTemplate* navbar {main->bindNew<Wt::WTemplate>("navbar", Wt::WString::tr("Lms.main.template.navbar"))};
+
 	// MediaPlayer
 	_mediaPlayer = main->bindNew<MediaPlayer>("player");
 
-	main->bindNew<Wt::WAnchor>("title",  Wt::WLink {Wt::LinkType::InternalPath, defaultPath}, "LMS");
-	main->bindNew<Wt::WAnchor>("artists", Wt::WLink {Wt::LinkType::InternalPath, "/artists"}, Wt::WString::tr("Lms.Explore.artists"));
-	main->bindNew<Wt::WAnchor>("releases", Wt::WLink {Wt::LinkType::InternalPath, "/releases"}, Wt::WString::tr("Lms.Explore.releases"));
-	main->bindNew<Wt::WAnchor>("tracks", Wt::WLink {Wt::LinkType::InternalPath, "/tracks"}, Wt::WString::tr("Lms.Explore.tracks"));
+	navbar->bindNew<Wt::WAnchor>("title",  Wt::WLink {Wt::LinkType::InternalPath, defaultPath}, "LMS");
+	navbar->bindNew<Wt::WAnchor>("artists", Wt::WLink {Wt::LinkType::InternalPath, "/artists"}, Wt::WString::tr("Lms.Explore.artists"));
+	navbar->bindNew<Wt::WAnchor>("releases", Wt::WLink {Wt::LinkType::InternalPath, "/releases"}, Wt::WString::tr("Lms.Explore.releases"));
+	navbar->bindNew<Wt::WAnchor>("tracks", Wt::WLink {Wt::LinkType::InternalPath, "/tracks"}, Wt::WString::tr("Lms.Explore.tracks"));
 
-	Filters* filters {main->bindNew<Filters>("filters")};
-	main->bindNew<Wt::WAnchor>("playqueue", Wt::WLink {Wt::LinkType::InternalPath, "/playqueue"}, Wt::WString::tr("Lms.PlayQueue.playqueue"));
-	main->bindString("username", getUserLoginName(), Wt::TextFormat::Plain);
-	main->bindNew<Wt::WAnchor>("settings", Wt::WLink {Wt::LinkType::InternalPath, "/settings"}, Wt::WString::tr("Lms.Settings.menu-settings"));
+	Filters* filters {navbar->bindNew<Filters>("filters")};
+	navbar->bindNew<Wt::WAnchor>("playqueue", Wt::WLink {Wt::LinkType::InternalPath, "/playqueue"}, Wt::WString::tr("Lms.PlayQueue.playqueue"));
+	navbar->bindString("username", getUserLoginName(), Wt::TextFormat::Plain);
+	navbar->bindNew<Wt::WAnchor>("settings", Wt::WLink {Wt::LinkType::InternalPath, "/settings"}, Wt::WString::tr("Lms.Settings.menu-settings"));
 
 	{
-		Wt::WAnchor* logout {main->bindNew<Wt::WAnchor>("logout")};
+		Wt::WAnchor* logout {navbar->bindNew<Wt::WAnchor>("logout")};
 		logout->setText(Wt::WString::tr("Lms.logout"));
 		logout->clicked().connect(this, &LmsApplication::logoutUser);
 	}
 
-	Wt::WLineEdit* searchEdit {main->bindNew<Wt::WLineEdit>("search")};
+	Wt::WLineEdit* searchEdit {navbar->bindNew<Wt::WLineEdit>("search")};
 	searchEdit->setPlaceholderText(Wt::WString::tr("Lms.Explore.Search.search-placeholder"));
 
 	if (LmsApp->getUserType() == Database::UserType::ADMIN)
 	{
-		main->setCondition("if-is-admin", true);
-		main->bindNew<Wt::WAnchor>("database", Wt::WLink {Wt::LinkType::InternalPath, "/admin/database"}, Wt::WString::tr("Lms.Admin.Database.menu-database"));
-		main->bindNew<Wt::WAnchor>("users", Wt::WLink {Wt::LinkType::InternalPath, "/admin/users"}, Wt::WString::tr("Lms.Admin.Users.menu-users"));
+		navbar->setCondition("if-is-admin", true);
+		navbar->bindNew<Wt::WAnchor>("database", Wt::WLink {Wt::LinkType::InternalPath, "/admin/database"}, Wt::WString::tr("Lms.Admin.Database.menu-database"));
+		navbar->bindNew<Wt::WAnchor>("users", Wt::WLink {Wt::LinkType::InternalPath, "/admin/users"}, Wt::WString::tr("Lms.Admin.Users.menu-users"));
 	}
 
 	// Contents
@@ -639,6 +627,9 @@ LmsApplication::notifyMsg(MsgType type, const Wt::WString& message, std::chrono:
 {
 	LMS_LOG(UI, INFO) << "Notifying message '" << message.toUTF8() << "' of type '" << msgTypeToString(type) << "'";
 
+	// TODO
+	return;
+
 	std::ostringstream oss;
 
 	oss << "$.notify({"

src/lms/ui/LmsApplication.hpp

@@ -102,7 +102,6 @@ class LmsApplication : public Wt::WApplication
 
 	private:
 		void init();
-		void setTheme();
 		void processPasswordAuth();
 		void handleException(LmsApplicationException& e);
 		void goHomeAndQuit();

src/lms/ui/LmsTheme.cpp

@@ -32,6 +32,7 @@ LmsTheme::LmsTheme(Database::UITheme theme)
 void
 LmsTheme::setTheme(Database::UITheme )
 {
+
 /*	if (theme == _theme)
 		return;
 

src/lms/ui/explore/ReleaseListHelpers.cpp

@@ -45,7 +45,7 @@ namespace UserInterface::ReleaseListHelpers
 		Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
 		auto cover = std::make_unique<Wt::WImage>();
 		cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large));
-		cover->setStyleClass("img-fluid card-img-top");
+		cover->setStyleClass("img-fluid rounded");
 		cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
 		anchor->setImage(std::move(cover));
 

src/lms/ui/explore/TracksView.cpp

@@ -87,7 +87,7 @@ _trackCollector {filters, _defaultMode, _maxCount}
 		popup->popup(moreBtn);
 	});
 
-	_container = bindNew<InfiniteScrollingContainer>("tracks", Wt::WString::tr("Lms.Explore.Tracks.template.container"));
+	_container = bindNew<InfiniteScrollingContainer>("tracks");
 	_container->onRequestElements.connect([this]
 	{
 		addSome();