From ba93e6d2355dc4321cbd43bf8114fc23e0fb8ec5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 30 Nov 2022 10:07:13 +0800
Subject: [PATCH] ui: redesign spoiler

---
 components/status/StatusCard.vue    |  7 ++++---
 components/status/StatusDetails.vue |  4 +++-
 components/status/StatusSpoiler.vue | 18 +++++++++++++-----
 locales/en-US.json                  |  5 +++++
 locales/zh-CN.json                  |  5 +++++
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 1eedac3f..ee99722e 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -49,8 +49,9 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
     <div v-if="rebloggedBy" pl8>
       <div flex="~ wrap" gap-1 items-center text-secondary text-sm>
         <div i-ri:repeat-fill mr-1 />
-        <AccountInlineInfo font-bold :account="rebloggedBy" />
-        reblogged
+        <i18n-t keypath="status.reblogged">
+          <AccountInlineInfo font-bold :account="rebloggedBy" />
+        </i18n-t>
       </div>
     </div>
     <div flex gap-4>
@@ -82,7 +83,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
         <div>
           <StatusSpoiler :enabled="status.sensitive">
             <template #spoiler>
-              {{ status.spoilerText }}
+              <p>{{ status.spoilerText }}</p>
             </template>
             <StatusBody :status="status" />
             <StatusPoll v-if="status.poll" :poll="status.poll" />
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 7f2c2e72..6b4d4b5e 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -27,7 +27,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
     <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <StatusSpoiler :enabled="status.sensitive">
       <template #spoiler>
-        {{ status.spoilerText }}
+        <p text-2xl>
+          {{ status.spoilerText }}
+        </p>
       </template>
       <StatusBody :status="status" :with-action="false" text-2xl />
       <StatusPoll v-if="status.poll" :poll="status.poll" />
diff --git a/components/status/StatusSpoiler.vue b/components/status/StatusSpoiler.vue
index 1d7e7475..e4e96932 100644
--- a/components/status/StatusSpoiler.vue
+++ b/components/status/StatusSpoiler.vue
@@ -10,11 +10,19 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-if="enabled" flex flex-col items-start gap-2>
-    <slot name="spoiler" />
-    <button btn-outline px-2 py-1 text-3 @click="toggleContent()">
-      {{ showContent ? 'Show less' : 'Show more' }}
-    </button>
+  <div v-if="enabled" flex flex-col items-start>
+    <div class="content-rich">
+      <slot name="spoiler" />
+    </div>
+    <div flex="~ gap-1 center" w-full>
+      <div border="t base" w-5 h-1px />
+      <button btn-text px-2 py-1 text-3 flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
+        <div v-if="showContent" i-ri:eye-line />
+        <div v-else i-ri:eye-close-line />
+        {{ showContent ? $t('status.spoiler_show_less') : $t('status.spoiler_show_more') }}
+      </button>
+      <div border="t base" flex-auto h-1px />
+    </div>
   </div>
   <slot v-if="!enabled || showContent" />
 </template>
diff --git a/locales/en-US.json b/locales/en-US.json
index bbc39eb3..4b6860d5 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -104,6 +104,11 @@
     "loading": "Loading...",
     "uploading": "Uploading..."
   },
+  "status": {
+    "spoiler_show_less": "Show less",
+    "spoiler_show_more": "Show more",
+    "reblogged": "{0} reblogged"
+  },
   "tab": {
     "media": "Media",
     "notifications_all": "All",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index f8b3b86f..110b7a5a 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -104,6 +104,11 @@
     "loading": "加载中...",
     "uploading": "上传中..."
   },
+  "status": {
+    "reblogged": "{0} 转发了",
+    "spoiler_show_less": "隐藏",
+    "spoiler_show_more": "显示更多"
+  },
   "tab": {
     "media": "媒体",
     "notifications_all": "全部",