Skip to content
This repository has been archived by the owner on Nov 7, 2024. It is now read-only.

Commit

Permalink
Dismiss button
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillemcordoba
guillemcordoba committed May 2, 2024
1 parent 54cb9c0 commit 6e71347
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 83 deletions.
52 changes: 26 additions & 26 deletions flake.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion flake.nix
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
description = "Template for Holochain app development";

inputs = {
versions.url = "github:holochain/holochain?dir=versions/weekly";
versions.url = "github:holochain/holochain?dir=versions/0_3_rc";

holochain.url = "github:holochain/holochain";
holochain.inputs.versions.follows = "versions";
Expand Down
12 changes: 6 additions & 6 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

78 changes: 57 additions & 21 deletions ui/src/elements/my-notifications-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,18 @@ import { EntryRecord, mapValues } from '@holochain-open-dev/utils';
import { ActionHash, Delete, SignedActionHashed } from '@holochain/client';
import { consume } from '@lit/context';
import { msg } from '@lit/localize';
import { mdiInformationOutline, mdiNotificationClearAll } from '@mdi/js';
import {
mdiClose,
mdiInformationOutline,
mdiNotificationClearAll,
} from '@mdi/js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/divider/divider.js';
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
import { LitElement, html } from 'lit';
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';

Expand Down Expand Up @@ -53,6 +58,7 @@ export class MyNotifications extends SignalWatcher(LitElement) {

renderNotificationGroup(
read: boolean,
persistent: boolean,
notificationGroup: NotificationGroup,
last: boolean,
) {
Expand Down Expand Up @@ -86,25 +92,43 @@ export class MyNotifications extends SignalWatcher(LitElement) {
gap: singleNotification ? '0' : '8px',
})}
>
<div class="row" style="gap: 8px">
<span style="flex: 1">${notificationGroup.title}</span>
<sl-relative-time
style="color: grey;"
.date=${new Date(notificationGroup.timestamp)}
></sl-relative-time>
</div>
<div class="column" style="gap: 8px">
${notificationGroup.notifications.map(
n => html`
<div class="row" style="gap: 8px; align-items: center">
${!singleNotification
? html`<sl-icon src="${n.contents.iconSrc}"></sl-icon>`
: html``}
<span class="placeholder">${n.contents.body}</span>
</div>
`,
)}
<span style="flex: 1">${notificationGroup.title}</span>
${notificationGroup.notifications.map(
n => html`
<div class="row" style="gap: 8px; align-items: center">
${!singleNotification
? html`<sl-icon src="${n.contents.iconSrc}"></sl-icon>`
: html``}
<span class="placeholder">${n.contents.body}</span>
</div>
`,
)}
</div>
<div
class="column"
style="align-items: end; flex: 1; align-self: stretch"
>
<div style="flex: 1;">
${persistent
? html``
: html`
<sl-icon-button
.src=${wrapPathInSvg(mdiClose)}
id="dismiss-single-notification"
@click=${() =>
this.notificationsStore.client.dismissNotifications(
notificationGroup.notifications.map(
n => n.record.actionHash,
),
)}
></sl-icon-button>
`}
</div>
<sl-relative-time
style="color: grey; text-align: right"
.date=${new Date(notificationGroup.timestamp)}
></sl-relative-time>
</div>
</div>
Expand Down Expand Up @@ -305,6 +329,7 @@ export class MyNotifications extends SignalWatcher(LitElement) {
${unreadPersistent.map((n, i) =>
this.renderNotificationGroup(
false,
true,
n,
i === unreadPersistent.length - 1,
),
Expand All @@ -314,6 +339,7 @@ export class MyNotifications extends SignalWatcher(LitElement) {
: html``}
${readPersistent.map((n, i) =>
this.renderNotificationGroup(
true,
true,
n,
i === readPersistent.length - 1,
Expand Down Expand Up @@ -350,6 +376,7 @@ export class MyNotifications extends SignalWatcher(LitElement) {
),
],
)}
size="small"
>
<sl-icon
slot="prefix"
Expand All @@ -363,6 +390,7 @@ export class MyNotifications extends SignalWatcher(LitElement) {
<div class="column">
${unreadNonPersistent.map((n, i) =>
this.renderNotificationGroup(
false,
false,
n,
i === unreadNonPersistent.length - 1,
Expand All @@ -377,6 +405,7 @@ export class MyNotifications extends SignalWatcher(LitElement) {
${readNonPersistent.map((n, i) =>
this.renderNotificationGroup(
true,
false,
n,
i === readNonPersistent.length - 1,
),
Expand All @@ -401,5 +430,12 @@ export class MyNotifications extends SignalWatcher(LitElement) {
}
}

static styles = [sharedStyles];
static styles = [
sharedStyles,
css`
sl-icon-button::part(base) {
padding: 0 !important;
}
`,
];
}
58 changes: 29 additions & 29 deletions ui/src/notifications-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,35 +90,35 @@ export class NotificationsStore {

/* If a notification was persistent and has been read but was deleted (usually by someone else performing the action that the notification required), then we dismiss the notification */

const deletes = joinAsync(
notificationsHashes.map(hash =>
this.notifications.get(hash).deletes$.get(),
),
);
const entries = joinAsync(
notificationsHashes.map(hash =>
this.notifications.get(hash).entry$.get(),
),
);
if (entries.status !== 'completed') return entries;
if (deletes.status !== 'completed') return deletes;

const nonDeletedNotificationHashes: ActionHash[] = [];
const notificationsToDismiss: ActionHash[] = [];

for (let i = 0; i < notificationsHashes.length; i++) {
if (!entries.value[i].entry.persistent || deletes.value[i].length === 0) {
nonDeletedNotificationHashes.push(notificationsHashes[i]);
} else {
notificationsToDismiss.push(notificationsHashes[i]);
}
}

if (notificationsToDismiss.length > 0) {
this.client.dismissNotifications(notificationsToDismiss);
}

const value = slice(this.notifications, nonDeletedNotificationHashes);
// const deletes = joinAsync(
// notificationsHashes.map(hash =>
// this.notifications.get(hash).deletes$.get(),
// ),
// );
// const entries = joinAsync(
// notificationsHashes.map(hash =>
// this.notifications.get(hash).entry$.get(),
// ),
// );
// if (entries.status !== 'completed') return entries;
// if (deletes.status !== 'completed') return deletes;

// const nonDeletedNotificationHashes: ActionHash[] = [];
// const notificationsToDismiss: ActionHash[] = [];

// for (let i = 0; i < notificationsHashes.length; i++) {
// if (!entries.value[i].entry.persistent || deletes.value[i].length === 0) {
// nonDeletedNotificationHashes.push(notificationsHashes[i]);
// } else {
// notificationsToDismiss.push(notificationsHashes[i]);
// }
// }

// if (notificationsToDismiss.length > 0) {
// this.client.dismissNotifications(notificationsToDismiss);
// }

const value = slice(this.notifications, notificationsHashes);
return {
status: 'completed',
value,
Expand Down

0 comments on commit 6e71347

Please sign in to comment.