Some more polish

approot/playqueue.xml

@@ -29,7 +29,7 @@
 <message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-control-btn"></i></message>
 
 <message id="Lms.PlayQueue.template.entry">
-	<div class="row Lms-playqueue-entry Lms-entry-hoverable Lms-vertical-align">
+	<div class="row Lms-playqueue-entry Lms-entry-hoverable Lms-vertical-align ${is-selected}">
 		<div class="col-xs-9 Lms-playqueue-entry-name">
 			<h4><div class="Lms-trackname text-primary">${name}</div></h4>
 			${<if-has-artists-or-release>}

approot/release.xml

@@ -23,7 +23,7 @@
 </message>
 
 <message id="Lms.Explore.Release.template.entry">
-	<div class="row Lms-explore-release-entry Lms-entry-hoverable Lms-vertical-align">
+	<div class="row Lms-explore-release-entry Lms-entry-hoverable Lms-vertical-align ${is-playing}">
 		<div class="col-xs-1 Lms-explore-release-entry-tracknumber text-muted">
 			${<if-has-disc-number>}${disc-number}-${</if-has-disc-number>}${<if-has-track-number>}${track-number}${</if-has-track-number>}
 		</div>

docroot/css/lms-darkly.css

@@ -1,6 +1,7 @@
 :root {
   --hover-color: #00bc8c;
   --body-color: #cacaca;
+  --playing-background-color: #375a7f4f;
   --slider-background-color: #5a5a5a;
 }
 
@@ -17,7 +18,7 @@ a.Lms-artistname.text-primary:hover {
 	color: var(--hover-color)
 }
 
-.Lms-player-btn {
+.Lms-control-btn {
 	color: var(--body-color)
 }
 
@@ -33,12 +34,6 @@ a.Lms-releasename.text-primary:hover {
 	color: var(--body-color)
 }
 
-/*
-.Lms-entry-hoverable:hover {
-	filter: drop-shadow(0 0 0.2rem darkgrey);
-}
-*/
-
 .media, .media-body {
 	overflow: visible;
 }

docroot/css/lms-flatly.css

@@ -1,7 +1,8 @@
 :root {
-  --hover-color: #18bc9c;
   --body-color: #2c3e50;
-  --slider-background-color: #c0cfde;
+  --hover-color: #18bc9c;
+  --playing-background-color: #2c3e5029;
+  --slider-background-color: #2c3e5029;
 }
 
 .Lms-artistname.text-muted {
@@ -9,12 +10,6 @@
 	color: #7e8f9e;
 }
 
-/*
-.Lms-entry-hoverable:hover {
-	filter: drop-shadow(0 0 0.2rem darkgrey);
-}
-*/
-
 .media, .media-body {
 	overflow: visible;
 }

docroot/css/lms.css

@@ -179,6 +179,8 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 
 .Lms-explore-release-entry-playing {
 	font-weight: bold;
+	border-radius: 3px;
+	background-color: var(--playing-background-color);
 }
 
 .Lms-explore-release-entry-track-duration {
@@ -298,7 +300,9 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 }
 
 .Lms-playqueue-selected {
-	font-weight: 800;
+	font-weight: bold;
+	border-radius: 3px;
+	background-color: var(--playing-background-color);
 }
 
 .Lms-playqueue-selected h4 {

src/lms/ui/LmsApplication.cpp

@@ -124,11 +124,11 @@ LmsApplication::LmsApplication(const Wt::WEnvironment& env,
 			{
 				return
 				{
-					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-flatly.min.css"}},
-					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-flatly.css"}},
-//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-darkly.min.css"}},
-//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-darkly.css"}},
-					Wt::WLinkedCssStyleSheet { Wt::WLink {"resources/themes/bootstrap/3/wt.css"}},
+//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-flatly.min.css"}},
+					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-darkly.min.css"}},
+					Wt::WLinkedCssStyleSheet {Wt::WLink {"resources/themes/bootstrap/3/wt.css"}},
+//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-flatly.css"}},
+					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-darkly.css"}},
 				};
 			}
 	};
@@ -491,6 +491,7 @@ LmsApplication::createHome()
 	// Contents
 	// Order is important in mainStack, see IdxRoot!
 	Wt::WStackedWidget* mainStack = main->bindNew<Wt::WStackedWidget>("contents");
+	mainStack->setAttributeValue("style", "overflow-x:visible;overflow-y:visible;");
 
 	Explore* explore = mainStack->addNew<Explore>();
 	PlayQueue* playqueue = mainStack->addNew<PlayQueue>();

src/lms/ui/PlayQueueView.cpp

@@ -284,14 +284,9 @@ PlayQueue::updateCurrentTrack(bool selected)
 	if (!_trackPos || *_trackPos >= static_cast<std::size_t>(_entriesContainer->count()))
 		return;
 
-	auto track = _entriesContainer->widget(*_trackPos);
-	if (track)
-	{
-		if (selected)
-			track->addStyleClass("Lms-playqueue-selected");
-		else
-			track->removeStyleClass("Lms-playqueue-selected");
-	}
+	Wt::WTemplate* entry {static_cast<Wt::WTemplate*>(_entriesContainer->widget(*_trackPos))};
+	if (entry)
+		entry->bindString("is-selected", selected ? "Lms-playqueue-selected" : "");
 }
 
 void

src/lms/ui/explore/Explore.cpp

@@ -119,6 +119,7 @@ Explore::Explore()
 
 	// Contents
 	Wt::WStackedWidget* contentsStack = bindNew<Wt::WStackedWidget>("contents");
+	contentsStack->setAttributeValue("style", "overflow-x:visible;overflow-y:visible;");
 
 	auto artists = std::make_unique<Artists>(_filters);
 	artists->artistsAdd.connect(this, &Explore::handleArtistsAdd);

src/lms/ui/explore/ReleaseView.cpp

@@ -212,11 +212,13 @@ Release::refresh()
 
 		LmsApp->getEvents().trackLoaded.connect(entry, [=] (Database::IdType loadedTrackId, bool /*play*/)
 		{
-			entry->toggleStyleClass("Lms-explore-release-entry-playing", loadedTrackId == trackId);
+			entry->bindString("is-playing", loadedTrackId == trackId ? "Lms-explore-release-entry-playing" : "");
 		});
 
 		if (LmsApp->getEvents().lastLoadedTrackId && *LmsApp->getEvents().lastLoadedTrackId == trackId)
-			entry->addStyleClass("Lms-explore-release-entry-playing");
+		{
+			entry->bindString("is-playing", "Lms-explore-release-entry-playing");
+		}
 	}
 }