Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update notification dropdown styling #2167

Merged
merged 14 commits into from Jan 7, 2021
Merged

Update notification dropdown styling #2167

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
00ae1c7
Update notification dropdown strings
bolatovumar Dec 25, 2020
a3c482f
Update notification dropdown styling
bolatovumar Dec 25, 2020
22ab33e
Update border color
bolatovumar Dec 25, 2020
ad90103
Update notification hover color
bolatovumar Dec 25, 2020
acbd800
Revert "was confirmed paid" to "has been paid" change
bolatovumar Dec 28, 2020
2e5b1b4
Move styles to site.css
bolatovumar Dec 28, 2020
53fa520
Update style="border-bottom: 0;" to border-bottom-0
bolatovumar Dec 28, 2020
090c9fc
Update heading
bolatovumar Dec 28, 2020
e6a3f1e
Add icon sprite
bolatovumar Dec 31, 2020
749efd2
Add default icon styles
bolatovumar Jan 2, 2021
ebdd42e
Use "currentColor" instead of specific color for icon
bolatovumar Jan 3, 2021
4d143d3
Update icon color definition
bolatovumar Jan 3, 2021
5b04ccc
Adjust dropdown position
bolatovumar Jan 6, 2021
bcce5e3
Update h4 to h5
bolatovumar Jan 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions BTCPayServer/Components/Icon/Default.cshtml
View file
Open in desktop
@@ -0,0 +1,5 @@
@model BTCPayServer.Components.Icon.IconViewModel

<svg role="img" class="icon icon-@Model.Symbol">
<use href="/img/icon-sprite.svg#@Model.Symbol"></use>
</svg>
16 changes: 16 additions & 0 deletions BTCPayServer/Components/Icon/Icon.cs
View file
Open in desktop
@@ -0,0 +1,16 @@
using Microsoft.AspNetCore.Mvc;

namespace BTCPayServer.Components.Icon
{
public class Icon : ViewComponent
{
public IViewComponentResult Invoke(string symbol)
{
var vm = new IconViewModel
{
Symbol = symbol
};
return View(vm);
}
}
}
7 changes: 7 additions & 0 deletions BTCPayServer/Components/Icon/IconViewModel.cs
View file
Open in desktop
@@ -0,0 +1,7 @@
namespace BTCPayServer.Components.Icon
{
public class IconViewModel
{
public string Symbol { get; set; }
}
}
34 changes: 23 additions & 11 deletions BTCPayServer/Components/NotificationsDropdown/Default.cshtml
View file
Open in desktop
Expand Up @@ -4,30 +4,42 @@
@using BTCPayServer.HostedServices
@using Microsoft.AspNetCore.Http.Extensions
@model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel
@addTagHelper *, BundlerMinifier.TagHelpers

