Tweak side nav buttons, profile detail buttons

2023-02-28 09:18:03 -06:00 · 2023-02-28 09:18:03 -06:00 · 0a293ca354
parent 24b1588599
commit 0a293ca354
4 changed files with 103 additions and 39 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -24,6 +24,7 @@
        "qr-scanner": "^1.4.2",
        "qrcode": "^1.5.1",
        "ramda": "^0.28.0",
+        "svelte": "^3.55.1",
        "svelte-check": "^3.0.3",
        "svelte-link-preview": "^0.3.3",
        "svelte-loading-spinners": "^0.3.4",
@ -43,7 +44,6 @@
        "eslint": "^8.33.0",
        "eslint-plugin-svelte3": "^4.0.0",
        "postcss": "^8.4.19",
-        "svelte": "^3.52.0",
        "tailwindcss": "^3.2.4",
        "typescript": "^4.9.5",
        "vite": "^3.2.3",
--- a/package.json
+++ b/package.json
@ -20,7 +20,6 @@
    "eslint": "^8.33.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "postcss": "^8.4.19",
-    "svelte": "^3.52.0",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.5",
    "vite": "^3.2.3",
@ -43,6 +42,7 @@
    "qr-scanner": "^1.4.2",
    "qrcode": "^1.5.1",
    "ramda": "^0.28.0",
+    "svelte": "^3.55.1",
    "svelte-check": "^3.0.3",
    "svelte-link-preview": "^0.3.3",
    "svelte-loading-spinners": "^0.3.4",
--- a/src/views/SideNav.svelte
+++ b/src/views/SideNav.svelte
@ -38,7 +38,7 @@
  </li>
  <li class="cursor-pointer relative">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/alerts">
