Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › 73e9a9fd
Add confirmations to Clear all notifications buttons
Open rudolfs opened 1 year ago

check check-e2e

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +77 -27
4 files changed +77 -27 87f54917 → ae3258d7
added src/components/ConfirmClear.svelte
@@ -0,0 +1,43 @@
+ 
<script lang="ts">
+ 
  import { closeFocused } from "@app/components/Popover.svelte";
+
+ 
  import Border from "./Border.svelte";
+ 
  import Button from "./Button.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import NakedButton from "@app/components/NakedButton.svelte";
+ 
  import OutlineButton from "./OutlineButton.svelte";
+ 
  import Popover from "./Popover.svelte";
+
+ 
  interface Props {
+ 
    clear: () => void;
+ 
    subject: string;
+ 
  }
+
+ 
  /* eslint-disable prefer-const */
+ 
  let { clear, subject }: Props = $props();
+ 
  /* eslint-enable prefer-const */
+ 
</script>
+
+ 
<Popover popoverPositionRight="0" popoverPositionTop="3rem">
+ 
  {#snippet toggle(onclick)}
+ 
    <NakedButton stylePadding="0 4px" variant="ghost" {onclick}>
+ 
      <Icon name="broom-double" />
+ 
    </NakedButton>
+ 
  {/snippet}
+
+ 
  {#snippet popover()}
+ 
    <Border variant="ghost" stylePadding="1rem">
+ 
      <div class="global-flex txt-small">
+ 
        <div style:white-space="nowrap" style:margin-right="1rem">
+ 
          Clear all {subject} notifications?
+ 
        </div>
+ 
        <div class="global-flex" style:justify-content="space-between">
+ 
          <OutlineButton variant="ghost" onclick={closeFocused}>
+ 
            Cancel
+ 
          </OutlineButton>
+ 
          <Button variant="ghost" onclick={clear}>Clear all</Button>
+ 
        </div>
+ 
      </div>
+ 
    </Border>
+ 
  {/snippet}
+ 
</Popover>
modified src/components/NotificationTeaser.svelte
@@ -20,6 +20,7 @@


  import Icon from "./Icon.svelte";

  import InlineTitle from "./InlineTitle.svelte";
+ 
  import NakedButton from "./NakedButton.svelte";

  import NodeId from "./NodeId.svelte";



  interface Props {
@@ -142,6 +143,12 @@
    font-size: var(--font-size-regular);

    word-break: break-word;

  }
+ 
  .clear-icon {
+ 
    display: none;
+ 
  }
+ 
  .notification-teaser:hover .clear-icon {
+ 
    display: flex;
+ 
  }

  .selected {

    background-color: var(--color-fill-float-hover);

  }
@@ -152,13 +159,6 @@
    padding: 0;

    margin-right: 1rem;

  }
- 
  .icon {
- 
    width: 2rem;
- 
    height: 2rem;
- 
    display: flex;
- 
    justify-content: center;
- 
    align-items: center;
- 
  }

  .notification-teaser:first-of-type {

    clip-path: var(--3px-top-corner-fill);

  }
@@ -210,18 +210,19 @@
        </div>

      </div>

    </div>
- 
    <div class="global-flex">
- 
      <div class="icon">
- 
        <Icon
- 
          onclick={e => {
- 
            e.stopPropagation();
- 
            void clearByIds(
- 
              rid,
- 
              notificationItems.map(n => n.rowId),
- 
            );
- 
          }}
- 
          name={clearIcon} />
- 
      </div>
+ 
    <div class="clear-icon">
+ 
      <NakedButton
+ 
        stylePadding="0 4px"
+ 
        variant="ghost"
+ 
        onclick={e => {
+ 
          e.stopPropagation();
+ 
          void clearByIds(
+ 
            rid,
+ 
            notificationItems.map(n => n.rowId),
+ 
          );
+ 
        }}>
+ 
        <Icon name={clearIcon} />
+ 
      </NakedButton>

    </div>

  </div>

</div>
modified src/components/RepoNotifications.svelte
@@ -3,9 +3,10 @@
  import type { NotificationItem } from "@bindings/cob/inbox/NotificationItem";



  import * as router from "@app/lib/router";
+ 


  import Button from "./Button.svelte";
+ 
  import ConfirmClear from "./ConfirmClear.svelte";

  import NotificationTeaser from "./NotificationTeaser.svelte";
- 
  import Icon from "./Icon.svelte";



  interface Props {

    all?: boolean;
@@ -31,7 +32,7 @@
    display: flex;

    justify-content: space-between;

    align-items: center;
- 
    padding-right: 1.5rem;
+ 
    padding-right: 1rem;

  }

  .container {

    display: flex;
@@ -48,7 +49,11 @@
      </span>

      {repo.count}

    </div>
- 
    <Icon onclick={() => clearByRepo(repo.rid)} name="broom-double" />
+ 
    <ConfirmClear
+ 
      subject={repo.name}
+ 
      clear={() => {
+ 
        void clearByRepo(repo.rid);
+ 
      }} />

  </div>

{/if}
modified src/views/home/Inbox.svelte
@@ -1,21 +1,22 @@
<script lang="ts">
- 
  import type { HomeInboxTab } from "@app/lib/router/definitions";

  import type { Config } from "@bindings/config/Config";
+ 
  import type { HomeInboxTab } from "@app/lib/router/definitions";

  import type { NotificationCount } from "@bindings/cob/inbox/NotificationCount";

  import type { NotificationItem } from "@bindings/cob/inbox/NotificationItem";

  import type { PaginatedQuery } from "@bindings/cob/PaginatedQuery";

  import type { RepoCount } from "@bindings/repo/RepoCount";
+ 
  import * as router from "@app/lib/router";

  import { SvelteMap } from "svelte/reactivity";

  import { invoke } from "@app/lib/invoke";
- 
  import * as router from "@app/lib/router";
+ 
  import Border from "@app/components/Border.svelte";
+ 
  import ConfirmClear from "@app/components/ConfirmClear.svelte";

  import CopyableId from "@app/components/CopyableId.svelte";

  import HomeSidebar from "@app/components/HomeSidebar.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Layout from "@app/views/repo/Layout.svelte";

  import RepoNotifications from "@app/components/RepoNotifications.svelte";
- 
  import Border from "@app/components/Border.svelte";



  interface Props {

    activeTab?: HomeInboxTab;
@@ -156,7 +157,7 @@
    font-size: var(--font-size-medium);

    display: flex;

    justify-content: space-between;
- 
    padding-right: 1.5rem;
+ 
    padding-right: 1rem;

    align-items: center;

    min-height: 2.5rem;

  }
@@ -184,7 +185,7 @@
    <div class="header">

      <div>Inbox</div>

      {#if notifications.size > 0}
- 
        <Icon onclick={clearAll} name="broom-double" />
+ 
        <ConfirmClear subject="inbox" clear={clearAll} />

      {/if}

    </div>

    {#each notifications.values() as { repo, pagination, items }}