mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-22 14:22:40 +01:00
Improves notification view (#2645)
* removes hr, adds notification settings link * adds if else to show "no notifications" or table view * adds icon to settings button * Fix link to notification settings Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
This commit is contained in:
dstrukt
GitHub
parent
3800780ef2
commit
8e4f56bd52
1 changed files with 102 additions and 90 deletions
|
|
@ -7,105 +7,117 @@
|
|||
<div class="container">
|
||||
<partial name="_StatusMessage" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 section-heading">
|
||||
<h2>@ViewData["Title"]</h2>
|
||||
<hr class="primary">
|
||||
</div>
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
|
||||
<h2>@ViewData["Title"]</h2>
|
||||
<a id="NotificationSettings" asp-controller="Manage" asp-action="NotificationSettings" class="btn btn-secondary">
|
||||
<span class="fa fa-cog"></span>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form method="post" asp-action="MassAction">
|
||||
<div class="row button-row">
|
||||
<div class="col-lg-6">
|
||||
<span class="dropdown" style="display:none;" id="MassAction">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Actions
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="submit" class="dropdown-item" name="command" value="mark-seen"><i class="fa fa-eye"></i> Mark seen</button>
|
||||
<button type="submit" class="dropdown-item" name="command" value="mark-unseen"><i class="fa fa-eye-slash"></i> Mark unseen</button>
|
||||
<button type="submit" class="dropdown-item" name="command" value="delete"><i class="fa fa-trash-o"></i> Delete</button>
|
||||
</div>
|
||||
</span>
|
||||
@if (Model.Total > 0)
|
||||
{
|
||||
<form method="post" asp-action="MassAction">
|
||||
<div class="row button-row">
|
||||
<div class="col-lg-6">
|
||||
<span class="dropdown" style="display:none;" id="MassAction">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Actions
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="submit" class="dropdown-item" name="command" value="mark-seen"><i class="fa fa-eye"></i> Mark seen</button>
|
||||
<button type="submit" class="dropdown-item" name="command" value="mark-unseen"><i class="fa fa-eye-slash"></i> Mark unseen</button>
|
||||
<button type="submit" class="dropdown-item" name="command" value="delete"><i class="fa fa-trash-o"></i> Delete</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<table class="table table-sm table-responsive-md">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="30px" class="only-for-js">
|
||||
@if (Model.Total > 0)
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<table class="table table-sm table-responsive-md">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="30px" class="only-for-js">
|
||||
@if (Model.Total > 0)
|
||||
{
|
||||
<input name="selectedItems" type="checkbox" class="form-check-input" onClick="selectAll(this);" />
|
||||
}
|
||||
</th>
|
||||
<th width="190px">
|
||||
Date
|
||||
<a href="javascript:switchTimeFormat()">
|
||||
<span class="fa fa-clock-o" title="Switch date format"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>Message</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var item in Model.Items)
|
||||
{
|
||||
<input name="selectedItems" type="checkbox" class="form-check-input" onClick="selectAll(this);" />
|
||||
<tr data-guid="@item.Id" class="notification-row @(item.Seen ? "seen" : "")">
|
||||
<td class="only-for-js">
|
||||
<input name="selectedItems" type="checkbox" class="selector form-check-input" value="@item.Id" />
|
||||
</td>
|
||||
<td onclick="toggleRowCheckbox(this)">
|
||||
<span class="switchTimeFormat" data-switch="@item.Created.ToTimeAgo()">
|
||||
@item.Created.ToBrowserDate()
|
||||
</span>
|
||||
</td>
|
||||
<td onclick="toggleRowCheckbox(this)">
|
||||
@item.Body
|
||||
</td>
|
||||
<td class="text-end fw-normal">
|
||||
@if (!String.IsNullOrEmpty(item.ActionLink))
|
||||
{
|
||||
<a href="@item.ActionLink" class="btn btn-link p-0">Details</a>
|
||||
<span class="d-none d-md-inline-block"> - </span>
|
||||
}
|
||||
<button onclick="return rowseen(this)" class="btn btn-link p-0 btn-toggle-seen" type="submit" name="command" value="flip-individual:@(item.Id)">
|
||||
<span>Mark </span><span class="seen-text"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</th>
|
||||
<th width="190px">
|
||||
Date
|
||||
<a href="javascript:switchTimeFormat()">
|
||||
<span class="fa fa-clock-o" title="Switch date format"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>Message</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var item in Model.Items)
|
||||
{
|
||||
<tr data-guid="@item.Id" class="notification-row @(item.Seen ? "seen" : "")">
|
||||
<td class="only-for-js">
|
||||
<input name="selectedItems" type="checkbox" class="selector form-check-input" value="@item.Id"/>
|
||||
</td>
|
||||
<td onclick="toggleRowCheckbox(this)">
|
||||
<span class="switchTimeFormat" data-switch="@item.Created.ToTimeAgo()">
|
||||
@item.Created.ToBrowserDate()
|
||||
</span>
|
||||
</td>
|
||||
<td onclick="toggleRowCheckbox(this)">
|
||||
@item.Body
|
||||
</td>
|
||||
<td class="text-end fw-normal">
|
||||
@if (!String.IsNullOrEmpty(item.ActionLink))
|
||||
{
|
||||
<a href="@item.ActionLink" class="btn btn-link p-0">Details</a>
|
||||
<span class="d-none d-md-inline-block"> - </span>
|
||||
}
|
||||
<button onclick="return rowseen(this)" class="btn btn-link p-0 btn-toggle-seen" type="submit" name="command" value="flip-individual:@(item.Id)">
|
||||
<span>Mark </span><span class="seen-text"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<vc:pager view-model="Model" />
|
||||
<vc:pager view-model="Model" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</form>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="text-secondary mt-3">
|
||||
There are no notifications.
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.notification-row.loading {
|
||||
cursor: wait;
|
||||
pointer-events: none;
|
||||
}
|
||||
.seen-text::after {
|
||||
content: "seen";
|
||||
}
|
||||
tr.seen td .seen-text::after {
|
||||
content: "unseen";
|
||||
}
|
||||
tr td {
|
||||
font-weight: bold;
|
||||
}
|
||||
tr.seen td {
|
||||
font-weight: normal;
|
||||
}
|
||||
.notification-row.loading {
|
||||
cursor: wait;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.seen-text::after {
|
||||
content: "seen";
|
||||
}
|
||||
|
||||
tr.seen td .seen-text::after {
|
||||
content: "unseen";
|
||||
}
|
||||
|
||||
tr td {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr.seen td {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function rowseen(sender) {
|
||||
|
|
@ -117,7 +129,7 @@ tr.seen td {
|
|||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function toggleRowCheckbox(sender){
|
||||
var input = $(sender).parents(".notification-row").find(".selector");
|
||||
input.prop('checked', !input.prop("checked"));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue