From e6038f45a8ba5fef8f6e032b3c649bfb15b854c5 Mon Sep 17 00:00:00 2001
From: Kai Kuehner <kvk@pobox.com>
Date: Thu, 15 Aug 2024 21:36:00 -0400
Subject: [PATCH] badges CSS and fade in

---
 src/badges.ts                   |  6 ++++
 src/components/ExtensionBar.vue | 21 ++++++++++++-
 src/components/UserProfile.vue  | 53 +++++++++++++++++++++++++++++----
 3 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/badges.ts b/src/badges.ts
index 94fc068..311ab2d 100644
--- a/src/badges.ts
+++ b/src/badges.ts
@@ -1,3 +1,9 @@
+/*
+TODO:
+This should be replaced with just copying the images folder.
+But the build system has to be rewritten for that, and not just use neuroglancer's
+*/
+
 import edits10 from './images/badges/edits10.png';
 import edits100 from './images/badges/edits100.png';
 import edits1000000 from './images/badges/edits1000000.png';
diff --git a/src/components/ExtensionBar.vue b/src/components/ExtensionBar.vue
index 6c82479..b68dec2 100644
--- a/src/components/ExtensionBar.vue
+++ b/src/components/ExtensionBar.vue
@@ -47,6 +47,25 @@ function logout(session: loginSession) {
   login.logout(session);
 }
 
+function openUserProfile() {
+  showUserProfile.value = true;
+  const badgeEls = document.querySelectorAll('.nge-user-profile-badge');
+  let i = 0;
+  const delay = 300;
+  for (const badgeEl of badgeEls) {
+    badgeEl.classList.add('animate-hide');
+    setTimeout(function() {
+      badgeEl.classList.remove('animate-hide');
+      badgeEl.classList.add('animate-fade-in');
+      //reset animation
+      (badgeEl as HTMLElement).style.animation = 'none';
+      (badgeEl as HTMLElement).offsetHeight;
+      (badgeEl as HTMLElement).style.animation = '';
+    }, i * delay);
+    i++;
+  }
+}
+
 </script>
 
 <template>
@@ -61,7 +80,7 @@ function logout(session: loginSession) {
     </div>
     <div id="insertNGTopBar" class="flex-fill"></div>
     <button v-if="volumes.length" @click="showVolumes = true">Volumes ({{ volumes.length }})</button>
-    <button @click="showUserProfile = true">
+    <button @click="openUserProfile()">
       <img class="user-profile-img" src="insert-img" title="User Profile" height="15">
     </button>
     <template v-if="login.sessions.length > 0">
diff --git a/src/components/UserProfile.vue b/src/components/UserProfile.vue
index b1dd5ed..46736e6 100644
--- a/src/components/UserProfile.vue
+++ b/src/components/UserProfile.vue
@@ -10,8 +10,7 @@ const {sessions} = storeToRefs(useLoginStore());
 import badges from "../badges";
 
 onMounted(() => {
-    console.log(badges);
-    const badgeImageEls = document.querySelectorAll('.nge-user-profile-badge-img');
+    const badgeImageEls = document.querySelectorAll('.nge-user-profile-badge-img > img');
     for (const badgeImageEl of badgeImageEls) {
         const badgeName: any = (badgeImageEl as HTMLElement).dataset.badge;
         (badgeImageEl as HTMLImageElement).src = badges[badgeName];
@@ -52,11 +51,13 @@ const emit = defineEmits({
                 </div>
             </div>
             <div class="nge-user-profile-badges">
-                <div class="nge-user-profile-badges-label">Badges</div>
+                <div class="nge-user-profile-badges-label">Achievements</div>
                 <div class="nge-user-profile-badges-box">
                     <div class="nge-user-profile-badge" v-for="badge of userBadges">
+                        <div class="nge-user-profile-badge-img">
+                            <img :data-badge="badge.image" :title="badge.description" height="80">
+                        </div>
                         <div class="nge-user-profile-badge-name">{{ badge.name }}</div>
-                        <img class="nge-user-profile-badge-img" :data-badge="badge.image" :title="badge.description" height="80">
                     </div>
                 </div>
             </div>
@@ -110,11 +111,51 @@ const emit = defineEmits({
     margin-top: 20px;
 }
 
+.nge-user-profile-badges-label {
+    font-size: 20px;
+    padding-top: 20px;
+    padding-bottom: 10px;
+}
+
 .nge-user-profile-badges-box {
     height: 100px;
-    border: 1px solid #01ffffba;
-    border-radius: 20px;
     display: grid;
     grid-template-columns: auto auto auto auto auto;
 }
+
+@keyframes fadeInAnimation {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.animate-hide {
+    opacity: 0 !important;
+}
+
+.animate-fade-in {
+    animation: fadeInAnimation ease 3s;
+    animation-fill-mode: forwards;
+}
+
+.nge-user-profile-badge {
+    display: grid;
+    grid-template-rows: auto auto;
+}
+
+.nge-user-profile-badge-img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nge-user-profile-badge-name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 </style>