@if (Model.UnseenCount > 0)
{
<li class="nav-item dropdown" id="notifications-nav-item">
<a class="nav-link js-scroll-trigger" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
<a class="nav-link js-scroll-trigger border-bottom-0" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
<i class="fa fa-bell"></i>
</a>
<span class="alerts-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
<div class="dropdown-menu dropdown-menu-right text-center notification-items" aria-labelledby="navbarDropdown">
<div class="dropdown-menu dropdown-menu-right text-center notification-dropdown" aria-labelledby="navbarDropdown">
<div class="d-flex align-items-center justify-content-between py-3 px-4 border-bottom border-light">
<h4 class="m-0">Notifications</h4>
<form asp-controller="Notifications" asp-action="MarkAllAsSeen" asp-route-returnUrl="@Context.Request.GetCurrentPathWithQueryString()" method="post">
<button class="btn btn-link p-0 font-weight-semibold" type="submit">Mark all as seen</button>
</form>
</div>
@foreach (var notif in Model.Last5)
{
<a asp-action="NotificationPassThrough" asp-controller="Notifications" asp-route-id="@notif.Id" class="dropdown-item border-bottom py-2 px-3">
<div class="text-left" style="width: 200px; white-space:normal;">
@notif.Body
<a asp-action="NotificationPassThrough" asp-controller="Notifications" asp-route-id="@notif.Id" class="notification d-flex align-items-center dropdown-item border-bottom border-light py-3 px-4">
<div class="d-flex mr-3" style="width: 16px; height: 16px; color: #8D8D8F;">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to add the inline styles for width and height to make sure the icon appears in the right size since the sprite itself has height and width of zero. I wonder if there should be a built-in way to allow specifying the width and height and fill color? Something like <vc:icon symbol="note" width="16px" height="16px" color="#8D8D8F" />. Or is this not desirable?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some icon default styles.

Can we get around using a fixed color here? Because it'll most likely interfere with the different themes. If that color isn't present in the current set of variables, let's use the closest one for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dennisreimann ok, thanks for pointing out the default styles. I will add those in. I initially had the color fixed but changed it to not be fixed as other icons in your PR didn't have them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dennisreimann alright, added default styles here which solves the issue nicely. I did notice something weird though. When I updated the color in the icon-sprite.svg my app was refusing to show the new color even after I restarted BTCPay. I had to run dotnet clean and then build from fresh for the change to be reflected. Looked like the SVG was cached and was not updating.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the color we should stick to using currentColor in the SVG as this allows to set it via CSS. We will need this to work with the different themes.

I also came across caching issues, which I brought up in this comment. I'll try to find a workaround, because this will likely take some time to get fixed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dennisreimann alright, updated here: ebdd42e.

I noticed that the cache seems to be cleared if you modify the Default.cshtml under Components/Icon.

<vc:icon symbol="note" />
</div>
<div class="text-left">
<small class="text-muted" data-timeago-unixms="@notif.Created.ToUnixTimeMilliseconds()">@notif.Created.ToTimeAgo()</small>

<div class="notification-item__content">
<div class="text-left font-weight-semibold">
@notif.Body
</div>
<div class="text-left d-flex">
<small class="text-muted" data-timeago-unixms="@notif.Created.ToUnixTimeMilliseconds()">@notif.Created.ToTimeAgo()</small>
</div>
</div>
</a>
}
<a class="dropdown-item text-secondary" asp-controller="Notifications" asp-action="Index">See All</a>
<form asp-controller="Notifications" asp-action="MarkAllAsSeen" asp-route-returnUrl="@Context.Request.GetCurrentPathWithQueryString()" method="post">
<button class="dropdown-item text-secondary" type="submit"><i class="fa fa-eye"></i> Mark all as seen</button>
</form>
<div class="p-3">
<a class="font-weight-semibold" asp-controller="Notifications" asp-action="Index">View all</a>
</div>
</div>
</li>
}
Expand Down
12 changes: 6 additions & 6 deletions BTCPayServer/Services/Notifications/Blobs/InvoiceEventNotification.cs
View file
Open in desktop
Expand Up @@ -36,12 +36,12 @@ public Handler(LinkGenerator linkGenerator, BTCPayServerOptions options)

internal static Dictionary<string, string> TextMapping = new Dictionary<string, string>()
{
// {InvoiceEvent.PaidInFull, "was fully paid."},
{InvoiceEvent.PaidAfterExpiration, "was paid after expiration."},
{InvoiceEvent.ExpiredPaidPartial, "expired with partial payments."},
{InvoiceEvent.FailedToConfirm, "has payments that failed to confirm on time."},
// {InvoiceEvent.ReceivedPayment, "received a payment."},
{InvoiceEvent.Confirmed, "was confirmed paid."}
// {InvoiceEvent.PaidInFull, "was fully paid"},
{InvoiceEvent.PaidAfterExpiration, "was paid after expiration"},
Kukks marked this conversation as resolved.
Show resolved Hide resolved
{InvoiceEvent.ExpiredPaidPartial, "expired with partial payments"},
{InvoiceEvent.FailedToConfirm, "has payments that failed to confirm on time"},
// {InvoiceEvent.ReceivedPayment, "received a payment"},
{InvoiceEvent.Confirmed, "was confirmed paid"}
};

protected override void FillViewModel(InvoiceEventNotification notification,
Expand Down
3 changes: 3 additions & 0 deletions BTCPayServer/wwwroot/img/icon-sprite.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
View file
Open in desktop
Expand Up @@ -6685,6 +6685,9 @@ button.bg-dark:focus {
.font-weight-normal {
font-weight: 400 !important; }

.font-weight-semibold {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added this here because the mock-up specified semibold weights but we didn't have a utility class for it like we have for other font weights.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted as a thing to add/update with our Bootstrap 5 migration (#1866).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, thanks!

font-weight: 600 !important; }

.font-weight-bold {
font-weight: 700 !important; }

Expand Down
16 changes: 16 additions & 0 deletions BTCPayServer/wwwroot/main/site.css
View file
Open in desktop
Expand Up @@ -357,3 +357,19 @@ html[data-devenv]:before {
.btcpay-status--disabled:before {
background-color: #FB383D;
}

/* Custom notification dropdown styling */
.notification-dropdown {
border: 0;
border-radius: 4px;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
padding: 0;
}
@media (min-width: 992px) {
.notification-dropdown {
width: 420px;
}
}
.notification:hover {
background-color: var(--btcpay-body-bg);
}