octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2024-12-28 10:20:17 +01:00
Code Issues Projects Releases Wiki Activity

Update spoiler alert action

Browse Source
This commit is contained in:
Zhiyuan Zheng 2020-12-12 18:44:27 +01:00
parent 2217d3eb5d
commit dcb37e91c9
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Timelines/Timeline/Shared/Content.tsx
View File

@ -1,11 +1,12 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { Text } from 'react-native' import { Pressable, Text } from 'react-native'
import Collapsible from 'react-native-collapsible' import Collapsible from 'react-native-collapsible'
import ParseContent from 'src/components/ParseContent' import ParseContent from 'src/components/ParseContent'
import { useTheme } from 'src/utils/styles/ThemeManager' import { useTheme } from 'src/utils/styles/ThemeManager'
import { StyleConstants } from 'src/utils/styles/constants' import { StyleConstants } from 'src/utils/styles/constants'
import { LinearGradient } from 'expo-linear-gradient'
export interface Props { export interface Props {
status: Mastodon.Status status: Mastodon.Status
@ -15,27 +16,18 @@ export interface Props {
const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => { const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => {
const { theme } = useTheme() const { theme } = useTheme()
const [spoilerCollapsed, setSpoilerCollapsed] = useState(true) const [spoilerCollapsed, setSpoilerCollapsed] = useState(true)
const lineHeight = 28
return ( return (
<> <>
{status.spoiler_text ? ( {status.spoiler_text ? (
<> <>
<Text style={{ fontSize: StyleConstants.Font.Size.M }}> <ParseContent
<ParseContent content={status.spoiler_text}
content={status.spoiler_text} size={StyleConstants.Font.Size.M}
size={StyleConstants.Font.Size.M} emojis={status.emojis}
emojis={status.emojis} />
/>{' '} <Collapsible collapsed={spoilerCollapsed} collapsedHeight={20}>
<Text
onPress={() => setSpoilerCollapsed(!spoilerCollapsed)}
style={{
color: theme.link
}}
>
{spoilerCollapsed ? '点击展开' : '点击收起'}
</Text>
</Text>
<Collapsible collapsed={spoilerCollapsed}>
<ParseContent <ParseContent
content={status.content} content={status.content}
size={StyleConstants.Font.Size.M} size={StyleConstants.Font.Size.M}
@ -44,6 +36,34 @@ const TimelineContent: React.FC<Props> = ({ status, numberOfLines }) => {
{...(numberOfLines && { numberOfLines: numberOfLines })} {...(numberOfLines && { numberOfLines: numberOfLines })}
/> />
</Collapsible> </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 <ParseContent