ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

new notification banner setup (#406)

Browse source 
* #403 new notification banner setup

* #395 show electron badge notification count

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-04-06 11:54:51 +08:00 committed by GitHub
parent d2cf2cb4a6
commit 0efb73d031
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
modules/desktop/electron/libs/push-notification.ts
View file

@ -9,7 +9,9 @@ import {
getPackagesInstalledList,
updatePackageInstalledList
} from "./tea-dir";
import { app } from "electron";
let pushCount = 0;
export default function initialize(mainWindow: BrowserWindow) {
Pushy.listen();
// Register device for push notifications
@ -30,6 +32,8 @@ export default function initialize(mainWindow: BrowserWindow) {
log.info("push data:", data);
// TODO: replace this with something
Pushy.alert(mainWindow, data?.message as string);
pushCount++;
if (pushCount) app.dock.setBadge(pushCount.toString());
});
}

2
modules/desktop/src/components/notification-bar/notification-bar.svelte
View file

@ -5,7 +5,7 @@
import Notification from "@tea/ui/notification/notification.svelte";
</script>
<div class="w-full flex flex-col gap-1 py-2 px-2">
<div class="w-full flex flex-col gap-1">
{#each $notificationStore as notification}
<Notification
notification={{

2
modules/desktop/src/components/packages/packages.svelte
View file

@ -81,7 +81,7 @@
};
</script>
<div>
<div class="h-full w-full relative">
<ul class="flex flex-wrap bg-black" use:watchResize={onResize} on:scroll={onScroll}>
{#if packages.length > 0}
{#each packages as pkg, index}

83
modules/desktop/src/routes/+page.svelte
View file

@ -58,57 +58,64 @@
});
</script>
<div id="package-container">
<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
</div>
<header class="transition-all px-2 flex flex-col z-20" class:scrolling={packagesScrollY > 100}>
<div id="content" class="flex flex-col">
<NotificationBar />
<div class="flex justify-between items-center">
<h1 class="text-primary pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
<!--
<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
we might bring it back?
<SortingButtons onSort={(prop, dir) => {
sortBy = prop;
sortDirection = dir;
}} />
</section>
-->
{#if needsUpdateCount && sideMenuOption === SideMenuOptions.installed_updates_available}
<div class="flex items-center text-sm">
{#if currentUpdatingPkg}
<p class="text-gray px-2">{updatingMessage}</p>
<article class="w-full h-auto flex-grow overflow-hidden relative">
<ul class="px-2">
<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
</ul>
<header class="flex justify-between items-center z-30" class:scrolling={packagesScrollY > 150}>
<h1 class="text-primary pl-3 text-2xl font-bold font-mona">
{$t(`side-menu-title.${sideMenuOption}`)}
</h1>
<!--
<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
we might bring it back?
<SortingButtons onSort={(prop, dir) => {
sortBy = prop;
sortDirection = dir;
}} />
</section>
-->
{#if needsUpdateCount && sideMenuOption === SideMenuOptions.installed_updates_available}
<div class="flex items-center text-sm pr-2">
{#if currentUpdatingPkg}
<p class="text-gray px-2">{updatingMessage}</p>
{/if}
<Button
class="w-48 h-8 text-xs"
loading={updating}
type="plain"
color="secondary"
onClick={updateAll}
>
{$t(`package.update-all`)} [{needsUpdateCount}]
</Button>
</div>
{/if}
<Button
class="w-48 h-8 text-xs"
loading={updating}
type="plain"
color="secondary"
onClick={updateAll}
>
{$t(`package.update-all`)} [{needsUpdateCount}]
</Button>
</div>
{/if}
</div>
</header>
</header>
</article>
</div>
<SideMenu bind:activeOption={sideMenuOption}/>
{#if $requireTeaCli }
<WelcomeModal tea={teaPkg} />
{/if}
<style>
#package-container {
width: calc(100% - 200px);
margin-left: 200px;
#content {
width: calc(100vw - 191px);
margin-left: 185px;
height: calc(100vh - 48px - 27px);
overflow: hidden;
}
header {
position: absolute;
top: 0px;
left: 190px;
left: 1px;
height: 72px;
width: calc(100% - 190px - 10px);
width: 100%;
background-image: linear-gradient(rgba(26,26,26,1), rgba(26,26,26,0));
padding-top: 15px;
}

2
modules/ui/src/notification/notification.svelte
View file

@ -9,7 +9,7 @@
export let onClose: () => void;
</script>
<div class=" flex w-full items-center justify-between rounded-md bg-accent px-4 py-2">
<div class=" flex w-full items-center justify-between bg-accent px-4 py-2">
<div class="text-white">{notification.message}</div>
<div class="flex items-center gap-4">
{#if notification.callback}