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

This commit is contained in:
emeric
2022-05-08 14:58:42 +02:00
parent 5a6c1cd180
commit 8534717517
12 changed files with 164 additions and 118 deletions
+25 -4
View File
@@ -3,10 +3,31 @@
<!--FORMS message blocks--> <!--FORMS message blocks-->
<message id="Lms.Explore.Artists.template"> <message id="Lms.Explore.Artists.template">
${mode class="nav nav-pills mb-1"} <div class="mb-3">
<div class="row mb-3"> <ul class="nav nav-pills mb-1">
<div class="col-lg-3"> <li class="nav-item">
${link-type} ${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 class="form-select"}
</div>
</div> </div>
</div> </div>
${artists} ${artists}
+6 -6
View File
@@ -19,9 +19,9 @@
${clusters class="mb-2"} ${clusters class="mb-2"}
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="mb-3"> <div class="mb-3 d-flex">
${play-btn class="btn btn-outline-primary me-2"} ${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"} ${more-btn class="btn btn-outline-primary" data-bs-toggle="dropdown" aria-expanded="false"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}"> <ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-shuffled class="btn dropdown-item"}</li> <li>${play-shuffled class="btn dropdown-item"}</li>
@@ -32,7 +32,7 @@
${</if-has-mbid>} ${</if-has-mbid>}
<li>${download class="btn dropdown-item"}</li> <li>${download class="btn dropdown-item"}</li>
</ul> </ul>
</span> </div>
</div> </div>
${container class="d-grid gap-3"} ${container class="d-grid gap-3"}
</div> </div>
@@ -80,16 +80,16 @@
<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="p-2"> <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"}
<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"} ${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-last class="btn dropdown-item"}</li> <li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li> <li>${star class="btn dropdown-item"}</li>
<li>${download class="btn dropdown-item"}</li> <li>${download class="btn dropdown-item"}</li>
</ul> </ul>
</span> </div>
</div> </div>
</div> </div>
</message> </message>
+10 -1
View File
@@ -24,7 +24,16 @@
${all class="nav-link"} ${all class="nav-link"}
</li> </li>
</ul> </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> </div>
${releases} ${releases}
</message> </message>
+41 -11
View File
@@ -5,8 +5,36 @@
<message id="Lms.Explore.Tracks.template"> <message id="Lms.Explore.Tracks.template">
<div class="mb-3"> <div class="mb-3">
${mode class="nav nav-pills mb-2"} <ul class="nav nav-pills mb-2">
${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"} <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> </div>
${tracks} ${tracks}
</message> </message>
@@ -27,15 +55,17 @@
</div> </div>
<div class="col-2 col-sm-2 col-md-2"> <div class="col-2 col-sm-2 col-md-2">
${duration} ${duration}
${play-btn class="btn btn-sm btn-outline-secondary border-0"} <div class="d-flex">
<span class="dropdown"> ${play-btn 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"} <div class="dropdown d-inline-block">
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}"> ${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
<li>${play-last class="btn dropdown-item"}</li> <ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${star class="btn dropdown-item"}</li> <li>${play-last class="btn dropdown-item"}</li>
<li>${download class="btn dropdown-item"}</li> <li>${star class="btn dropdown-item"}</li>
</ul> <li>${download class="btn dropdown-item"}</li>
</span> </ul>
</div>
</div>
</div> </div>
</div> </div>
</message> </message>
+21 -16
View File
@@ -19,7 +19,7 @@
#include "ArtistsView.hpp" #include "ArtistsView.hpp"
#include <Wt/WMenu.h> #include <Wt/WPushButton.h>
#include "services/database/Artist.hpp" #include "services/database/Artist.hpp"
#include "services/database/Session.hpp" #include "services/database/Session.hpp"
@@ -45,25 +45,30 @@ Artists::Artists(Filters& filters)
{ {
addFunction("tr", &Wt::WTemplate::Functions::tr); 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 *menuItem {bindNew<Wt::WPushButton>(var, title)};
menuItem->clicked().connect([=]
auto addItem = [this](Wt::WMenu& menu,const Wt::WString& str, ArtistCollector::Mode mode)
{ {
auto* item {menu.addItem(str)}; refreshView(mode);
item->clicked().connect([this, mode] { refreshView(mode); }); _currentActiveItem->removeStyleClass("active");
menuItem->addStyleClass("active");
_currentActiveItem = menuItem;
});
if (mode == _defaultMode) if (mode == _defaultMode)
item->renderSelected(true); {
}; _currentActiveItem = menuItem;
_currentActiveItem->addStyleClass("active");
}
}};
addItem(*menu, Wt::WString::tr("Lms.Explore.random"), ArtistCollector::Mode::Random); bindMenuItem("random", Wt::WString::tr("Lms.Explore.random"), ArtistCollector::Mode::Random);
addItem(*menu, Wt::WString::tr("Lms.Explore.starred"), ArtistCollector::Mode::Starred); bindMenuItem("starred", Wt::WString::tr("Lms.Explore.starred"), ArtistCollector::Mode::Starred);
addItem(*menu, Wt::WString::tr("Lms.Explore.recently-played"), ArtistCollector::Mode::RecentlyPlayed); bindMenuItem("recently-played", Wt::WString::tr("Lms.Explore.recently-played"), ArtistCollector::Mode::RecentlyPlayed);
addItem(*menu, Wt::WString::tr("Lms.Explore.most-played"), ArtistCollector::Mode::MostPlayed); bindMenuItem("most-played", Wt::WString::tr("Lms.Explore.most-played"), ArtistCollector::Mode::MostPlayed);
addItem(*menu, Wt::WString::tr("Lms.Explore.recently-added"), ArtistCollector::Mode::RecentlyAdded); bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), ArtistCollector::Mode::RecentlyAdded);
addItem(*menu, Wt::WString::tr("Lms.Explore.all"), ArtistCollector::Mode::All); bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), ArtistCollector::Mode::All);
}
_linkType = bindNew<Wt::WComboBox>("link-type"); _linkType = bindNew<Wt::WComboBox>("link-type");
_linkType->setModel(std::make_shared<ArtistLinkModel>()); _linkType->setModel(std::make_shared<ArtistLinkModel>());
+1
View File
@@ -48,6 +48,7 @@ namespace UserInterface
static constexpr std::size_t _batchSize {30}; static constexpr std::size_t _batchSize {30};
static constexpr std::size_t _maxCount {256}; static constexpr std::size_t _maxCount {256};
Wt::WWidget* _currentActiveItem {};
InfiniteScrollingContainer* _container {}; InfiniteScrollingContainer* _container {};
ArtistCollector _artistCollector; ArtistCollector _artistCollector;
Wt::WComboBox* _linkType {}; Wt::WComboBox* _linkType {};
+15 -21
View File
@@ -19,14 +19,13 @@
#include "ReleasesView.hpp" #include "ReleasesView.hpp"
#include <Wt/WMenu.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WPushButton.h> #include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include "services/database/Release.hpp" #include "services/database/Release.hpp"
#include "services/database/Session.hpp" #include "services/database/Session.hpp"
#include "common/InfiniteScrollingContainer.hpp" #include "common/InfiniteScrollingContainer.hpp"
#include "common/Template.hpp"
#include "ReleaseListHelpers.hpp" #include "ReleaseListHelpers.hpp"
#include "Filters.hpp" #include "Filters.hpp"
#include "LmsApplication.hpp" #include "LmsApplication.hpp"
@@ -36,10 +35,11 @@ using namespace Database;
namespace UserInterface { namespace UserInterface {
Releases::Releases(Filters& filters) 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} , _releaseCollector {filters, _defaultMode, _maxCount}
{ {
addFunction("tr", &Wt::WTemplate::Functions::tr); 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) auto bindMenuItem {[this](const std::string& var, const Wt::WString& title, ReleaseCollector::Mode mode)
{ {
@@ -71,24 +71,18 @@ Releases::Releases(Filters& filters)
{ {
releasesAction.emit(PlayQueueAction::Play, getAllReleases()); 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")) bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML);
->triggered().connect([this] bindNew<Wt::WPushButton>("play-shuffled", Wt::WString::tr("Lms.Explore.play-shuffled"), Wt::TextFormat::Plain)
{ ->clicked().connect([=]
releasesAction.emit(PlayQueueAction::PlayShuffled, getAllReleases()); {
}); 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()); {
}); releasesAction.emit(PlayQueueAction::PlayLast, getAllReleases());
});
popup->popup(moreBtn);
});
_container = bindNew<InfiniteScrollingContainer>("releases", Wt::WString::tr("Lms.Explore.Releases.template.container")); _container = bindNew<InfiniteScrollingContainer>("releases", Wt::WString::tr("Lms.Explore.Releases.template.container"));
_container->onRequestElements.connect([this] _container->onRequestElements.connect([this]
+3 -4
View File
@@ -19,12 +19,11 @@
#pragma once #pragma once
#include <unordered_map>
#include <Wt/WContainerWidget.h> #include <Wt/WContainerWidget.h>
#include <Wt/WTemplate.h>
#include "services/database/Types.hpp" #include "services/database/Types.hpp"
#include "common/Template.hpp"
#include "PlayQueueAction.hpp" #include "PlayQueueAction.hpp"
#include "ReleaseCollector.hpp" #include "ReleaseCollector.hpp"
@@ -33,7 +32,7 @@ namespace UserInterface
class Filters; class Filters;
class InfiniteScrollingContainer; class InfiniteScrollingContainer;
class Releases : public Wt::WTemplate class Releases : public Template
{ {
public: public:
Releases(Filters& filters); Releases(Filters& filters);
-3
View File
@@ -19,9 +19,6 @@
#pragma once #pragma once
#include <string>
#include <string_view>
#include <vector>
#include <unordered_map> #include <unordered_map>
#include <Wt/WContainerWidget.h> #include <Wt/WContainerWidget.h>
-2
View File
@@ -19,8 +19,6 @@
#pragma once #pragma once
#include <vector>
#include "services/database/Object.hpp" #include "services/database/Object.hpp"
#include "services/database/TrackId.hpp" #include "services/database/TrackId.hpp"
#include "DatabaseCollectorBase.hpp" #include "DatabaseCollectorBase.hpp"
+38 -42
View File
@@ -19,10 +19,7 @@
#include "TracksView.hpp" #include "TracksView.hpp"
#include <Wt/WMenu.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WPushButton.h> #include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include "services/database/Session.hpp" #include "services/database/Session.hpp"
#include "services/database/Track.hpp" #include "services/database/Track.hpp"
@@ -38,55 +35,54 @@ using namespace Database;
namespace UserInterface { namespace UserInterface {
Tracks::Tracks(Filters& filters) 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} _trackCollector {filters, _defaultMode, _maxCount}
{ {
addFunction("tr", &Wt::WTemplate::Functions::tr); 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 *menuItem {bindNew<Wt::WPushButton>(var, title)};
menuItem->clicked().connect([=]
auto addItem = [this](Wt::WMenu& menu,const Wt::WString& str, TrackCollector::Mode mode)
{ {
auto* item {menu.addItem(str)}; refreshView(mode);
item->clicked().connect([this, mode] { refreshView(mode); }); _currentActiveItem->removeStyleClass("active");
menuItem->addStyleClass("active");
_currentActiveItem = menuItem;
});
if (mode == _defaultMode) if (mode == _defaultMode)
item->renderSelected(true); {
}; _currentActiveItem = menuItem;
_currentActiveItem->addStyleClass("active");
}
}};
addItem(*menu, Wt::WString::tr("Lms.Explore.random"), TrackCollector::Mode::Random); bindMenuItem("random", Wt::WString::tr("Lms.Explore.random"), TrackCollector::Mode::Random);
addItem(*menu, Wt::WString::tr("Lms.Explore.starred"), TrackCollector::Mode::Starred); bindMenuItem("starred", Wt::WString::tr("Lms.Explore.starred"), TrackCollector::Mode::Starred);
addItem(*menu, Wt::WString::tr("Lms.Explore.recently-played"), TrackCollector::Mode::RecentlyPlayed); bindMenuItem("recently-played", Wt::WString::tr("Lms.Explore.recently-played"), TrackCollector::Mode::RecentlyPlayed);
addItem(*menu, Wt::WString::tr("Lms.Explore.most-played"), TrackCollector::Mode::MostPlayed); bindMenuItem("most-played", Wt::WString::tr("Lms.Explore.most-played"), TrackCollector::Mode::MostPlayed);
addItem(*menu, Wt::WString::tr("Lms.Explore.recently-added"), TrackCollector::Mode::RecentlyAdded); bindMenuItem("recently-added", Wt::WString::tr("Lms.Explore.recently-added"), TrackCollector::Mode::RecentlyAdded);
addItem(*menu, Wt::WString::tr("Lms.Explore.all"), TrackCollector::Mode::All); bindMenuItem("all", Wt::WString::tr("Lms.Explore.all"), TrackCollector::Mode::All);
}
Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)}; bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)
playBtn->clicked().connect([=] ->clicked().connect([=]
{ {
tracksAction.emit(PlayQueueAction::Play, getAllTracks()); tracksAction.emit(PlayQueueAction::Play, getAllTracks());
}); });
Wt::WPushButton* moreBtn {bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)}; bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML);
moreBtn->clicked().connect([=] bindNew<Wt::WPushButton>("play-shuffled", Wt::WString::tr("Lms.Explore.play-shuffled"), Wt::TextFormat::Plain)
{ ->clicked().connect([=]
Wt::WPopupMenu* popup {LmsApp->createPopupMenu()}; {
tracksAction.emit(PlayQueueAction::PlayShuffled, getAllTracks());
popup->addItem(Wt::WString::tr("Lms.Explore.play-shuffled")) });
->triggered().connect(this, [this] bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last"), Wt::TextFormat::Plain)
{ ->clicked().connect([=]
tracksAction.emit(PlayQueueAction::PlayShuffled, getAllTracks()); {
}); tracksAction.emit(PlayQueueAction::PlayLast, getAllTracks());
popup->addItem(Wt::WString::tr("Lms.Explore.play-last")) });
->triggered().connect(this, [this]
{
tracksAction.emit(PlayQueueAction::PlayLast, getAllTracks());
});
popup->popup(moreBtn);
});
_container = bindNew<InfiniteScrollingContainer>("tracks"); _container = bindNew<InfiniteScrollingContainer>("tracks");
_container->onRequestElements.connect([this] _container->onRequestElements.connect([this]
+4 -8
View File
@@ -19,22 +19,18 @@
#pragma once #pragma once
#include <unordered_map>
#include <Wt/WContainerWidget.h>
#include <Wt/WTemplate.h>
#include "services/database/Types.hpp" #include "services/database/Types.hpp"
#include "common/Template.hpp"
#include "PlayQueueAction.hpp" #include "PlayQueueAction.hpp"
#include "TrackCollector.hpp" #include "TrackCollector.hpp"
namespace UserInterface namespace UserInterface
{ {
class Filters; class Filters;
class InfiniteScrollingContainer; class InfiniteScrollingContainer;
class Tracks : public Wt::WTemplate class Tracks : public Template
{ {
public: public:
Tracks(Filters& filters); Tracks(Filters& filters);
@@ -52,9 +48,9 @@ namespace UserInterface
static constexpr std::size_t _batchSize {6}; static constexpr std::size_t _batchSize {6};
static constexpr std::size_t _maxCount {160}; static constexpr std::size_t _maxCount {160};
Wt::WWidget* _currentActiveItem {};
InfiniteScrollingContainer* _container {}; InfiniteScrollingContainer* _container {};
TrackCollector _trackCollector; TrackCollector _trackCollector;
}; };
} // namespace UserInterface } // namespace UserInterface