Still converting to bootstrap 5. Releases update + admin views

This commit is contained in:
emeric
2022-05-11 20:57:06 +02:00
parent 6e0da3a9bd
commit 5eec40dc44
9 changed files with 108 additions and 85 deletions
+20 -17
View File
@@ -5,40 +5,43 @@
<div class="card"> <div class="card">
<h5 class="card-header">${tr:Lms.Admin.ScannerController.scanner}</h5> <h5 class="card-header">${tr:Lms.Admin.ScannerController.scanner}</h5>
<div class="card-body"> <div class="card-body">
<div class="mb-3 row"> <form>
<label class="col-sm-2 col-form-label" for="status"> <div class="row g-3">
<div class="col-12">
<label class="form-label" for="status">
${tr:Lms.Admin.ScannerController.status} ${tr:Lms.Admin.ScannerController.status}
</label> </label>
<div class="col-sm-10">
<input type="text" readonly="readonly" class="form-control" id="status" value="${status}"/> <input type="text" readonly="readonly" class="form-control" id="status" value="${status}"/>
</div> </div>
</div> <div class="col-12">
<div class="mb-3 row"> <label class="form-label" for="step-status">
<label class="col-sm-2 col-form-label" for="step-status">
${tr:Lms.Admin.ScannerController.step-status} ${tr:Lms.Admin.ScannerController.step-status}
</label> </label>
<div class="col-sm-10">
<input type="text" readonly="readonly" class="form-control" id="step-status" value="${step-status}"/> <input type="text" readonly="readonly" class="form-control" id="step-status" value="${step-status}"/>
</div> </div>
</div> <div class="col-12">
<div class="mb-3 row"> <label class="form-label" for="last-scan">
<label class="col-sm-2 col-form-label" for="last-scan">
${tr:Lms.Admin.ScannerController.last-scan} ${tr:Lms.Admin.ScannerController.last-scan}
</label> </label>
<div class="col-sm-10"> <div class="input-group">
<input type="text" readonly="readonly" class="form-control" id="last-scan" value="${last-scan}"/> <input type="text" readonly="readonly" class="form-control" id="last-scan" value="${last-scan}"/>
</div> ${report-btn class="btn btn-outline-info"}
</div>
<div class="mb-3 row">
<div class="offset-sm-2">
${btn-report class="btn btn-sm"}
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
${btn-action} <div class="btn-group">
${scan-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
</button>
<ul class="dropdown-menu">
<li>${full-scan-btn class="dropdown-item"}</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</form>
</div>
</div>
</message> </message>
</messages> </messages>
+6 -6
View File
@@ -2,20 +2,20 @@
<messages xmlns:if="Wt.WTemplate.conditions"> <messages xmlns:if="Wt.WTemplate.conditions">
<message id="Lms.Admin.Users.template"> <message id="Lms.Admin.Users.template">
<h2>${tr:Lms.Admin.Users.users}</h2> <h3>${tr:Lms.Admin.Users.users}</h3>
${users} ${users class="d-grid gap-1"}
${<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>}
</message> </message>
<message id="Lms.Admin.Users.template.entry"> <message id="Lms.Admin.Users.template.entry">
<div class="row align-items-center mb-3"> <div class="d-flex align-items-center Lms-bg-dark-hover rounded">
<div class="col-auto me-auto"> <div class="p-2 flex-fill">
${name}${<if-tag>}<span class="badge bg-info ms-2">${tag}</span>${</if-tag>} ${name}${<if-tag>}<span class="badge bg-info ms-2">${tag}</span>${</if-tag>}
</div> </div>
<div class="col-auto"> <div class="p-2">
${<if-edit>}${edit-btn class="btn btn-sm btn-primary me-1"} ${del-btn class="btn btn-sm btn-danger"}${</if-edit>} ${<if-edit>}${edit-btn class="btn btn-sm btn-secondary me-1"}${del-btn class="btn btn-sm btn-danger"}${</if-edit>}
</div> </div>
</div> </div>
</message> </message>
+1 -1
View File
@@ -99,7 +99,7 @@
<message id="Lms.Admin.User.user-already-exists">User already exists!</message> <message id="Lms.Admin.User.user-already-exists">User already exists!</message>
<message id="Lms.Admin.User.user-create">New user</message> <message id="Lms.Admin.User.user-create">New user</message>
<message id="Lms.Admin.User.user-created">New user created!</message> <message id="Lms.Admin.User.user-created">New user created!</message>
<message id="Lms.Admin.User.user-edit">Edit user {1}</message> <message id="Lms.Admin.User.user-edit">Edit user '{1}'</message>
<message id="Lms.Admin.User.user-updated">User updated!</message> <message id="Lms.Admin.User.user-updated">User updated!</message>
<!--Wizard--> <!--Wizard-->
+1 -1
View File
@@ -99,7 +99,7 @@
<message id="Lms.Admin.User.user-already-exists">L'utilisateur existe déjà !</message> <message id="Lms.Admin.User.user-already-exists">L'utilisateur existe déjà !</message>
<message id="Lms.Admin.User.user-create">Nouvel utilisateur</message> <message id="Lms.Admin.User.user-create">Nouvel utilisateur</message>
<message id="Lms.Admin.User.user-created">Nouvel utilisateur créé !</message> <message id="Lms.Admin.User.user-created">Nouvel utilisateur créé !</message>
<message id="Lms.Admin.User.user-edit">Utilisateur {1}</message> <message id="Lms.Admin.User.user-edit">Utilisateur '{1}'</message>
<message id="Lms.Admin.User.user-updated">L'utilisateur a été mis à jour !</message> <message id="Lms.Admin.User.user-updated">L'utilisateur a été mis à jour !</message>
<!--Wizard--> <!--Wizard-->
+4 -4
View File
@@ -39,13 +39,13 @@
</message> </message>
<message id="Lms.Explore.Releases.template.entry-grid"> <message id="Lms.Explore.Releases.template.entry-grid">
<div class="card border-0 bg-transparent"> <div class="Lms-responsive-square Lms-cover-container">
${cover class="shadow-sm"} ${cover class="shadow-sm"}
${release-name class="text-truncate text-nowrap text-decoration-none link-success"} </div>
${<if-has-artist>}${artist-name class=" text-truncate text-nowrap text-decoration-none link-secondary"}${</if-has-artist>} ${release-name class="d-block text-truncate text-nowrap text-decoration-none link-success"}
${<if-has-artist>}${artist-name class="d-block text-truncate text-nowrap text-decoration-none link-secondary"}${</if-has-artist>}
${<if-has-various-artists>}<div class="text-truncate text-nowrap text-secondary">${tr:Lms.Explore.various-artists}</div>${</if-has-various-artists>} ${<if-has-various-artists>}<div class="text-truncate text-nowrap text-secondary">${tr:Lms.Explore.various-artists}</div>${</if-has-various-artists>}
${<if-has-year>}<div class="small text-muted">${year}</div>${</if-has-year>} ${<if-has-year>}<div class="small text-muted">${year}</div>${</if-has-year>}
</div>
</message> </message>
<message id="Lms.Explore.Releases.template.container"> <message id="Lms.Explore.Releases.template.container">
+5 -9
View File
@@ -40,20 +40,18 @@
</message> </message>
<message id="Lms.Explore.Tracks.template.entry"> <message id="Lms.Explore.Tracks.template.entry">
<div class="card bg-transparent"> <div class="d-flex align-items-center rounded Lms-bg-dark-hover">
<div class="row align-items-center Lms-bg-dark-hover rounded"> <div class="p-1 Lms-cover-small">
<div class="col-2 col-lg-1">
${cover} ${cover}
</div> </div>
<div class="col-10 col-lg-11 d-flex align-items-center"> <div class="p-2 flex-fill">
<div class="flex-fill">
<div>${name}</div> <div>${name}</div>
${<if-has-release>}${release class="text-decoration-none link-sucess"}${</if-has-release>} ${<if-has-release>}${release class="text-decoration-none link-success"}${</if-has-release>}
</div> </div>
<div class="p-2 d-none d-sm-block text-muted"> <div class="p-2 d-none d-sm-block text-muted">
${duration} ${duration}
</div> </div>
<div class="d-flex"> <div class="p-2 d-flex">
${play-btn class="btn btn-sm btn-outline-secondary border-0"} ${play-btn class="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"}
@@ -65,8 +63,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</message> </message>
<message id="Lms.Explore.Tracks.template.entry-artist"> <message id="Lms.Explore.Tracks.template.entry-artist">
+31
View File
@@ -8,6 +8,11 @@ body {
padding-bottom: 78px; padding-bottom: 78px;
} }
.Lms-cover-small {
width: 72px;
min-width: 72px;
}
.Lms-notification-container { .Lms-notification-container {
position: fixed; position: fixed;
bottom: 78px; bottom: 78px;
@@ -22,3 +27,29 @@ body {
z-index: 999; z-index: 999;
} }
.Lms-cover {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.Lms-cover-container {
position: relative;
}
.Lms-responsive-square {
width: 100%;
}
.Lms-responsive-square:after {
content: "";
display: block;
padding-bottom: 100%;
}
+5 -13
View File
@@ -23,10 +23,8 @@
#include <Wt/Http/Response.h> #include <Wt/Http/Response.h>
#include <Wt/WDateTime.h> #include <Wt/WDateTime.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WPushButton.h> #include <Wt/WPushButton.h>
#include <Wt/WResource.h> #include <Wt/WResource.h>
#include <Wt/WSplitButton.h>
#include "services/database/Session.hpp" #include "services/database/Session.hpp"
#include "services/database/Track.hpp" #include "services/database/Track.hpp"
@@ -156,25 +154,19 @@ ScannerController::refreshContents()
{ {
using namespace Scanner; using namespace Scanner;
Wt::WPushButton* reportBtn {bindNew<Wt::WPushButton>("btn-report", Wt::WString::tr("Lms.Admin.ScannerController.get-report"))}; Wt::WPushButton* reportBtn {bindNew<Wt::WPushButton>("report-btn", Wt::WString::tr("Lms.Admin.ScannerController.get-report"))};
Wt::WSplitButton* actionBtn {bindNew<Wt::WSplitButton>("btn-action")}; Wt::WPushButton* scanBtn {bindNew<Wt::WPushButton>("scan-btn", Wt::WString::tr("Lms.Admin.ScannerController.scan-now"))};
actionBtn->actionButton()->addStyleClass("btn-primary"); scanBtn->clicked().connect([]
actionBtn->actionButton()->setText(Wt::WString::tr("Lms.Admin.ScannerController.scan-now"));
actionBtn->actionButton()->clicked().connect([]
{ {
Service<Scanner::IScannerService>::get()->requestImmediateScan(false); Service<Scanner::IScannerService>::get()->requestImmediateScan(false);
}); });
auto popup = std::make_unique<Wt::WPopupMenu>(); Wt::WPushButton* fullScanBtn {bindNew<Wt::WPushButton>("full-scan-btn", Wt::WString::tr("Lms.Admin.ScannerController.force-scan-now"))};
popup->addItem(Wt::WString::tr("Lms.Admin.ScannerController.force-scan-now")); fullScanBtn->clicked().connect([]
popup->itemSelected().connect([]
{ {
Service<Scanner::IScannerService>::get()->requestImmediateScan(true); Service<Scanner::IScannerService>::get()->requestImmediateScan(true);
}); });
actionBtn->dropDownButton()->setMenu(std::move(popup));
actionBtn->dropDownButton()->addStyleClass("btn-primary");
const IScannerService::Status status {Service<IScannerService>::get()->getStatus()}; const IScannerService::Status status {Service<IScannerService>::get()->getStatus()};
if (status.lastCompleteScanStats) if (status.lastCompleteScanStats)
+3 -2
View File
@@ -45,7 +45,7 @@ namespace UserInterface::ReleaseListHelpers
Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false)); Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
auto cover = std::make_unique<Wt::WImage>(); auto cover = std::make_unique<Wt::WImage>();
cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large)); cover->setImageLink(LmsApp->getCoverResource()->getReleaseUrl(release->getId(), CoverResource::Size::Large));
cover->setStyleClass("img-fluid rounded"); cover->setStyleClass("Lms-cover rounded");
cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)"); cover->setAttributeValue("onload", LmsApp->javaScriptClass() + ".onLoadCover(this)");
anchor->setImage(std::move(cover)); anchor->setImage(std::move(cover));
@@ -83,7 +83,8 @@ namespace UserInterface::ReleaseListHelpers
} }
} }
entry->setStyleClass("col-6 col-md-4 col-lg-3 col-xl-2"); // hack
entry->setStyleClass("p-2 Lms-bg-dark-hover rounded col-6 col-md-4 col-lg-3 col-xl-2");
return entry; return entry;
} }