-      <i class="fa-solid fa-bell mr-2" /> Alerts
+      <i class="fa fa-inbox mr-2" /> Inbox
      {#if $newAlerts}
      <div class="w-2 h-2 rounded bg-accent absolute top-3 left-6" />
      {/if}
@ -47,18 +47,18 @@
  {/if}
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/search/people">
-      <i class="fa-solid fa-search mr-2" /> Search
+      <i class="fa fa-search mr-2" /> Search
    </a>
  </li>
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/notes/follows">
-      <i class="fa-solid fa-tag mr-2" /> Notes
+      <i class="fa fa-rss mr-2" /> Feed
    </a>
  </li>
  {#if $profile}
  <li class="cursor-pointer relative">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/messages">
-      <i class="fa-solid fa-envelope mr-2" /> Messages
+      <i class="fa fa-envelope mr-2" /> Messages
      {#if $newDirectMessages}
      <div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
      {/if}
@ -66,7 +66,7 @@
  </li>
  <li class="cursor-pointer relative">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/chat">
-      <i class="fa-solid fa-comment mr-2" /> Chat
+      <i class="fa fa-comment mr-2" /> Chat
      {#if $newChatMessages}
      <div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
      {/if}
@ -76,7 +76,7 @@
  <li class="h-px mx-3 my-4 bg-medium" />
  <li class="cursor-pointer relative">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/relays">
-      <i class="fa-solid fa-server mr-2" /> Relays
+      <i class="fa fa-server mr-2" /> Relays
      {#if $slowConnections.length > 0}
      <div class="w-2 h-2 rounded bg-accent absolute top-2 left-8" />
      {/if}
@ -85,30 +85,30 @@
  {#if $profile}
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/keys">
-      <i class="fa-solid fa-key mr-2" /> Keys
+      <i class="fa fa-key mr-2" /> Keys
    </a>
  </li>
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/settings">
-      <i class="fa-solid fa-gear mr-2" /> Settings
+      <i class="fa fa-gear mr-2" /> Settings
    </a>
  </li>
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/logout">
-      <i class="fa-solid fa-right-from-bracket mr-2" /> Logout
+      <i class="fa fa-right-from-bracket mr-2" /> Logout
    </a>
  </li>
  {:else}
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/login">
-      <i class="fa-solid fa-right-to-bracket mr-2" /> Login
+      <i class="fa fa-right-to-bracket mr-2" /> Login
    </a>
  </li>
  {/if}
  {#if import.meta.env.VITE_SHOW_DEBUG_ROUTE === 'true'}
  <li class="cursor-pointer">
    <a class="block px-4 py-2 hover:bg-accent transition-all" href="/debug">
-      <i class="fa-solid fa-bug mr-2" /> Debug
+      <i class="fa fa-bug mr-2" /> Debug
    </a>
  </li>
  {/if}
@ -116,7 +116,7 @@
  <li
    class="cursor-pointer px-4 py-2 hover:bg-accent transition-all"
    on:click={install}>
-    <i class="fa-solid fa-rocket mr-2" /> Install
+    <i class="fa fa-rocket mr-2" /> Install
  </li>
  {/if}
 </ul>
--- a/src/views/person/PersonDetail.svelte
+++ b/src/views/person/PersonDetail.svelte
@ -2,7 +2,7 @@
  import {last} from 'ramda'
  import {onMount} from 'svelte'
  import {tweened} from 'svelte/motion'
-  import {fly} from 'svelte/transition'
+  import {fly, fade} from 'svelte/transition'
  import {navigate} from 'svelte-routing'
  import {log} from 'src/util/logger'
  import {renderContent} from 'src/util/html'
@ -35,6 +35,7 @@
  let followersCount = tweened(0, {interpolate, duration: 1000})
  let person = database.getPersonWithFallback(pubkey)
  let loading = true
+  let showActions = false

  $: following = $petnamePubkeys.includes(pubkey)

@ -70,6 +71,16 @@
    })
  })

+  const toggleActions = () => {
+    showActions = !showActions
+  }
+
+  const makeGetTransition = () => {
+    let i = 0
+
+    return () => ({y: 20, delay: i++ * 30})
+  }
+
  const setActiveTab = tab => navigate(routes.person(pubkey, tab))

  const showFollows = () => {
@ -101,6 +112,8 @@
  }
 </script>

+<svelte:window on:click={() => { showActions = false }} />
+
 <div
  class="absolute w-full h-64"
  style="z-index: -1;
@ -110,12 +123,12 @@
          url('{person.kind0?.banner}')" />

 <Content>
-  <div class="flex gap-4" in:fly={{y: 20}}>
+  <div class="flex gap-4">
    <div
      class="overflow-hidden w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
      style="background-image: url({person.kind0?.picture})" />
    <div class="flex flex-col gap-4 flex-grow">
-      <div class="flex justify-between items-center gap-4">
+      <div class="flex justify-between items-start gap-4">
        <div class="flex-grow flex flex-col gap-2">
          <div class="flex items-center gap-2">
            <h1 class="text-2xl">{displayPerson(person)}</h1>
@ -127,29 +140,80 @@
          </div>
          {/if}
        </div>
-        <div class="whitespace-nowrap flex gap-3 items-center flex-wrap">
-          {#if user.getPubkey() === pubkey && $canPublish}
-          <Anchor href="/profile"><i class="fa-solid fa-edit" /> Edit profile</Anchor>
-          {:else if $canPublish}
-            <Anchor type="button-circle" on:click={openAdvanced}>
-              <i class="fa fa-sliders" />
-            </Anchor>
-            <Anchor type="button-circle" href={`/messages/${npub}`}>
-              <i class="fa fa-envelope" />
-            </Anchor>
+        <div class="whitespace-nowrap flex gap-3 flex-wrap relative">
+          <div on:click|stopPropagation={toggleActions} class="px-5 py-2 cursor-pointer">
+            <i class="fa fa-ellipsis-vertical" />
+          </div>
+          {#if showActions}
+          {@const getTransition = makeGetTransition()}
+          <div class="absolute top-0 right-0 mt-12 flex flex-col gap-2 opacity-90">
+            <div
+              class="absolute inset-0 bg-black rounded-full"
+              style="filter: blur(15px)"
+              transition:fade />
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={share}>
+              <div class="text-light">Share</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-share-nodes" />
+              </Anchor>
+            </div>
+            {#if following}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={unfollow}>
+              <div class="text-light">Unfollow</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-user-minus" />
+              </Anchor>
+            </div>
+            {:else if user.getPubkey() !== pubkey}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={follow}>
+              <div class="text-light">Follow</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-user-plus" />
+              </Anchor>
+            </div>
+            {/if}
+            {#if $canPublish}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={() => navigate(`/messages/${npub}`)}>
+              <div class="text-light">Message</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-envelope" />
+              </Anchor>
+            </div>
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={openAdvanced}>
+              <div class="text-light">Advanced</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-sliders" />
+              </Anchor>
+            </div>
+            {/if}
+            {#if user.getPubkey() === pubkey}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={() => navigate("/profile")}>
+              <div class="text-light">Edit</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-edit" />
+              </Anchor>
+            </div>
+            {/if}
+          </div>
          {/if}
-          {#if following}
-          <Anchor type="button-circle" on:click={unfollow}>
-            <i class="fa fa-user-minus" />
-          </Anchor>
-          {:else if user.getPubkey() !== pubkey}
-          <Anchor type="button-circle" on:click={follow}>
-            <i class="fa fa-user-plus" />
-          </Anchor>
-          {/if}
-          <Anchor type="button-circle" on:click={share}>
-            <i class="fa fa-share-nodes" />
-          </Anchor>
        </div>
      </div>
      <p>{@html renderContent(person?.kind0?.about || '')}</p>