octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update color scheme

This commit is contained in:
Zhiyuan Zheng 2020-12-26 00:40:27 +01:00
parent 9d1c366eda
commit 7f574576ef
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
17 changed files with 138 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/Index.tsx
View File

@ -171,20 +171,25 @@ export const Index: React.FC<Props> = ({ localCorrupt }) => {
})}
tabBarOptions={{
activeTintColor: theme.primary,
inactiveTintColor: localInstance ? theme.secondary : theme.disabled,
inactiveTintColor: theme.secondary,
showLabel: false
}}
>
<Tab.Screen
name='Screen-Local'
component={ScreenLocal}
listeners={{
listeners={({ navigation }) => ({
tabPress: e => {
if (!localInstance) {
e.preventDefault()
toast({
type: 'error',
content: '请先登录',
onHide: () => navigation.navigate('Screen-Me')
})
}
}
}}
})}
/>
<Tab.Screen name='Screen-Public' component={ScreenPublic} />
<Tab.Screen
@ -192,10 +197,17 @@ export const Index: React.FC<Props> = ({ localCorrupt }) => {
listeners={({ navigation }) => ({
tabPress: e => {
e.preventDefault()
localInstance &&
if (localInstance) {
navigation.navigate(getCurrentTab(navigation), {
screen: 'Screen-Shared-Compose'
})
} else {
toast({
type: 'error',
content: '请先登录',
onHide: () => navigation.navigate('Screen-Me')
})
}
}
})}
>
@ -207,15 +219,23 @@ export const Index: React.FC<Props> = ({ localCorrupt }) => {
options={{
tabBarBadge:
prevNotification && prevNotification.unread ? '' : undefined,
tabBarBadgeStyle: { transform: [{ scale: 0.5 }] }
tabBarBadgeStyle: {
transform: [{ scale: 0.5 }],
backgroundColor: theme.red
}
}}
listeners={{
listeners={({ navigation }) => ({
tabPress: e => {
if (!localInstance) {
e.preventDefault()
toast({
type: 'error',
content: '请先登录',
onHide: () => navigation.navigate('Screen-Me')
})
}
}
}}
})}
/>
<Tab.Screen name='Screen-Me' component={ScreenMe} />
</Tab.Navigator>

2
src/components/Menu/Button.tsx
View File

@ -27,7 +27,7 @@ const Core: React.FC<Props> = ({ text, destructive = false }) => {
return (
<View style={styles.core}>
<Text style={{ color: destructive ? theme.error : theme.primary }}>
<Text style={{ color: destructive ? theme.red : theme.primary }}>
{text}
</Text>
</View>

10
src/components/ParseContent.tsx
View File

@ -36,7 +36,7 @@ const renderNode = ({
<Text
key={index}
style={{
color: theme.link,
color: theme.blue,
fontSize: StyleConstants.Font.Size[size]
}}
onPress={() => {
@ -55,7 +55,7 @@ const renderNode = ({
<Text
key={index}
style={{
color: theme.link,
color: theme.blue,
fontSize: StyleConstants.Font.Size[size]
}}
onPress={() => {
@ -79,7 +79,7 @@ const renderNode = ({
<Text
key={index}
style={{
color: theme.link,
color: theme.blue,
fontSize: StyleConstants.Font.Size[size]
}}
onPress={async () => await openLink(href)}
@ -87,7 +87,7 @@ const renderNode = ({
<Feather
name='external-link'
size={StyleConstants.Font.Size[size]}
color={theme.link}
color={theme.blue}
/>{' '}
{showFullLink ? href : domain[1]}
</Text>
@ -152,7 +152,7 @@ const ParseContent: React.FC<Props> = ({
const [totalLines, setTotalLines] = useState<number | undefined>()
const [lineHeight, setLineHeight] = useState<number | undefined>()
const [shownLines, setShownLines] = useState(numberOfLines)
// console.log(children)
return (
<>
<Text

25
src/components/Timelines/Timeline/Shared/Actions.tsx
View File

@ -143,16 +143,19 @@ const TimelineActions: React.FC<Props> = ({
}
})
}, [])
const onPressReblog = useCallback(
() =>
const onPressReblog = useCallback(() => {
if (status.visibility === 'private' || status.visibility === 'direct') {
console.log('awjerio')
toast({ type: 'error', content: '禁止转发' })
} else {
mutate({
id: status.id,
type: 'reblog',
stateKey: 'reblogged',
prevState: status.reblogged
}),
[status.reblogged]
)
})
}
}, [status.reblogged])
const onPressFavourite = useCallback(
() =>
mutate({
@ -218,11 +221,7 @@ const TimelineActions: React.FC<Props> = ({
() => (
<Feather
name='repeat'
color={
status.visibility === 'public' || status.visibility === 'unlisted'
? iconColorAction(status.reblogged)
: theme.disabled
}
color={iconColorAction(status.reblogged)}
size={StyleConstants.Font.Size.M + 2}
/>
),
@ -270,11 +269,7 @@ const TimelineActions: React.FC<Props> = ({
<Pressable
style={styles.action}
onPress={
status.visibility === 'public' || status.visibility === 'unlisted'
? onPressReblog
: null
}
onPress={onPressReblog}
children={childrenReblog}
/>

4
src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
View File

@ -93,8 +93,8 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
minimumValue={0}
maximumValue={audio.meta.original.duration * 1000}
value={audioPosition}
minimumTrackTintColor={theme.secondary}
maximumTrackTintColor={theme.disabled}
minimumTrackTintColor={theme.primary}
maximumTrackTintColor={theme.secondary}
onSlidingStart={() => {
audioPlayer?.pauseAsync()
setAudioPlaying(false)

7
src/components/toast.tsx
View File

@ -53,6 +53,11 @@ const ToastBase = ({ config }: { config: Config }) => {
error: 'x-circle',
warning: 'alert-circle'
}
enum colorMapping {
success = 'blue',
error = 'red',
warning = 'primary'
}
return (
<SafeAreaView
@ -65,7 +70,7 @@ const ToastBase = ({ config }: { config: Config }) => {
<Feather
// @ts-ignore
name={iconSet[config.type]}
color={theme[config.type]}
color={theme[colorMapping[config.type]]}
size={StyleConstants.Font.Size.M + 2}
/>
<View style={styles.texts}>

6
src/screens/Shared/Compose.tsx
View File

@ -31,6 +31,8 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import formatText from '@screens/Shared/Compose/formatText'
import { useQueryClient } from 'react-query'
import Toast from 'react-native-toast-message'
import { toastConfig } from '@root/components/toast'
const Stack = createNativeStackNavigator()
@ -566,8 +568,7 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
style={[
styles.count,
{
color:
totalTextCount > 500 ? theme.error : theme.secondary
color: totalTextCount > 500 ? theme.red : theme.secondary
}
]}
>
@ -596,6 +597,7 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
</Stack.Screen>
</Stack.Navigator>
</SafeAreaView>
<Toast ref={(ref: any) => Toast.setRef(ref)} config={toastConfig} />
</KeyboardAvoidingView>
)
}

67
src/screens/Shared/Compose/Actions.tsx
View File

@ -1,17 +1,17 @@
import { Feather } from '@expo/vector-icons'
import React, { useCallback, useContext, useMemo } from 'react'
import { ActionSheetIOS, StyleSheet, View } from 'react-native'
import React, { RefObject, useCallback, useContext, useMemo } from 'react'
import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { ComposeContext } from '@screens/Shared/Compose'
import addAttachments from '@screens/Shared/Compose/addAttachments'
import { toast } from '@root/components/toast'
const ComposeActions: React.FC = () => {
const { composeState, composeDispatch } = useContext(ComposeContext)
const { theme } = useTheme()
const attachmentColor = useMemo(() => {
if (composeState.poll.active) return theme.disabled
if (composeState.attachmentUploadProgress) return theme.primary
if (composeState.attachments.uploads.length) {
@ -25,7 +25,13 @@ const ComposeActions: React.FC = () => {
composeState.attachmentUploadProgress
])
const attachmentOnPress = useCallback(async () => {
if (composeState.poll.active) return
if (composeState.poll.active) {
toast({
type: 'error',
content: '长毛象不支持同时发布附件及投票'
})
return
}
if (composeState.attachmentUploadProgress) return
if (!composeState.attachments.uploads.length) {
@ -38,9 +44,6 @@ const ComposeActions: React.FC = () => {
])
const pollColor = useMemo(() => {
if (composeState.attachments.uploads.length) return theme.disabled
if (composeState.attachmentUploadProgress) return theme.disabled
if (composeState.poll.active) {
return theme.primary
} else {
@ -52,6 +55,17 @@ const ComposeActions: React.FC = () => {
composeState.attachmentUploadProgress
])
const pollOnPress = useCallback(() => {
if (
composeState.attachments.uploads.length ||
composeState.attachmentUploadProgress
) {
toast({
type: 'error',
content: '长毛象不支持同时发布附件及投票'
})
return
}
if (
!composeState.attachments.uploads.length &&
!composeState.attachmentUploadProgress
@ -82,9 +96,8 @@ const ComposeActions: React.FC = () => {
return 'mail'
}
}, [composeState.visibility])
const visibilityOnPress = useCallback(
() =>
!composeState.visibilityLock &&
const visibilityOnPress = useCallback(() => {
if (!composeState.visibilityLock) {
ActionSheetIOS.showActionSheetWithOptions(
{
options: ['公开', '不公开', '仅关注着', '私信', '取消'],
@ -106,21 +119,21 @@ const ComposeActions: React.FC = () => {
break
}
}
),
[]
)
)
}
}, [])
const spoilerOnPress = useCallback(
() =>
composeDispatch({
type: 'spoiler',
payload: { active: !composeState.spoiler.active }
}),
[composeState.spoiler.active]
)
const spoilerOnPress = useCallback(() => {
if (composeState.spoiler.active) {
composeState.textInputFocus.refs.text.current?.focus()
}
composeDispatch({
type: 'spoiler',
payload: { active: !composeState.spoiler.active }
})
}, [composeState.spoiler.active, composeState.textInputFocus])
const emojiColor = useMemo(() => {
if (!composeState.emoji.emojis) return theme.disabled
if (composeState.emoji.active) {
return theme.primary
} else {
@ -128,6 +141,14 @@ const ComposeActions: React.FC = () => {
}
}, [composeState.emoji.active, composeState.emoji.emojis])
const emojiOnPress = useCallback(() => {
if (!composeState.emoji.emojis) {
toast({
type: 'error',
content: '提取emoji错误'
})
return
}
if (composeState.emoji.emojis) {
if (composeState.emoji.active) {
composeDispatch({
@ -165,7 +186,7 @@ const ComposeActions: React.FC = () => {
<Feather
name={visibilityIcon}
size={24}
color={composeState.visibilityLock ? theme.disabled : theme.secondary}
color={composeState.visibilityLock ? theme.primary : theme.secondary}
onPress={visibilityOnPress}
/>
<Feather

2
src/screens/Shared/Compose/Poll.tsx
View File

@ -59,7 +59,7 @@ const ComposePoll: React.FC = () => {
styles.textInput,
{
borderColor: theme.border,
color: hasConflict ? theme.error : theme.primary
color: hasConflict ? theme.red : theme.primary
}
]}
placeholder={`选项`}

5
src/screens/Shared/Compose/Reply.tsx
View File

@ -31,7 +31,10 @@ const ComposeReply: React.FC = () => {
<TimelineContent status={replyToStatus!} />
)}
{replyToStatus!.media_attachments.length > 0 && (
<TimelineAttachment status={replyToStatus!} width={contentWidth} />
<TimelineAttachment
status={replyToStatus!}
contentWidth={contentWidth}
/>
)}
{replyToStatus!.card && <TimelineCard card={replyToStatus!.card} />}
</View>

11
src/screens/Shared/Compose/Root.tsx
View File

@ -40,19 +40,15 @@ const ListItem = React.memo(
({
item,
composeState,
composeDispatch,
textInputRef
composeDispatch
}: {
item: Mastodon.Account & Mastodon.Tag
composeState: ComposeState
composeDispatch: Dispatch<ComposeAction>
textInputRef: RefObject<TextInput>
}) => {
const { theme } = useTheme()
const onPress = useCallback(() => {
const focusedInput = textInputRef.current?.isFocused()
? 'text'
: 'spoiler'
const focusedInput = composeState.textInputFocus.current
updateText({
composeState: {
...composeState,
@ -161,8 +157,6 @@ const ComposeRoot: React.FC = () => {
}
}, [emojisData])
const textInputRef = useRef<TextInput>(null)
const listEmpty = useMemo(() => {
if (isFetching) {
return <ActivityIndicator />
@ -180,7 +174,6 @@ const ComposeRoot: React.FC = () => {
item={item}
composeState={composeState}
composeDispatch={composeDispatch}
textInputRef={textInputRef}
/>
) : null,
[isSuccess]

2
src/screens/Shared/Compose/Root/Footer.tsx
View File

@ -9,7 +9,7 @@ import ComposeReply from '@screens/Shared/Compose/Reply'
const ComposeRootFooter: React.FC = () => {
const { composeState } = useContext(ComposeContext)
console.log(composeState)
return (
<>
{composeState.emoji.active && (

6
src/screens/Shared/Compose/SpoilerInput.tsx
View File

@ -44,6 +44,12 @@ const ComposeSpoilerInput: React.FC = () => {
}}
ref={composeState.textInputFocus.refs.spoiler}
scrollEnabled
onFocus={() =>
composeDispatch({
type: 'textInputFocus',
payload: { current: 'spoiler' }
})
}
>
<Text>{composeState.spoiler.formatted}</Text>
</TextInput>

2
src/screens/Shared/Compose/TextInput.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext } from 'react'
import React, { useCallback, useContext } from 'react'
import { StyleSheet, Text, TextInput } from 'react-native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'

2
src/screens/Shared/Compose/formatText.tsx
View File

@ -17,7 +17,7 @@ export interface Params {
const TagText = ({ text }: { text: string }) => {
const { theme } = useTheme()
return <Text style={{ color: theme.link }}>{text}</Text>
return <Text style={{ color: theme.blue }}>{text}</Text>
}
const debouncedSuggestions = debounce(

1
src/utils/fetches/timelineFetch.ts
View File

@ -128,7 +128,6 @@ export const timelineFetch = async ({
return Promise.resolve({ toots: res.body })
case 'Account_Media':
console.log(account)
res = await client({
method: 'get',
instance: 'local',

60
src/utils/styles/themes.ts
View File

@ -4,17 +4,14 @@ export type ColorDefinitions =
| 'primary'
| 'primaryOverlay'
| 'secondary'
| 'disabled'
| 'blue'
| 'red'
| 'background'
| 'backgroundGradientStart'
| 'backgroundGradientEnd'
| 'backgroundOverlay'
| 'link'
| 'border'
| 'separator'
| 'success'
| 'error'
| 'warning'
const themeColors: {
[key in ColorDefinitions]: {
@ -23,41 +20,42 @@ const themeColors: {
}
} = {
primary: {
light: 'rgb(0, 0, 0)',
dark: 'rgb(255, 255, 255)'
light: 'rgb(18, 18, 18)',
dark: 'rgb(218, 218, 218)'
},
primaryOverlay: {
light: 'rgb(255, 255, 255)',
dark: 'rgb(0, 0, 0)'
light: 'rgb(250, 250, 250)',
dark: 'rgb(218, 218, 218)'
},
secondary: {
light: 'rgb(153, 153, 153)',
dark: 'rgb(117, 117, 117)'
light: 'rgb(135, 135, 135)',
dark: 'rgb(135, 135, 135)'
},
disabled: {
light: 'rgb(229, 229, 234)',
dark: 'rgb(44, 44, 46)'
blue: {
light: 'rgb(43, 144, 221)',
dark: 'rgb(43, 144, 221)'
},
red: {
light: 'rgb(225, 45, 35)',
dark: 'rgb(225, 98, 89)'
},
background: {
light: 'rgb(255, 255, 255)',
dark: 'rgb(0, 0, 0)'
light: 'rgb(250, 250, 250)',
dark: 'rgb(18, 18, 18)'
},
backgroundGradientStart: {
light: 'rgba(255, 255, 255, 0.5)',
dark: 'rgba(0, 0, 0, 0.5)'
light: 'rgba(250, 250, 250, 0.5)',
dark: 'rgba(18, 18, 18, 0.5)'
},
backgroundGradientEnd: {
light: 'rgba(255, 255, 255, 1)',
dark: 'rgba(0, 0, 0, 1)'
light: 'rgba(250, 250, 250, 1)',
dark: 'rgba(18, 18, 18, 1)'
},
backgroundOverlay: {
light: 'rgba(0, 0, 0, 0.5)',
light: 'rgba(18, 18, 18, 0.5)',
dark: 'rgba(255, 255, 255, 0.5)'
},
link: {
light: 'rgb(0, 122, 255)',
dark: 'rgb(10, 132, 255)'
},
border: {
light: 'rgba(0, 0, 0, 0.3)',
dark: 'rgba(255, 255, 255, 0.16)'
@ -65,18 +63,6 @@ const themeColors: {
separator: {
light: 'rgba(0, 0, 0, 0.1)',
dark: 'rgba(255, 255, 255, 0.1)'
},
success: {
light: 'rgb(52, 199, 89)',
dark: 'rgb(48, 209, 88)'
},
error: {
light: 'rgb(255, 59, 48)',
dark: 'rgb(255, 69, 58)'
},
warning: {
light: 'rgb(255, 149, 0)',
dark: 'rgb(255, 159, 10)'
}
}