Add a notification banner to show temporary messages

This commit is contained in:
sabaimran 2023-12-20 14:22:08 +05:30
parent 5ff9df9d4c
commit aa23da60a3
2 changed files with 26 additions and 1 deletions

View file

@ -296,6 +296,20 @@
height: 32px;
}
div#notification-banner {
background-color: var(--primary);
border: 1px solid var(--primary-hover);
padding: 8px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
}
div#notification-banner-parent {
position: fixed;
right: 0;
bottom: 0;
margin: 20px;
}
select#search-models,
select#chat-models {
margin-bottom: 0;

View file

@ -150,7 +150,7 @@
<div class="card-title-row">
<img class="card-icon" src="/static/assets/icons/matrix_blob.svg" alt="Chat">
<h3 class="card-title">
Text Model
Language
</h3>
</div>
<div class="card-description-row">
@ -259,6 +259,10 @@
</div>
{% endif %}
<div class="section"></div>
</div>
<div class="section" id="notification-banner-parent">
<div id="notification-banner"></div>
</div>
</div>
<script>
@ -307,6 +311,13 @@
saveSearchModelButton.innerHTML = "Error";
saveSearchModelButton.disabled = false;
}
let notificationBanner = document.getElementById("notification-banner");
notificationBanner.innerHTML = "When updating the search model, be sure to delete all your data and reindex.";
notificationBanner.style.display = "block";
setTimeout(function() {
notificationBanner.style.display = "none";
}, 5000);
})
};