Merge pull request #25 from Shchoholiev/feature/SA-216-Add-coming-soon

feature/sa 216 add coming soon for 'Gift'
This commit is contained in:
Serhii Shchoholiev 2023-12-16 12:53:21 -08:00 committed by GitHub
commit fcc1edff3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 25 deletions

View File

@ -11,18 +11,18 @@
</a> </a>
</div> </div>
<div class="new_chat"> <div class="new_chat">
<div class="chat_message"> <div class="chat_message">
<div class="title_one_frame">New chat</div> <div class="title_one_frame">New chat</div>
<div class="title_two_frame">What you're looking for</div> <div class="title_two_frame">What you're looking for</div>
<div class="switch"> <div class="switch">
<div @onclick="Сhoose_product"class="switch_product" id="choose_product"> <button @onclick="Сhoose_product" class="switch_product" id="choose_product">
Product Product
</div> </button>
<div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift"> <button text="Gift" hover-text="Сoming soon" onmouseover="showMessage()" onmouseout="hideMessage()"
Gift class="switch_gift" id="choose_gift">
</div> </button>
</div> </div>
@ -53,8 +53,8 @@
</div> </div>
<div class="chat_input"> <div class="chat_input">
<input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput" <input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text"
placeholder="Describe what you are looking for...." autocomplete="off"> id="chatInput" placeholder="Describe what you are looking for...." autocomplete="off">
<img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message"> <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
</div> </div>
@ -73,11 +73,11 @@
var choose = "Product"; var choose = "Product";
function switchGift() { function switchGift() {
choose_gift.style.backgroundColor = "#0052CC"; // choose_gift.style.backgroundColor = "#0052CC";
choose_product.style.backgroundColor = "transparent"; // choose_product.style.backgroundColor = "transparent";
switchGi.style.color = "white"; // switchGi.style.color = "white";
switchProd.style.color = "#202124"; //switchProd.style.color = "#202124";
choose = "Gift"; //choose = "Gift";
} }
@ -91,17 +91,10 @@
} }
function myJavaScriptFunction(wishlistId) { function myJavaScriptFunction(wishlistId) {
UpdateMenu(wishlistId); UpdateMenu(wishlistId);
} }
document.getElementById('choose_gift').addEventListener('click', switchGift); document.getElementById('choose_gift').addEventListener('click', switchGift);
document.getElementById('choose_product').addEventListener('click', switchProduct); document.getElementById('choose_product').addEventListener('click', switchProduct);
@ -113,14 +106,14 @@
private void Сhoose_product() { private void Сhoose_product() {
selectedChoice = "Product"; selectedChoice = "Product";
} }
private void Сhoose_gift() { private void Сhoose_gift() {
selectedChoice = "Gift"; selectedChoice = "Gift";
} }
private async Task UpdateSideMenu(string wishlistId) private async Task UpdateSideMenu(string wishlistId)
{ {
await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId); await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
} }

View File

@ -26,7 +26,6 @@ namespace ShoppingAssistantWebClient.Web.Pages
private MessageCreateDto messageCreateDto; private MessageCreateDto messageCreateDto;
private string inputValue = ""; private string inputValue = "";
private async Task CreateNewChat() { private async Task CreateNewChat() {
try try

View File

@ -159,7 +159,41 @@
transition: 0.8s; transition: 0.8s;
color: #202124; color: #202124;
} }
button::before {
content: attr(text);
}
button:hover::before {
content: attr(hover-text);
}
button {
outline: none; /* Для синий ободки */
border: 0;
background: transparent;
}
.message {
right: 0;
position: absolute;
border-radius: 0.6em;
margin: 0.3125em;
width: calc(50% - 0.625em);
height: calc(100% - 0.625em);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: #202124;
padding: 4px; /* Добавьте подходящий отступ, если необходимо */
}
.hidden {
display: none;
}
.show {
display: block;
}
.chat_message { .chat_message {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;