-
Notifications
You must be signed in to change notification settings - Fork 254
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2540 from fioprotocol/feature/ui2-help-modal
Help modal ui2 design.
- Loading branch information
Showing
7 changed files
with
244 additions
and
169 deletions.
There are no files selected for viewing
Binary file modified
BIN
+2.05 KB
(120%)
android/app/src/main/assets/fonts/custom.ttf
100755 → 100644
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,155 @@ | ||
| // @flow | ||
|
|
||
| import * as React from 'react' | ||
| import { Linking, Text } from 'react-native' | ||
| import { Image, Linking, View } from 'react-native' | ||
| import { getBuildNumber, getVersion } from 'react-native-device-info' | ||
| import AntDesignIcon from 'react-native-vector-icons/AntDesign' | ||
| import { WebView } from 'react-native-webview' | ||
|
|
||
| import edgeLogo from '../../assets/images/edgeLogo/Edge_logo_L.png' | ||
| import { Fontello } from '../../assets/vector' | ||
| import s from '../../locales/strings.js' | ||
| import { PLATFORM } from '../../theme/variables/platform.js' | ||
| import { Airship } from '../services/AirshipInstance.js' | ||
| import { type AirshipBridge, AirshipModal, ContentArea, dayText, IconCircle, ModalCloseArrow, textSize, THEME } from './modalParts.js' | ||
| import { type Theme, type ThemeProps, cacheStyles, withTheme } from '../services/ThemeContext.js' | ||
| import { EdgeText } from '../themed/EdgeText' | ||
| import { ModalCloseArrow, ModalTitle } from '../themed/ModalParts' | ||
| import { SelectableRow } from '../themed/SelectableRow' | ||
| import { ThemedModal } from '../themed/ThemedModal' | ||
| import { type AirshipBridge } from './modalParts.js' | ||
|
|
||
| const buildNumber = getBuildNumber() | ||
| const versionNumber = getVersion() | ||
| const CONTENT_URI = 'https://edgesecure.co/info.html' | ||
| const HELP_URIS = { | ||
| knowledgeBase: 'https://support.edge.app/support/home', | ||
| support: 'https://support.edge.app/support/tickets/new', | ||
| call: '+1-855-346-4974', | ||
| site: 'https://edge.app' | ||
| } | ||
|
|
||
| export function showHelpModal(): Promise<mixed> { | ||
| return Airship.show(bridge => <HelpModal bridge={bridge} />) | ||
| } | ||
| function showWebViewModal(uri: string, title: string): void { | ||
| Airship.show(bridge => <HelpWebViewModal bridge={bridge} uri={uri} title={title} />) | ||
| } | ||
|
|
||
| type Props = { | ||
| bridge: AirshipBridge<void> | ||
| } | ||
|
|
||
| class HelpModal extends React.Component<Props> { | ||
| class HelpWebViewModal extends React.Component<Props & { uri: string, title: string }> { | ||
| webview: WebView | void | ||
| handleClose = () => this.props.bridge.resolve() | ||
|
|
||
| render() { | ||
| const { bridge, uri, title } = this.props | ||
| return ( | ||
| <ThemedModal bridge={bridge} onCancel={this.handleClose} paddingRem={[1, 0]}> | ||
| <ModalTitle center paddingRem={[0, 1, 1]}> | ||
| {title} | ||
| </ModalTitle> | ||
| <WebView ref={element => (this.webview = element)} source={{ uri }} /> | ||
|
|
||
| <ModalCloseArrow onPress={this.handleClose} /> | ||
| </ThemedModal> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| class HelpModalComponent extends React.Component<Props & ThemeProps> { | ||
| handleClose = () => this.props.bridge.resolve() | ||
|
|
||
| render() { | ||
| const { bridge } = this.props | ||
| const { bridge, theme } = this.props | ||
| const styles = getStyles(theme) | ||
| const versionText = `${s.strings.help_version} ${versionNumber}` | ||
| const buildText = `${s.strings.help_build} ${buildNumber}` | ||
| const optionMarginRem = [0.75, 0, 0.5, 1] | ||
| const optionPaddingRem = [0, 1, 1, 0] | ||
|
|
||
| return ( | ||
| <AirshipModal bridge={bridge} onCancel={() => bridge.resolve()}> | ||
| <IconCircle> | ||
| <AntDesignIcon name="question" size={THEME.rem(2)} color={THEME.COLORS.SECONDARY} style={{ marginLeft: THEME.rem(0.1) }} /> | ||
| </IconCircle> | ||
|
|
||
| <ContentArea grow> | ||
| <Text style={dayText('title')}>{s.strings.help_modal_title}</Text> | ||
| <WebView | ||
| onNavigationStateChange={event => { | ||
| if (!event.url.includes('info.html')) { | ||
| if (this.webview) this.webview.stopLoading() | ||
| Linking.openURL(event.url) | ||
| bridge.resolve() | ||
| } | ||
| }} | ||
| ref={element => (this.webview = element)} | ||
| source={{ uri: CONTENT_URI }} | ||
| /> | ||
| <Text style={[dayText('center', 'small'), { lineHeight: textSize.large }]}> | ||
| {s.strings.help_version} {versionNumber} | ||
| {'\n'} | ||
| {s.strings.help_build} {buildNumber} | ||
| </Text> | ||
| </ContentArea> | ||
|
|
||
| <ModalCloseArrow onPress={() => bridge.resolve()} /> | ||
| </AirshipModal> | ||
| <ThemedModal bridge={bridge} onCancel={this.handleClose} paddingRem={[1, 0]}> | ||
| <View style={styles.titleContainer}> | ||
| <Image source={edgeLogo} style={styles.logo} resizeMode="contain" /> | ||
| <ModalTitle center paddingRem={[0, 1, 1]}> | ||
| {s.strings.help_modal_title} | ||
| </ModalTitle> | ||
| </View> | ||
|
|
||
| <SelectableRow | ||
| icon={<Fontello name="help_idea" color={theme.iconTappable} size={theme.rem(1.5)} />} | ||
| title={s.strings.help_knowledge_base} | ||
| subTitle={s.strings.help_knowledge_base_text} | ||
| onPress={() => showWebViewModal(HELP_URIS.knowledgeBase, s.strings.help_knowledge_base)} | ||
| underline | ||
| arrowTappable | ||
| marginRem={optionMarginRem} | ||
| paddingRem={optionPaddingRem} | ||
| /> | ||
|
|
||
| <SelectableRow | ||
| icon={<Fontello name="help_headset" color={theme.iconTappable} size={theme.rem(1.5)} />} | ||
| title={s.strings.help_support} | ||
| subTitle={s.strings.help_support_text} | ||
| onPress={() => showWebViewModal(HELP_URIS.support, s.strings.help_support)} | ||
| underline | ||
| arrowTappable | ||
| marginRem={optionMarginRem} | ||
| paddingRem={optionPaddingRem} | ||
| /> | ||
|
|
||
| <SelectableRow | ||
| icon={<Fontello name="help_call" color={theme.iconTappable} size={theme.rem(1.5)} />} | ||
| title={s.strings.help_call} | ||
| subTitle={s.strings.help_call_text} | ||
| onPress={() => Linking.openURL(`tel:${HELP_URIS.call}`)} | ||
| underline | ||
| arrowTappable | ||
| marginRem={optionMarginRem} | ||
| paddingRem={optionPaddingRem} | ||
| /> | ||
|
|
||
| <SelectableRow | ||
| icon={<Fontello name="globe" color={theme.iconTappable} size={theme.rem(1.5)} />} | ||
| title={s.strings.help_site} | ||
| subTitle={s.strings.help_site_text} | ||
| onPress={() => showWebViewModal(HELP_URIS.site, s.strings.help_site_text)} | ||
| arrowTappable | ||
| marginRem={optionMarginRem} | ||
| paddingRem={optionPaddingRem} | ||
| /> | ||
| <View style={styles.footer}> | ||
| <EdgeText style={styles.version}>{versionText}</EdgeText> | ||
| <EdgeText style={styles.version}>{buildText}</EdgeText> | ||
| </View> | ||
|
|
||
| <ModalCloseArrow onPress={this.handleClose} /> | ||
| </ThemedModal> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| const getStyles = cacheStyles((theme: Theme) => ({ | ||
| titleContainer: { | ||
| marginTop: theme.rem(0.5), | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| alignItems: 'center' | ||
| }, | ||
| logo: { | ||
| height: theme.rem(2.25) | ||
| }, | ||
| footer: { | ||
| marginTop: PLATFORM.deviceHeight < theme.rem(42) ? 0 : theme.rem(1.5), | ||
| paddingVertical: PLATFORM.deviceHeight < theme.rem(42) ? theme.rem(0.25) : theme.rem(0.5), | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| alignItems: 'center' | ||
| }, | ||
| version: { | ||
| color: theme.secondaryText, | ||
| fontSize: theme.rem(0.75) | ||
| } | ||
| })) | ||
|
|
||
| const HelpModal = withTheme(HelpModalComponent) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters