feat: upgrade recent comment UI

Tim-Saijun · Aug 18, 2023 · 0d96066 · 0d96066
1 parent 1121a12
commit 0d96066
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 35 deletions.
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -446,7 +446,11 @@ export default defineComponent({
   --waline-badge-color: var(--text-accent);
   --waline-disabled-bgcolor: var(--text-dim);
   .wl-editor {
-    @apply p-2 box-border bg-ob-deep-800 mx-1 my-0;
+    @apply p-2 box-border bg-ob-deep-800 mx-1 my-0 opacity-50;
+    transition: 0.3s opacity linear;
+    &:focus {
+      @apply opacity-100;
+    }
   }
 
   .wl-login-nick {
@@ -469,9 +473,10 @@ export default defineComponent({
         @apply font-bold;
       }
       input {
-        @apply px-2 py-1 h-full w-full;
+        @apply px-2 py-1 h-full w-full bg-ob-deep-800 opacity-50;
+        transition: 0.3s opacity ease-in-out;
         &:focus {
-          @apply bg-ob-deep-900;
+          @apply opacity-100;
         }
       }
     }
@@ -513,7 +518,7 @@ export default defineComponent({
     @apply flex flex-row items-center max-w-none mt-0;
     .wl-logout-btn {
       top: 0;
-      inset-inline-end: 0;
+      inset-inline-end: -0.5rem;
     }
     a.wl-login-nick {
       @apply flex w-full;

diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
@@ -4,37 +4,44 @@
     <ul>
       <template v-if="isLoading === false">
         <li
-          class="bg-ob-deep-900 px-2 py-2 mb-1.5 rounded-lg flex flex-row justify-items-center items-stretch shadow-sm hover:shadow-ob transition-shadow"
+          class="bg-ob-deep-900 px-2 py-2 mb-1.5 rounded-lg shadow-sm hover:shadow-ob transition-shadow"
           v-if="comments.length > 0"
           v-for="comment in comments"
           :key="comment.id"
         >
-          <div class="flex justify-start items-start">
-            <img
-              class="col-span-1 mr-2 rounded-full p-1"
-              :src="comment.user.avatar_url"
-              alt="comment-avatar"
-              height="40"
-              width="40"
-            />
-          </div>
-          <div class="flex-1 text-xs">
-            <div class="text-xs mb-2 pt-1">
-              <span class="text-ob pr-2">
-                {{ comment.user.login }}
-                <b
-                  class="text-ob-secondary bg-ob-deep-800 py-0.5 px-1.5 rounded-md opacity-75"
-                  v-if="comment.is_admin"
-                >
-                  {{ t('settings.admin-user') }}
-                </b>
-              </span>
-              <p class="text-gray-500">{{ comment.created_at }}</p>
+          <a
+            :href="comment.html_url"
+            class="flex flex-row justify-items-center items-stretch cursor-pointer hover:opacity-100"
+          >
+            <div class="flex justify-start items-start">
+              <img
+                class="col-span-1 mr-2 rounded-full p-1"
+                :src="comment.user.avatar_url"
+                alt="comment-avatar"
+                height="28"
+                width="28"
+              />
             </div>
-            <div class="text-xs text-ob-bright pb-1">
-              {{ comment.body }}
+            <div class="flex-1 text-xs">
+              <div class="text-xs mb-2 pt-1">
+                <span class="text-ob-secondary pr-2">
+                  <a :href="comment.user.html_url">{{ comment.user.login }}</a>
+                  <b
+                    class="text-ob bg-ob-deep-800 py-0.5 px-1.5 rounded-md"
+                    v-if="comment.is_admin"
+                  >
+                    {{ t('settings.admin-user') }}
+                  </b>
+                </span>
+                <span class="text-ob-dim text-[0.65rem]">{{
+                  comment.created_at
+                }}</span>
+              </div>
+              <div class="text-xs pb-1">
+                {{ comment.body }}
+              </div>
             </div>
-          </div>
+          </a>
         </li>
 
         <div

diff --git a/src/utils/comments/waline-api.ts b/src/utils/comments/waline-api.ts
@@ -112,7 +112,10 @@ export class WalineComments {
   mapComment(comment: WalineComment): RecentComments {
     // slice off the last 5 character to remove the timezone.
     const createdAt = formatTime(
-      new Date(comment.time).toISOString().slice(0, -5)
+      new Date(comment.time).toISOString().slice(0, -5),
+      {
+        lang: this.configs.lang
+      }
     )
     return {
       id: comment.objectId,

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -40,11 +40,11 @@ export function formatTime(
     },
     cn: {
       seconds: '刚刚',
-      minutes: '分钟前',
-      hours: '小时前',
-      days: '天前',
-      months: '个月前',
-      years: '年前'
+      minutes: ' 分钟前',
+      hours: ' 小时前',
+      days: ' 天前',
+      months: ' 个月前',
+      years: ' 年前'
     }
   }