mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2024-11-20 02:28:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Plugins UI improvements (#2048)

Browse Source 
* Improve dependencies display

* Improve version information toggling
This commit is contained in:
Dennis Reimann 2020-11-06 08:06:37 +01:00 committed by GitHub
parent 31738c465d
commit 09335e2cf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
BTCPayServer/Views/Server/ListPlugins.cshtml
View File

@ -5,7 +5,7 @@
@{ @{
ViewData.SetActivePageAndTitle(ServerNavPages.Plugins); ViewData.SetActivePageAndTitle(ServerNavPages.Plugins);
var installed = Model.Installed.ToDictionary(plugin => plugin.Identifier.ToLowerInvariant(), plugin => plugin.Version); var installed = Model.Installed.ToDictionary(plugin => plugin.Identifier.ToLowerInvariant(), plugin => plugin.Version);
var availableAndNotInstalled = Model.Available.Where(plugin => !installed.ContainsKey(plugin.Identifier.ToLowerInvariant())).Select(plugin => (plugin, BTCPayServerOptions.RecommendedPlugins.Contains(plugin.Identifier.ToLowerInvariant()))).OrderBy(tuple => tuple.Item1); var availableAndNotInstalled = Model.Available.Where(plugin => !installed.ContainsKey(plugin.Identifier.ToLowerInvariant())).Select(plugin => (plugin, BTCPayServerOptions.RecommendedPlugins.Contains(plugin.Identifier.ToLowerInvariant()))).OrderBy(tuple => tuple.Item1);
bool DependentOn(string plugin) bool DependentOn(string plugin)
{ {
@ -83,15 +83,18 @@
{ {
return false; return false;
} }
;
} }
return true; return true;
} }
} }
<partial name="_StatusMessage"/> <partial name="_StatusMessage"/>
<style>
.version-switch .nav-link { display: inline; }
.version-switch .nav-link.active { display: none; }
</style>
@if (Model.Commands.Any()) @if (Model.Commands.Any())
{ {
<div class="alert alert-info mb-5"> <div class="alert alert-info mb-5">
@ -113,50 +116,44 @@
{ {
var matchedAvailable = Model.Available.SingleOrDefault(availablePlugin => availablePlugin.Identifier == plugin.Identifier); var matchedAvailable = Model.Available.SingleOrDefault(availablePlugin => availablePlugin.Identifier == plugin.Identifier);
var updateAvailable = !plugin.SystemPlugin && matchedAvailable != null && plugin.Version < matchedAvailable.Version; var updateAvailable = !plugin.SystemPlugin && matchedAvailable != null && plugin.Version < matchedAvailable.Version;
var tabId = plugin.Identifier.ToLowerInvariant().Replace(".", "_");
<div class="col col-12 col-lg-6 mb-4"> <div class="col col-12 col-lg-6 mb-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-body"> <div class="card-body">
<div class="row"> <h4 class="card-title d-inline-block" title="@plugin.Identifier" data-toggle="tooltip">@plugin.Name</h4>
<div class="col-xs-12 col-md-6"> <div class="d-flex flex-wrap align-items-center mb-3">
<h4 class="card-title" title="@plugin.Identifier" data-toggle="tooltip">@plugin.Name</h4> <h5 class="card-subtitle text-muted d-flex align-items-center mr-3">
<h5 class="card-subtitle mb-3 text-muted d-flex align-items-center"> @plugin.Version
@if (plugin.SystemPlugin)
@plugin.Version {
@if (plugin.SystemPlugin) <div class="badge badge-secondary ml-2">System plugin</div>
{ }
<div class="badge badge-secondary ml-2">System plugin</div> else if (updateAvailable)
} {
else if (updateAvailable) <div class="badge badge-info ml-2">
{ @matchedAvailable.Version available
<div class="badge badge-secondary ml-2">@matchedAvailable.Version available</div> </div>
} }
</h5> </h5>
</div>
@if (updateAvailable) @if (updateAvailable)
{ {
<ul class="nav nav-pills col-xs-12 col-md-6 text-right"> <span class="nav version-switch mt-n1" role="tablist">
<li class="nav-item"> <a data-toggle="tab" href="#@tabId-current" class="nav-link px-0 small text-info show active">Show current version</a>
<a data-toggle="tab" href="#@plugin.Identifier.ToLowerInvariant().Replace(".", "_")-current" class="nav-link show active">Current</a> <a data-toggle="tab" href="#@tabId-update" class="nav-link px-0 small text-info">Show update information</a>
</li> </span>
<li class="nav-item">
<a data-toggle="tab" href="#@plugin.Identifier.ToLowerInvariant().Replace(".", "_")-update" class="nav-link">Update</a>
</li>
</ul>
} }
</div> </div>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane show active" id="@plugin.Identifier.ToLowerInvariant().Replace(".", "_")-current"> <div class="tab-pane active" id="@tabId-current">
<p class="card-text">@plugin.Description</p> <p class="card-text">@plugin.Description</p>
@if (plugin.Dependencies.Any()) @if (plugin.Dependencies.Any())
{ {
<h5 class=" text-muted">Dependencies</h5> <h5 class="text-muted">Dependencies</h5>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
@foreach (var dependency in plugin.Dependencies) @foreach (var dependency in plugin.Dependencies)
{ {
<li class="list-group-item"> <li class="list-group-item px-0">
@dependency @dependency
@if (!DependencyMet(dependency)) @if (!DependencyMet(dependency))
{ {
@ -170,16 +167,15 @@
@if (updateAvailable) @if (updateAvailable)
{ {
<div class="tab-pane" id="@plugin.Identifier.ToLowerInvariant().Replace(".", "_")-update"> <div class="tab-pane" id="@tabId-update">
<p class="card-text">@matchedAvailable.Description</p> <p class="card-text">@matchedAvailable.Description</p>
@if (matchedAvailable.Dependencies.Any()) @if (matchedAvailable.Dependencies.Any())
{ {
<h5 class=" text-muted">Dependencies</h5> <h5 class="text-muted">Dependencies</h5>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
@foreach (var dependency in matchedAvailable.Dependencies) @foreach (var dependency in matchedAvailable.Dependencies)
{ {
<li class="list-group-item "> <li class="list-group-item px-0">
@dependency @dependency
@if (!DependencyMet(dependency)) @if (!DependencyMet(dependency))
{ {
@ -241,23 +237,22 @@
<div class="col col-12 col-lg-6 mb-4"> <div class="col col-12 col-lg-6 mb-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-body"> <div class="card-body">
<h4 class="card-title" data-toggle="tooltip" title="@plugin.Identifier">@plugin.Name</h4> <h4 class="card-title d-inline-block" data-toggle="tooltip" title="@plugin.Identifier">@plugin.Name</h4>
<h5 class="card-subtitle mb-3 text-muted d-flex justify-content-between"> <h5 class="card-subtitle mb-3 text-muted d-flex align-items-center">
<span>@plugin.Version</span> @plugin.Version
@if (pluginT.Item2) @if (pluginT.Item2)
{ {
<span data-toggle="tooltip" title="This plugin has been recommended to be installed by your deployment method.">Recommended <span class="fa fa-question-circle-o"></span></span> <div class="badge badge-light ml-2" data-toggle="tooltip" title="This plugin has been recommended to be installed by your deployment method." class="text-nowrap">Recommended <span class="fa fa-question-circle-o"></span></div>
} }
</h5> </h5>
<p class="card-text">@plugin.Description</p> <p class="card-text">@plugin.Description</p>
@if (plugin.Dependencies?.Any() is true) @if (plugin.Dependencies?.Any() is true)
{ {
<h5 class=" text-muted">Dependencies</h5> <h5 class="text-muted">Dependencies</h5>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
@foreach (var dependency in plugin.Dependencies) @foreach (var dependency in plugin.Dependencies)
{ {
<li class="list-group-item"> <li class="list-group-item px-0">
@dependency @dependency
@if (!DependencyMet(dependency)) @if (!DependencyMet(dependency))
{ {
@ -286,9 +281,9 @@
} }
else else
{ {
<span class="text-danger"> <div class="text-danger">
Cannot install until dependencies are met Cannot install until dependencies are met.
</span> </div>
} }
</div> </div>
</div> </div>