diff options
| -rw-r--r-- | bskyweb/templates/base.html | 1 | ||||
| -rw-r--r-- | src/view/com/modals/Modal.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/modals/Modal.web.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/modals/report/InputIssueDetails.tsx | 93 | ||||
| -rw-r--r-- | src/view/com/modals/report/ReportAccount.tsx (renamed from src/view/com/modals/ReportAccount.tsx) | 164 | ||||
| -rw-r--r-- | src/view/com/modals/report/ReportPost.tsx (renamed from src/view/com/modals/ReportPost.tsx) | 185 | ||||
| -rw-r--r-- | src/view/com/modals/report/SendReportButton.tsx | 57 | ||||
| -rw-r--r-- | web/index.html | 1 |
8 files changed, 365 insertions, 144 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index ea048a9a9..b5ed329cd 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -102,6 +102,7 @@ .ProseMirror-focused { outline: 0; } + textarea:focus, input:focus { outline: 0; } diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 1043db20e..864dcc847 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -10,13 +10,13 @@ import {usePalette} from 'lib/hooks/usePalette' import * as ConfirmModal from './Confirm' import * as EditProfileModal from './EditProfile' import * as ServerInputModal from './ServerInput' -import * as ReportPostModal from './ReportPost' +import * as ReportPostModal from './report/ReportPost' import * as RepostModal from './Repost' import * as CreateOrEditMuteListModal from './CreateOrEditMuteList' import * as ListAddRemoveUserModal from './ListAddRemoveUser' import * as AltImageModal from './AltImage' import * as EditImageModal from './AltImage' -import * as ReportAccountModal from './ReportAccount' +import * as ReportAccountModal from './report/ReportAccount' import * as DeleteAccountModal from './DeleteAccount' import * as ChangeHandleModal from './ChangeHandle' import * as WaitlistModal from './Waitlist' diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index f2cf72a03..27b2641ba 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -9,8 +9,8 @@ import {isMobileWeb} from 'platform/detection' import * as ConfirmModal from './Confirm' import * as EditProfileModal from './EditProfile' import * as ServerInputModal from './ServerInput' -import * as ReportPostModal from './ReportPost' -import * as ReportAccountModal from './ReportAccount' +import * as ReportPostModal from './report/ReportPost' +import * as ReportAccountModal from './report/ReportAccount' import * as CreateOrEditMuteListModal from './CreateOrEditMuteList' import * as ListAddRemoveUserModal from './ListAddRemoveUser' import * as DeleteAccountModal from './DeleteAccount' diff --git a/src/view/com/modals/report/InputIssueDetails.tsx b/src/view/com/modals/report/InputIssueDetails.tsx new file mode 100644 index 000000000..a2e5069a8 --- /dev/null +++ b/src/view/com/modals/report/InputIssueDetails.tsx @@ -0,0 +1,93 @@ +import React from 'react' +import {View, TouchableOpacity, StyleSheet} from 'react-native' +import {TextInput} from '../util' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {CharProgress} from '../../composer/char-progress/CharProgress' +import {Text} from '../../util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {SendReportButton} from './SendReportButton' +import {isDesktopWeb} from 'platform/detection' + +export function InputIssueDetails({ + details, + setDetails, + goBack, + submitReport, + isProcessing, +}: { + details: string | undefined + setDetails: (v: string) => void + goBack: () => void + submitReport: () => void + isProcessing: boolean +}) { + const pal = usePalette('default') + + return ( + <View style={[styles.detailsContainer]}> + <TouchableOpacity + testID="addDetailsBtn" + style={[s.mb10, styles.backBtn]} + onPress={goBack} + accessibilityRole="button" + accessibilityLabel="Add details" + accessibilityHint="Add more details to your report"> + <FontAwesomeIcon size={18} icon="angle-left" style={[pal.link]} /> + <Text style={[pal.text, s.f18, pal.link]}> Back</Text> + </TouchableOpacity> + <View style={[pal.btn, styles.detailsInputContainer]}> + <TextInput + accessibilityLabel="Text input field" + accessibilityHint="Enter a reason for reporting this post." + placeholder="Enter a reason or any other details here." + placeholderTextColor={pal.textLight.color} + value={details} + onChangeText={setDetails} + autoFocus={true} + numberOfLines={3} + multiline={true} + textAlignVertical="top" + maxLength={300} + style={[styles.detailsInput, pal.text]} + /> + <View style={styles.detailsInputBottomBar}> + <View style={styles.charCounter}> + <CharProgress count={details?.length || 0} /> + </View> + </View> + </View> + <SendReportButton onPress={submitReport} isProcessing={isProcessing} /> + </View> + ) +} + +const styles = StyleSheet.create({ + detailsContainer: { + marginTop: isDesktopWeb ? 0 : 12, + }, + backBtn: { + flexDirection: 'row', + alignItems: 'center', + }, + detailsInputContainer: { + borderRadius: 8, + }, + detailsInput: { + paddingHorizontal: 12, + paddingTop: 12, + paddingBottom: 12, + borderRadius: 8, + minHeight: 100, + fontSize: 16, + }, + detailsInputBottomBar: { + alignSelf: 'flex-end', + }, + charCounter: { + flexDirection: 'row', + alignItems: 'center', + paddingRight: 10, + paddingBottom: 8, + }, +}) diff --git a/src/view/com/modals/ReportAccount.tsx b/src/view/com/modals/report/ReportAccount.tsx index b59a1b699..3ea221a8b 100644 --- a/src/view/com/modals/ReportAccount.tsx +++ b/src/view/com/modals/report/ReportAccount.tsx @@ -1,32 +1,97 @@ import React, {useState, useMemo} from 'react' -import { - ActivityIndicator, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' +import {TouchableOpacity, StyleSheet, View} from 'react-native' import {ComAtprotoModerationDefs} from '@atproto/api' -import LinearGradient from 'react-native-linear-gradient' import {useStores} from 'state/index' -import {s, colors, gradients} from 'lib/styles' -import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {ErrorMessage} from '../util/error/ErrorMessage' +import {s} from 'lib/styles' +import {RadioGroup, RadioGroupItem} from '../../util/forms/RadioGroup' +import {Text} from '../../util/text/Text' +import * as Toast from '../../util/Toast' +import {ErrorMessage} from '../../util/error/ErrorMessage' import {cleanError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' import {isDesktopWeb} from 'platform/detection' +import {SendReportButton} from './SendReportButton' +import {InputIssueDetails} from './InputIssueDetails' -export const snapPoints = ['50%'] +export const snapPoints = [400] export function Component({did}: {did: string}) { const store = useStores() const pal = usePalette('default') - const [isProcessing, setIsProcessing] = useState<boolean>(false) - const [error, setError] = useState<string>('') - const [issue, setIssue] = useState<string>('') + const [isProcessing, setIsProcessing] = useState(false) + const [error, setError] = useState<string>() + const [issue, setIssue] = useState<string>() const onSelectIssue = (v: string) => setIssue(v) + const [details, setDetails] = useState<string>() + const [showDetailsInput, setShowDetailsInput] = useState(false) + const onPress = async () => { + setError('') + if (!issue) { + return + } + setIsProcessing(true) + try { + await store.agent.com.atproto.moderation.createReport({ + reasonType: issue, + subject: { + $type: 'com.atproto.admin.defs#repoRef', + did, + }, + reason: details, + }) + Toast.show("Thank you for your report! We'll look into it promptly.") + store.shell.closeModal() + return + } catch (e: any) { + setError(cleanError(e)) + setIsProcessing(false) + } + } + const goBack = () => { + setShowDetailsInput(false) + } + const goToDetails = () => { + setShowDetailsInput(true) + } + + return ( + <View testID="reportAccountModal" style={[styles.container, pal.view]}> + {showDetailsInput ? ( + <InputIssueDetails + submitReport={onPress} + setDetails={setDetails} + details={details} + isProcessing={isProcessing} + goBack={goBack} + /> + ) : ( + <SelectIssue + onPress={onPress} + onSelectIssue={onSelectIssue} + error={error} + isProcessing={isProcessing} + goToDetails={goToDetails} + /> + )} + </View> + ) +} + +const SelectIssue = ({ + onPress, + onSelectIssue, + error, + isProcessing, + goToDetails, +}: { + onPress: () => void + onSelectIssue: (v: string) => void + error: string | undefined + isProcessing: boolean + goToDetails: () => void +}) => { + const pal = usePalette('default') const ITEMS: RadioGroupItem[] = useMemo( () => [ { @@ -58,31 +123,8 @@ export function Component({did}: {did: string}) { ], [pal], ) - - const onPress = async () => { - setError('') - if (!issue) { - return - } - setIsProcessing(true) - try { - await store.agent.com.atproto.moderation.createReport({ - reasonType: issue, - subject: { - $type: 'com.atproto.admin.defs#repoRef', - did, - }, - }) - Toast.show("Thank you for your report! We'll look into it promptly.") - store.shell.closeModal() - return - } catch (e: any) { - setError(cleanError(e)) - setIsProcessing(false) - } - } return ( - <View testID="reportAccountModal" style={[styles.container, pal.view]}> + <> <Text type="title-xl" style={[pal.text, styles.title]}> Report account </Text> @@ -102,28 +144,17 @@ export function Component({did}: {did: string}) { <ErrorMessage message={error} /> </View> ) : undefined} - {isProcessing ? ( - <View style={[styles.btn, s.mt10]}> - <ActivityIndicator /> - </View> - ) : issue ? ( - <TouchableOpacity - testID="sendReportBtn" - style={s.mt10} - onPress={onPress} - accessibilityRole="button" - accessibilityLabel="Report account" - accessibilityHint={`Reports account with reason ${issue}`}> - <LinearGradient - colors={[gradients.blueLight.start, gradients.blueLight.end]} - start={{x: 0, y: 0}} - end={{x: 1, y: 1}} - style={[styles.btn]}> - <Text style={[s.white, s.bold, s.f18]}>Send Report</Text> - </LinearGradient> - </TouchableOpacity> - ) : undefined} - </View> + <SendReportButton onPress={onPress} isProcessing={isProcessing} /> + <TouchableOpacity + testID="addDetailsBtn" + style={styles.addDetailsBtn} + onPress={goToDetails} + accessibilityRole="button" + accessibilityLabel="Add details" + accessibilityHint="Add more details to your report"> + <Text style={[s.f18, pal.link]}>Add details to report</Text> + </TouchableOpacity> + </> ) } @@ -142,13 +173,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 22, marginBottom: 10, }, - btn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - borderRadius: 32, + addDetailsBtn: { padding: 14, - backgroundColor: colors.gray1, + alignSelf: 'center', }, }) diff --git a/src/view/com/modals/ReportPost.tsx b/src/view/com/modals/report/ReportPost.tsx index ec75dc4c2..fe2a5bca4 100644 --- a/src/view/com/modals/ReportPost.tsx +++ b/src/view/com/modals/report/ReportPost.tsx @@ -1,25 +1,20 @@ import React, {useState, useMemo} from 'react' -import { - ActivityIndicator, - Linking, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' +import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native' import {ComAtprotoModerationDefs} from '@atproto/api' -import LinearGradient from 'react-native-linear-gradient' import {useStores} from 'state/index' -import {s, colors, gradients} from 'lib/styles' -import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {ErrorMessage} from '../util/error/ErrorMessage' +import {s} from 'lib/styles' +import {RadioGroup, RadioGroupItem} from '../../util/forms/RadioGroup' +import {Text} from '../../util/text/Text' +import * as Toast from '../../util/Toast' +import {ErrorMessage} from '../../util/error/ErrorMessage' import {cleanError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' +import {SendReportButton} from './SendReportButton' +import {InputIssueDetails} from './InputIssueDetails' const DMCA_LINK = 'https://bsky.app/support/copyright' -export const snapPoints = [550] +export const snapPoints = [575] export function Component({ postUri, @@ -30,11 +25,86 @@ export function Component({ }) { const store = useStores() const pal = usePalette('default') - const [isProcessing, setIsProcessing] = useState<boolean>(false) - const [error, setError] = useState<string>('') - const [issue, setIssue] = useState<string>('') - const onSelectIssue = (v: string) => setIssue(v) + const [isProcessing, setIsProcessing] = useState(false) + const [showTextInput, setShowTextInput] = useState(false) + const [error, setError] = useState<string>() + const [issue, setIssue] = useState<string>() + const [details, setDetails] = useState<string>() + + const submitReport = async () => { + setError('') + if (!issue) { + return + } + setIsProcessing(true) + try { + if (issue === '__copyright__') { + Linking.openURL(DMCA_LINK) + return + } + await store.agent.createModerationReport({ + reasonType: issue, + subject: { + $type: 'com.atproto.repo.strongRef', + uri: postUri, + cid: postCid, + }, + reason: details, + }) + Toast.show("Thank you for your report! We'll look into it promptly.") + + store.shell.closeModal() + return + } catch (e: any) { + setError(cleanError(e)) + setIsProcessing(false) + } + } + + const goBack = () => { + setShowTextInput(false) + } + return ( + <View testID="reportPostModal" style={[s.flex1, s.pl10, s.pr10, pal.view]}> + {showTextInput ? ( + <InputIssueDetails + details={details} + setDetails={setDetails} + goBack={goBack} + submitReport={submitReport} + isProcessing={isProcessing} + /> + ) : ( + <SelectIssue + setShowTextInput={setShowTextInput} + error={error} + issue={issue} + setIssue={setIssue} + submitReport={submitReport} + isProcessing={isProcessing} + /> + )} + </View> + ) +} + +const SelectIssue = ({ + error, + setShowTextInput, + issue, + setIssue, + submitReport, + isProcessing, +}: { + error: string | undefined + setShowTextInput: (v: boolean) => void + issue: string | undefined + setIssue: (v: string) => void + submitReport: () => void + isProcessing: boolean +}) => { + const pal = usePalette('default') const ITEMS: RadioGroupItem[] = useMemo( () => [ { @@ -115,35 +185,17 @@ export function Component({ [pal], ) - const onPress = async () => { - setError('') - if (!issue) { - return - } - setIsProcessing(true) - try { - if (issue === '__copyright__') { - Linking.openURL(DMCA_LINK) - } else { - await store.agent.createModerationReport({ - reasonType: issue, - subject: { - $type: 'com.atproto.repo.strongRef', - uri: postUri, - cid: postCid, - }, - }) - Toast.show("Thank you for your report! We'll look into it promptly.") - } - store.shell.closeModal() + const onSelectIssue = (v: string) => setIssue(v) + const goToDetails = () => { + if (issue === '__copyright__') { + Linking.openURL(DMCA_LINK) return - } catch (e: any) { - setError(cleanError(e)) - setIsProcessing(false) } + setShowTextInput(true) } + return ( - <View testID="reportPostModal" style={[s.flex1, s.pl10, s.pr10, pal.view]}> + <> <Text style={[pal.text, styles.title]}>Report post</Text> <Text style={[pal.textLight, styles.description]}> What is the issue with this post? @@ -158,28 +210,24 @@ export function Component({ <ErrorMessage message={error} /> </View> ) : undefined} - {isProcessing ? ( - <View style={[styles.btn, s.mt10]}> - <ActivityIndicator /> - </View> - ) : issue ? ( - <TouchableOpacity - testID="sendReportBtn" - style={s.mt10} - onPress={onPress} - accessibilityRole="button" - accessibilityLabel="Report post" - accessibilityHint={`Reports post with reason ${issue}`}> - <LinearGradient - colors={[gradients.blueLight.start, gradients.blueLight.end]} - start={{x: 0, y: 0}} - end={{x: 1, y: 1}} - style={[styles.btn]}> - <Text style={[s.white, s.bold, s.f18]}>Send Report</Text> - </LinearGradient> - </TouchableOpacity> + {issue ? ( + <> + <SendReportButton + onPress={submitReport} + isProcessing={isProcessing} + /> + <TouchableOpacity + testID="addDetailsBtn" + style={styles.addDetailsBtn} + onPress={goToDetails} + accessibilityRole="button" + accessibilityLabel="Add details" + accessibilityHint="Add more details to your report"> + <Text style={[s.f18, pal.link]}>Add details to report</Text> + </TouchableOpacity> + </> ) : undefined} - </View> + </> ) } @@ -196,13 +244,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 22, marginBottom: 10, }, - btn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - borderRadius: 32, + addDetailsBtn: { padding: 14, - backgroundColor: colors.gray1, + alignSelf: 'center', }, }) diff --git a/src/view/com/modals/report/SendReportButton.tsx b/src/view/com/modals/report/SendReportButton.tsx new file mode 100644 index 000000000..82fb65f20 --- /dev/null +++ b/src/view/com/modals/report/SendReportButton.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import LinearGradient from 'react-native-linear-gradient' +import { + ActivityIndicator, + StyleSheet, + TouchableOpacity, + View, +} from 'react-native' +import {Text} from '../../util/text/Text' +import {s, gradients, colors} from 'lib/styles' + +export function SendReportButton({ + onPress, + isProcessing, +}: { + onPress: () => void + isProcessing: boolean +}) { + // loading state + // = + if (isProcessing) { + return ( + <View style={[styles.btn, s.mt10]}> + <ActivityIndicator /> + </View> + ) + } + return ( + <TouchableOpacity + testID="sendReportBtn" + style={s.mt10} + onPress={onPress} + accessibilityRole="button" + accessibilityLabel="Report post" + accessibilityHint={`Reports post with reason and details`}> + <LinearGradient + colors={[gradients.blueLight.start, gradients.blueLight.end]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={[styles.btn]}> + <Text style={[s.white, s.bold, s.f18]}>Send Report</Text> + </LinearGradient> + </TouchableOpacity> + ) +} + +const styles = StyleSheet.create({ + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 14, + backgroundColor: colors.gray1, + }, +}) diff --git a/web/index.html b/web/index.html index f518665ca..1bfa8f68d 100644 --- a/web/index.html +++ b/web/index.html @@ -106,6 +106,7 @@ .ProseMirror-focused { outline: 0; } + textarea:focus, input:focus { outline: 0; } |