From dcb37e91c95ce00233b8540354ca9a01164341bb Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sat, 12 Dec 2020 18:44:27 +0100
Subject: [PATCH] Update spoiler alert action

---
 .../Timelines/Timeline/Shared/Content.tsx     | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/components/Timelines/Timeline/Shared/Content.tsx b/src/components/Timelines/Timeline/Shared/Content.tsx
index 0cdf97d7..bfe91be1 100644
--- a/src/components/Timelines/Timeline/Shared/Content.tsx
+++ b/src/components/Timelines/Timeline/Shared/Content.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-import { Text } from 'react-native'
+import { Pressable, Text } from 'react-native'
 import Collapsible from 'react-native-collapsible'
 
 import ParseContent from 'src/components/ParseContent'
 
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'
+import { LinearGradient } from 'expo-linear-gradient'
 
 export interface Props {
   status: Mastodon.Status
@@ -15,27 +16,18 @@ export interface Props {
 const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => {
   const { theme } = useTheme()
   const [spoilerCollapsed, setSpoilerCollapsed] = useState(true)
+  const lineHeight = 28
 
   return (
     <>
       {status.spoiler_text ? (
         <>
-          <Text style={{ fontSize: StyleConstants.Font.Size.M }}>
-            <ParseContent
-              content={status.spoiler_text}
-              size={StyleConstants.Font.Size.M}
-              emojis={status.emojis}
-            />{' '}
-            <Text
-              onPress={() => setSpoilerCollapsed(!spoilerCollapsed)}
-              style={{
-                color: theme.link
-              }}
-            >
-              {spoilerCollapsed ? '点击展开' : '点击收起'}
-            </Text>
-          </Text>
-          <Collapsible collapsed={spoilerCollapsed}>
+          <ParseContent
+            content={status.spoiler_text}
+            size={StyleConstants.Font.Size.M}
+            emojis={status.emojis}
+          />
+          <Collapsible collapsed={spoilerCollapsed} collapsedHeight={20}>
             <ParseContent
               content={status.content}
               size={StyleConstants.Font.Size.M}
@@ -44,6 +36,34 @@ const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => {
               {...(numberOfLines && { numberOfLines: numberOfLines })}
             />
           </Collapsible>
+          <Pressable
+            onPress={() => setSpoilerCollapsed(!spoilerCollapsed)}
+            style={{
+              marginTop: spoilerCollapsed ? -lineHeight : 0
+            }}
+          >
+            <LinearGradient
+              colors={[
+                theme.backgroundGradientStart,
+                theme.backgroundGradientEnd
+              ]}
+              locations={[0, lineHeight / (StyleConstants.Font.Size.S * 5)]}
+              style={{
+                paddingTop: StyleConstants.Font.Size.S * 2,
+                paddingBottom: StyleConstants.Font.Size.S
+              }}
+            >
+              <Text
+                style={{
+                  textAlign: 'center',
+                  fontSize: StyleConstants.Font.Size.S,
+                  color: theme.primary
+                }}
+              >
+                {spoilerCollapsed ? '展开' : '收起'}隐藏内容
+              </Text>
+            </LinearGradient>
+          </Pressable>
         </>
       ) : (
         <ParseContent