github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-24 15:20:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: handle notif.ack in desktop

Browse Source
This commit is contained in:
jelveh 2024-11-14 12:52:15 -08:00
parent 9e303a2f7c
commit a6650ee2d8
3 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/gui/src/UI/UIDesktop.js
View File

@ -46,6 +46,13 @@ import UIWindowSearch from "./UIWindowSearch.js"
async function UIDesktop(options){ async function UIDesktop(options){
let h = ''; let h = '';
// Set up the desktop channel for communication between different tabs in the same browser
window.channel = new BroadcastChannel('puter-desktop-channel');
channel.onmessage = function(e){
}
// channel.postMessage({'hello': 'world'});
// connect socket. // connect socket.
window.socket = io(window.gui_origin + '/', { window.socket = io(window.gui_origin + '/', {
auth: { auth: {
@ -122,6 +129,7 @@ async function UIDesktop(options){
text: notification.text, text: notification.text,
icon: icon, icon: icon,
value: notification, value: notification,
uid,
close: async () => { close: async () => {
await fetch(`${window.api_origin}/notif/mark-ack`, { await fetch(`${window.api_origin}/notif/mark-ack`, {
method: 'POST', method: 'POST',
@ -160,6 +168,7 @@ async function UIDesktop(options){
icon, icon,
title: notification.title, title: notification.title,
text: notification.text ?? notification.title, text: notification.text ?? notification.title,
uid: notif_info.uid,
close: async () => { close: async () => {
await fetch(`${window.api_origin}/notif/mark-ack`, { await fetch(`${window.api_origin}/notif/mark-ack`, {
method: 'POST', method: 'POST',
@ -176,6 +185,10 @@ async function UIDesktop(options){
} }
}); });
window.socket.on('notif.ack', ({ uid }) => {
$(`.notification[data-uid="${uid}"]`).remove();
});
window.socket.on('app.opened', async (app) => { window.socket.on('app.opened', async (app) => {
// don't update if this is the original client that initiated the action // don't update if this is the original client that initiated the action
if(app.original_client_socket_id === window.socket.id) if(app.original_client_socket_id === window.socket.id)

2
src/gui/src/UI/UINotification.js
View File

@ -22,7 +22,7 @@ function UINotification(options){
options.text = options.text ?? ''; options.text = options.text ?? '';
let h = ''; let h = '';
h += `<div id="ui-notification__${window.global_element_id}" data-el-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`; h += `<div id="ui-notification__${window.global_element_id}" data-uid="${html_encode(options.uid)}" data-el-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
h += `<img class="notification-close disable-user-select" src="${html_encode(window.icons['close.svg'])}">`; h += `<img class="notification-close disable-user-select" src="${html_encode(window.icons['close.svg'])}">`;
h += `<div class="notification-icon">`; h += `<div class="notification-icon">`;
h += `<img src="${html_encode(options.icon ?? window.icons['bell.svg'])}">`; h += `<img src="${html_encode(options.icon ?? window.icons['bell.svg'])}">`;

3
src/gui/src/css/style.css
View File

@ -1173,7 +1173,7 @@ span.header-sort-icon img {
min-width: 170px; min-width: 170px;
height: calc(100% - 28px); height: calc(100% - 28px);
float: left; float: left;
border-right: 1px solid #CCC; border-right: 0.5px solid #CCC;
padding: 15px 10px; padding: 15px 10px;
box-sizing: border-box; box-sizing: border-box;
background-color: hsla(var(--window-sidebar-hue), background-color: hsla(var(--window-sidebar-hue),
@ -1182,6 +1182,7 @@ span.header-sort-icon img {
calc(0.5 + 0.5*var(--window-sidebar-alpha))); calc(0.5 + 0.5*var(--window-sidebar-alpha)));
overflow-y: scroll; overflow-y: scroll;
margin-top: 1px; margin-top: 1px;
box-shadow: inset -4px 0 8px -8px rgba(0, 0, 0, 0.3);
} }
.window-sidebar .ui-resizable-e { .window-sidebar .ui-resizable-e {