1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00

Add static emoji option

This commit is contained in:
Zhiyuan Zheng
2022-05-13 00:04:15 +02:00
parent 9c3e8f58b0
commit dde33ad1ad
9 changed files with 131 additions and 59 deletions

View File

@ -3,6 +3,7 @@ import CustomText from '@components/Text'
import { useAppDispatch } from '@root/store'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { countInstanceEmoji } from '@utils/slices/instancesSlice'
import { getSettingsStaticEmoji } from '@utils/slices/settingsSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { RefObject, useCallback, useContext, useEffect } from 'react'
@ -10,11 +11,13 @@ import { useTranslation } from 'react-i18next'
import {
AccessibilityInfo,
findNodeHandle,
Image,
Pressable,
SectionList,
View
} from 'react-native'
import FastImage from 'react-native-fast-image'
import { useSelector } from 'react-redux'
import validUrl from 'valid-url'
import updateText from '../../updateText'
import ComposeContext from '../../utils/createContext'
@ -30,6 +33,8 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
const { t } = useTranslation()
const dispatch = useAppDispatch()
const staticEmoji = useSelector(getSettingsStaticEmoji)
useEffect(() => {
const tagEmojis = findNodeHandle(accessibleRefEmojis.current)
if (composeState.emoji.active) {
@ -82,24 +87,45 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
dispatch(countInstanceEmoji(emoji))
}}
>
<FastImage
accessibilityLabel={t(
'common:customEmoji.accessibilityLabel',
{
emoji: emoji.shortcode
}
)}
accessibilityHint={t(
'screenCompose:content.root.footer.emojis.accessibilityHint'
)}
source={{ uri }}
style={{
width: 32,
height: 32,
padding: StyleConstants.Spacing.S,
margin: StyleConstants.Spacing.S
}}
/>
{staticEmoji ? (
<Image
accessibilityLabel={t(
'common:customEmoji.accessibilityLabel',
{
emoji: emoji.shortcode
}
)}
accessibilityHint={t(
'screenCompose:content.root.footer.emojis.accessibilityHint'
)}
source={{ uri }}
style={{
width: 32,
height: 32,
padding: StyleConstants.Spacing.S,
margin: StyleConstants.Spacing.S
}}
/>
) : (
<FastImage
accessibilityLabel={t(
'common:customEmoji.accessibilityLabel',
{
emoji: emoji.shortcode
}
)}
accessibilityHint={t(
'screenCompose:content.root.footer.emojis.accessibilityHint'
)}
source={{ uri }}
style={{
width: 32,
height: 32,
padding: StyleConstants.Spacing.S,
margin: StyleConstants.Spacing.S
}}
/>
)}
</Pressable>
)
} else {

View File

@ -22,35 +22,39 @@ const SettingsAnalytics: React.FC = () => {
const instanceVersion = useSelector(getInstanceVersion, () => true)
return (
<MenuContainer>
<MenuRow
title={t('me.settings.analytics.heading')}
description={t('me.settings.analytics.description')}
switchValue={settingsAnalytics}
switchOnValueChange={() =>
dispatch(changeAnalytics(!settingsAnalytics))
}
/>
<CustomText
fontStyle='S'
style={{
textAlign: 'center',
marginTop: StyleConstants.Spacing.S,
color: colors.secondary
}}
>
{t('me.settings.version', { version: Constants.manifest?.version })}
</CustomText>
<CustomText
fontStyle='S'
style={{
textAlign: 'center',
color: colors.secondary
}}
>
{t('me.settings.instanceVersion', { version: instanceVersion })}
</CustomText>
</MenuContainer>
<>
<MenuContainer>
<MenuRow
title={t('me.settings.analytics.heading')}
description={t('me.settings.analytics.description')}
switchValue={settingsAnalytics}
switchOnValueChange={() =>
dispatch(changeAnalytics(!settingsAnalytics))
}
/>
</MenuContainer>
<MenuContainer>
<CustomText
fontStyle='S'
style={{
textAlign: 'center',
marginTop: StyleConstants.Spacing.S,
color: colors.secondary
}}
>
{t('me.settings.version', { version: Constants.manifest?.version })}
</CustomText>
<CustomText
fontStyle='S'
style={{
textAlign: 'center',
color: colors.secondary
}}
>
{t('me.settings.instanceVersion', { version: instanceVersion })}
</CustomText>
</MenuContainer>
</>
)
}

View File

@ -15,7 +15,9 @@ import {
getSettingsBrowser,
getSettingsFontsize,
getSettingsDarkTheme,
changeDarkTheme
changeDarkTheme,
getSettingsStaticEmoji,
changeStaticEmoji
} from '@utils/slices/settingsSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import * as Notifications from 'expo-notifications'
@ -37,6 +39,7 @@ const SettingsApp: React.FC = () => {
const settingsTheme = useSelector(getSettingsTheme)
const settingsDarkTheme = useSelector(getSettingsDarkTheme)
const settingsBrowser = useSelector(getSettingsBrowser)
const settingsStaticEmoji = useSelector(getSettingsStaticEmoji)
return (
<MenuContainer>
@ -266,6 +269,18 @@ const SettingsApp: React.FC = () => {
)
}
/>
<MenuRow
title={t('me.settings.staticEmoji.heading')}
description={t('me.settings.staticEmoji.description')}
switchValue={settingsStaticEmoji}
switchOnValueChange={() => {
analytics('settings_staticemoji_press', {
current: settingsStaticEmoji.toString(),
new: !settingsStaticEmoji.toString()
})
dispatch(changeStaticEmoji(!settingsStaticEmoji))
}}
/>
</MenuContainer>
)
}