Updated some views

This commit is contained in:
emeric
2023-04-01 15:00:47 +02:00
parent faf6aca874
commit 2881f300c4
10 changed files with 80 additions and 26 deletions
+1 -1
View File
@@ -3,7 +3,7 @@
<message id="Lms.Admin.Users.template"> <message id="Lms.Admin.Users.template">
<h3>${tr:Lms.Admin.Users.users}</h3> <h3>${tr:Lms.Admin.Users.users}</h3>
${users class="d-grid gap-1 mb-3"} ${users class="d-grid gap-1 mb-3 Lms-row-container"}
${<if-can-create-user>} ${<if-can-create-user>}
${add-btn class="btn btn-primary"} ${add-btn class="btn btn-primary"}
${</if-can-create-user>} ${</if-can-create-user>}
+6 -1
View File
@@ -30,8 +30,13 @@
${entries} ${entries}
</message> </message>
<message id="Lms.PlayQueue.template.entry-container">
${elements class="Lms-row-container"}
${loading-indicator}
</message>
<message id="Lms.PlayQueue.template.entry"> <message id="Lms.PlayQueue.template.entry">
<div class="d-flex align-items-center rounded Lms-bg-dark-hover mb-2"> <div class="d-flex align-items-center mb-2">
<div class="p-1"> <div class="p-1">
${cover} ${cover}
</div> </div>
+17 -9
View File
@@ -51,30 +51,38 @@
<message id="Lms.Explore.Release.template.entry-disc"> <message id="Lms.Explore.Release.template.entry-disc">
<h4>${disc-title}</h4> <h4>${disc-title}</h4>
${tracks class="d-grid gap-1"} ${tracks class="d-grid gap-1 Lms-row-container"}
</message> </message>
<message id="Lms.Explore.Release.template.entry-nodisc"> <message id="Lms.Explore.Release.template.entry-nodisc">
${tracks class="d-grid gap-1"} ${tracks class="d-grid gap-1 Lms-row-container"}
</message> </message>
<message id="Lms.Explore.Release.template.entry"> <message id="Lms.Explore.Release.template.entry">
<div class="d-flex align-items-center rounded Lms-bg-dark-hover"> <div class="d-flex align-items-center">
<div class="p-2 text-muted text-end" style="min-width: 2.1rem;"> <div class="p-2 text-muted text-end Lms-tracks-entry-position">
${<if-has-track-number>}${track-number}${</if-has-track-number>} ${<if-has-track-number>}${track-number}${</if-has-track-number>}
</div> </div>
<div class="p-2 flex-fill"> <div class="row align-items-center flex-fill overflow-hidden">
${name} <div class="col-12 col-md-6">
${<if-has-artists>}${artists}${</if-has-artists>} <div class="p-2">
${name}
${<if-has-artists>}${artists class="d-block d-md-none"}${</if-has-artists>}
</div>
</div>
<div class="col-md-6">
${<if-has-artists>}${artists-md class="d-none d-md-block"}${</if-has-artists>}
</div>
</div> </div>
<div class="p-2 d-none d-sm-block text-muted"> <div class="p-2 d-none d-sm-block text-muted text-center Lms-tracks-entry-duration">
${duration} ${duration}
</div> </div>
<div class="p-2 d-flex"> <div class="p-2 d-flex">
${play-btn class="btn btn-sm btn-outline-secondary border-0"} ${play-btn class="d-none d-sm-block btn btn-sm btn-outline-secondary border-0"}
<div class="dropdown d-inline-block"> <div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"} ${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}"> <ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play class="dropdown-item"}</li>
<li>${play-last class="dropdown-item"}</li> <li>${play-last class="dropdown-item"}</li>
<li>${star class="dropdown-item"}</li> <li>${star class="dropdown-item"}</li>
<li>${download class="dropdown-item"}</li> <li>${download class="dropdown-item"}</li>
+5
View File
@@ -21,6 +21,11 @@
${tracks} ${tracks}
</message> </message>
<message id="Lms.Explore.TrackList.template.entry-container">
${elements class="Lms-row-container"}
${loading-indicator}
</message>
<message id="Lms.Explore.TrackList.template.delete-tracklist"> <message id="Lms.Explore.TrackList.template.delete-tracklist">
<div class="modal fade" tabindex="-1"> <div class="modal fade" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
+16 -11
View File
@@ -37,26 +37,31 @@
${tracks} ${tracks}
</message> </message>
<message id="Lms.Explore.Tracks.template.entry-container">
${elements class="Lms-row-container"}
${loading-indicator}
</message>
<message id="Lms.Explore.Tracks.template.entry"> <message id="Lms.Explore.Tracks.template.entry">
<div class="d-flex align-items-center rounded Lms-bg-dark-hover mb-2"> <div class="d-flex align-items-center mb-2">
<div class="p-1"> <div class="p-1">
${cover} ${cover}
</div> </div>
<div class="p-2 flex-fill text-truncate"> <div class="row align-items-center flex-fill overflow-hidden">
<div class="row"> <div class="col-12 col-md-6 col-lg-4">
<div class="col-12 col-md-6 col-lg-4"> <div class="p-2 overflow-hidden">
<div class="d-block text-truncate">${name}</div> <div class="d-block text-truncate">${name}</div>
${<if-has-artists>}${artists class="d-block d-md-none text-truncate"}${</if-has-artists>} ${<if-has-artists>}${artists class="d-block d-md-none text-truncate"}${</if-has-artists>}
</div> </div>
<div class="col-md-6 col-lg-4"> </div>
${<if-has-artists>}${artists-md class="d-none d-md-block text-truncate"}${</if-has-artists>} <div class="col-md-6 col-lg-4">
</div> ${<if-has-artists>}${artists-md class="d-none d-md-block text-truncate"}${</if-has-artists>}
<div class="col-lg-4"> </div>
${<if-has-release>}${release class="d-none d-lg-block text-truncate text-decoration-none link-success"}${</if-has-release>} <div class="col-lg-4 text-truncate">
</div> ${<if-has-release>}${release class="d-none d-lg-inline text-truncate text-decoration-none link-success"}${</if-has-release>}
</div> </div>
</div> </div>
<div class="p-2 d-none d-sm-block text-muted"> <div class="p-2 d-none d-sm-block text-muted text-center Lms-tracks-entry-duration">
${duration} ${duration}
</div> </div>
<div class="p-2 d-flex"> <div class="p-2 d-flex">
+26 -1
View File
@@ -1,5 +1,9 @@
/* Generic rules */ /* Generic rules */
:root {
--lms-striped-bg: #022f3a;
}
.link-success { .link-success {
transition: color 0.15s ease; transition: color 0.15s ease;
} }
@@ -16,6 +20,19 @@
background-color: var(--bs-dark); background-color: var(--bs-dark);
} }
.Lms-row-container {
--lms-striped-bg: #022f3a;
--lms-hover-bg: var(--bs-dark);
}
.Lms-row-container > :nth-child(odd) {
background-color: var(--lms-striped-bg);
}
.Lms-row-container > *:hover {
background-color: var(--lms-hover-bg);
}
/* Specific rules */ /* Specific rules */
body { body {
padding-bottom: 78px; padding-bottom: 78px;
@@ -32,7 +49,7 @@ body {
} }
.Lms-entry-playing { .Lms-entry-playing {
background-color: var(--bs-dark); background-color: #0d4655!important;
} }
.Lms-cover { .Lms-cover {
@@ -144,3 +161,11 @@ body {
display: block; display: block;
padding-bottom: 100%; padding-bottom: 100%;
} }
.Lms-tracks-entry-position{
width: 2.1rem;
}
.Lms-tracks-entry-duration {
width: 4rem;
}
+1 -1
View File
@@ -136,7 +136,7 @@ PlayQueue::PlayQueue()
saveAsTrackList(); saveAsTrackList();
}); });
_entriesContainer = bindNew<InfiniteScrollingContainer>("entries"); _entriesContainer = bindNew<InfiniteScrollingContainer>("entries", Wt::WString::tr("Lms.PlayQueue.template.entry-container"));
_entriesContainer->onRequestElements.connect([this] _entriesContainer->onRequestElements.connect([this]
{ {
addSome(); addSome();
+6
View File
@@ -382,6 +382,7 @@ Release::refreshView()
{ {
entry->setCondition("if-has-artists", true); entry->setCondition("if-has-artists", true);
entry->bindWidget("artists", Utils::createArtistContainer(artists)); entry->bindWidget("artists", Utils::createArtistContainer(artists));
entry->bindWidget("artists-md", Utils::createArtistContainer(artists));
} }
auto trackNumber {track->getTrackNumber()}; auto trackNumber {track->getTrackNumber()};
@@ -399,6 +400,11 @@ Release::refreshView()
{ {
entry->bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.template.more-btn"), Wt::TextFormat::XHTML); entry->bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.template.more-btn"), Wt::TextFormat::XHTML);
entry->bindNew<Wt::WPushButton>("play", Wt::WString::tr("Lms.Explore.play"))
->clicked().connect([=]
{
_playQueueController.playTrackInRelease(trackId);
});
entry->bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last")) entry->bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last"))
->clicked().connect([=] ->clicked().connect([=]
{ {
+1 -1
View File
@@ -174,7 +174,7 @@ namespace UserInterface
LmsApp->getModalManager().show(std::move(modal)); LmsApp->getModalManager().show(std::move(modal));
}); });
_container = bindNew<InfiniteScrollingContainer>("tracks"); _container = bindNew<InfiniteScrollingContainer>("tracks", Wt::WString::tr("Lms.Explore.TrackList.template.entry-container"));
_container->onRequestElements.connect([this] _container->onRequestElements.connect([this]
{ {
addSome(); addSome();
+1 -1
View File
@@ -86,7 +86,7 @@ Tracks::Tracks(Filters& filters, PlayQueueController& playQueueController)
_playQueueController.processCommand(PlayQueueController::Command::PlayOrAddLast, getAllTracks()); _playQueueController.processCommand(PlayQueueController::Command::PlayOrAddLast, getAllTracks());
}); });
_container = bindNew<InfiniteScrollingContainer>("tracks"); _container = bindNew<InfiniteScrollingContainer>("tracks", Wt::WString::tr("Lms.Explore.Tracks.template.entry-container"));
_container->onRequestElements.connect([this] _container->onRequestElements.connect([this]
{ {
addSome(); addSome();