lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-12 17:21:39 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Add support for icon, title, and text in notifications

Browse Source
This commit is contained in:
Nariman Jelveh
2024-06-15 11:31:26 -07:00
parent 40c0ef4567
commit 82c60414b9
2 changed files with 47 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/UI/UINotification.js
+8 -2
View File
@@ -22,13 +22,19 @@ window.active_notifs = []
function UINotification(options){
window.global_element_id++;
options.content = options.content ?? '';
options.text = options.text ?? '';
window.active_notifs.push(window.global_element_id);
let h = '';
h += `<div id="ui-notification__${window.global_element_id}" data-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
h += `<img class="notification-close" src="${html_encode(window.icons['close.svg'])}">`;
h += html_encode(options.content);
h += `<div class="notification-icon">`
h += `<img src="${html_encode(options.icon)}">`;
h += `</div>`;
h += `<div class="notification-content">`;
h += `<div class="notification-title">${html_encode(options.title)}</div>`;
h += `<div class="notification-text">${html_encode(options.text)}</div>`;
h += `</div>`;
h += `</div>`;
$('.notification-container').prepend(h);
src/css/style.css
+39 -3
View File
@@ -2433,8 +2433,8 @@ label {
* Notification
*****************************************************/
.notification {
width: 250px;
height: 54px;
width: 320px;
min-height: 54px;
background: #ffffffcd;
backdrop-filter: blur(5px);
border-radius: 11px;
@@ -2442,6 +2442,8 @@ label {
box-shadow: 0px 0px 17px -9px #000;
border: 1px solid #d5d5d5;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.notification-close {
@@ -2460,7 +2462,33 @@ label {
.notification:hover .notification-close {
display: block;
}
.notification-icon{
width: 40px;
margin: 10px 5px 10px 15px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
}
.notification-icon img{
width: 35px;
height: 35px;
}
.notification-title{
font-size: 12px;
font-weight: 600;
}
.notification-text{
font-size: 12px;
margin-top: 4px;
}
.notification-content{
flex-grow:1;
display: flex;
flex-direction: column;
padding: 10px;
}
/*****************************************************
* Start
*****************************************************/
@@ -2821,6 +2849,14 @@ fieldset[name=number-code] {
backdrop-filter: blur(10px);
}
.notification {
background-color: hsla(var(--window-head-hue),
var(--window-head-saturation),
var(--window-head-lightness),
var(--window-head-alpha));
backdrop-filter: blur(10px);
}
.device-phone .window-head {
background-color: rgba(231, 238, 245);
backdrop-filter: blur(10px);