cartaid/shopping-assistant-web-client
1
0
Fork 0
mirror of https://github.com/Shchoholiev/shopping-assistant-web-client.git synced 2025-04-03 16:19:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #28 from Shchoholiev/SA-217-deliting-chat-confirmation

Browse Source 
Add confirmation before deleting chat and UI fix
This commit is contained in:
Mykhailo Bilodid 2023-12-18 23:54:36 +02:00 committed by GitHub
commit 097377bb59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 109 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor Normal file
View File

@ -0,0 +1,24 @@
<div class="modal fade show d-block" tabindex="-1" role="dialog">
<div class="modal-backdrop fade show" @onclick="Cancel"></div>
<div class="modal-dialog modal-dialog-centered modal-sm" style="z-index: 1050">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title medium-text">Are you sure you want to delete this chat?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-yes" @onclick="ConfirmDelete">Yes</button>
<button type="button" class="btn btn-secondary btn-sm" @onclick="Cancel">No</button>
</div>
</div>
</div>
</div>
@code {
[CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
private async Task Close() => await BlazoredModal.CloseAsync(ModalResult.Ok(true));
private async Task ConfirmDelete() => await BlazoredModal.CloseAsync(ModalResult.Ok(true));
private async Task Cancel() => await BlazoredModal.CloseAsync(ModalResult.Cancel());
}

48
ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor.css Normal file
View File

@ -0,0 +1,48 @@
.modal-dialog.modal-sm {
max-width: 300px;
}
.medium-text {
font-size: 1rem;
}
.btn-sm {
font-size: 0.9rem;
padding: 6px 12px;
}
.btn-yes {
color: #FFFFFF;
background-color: #FF0000;
}
.btn:active {
transform: scale(0.95);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.modal-header, .modal-footer {
padding: 8px;
}
@media (max-width: 600px) {
.modal-dialog {
max-width: 100%;
margin: 10px auto;
}
.modal-content {
margin: 0;
}
}
.close {
background: none;
border: none;
outline: none;
}

1
ShoppingAssistantWebClient.Web/Program.cs
View File

@ -1,3 +1,4 @@
using Blazored.Modal;
using GraphQL.Client.Http;
using ShoppingAssistantWebClient.Web.Configurations;
using ShoppingAssistantWebClient.Web.Data;

19
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
View File

@ -41,8 +41,10 @@
<section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
<div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
<img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
<img class="button_open_card" @onclick="() => RedirectToCart(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
<div class="wishlist_buttons">
<img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
<img class="button_open_card" @onclick="() => RedirectToCart(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
</div>
</section>
}
}
@ -188,8 +190,17 @@
}
private async void DeleteWishlist(string itemId) {
await DeleteWish(itemId);
var options = new ModalOptions
{
UseCustomLayout = true
};
var parameters = new ModalParameters();
var result = await Modal.Show<ConfirmationModal>("", parameters, options).Result;
if (!result.Cancelled)
await DeleteWish(itemId);
}
/*
private int savedScrollTop = 0;
@ -212,6 +223,4 @@
}
*/
}

28
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
View File

@ -83,15 +83,17 @@
.wishlist_name {
padding-left: 0.7em;
padding-right: 5em;
width: 10.5em;
width: 15.5em;
white-space: nowrap;
overflow: hidden;
position: absolute;
height: 2.5em;
line-height: 2.5em;
cursor: pointer;
z-index: 1;
}
.cont_wishlist {
margin-top: 0.4375em;
margin-bottom: 0.4375em;
@ -100,7 +102,7 @@
font-size: 1.1em;
width: 100%;
height: 2.5em;
position: relative;
}
.cont_wishlist:hover {
@ -126,7 +128,7 @@
font-size: 1.1em;
width: 100%;
height: 2.5em;
background-color: #e6e6e6;
background-color: #e6e6e6;
transition: 0.2s;
}
@ -172,11 +174,27 @@
margin-top: 0.55em;
margin-right: 1em;
float: right;
visibility: hidden;
height: 1.4em;
width: 1.5em;
}
.wishlist_buttons {
display: none;
position: absolute;
right: 0;
width: 4.9em;
height: 2.5em;
background-color: #e6e6e6;
border-radius: 0.6em;
z-index: 10;
}
.cont_wishlist:hover .wishlist_buttons
{
display: block;
}
.wishlist_names::-webkit-scrollbar {
border-radius: 20px;
width: 0.2em;
@ -184,9 +202,7 @@
.wishlist_names::-webkit-scrollbar-thumb {
background-color: #0052CC;
/* Колір позиції покажчика */
border-radius: 10px;
/* Закруглення країв позиції покажчика */
width: 0.2em;
}