OnboardingView

This commit is contained in:
Diego Mello 2020-03-26 13:00:39 -03:00
parent e695a83920
commit 2384ba2f0f
16 changed files with 73 additions and 159 deletions

View File

@ -1,4 +1,4 @@
export const MAX_SIDEBAR_WIDTH = 321;
export const MAX_CONTENT_WIDTH = '90%';
export const MAX_SCREEN_CONTENT_WIDTH = '45%';
export const MAX_SCREEN_CONTENT_WIDTH = '50%';
export const MIN_WIDTH_SPLIT_LAYOUT = 700;

View File

@ -9,15 +9,16 @@ import ActivityIndicator from '../ActivityIndicator';
const styles = StyleSheet.create({
container: {
paddingHorizontal: 15,
paddingHorizontal: 14,
justifyContent: 'center',
height: 48,
borderRadius: 2,
marginBottom: 10
marginBottom: 12
},
text: {
fontSize: 18,
textAlign: 'center'
fontSize: 16,
textAlign: 'center',
...sharedStyles.textMedium
}
});
@ -55,7 +56,7 @@ export default class Button extends React.PureComponent {
backgroundColor
? { backgroundColor }
: { backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].backgroundColor },
disabled && { backgroundColor: themes[theme].borderColor },
disabled && { opacity: 0.3 },
style
]}
{...otherProps}
@ -67,8 +68,7 @@ export default class Button extends React.PureComponent {
<Text
style={[
styles.text,
isPrimary ? sharedStyles.textMedium : sharedStyles.textBold,
{ color: isPrimary ? themes[theme].buttonText : themes[theme].actionTintColor }
{ color: isPrimary ? themes[theme].buttonText : themes[theme].bodyText }
]}
>
{title}

View File

@ -139,7 +139,6 @@ export default {
Collaborative: 'Kollaborativ',
Confirm: 'Bestätigen',
Connect: 'Verbinden',
Connect_to_a_server: 'Verbinden Sie sich mit einem Server',
Connected: 'Verbunden',
connecting_server: 'verbinde zum Server',
Connecting: 'Verbinden ...',
@ -308,6 +307,7 @@ export default {
Notification_Preferences: 'Benachrichtigungseinstellungen',
Offline: 'Offline',
Oops: 'Hoppla!',
Onboarding_title: 'Willkommen bei Rocket.Chat',
Online: 'Online',
Only_authorized_users_can_write_new_messages: 'Nur autorisierte Benutzer können neue Nachrichten schreiben',
Open_emoji_selector: 'Öffne die Emoji-Auswahl',
@ -481,7 +481,6 @@ export default {
Voice_call: 'Sprachanruf',
Websocket_disabled: 'Websockets sind auf diesem Server nicht aktiviert.\n{{contact}}',
Welcome: 'Herzlich willkommen',
Welcome_to_RocketChat: 'Willkommen bei Rocket.Chat',
Whats_your_2fa: 'Wie lautet Ihr 2FA-Code?',
Without_Servers: 'Ohne Server',
Write_External_Permission_Message: 'Rocket.Chat benötigt Zugriff auf Ihre Galerie um Bilder speichern zu können.',

View File

@ -139,7 +139,6 @@ export default {
Collaborative: 'Collaborative',
Confirm: 'Confirm',
Connect: 'Connect',
Connect_to_a_server: 'Connect to a server',
Connected: 'Connected',
connecting_server: 'connecting to server',
Connecting: 'Connecting...',
@ -308,6 +307,10 @@ export default {
Notification_Preferences: 'Notification Preferences',
Offline: 'Offline',
Oops: 'Oops!',
Onboarding_description: 'A workspace is your team or organizations space to collaborate. Ask the workspace admin for address to join or create one for your team.',
Onboarding_join_workspace: 'Join a workspace',
Onboarding_subtitle: 'Beyond Team Collaboration',
Onboarding_title: 'Welcome to Rocket.Chat',
Online: 'Online',
Only_authorized_users_can_write_new_messages: 'Only authorized users can write new messages',
Open_emoji_selector: 'Open emoji selector',
@ -481,7 +484,6 @@ export default {
Voice_call: 'Voice call',
Websocket_disabled: 'Websocket is disabled for this server.\n{{contact}}',
Welcome: 'Welcome',
Welcome_to_RocketChat: 'Welcome to Rocket.Chat',
Whats_your_2fa: 'What\'s your 2FA code?',
Without_Servers: 'Without Servers',
Write_External_Permission_Message: 'Rocket Chat needs access to your gallery so you can save images.',

View File

@ -134,7 +134,6 @@ export default {
Collaborative: 'Colaborativo',
Confirm: 'Confirmar',
Connect: 'Conectar',
Connect_to_a_server: 'Conectar a servidor',
Connected: 'Conectado',
connecting_server: 'conectando a servidor',
Connecting: 'Conectando...',
@ -270,6 +269,7 @@ export default {
Notification_Preferences: 'Configuración de notificaciones',
Offline: 'Sin conexión',
Oops: 'Oops!',
Onboarding_title: 'Bienvenido a Rocket.Chat',
Online: 'Conectado',
Only_authorized_users_can_write_new_messages: 'Sólo pueden escribir mensajes usuarios autorizados',
Open_emoji_selector: 'Abrir selector de emojis',
@ -427,7 +427,6 @@ export default {
Voice_call: 'Llamada de voz',
Websocket_disabled: 'Websocket está deshabilitado para este servidor.\n{{contact}}',
Welcome: 'Bienvenido',
Welcome_to_RocketChat: 'Bienvenido a Rocket.Chat',
Whats_your_2fa: '¿Cuál es tu código 2FA?',
Without_Servers: 'Sin servidores',
Yes_action_it: 'Sí, {{action}}!',

View File

@ -122,7 +122,6 @@ export default {
Collaborative: 'Collaborative',
Confirm: 'Confirmer',
Connect: 'Se connecter',
Connect_to_a_server: 'Se connecter à un serveur',
Connected: 'Connecté',
Connecting: 'Connexion ...',
Continue_with: 'Continuer avec',
@ -223,6 +222,7 @@ export default {
Notify_all_in_this_room: 'Notifier tous dans cette salle',
Offline: 'Hors ligne',
Oops: 'Oops!',
Onboarding_title: 'Bienvenue sur Rocket.Chat',
Online: 'En ligne',
Only_authorized_users_can_write_new_messages: 'Seuls les utilisateurs autorisés peuvent écrire de nouveaux messages.',
Open_emoji_selector: 'Ouvrir sélecteur emoji',
@ -338,7 +338,6 @@ export default {
Video_call: 'Appel vidéo',
Voice_call: 'Appel vocal',
Welcome: 'Bienvenue',
Welcome_to_RocketChat: 'Bienvenue sur Rocket.Chat',
Whats_your_2fa: 'Quel est votre code 2FA?',
Yes_action_it: 'Oui, {{action}} le!',
Yesterday: 'Hier',

View File

@ -136,7 +136,6 @@ export default {
Collaborative: 'Collaborativo',
Confirm: 'Conferma',
Connect: 'Connetti',
Connect_to_a_server: 'Connetti ad un server',
Connected: 'Connesso',
connecting_server: 'connessione al server',
Connecting: 'Connessione...',
@ -281,6 +280,7 @@ export default {
Notification_Preferences: 'Impostazioni notifiche',
Offline: 'Offline',
Oops: 'Oops!',
Onboarding_title: 'Benvenuto in Rocket.Chat',
Online: 'Online',
Only_authorized_users_can_write_new_messages: 'Solo gli utenti autorizzati possono scrivere nuovi messaggi',
Open_emoji_selector: 'Apri selettore emoji',
@ -441,7 +441,6 @@ export default {
Voice_call: 'Chiamata vocale',
Websocket_disabled: 'Websocket è disabilitato per questo server.\n{{contact}}',
Welcome: 'Benvenuto',
Welcome_to_RocketChat: 'Benvenuto in Rocket.Chat',
Whats_your_2fa: 'Qual\'è il tuo codice 2FA?',
Without_Servers: 'Senza server',
Write_External_Permission_Message: 'Rocket.Chat ha bisogno dell\'accesso alla galleria per salvare le immagini.',

View File

@ -153,7 +153,6 @@ export default {
Collaborative: 'コラボ',
Confirm: '承認',
Connect: '接続',
Connect_to_a_server: 'サーバーに接続',
Connected: '接続しました',
connecting_server: 'サーバーに接続中',
Connecting: '接続中...',
@ -311,6 +310,7 @@ export default {
Notification_Preferences: '通知設定',
Offline: 'オフライン',
Oops: 'おっと!',
Onboarding_title: 'Rocket.Chatへようこそ',
Online: 'オンライン',
Only_authorized_users_can_write_new_messages:
'承認されたユーザーだけが新しいメッセージを書き込めます',
@ -487,7 +487,6 @@ export default {
Voice_call: '音声通話',
Websocket_disabled: 'Websocketはこのサーバーでは無効化されています。\n{{contact}}',
Welcome: 'ようこそ',
Welcome_to_RocketChat: 'Rocket.Chatへようこそ',
Whats_your_2fa: '2段階認証のコードを入力してください',
Without_Servers: 'サーバーを除く',
Write_External_Permission_Message:

View File

@ -136,7 +136,6 @@ export default {
Collaborative: 'Samenwerkend',
Confirm: 'Bevestig',
Connect: 'Verbind',
Connect_to_a_server: 'Verbind met een server',
Connected: 'Verbonden',
connecting_server: 'Verbonden met een server',
Connecting: 'Aan het verbinden...',
@ -281,6 +280,7 @@ export default {
Notification_Preferences: 'Notificatievoorkeuren',
Offline: 'Offline',
Oops: 'Oeps!',
Onboarding_title: 'Welkom bij Rocket.Chat',
Online: 'Online',
Only_authorized_users_can_write_new_messages: 'Alleen gebruikers met toestemming mogen nieuwe berichten maken',
Open_emoji_selector: 'Open de emoji selector',
@ -448,7 +448,6 @@ export default {
Voice_call: 'Audiogesprek',
Websocket_disabled: 'Websocket staat uit voor deze server.\n{{contact}}',
Welcome: 'Welkom',
Welcome_to_RocketChat: 'Welkom bij Rocket.Chat',
Whats_your_2fa: 'Wat is je 2FA code?',
Without_Servers: 'Zonder Servers',
Write_External_Permission_Message: 'Rocket Chat moet bij je galerij kunnen om afbeeldingen op te slaan.',

View File

@ -142,7 +142,6 @@ export default {
Collaborative: 'Colaborativo',
Confirm: 'Confirmar',
Connect: 'Conectar',
Connect_to_a_server: 'Conectar a um servidor',
Connected: 'Conectado',
connecting_server: 'conectando no servidor',
Connecting: 'Conectando...',
@ -282,6 +281,7 @@ export default {
Not_RC_Server: 'Este não é um servidor Rocket.Chat.\n{{contact}}',
Offline: 'Offline',
Oops: 'Ops!',
Onboarding_title: 'Bem vindo ao Rocket.Chat',
Online: 'Online',
Only_authorized_users_can_write_new_messages: 'Somente usuários autorizados podem escrever novas mensagens',
Open_emoji_selector: 'Abrir seletor de emoji',
@ -432,7 +432,6 @@ export default {
Voice_call: 'Chamada de voz',
Websocket_disabled: 'Websocket está desativado para esse servidor.\n{{contact}}',
Welcome: 'Bem vindo',
Welcome_to_RocketChat: 'Bem vindo ao Rocket.Chat',
Whats_your_2fa: 'Qual seu código de autenticação?',
Without_Servers: 'Sem Servidores',
Yes_action_it: 'Sim, {{action}}!',

View File

@ -122,7 +122,6 @@ export default {
Collaborative: 'Colaborativa',
Confirm: 'Confirmar',
Connect: 'Ligar',
Connect_to_a_server: 'Ligue-se a um servidor',
Connected: 'Ligado',
Connecting: 'A ligar...',
Continue_with: 'Continuar com',
@ -224,6 +223,7 @@ export default {
Notify_all_in_this_room: 'Notifica todos os utilizadores nesta sala',
Offline: 'Desligado',
Oops: 'Oops!',
Onboarding_title: 'Bem vindo(a) ao Rocket.Chat',
Online: 'Ligado',
Only_authorized_users_can_write_new_messages: 'Apenas utilizadores autorizados podem escrever novas mensagens',
Open_emoji_selector: 'Abra o selector de emoticons',
@ -341,7 +341,6 @@ export default {
Video_call: 'Video chamada',
Voice_call: 'Chamada de voz',
Welcome: 'Bem vindo(a)',
Welcome_to_RocketChat: 'Bem vindo(a) ao Rocket.Chat',
Whats_your_2fa: 'Qual é o seu código 2FA?',
Yes_action_it: 'Sim, {{action}}!',
Yesterday: 'Ontem',

View File

@ -131,7 +131,6 @@ export default {
Collaborative: 'Совместный',
Confirm: 'Подтверждение',
Connect: 'Соединение',
Connect_to_a_server: 'Подключиться к серверу',
Connected: 'Подключено',
connecting_server: 'подключение к серверу',
Connecting: 'Соединение...',
@ -264,6 +263,7 @@ export default {
Notification_Preferences: 'Настройки уведомлений',
Offline: 'Офлайн',
Oops: 'Упс!',
Onboarding_title: 'Добро пожаловать в Rocket.Chat',
Online: 'Онлайн',
Only_authorized_users_can_write_new_messages: 'Только авторизованные пользователи могут писать новые сообщения',
Open_emoji_selector: 'Открыть селектор emoji',
@ -420,7 +420,6 @@ export default {
Voice_call: 'Голосовой вызов',
Websocket_disabled: 'Websocket отключен для этого сервера.\n{{contact}}',
Welcome: 'Добро пожаловать,',
Welcome_to_RocketChat: 'Добро пожаловать в Rocket.Chat',
Whats_your_2fa: 'Какой у вас код 2FA?',
Without_Servers: 'Без серверов',
Yes_action_it: 'Да, {{action}} это!',

View File

@ -122,7 +122,6 @@ export default {
Collaborative: '协作',
Confirm: '确认',
Connect: '连接',
Connect_to_a_server: '连接到服务器',
Connected: '已连接',
Connecting: '连接中',
Continue_with: '继续采用',
@ -220,6 +219,7 @@ export default {
Notify_all_in_this_room: '通知这个房间的所有人',
Offline: '离线',
Oops: '哎呀!',
Onboarding_title: '欢迎来到 Rocket.Chat',
Online: '在线',
Only_authorized_users_can_write_new_messages: '只有经过授权的用户才能写新消息',
Open_emoji_selector: '打开emoji选择器',
@ -333,7 +333,6 @@ export default {
Video_call: '视频电话',
Voice_call: '语音电话',
Welcome: '欢迎',
Welcome_to_RocketChat: '欢迎来到 Rocket.Chat',
Yes_action_it: '是的,{{action}}它!',
Yesterday: '昨天',
You_are_in_preview_mode: '您处于预览模式',

View File

@ -1,61 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import styles from './styles';
import { themes } from '../../constants/colors';
import DisclosureIndicator from '../../containers/DisclosureIndicator';
export default class Button extends React.PureComponent {
static propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
type: PropTypes.string,
theme: PropTypes.string,
icon: PropTypes.node.isRequired,
testID: PropTypes.string.isRequired,
onPress: PropTypes.func
}
static defaultProps = {
title: 'Press me!',
type: 'primary',
onPress: () => alert('It works!')
}
state = {
active: false
};
render() {
const {
title, subtitle, type, onPress, icon, testID, theme
} = this.props;
const { active } = this.state;
const activeStyle = active && styles.buttonActive;
const isPrimary = (type === 'primary');
const buttonContainerStyle = {
backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].focusedBackground,
borderColor: isPrimary ? themes[theme].actionTintColor : themes[theme].borderColor
};
return (
<TouchableWithoutFeedback
onPress={onPress}
onPressIn={() => this.setState({ active: true })}
onPressOut={() => this.setState({ active: false })}
testID={testID}
>
<View style={[styles.buttonContainer, buttonContainerStyle]}>
<View style={styles.buttonIconContainer}>
{icon}
</View>
<View style={styles.buttonCenter}>
<Text style={[styles.buttonTitle, { color: isPrimary ? themes[theme].buttonText : themes[theme].tintColor }, activeStyle]}>{title}</Text>
{subtitle ? <Text style={[styles.buttonSubtitle, activeStyle, { color: themes[theme].auxiliaryText }]}>{subtitle}</Text> : null}
</View>
{type === 'secondary' ? <DisclosureIndicator theme={theme} /> : null}
</View>
</TouchableWithoutFeedback>
);
}
}

View File

@ -10,7 +10,7 @@ import Orientation from 'react-native-orientation-locker';
import { selectServerRequest, serverInitAdd, serverFinishAdd } from '../../actions/server';
import { appStart as appStartAction } from '../../actions';
import I18n from '../../i18n';
import Button from './Button';
import Button from '../../containers/Button';
import styles from './styles';
import { isIOS, isNotch, isTablet } from '../../utils/deviceInfo';
import EventEmitter from '../../utils/events';
@ -147,36 +147,53 @@ class OnboardingView extends React.Component {
testID='onboarding-view'
>
<StatusBar theme={theme} />
<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Welcome_to_RocketChat')}</Text>
<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>Beyond Team Collaboration</Text>
<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>A workspace is your team or organizations space to collaborate. Ask the workspace admin for address to join or create one for your team.</Text>
<View style={[styles.buttonsContainer, isTablet && sharedStyles.tabletScreenContent]}>
<Button
type='secondary'
title={I18n.t('Connect_to_a_server')}
icon={<CustomIcon name='permalink' size={30} color={themes[theme].actionTintColor} />}
onPress={this.connectServer}
testID='connect-server-button'
theme={theme}
/>
<Button
type='secondary'
title={I18n.t('Join_the_community')}
subtitle='open.rocket.chat'
icon={<Image source={{ uri: 'logo_onboarding' }} style={{ width: 32, height: 27 }} fadeDuration={0} />}
onPress={this.joinCommunity}
testID='join-community-button'
theme={theme}
/>
<Button
type='primary'
title={I18n.t('Create_a_new_workspace')}
icon={<CustomIcon name='plus' size={30} color={themes[theme].buttonText} />}
onPress={this.createWorkspace}
testID='create-workspace-button'
theme={theme}
/>
<View style={isTablet && sharedStyles.tabletScreenContent}>
<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
<View style={[styles.buttonsContainer]}>
{/* <Button
type='secondary'
title={I18n.t('Connect_to_a_server')}
icon={<CustomIcon name='permalink' size={30} color={themes[theme].actionTintColor} />}
onPress={this.connectServer}
testID='connect-server-button'
theme={theme}
/>
<Button
type='secondary'
title={I18n.t('Join_the_community')}
subtitle='open.rocket.chat'
icon={<Image source={{ uri: 'logo_onboarding' }} style={{ width: 32, height: 27 }} fadeDuration={0} />}
onPress={this.joinCommunity}
testID='join-community-button'
theme={theme}
/>
<Button
type='primary'
title={I18n.t('Create_a_new_workspace')}
icon={<CustomIcon name='plus' size={30} color={themes[theme].buttonText} />}
onPress={this.createWorkspace}
testID='create-workspace-button'
theme={theme}
/> */}
<Button
title={I18n.t('Onboarding_join_workspace')}
type='primary'
style={styles.button}
onPress={this.connectServer}
theme={theme}
/>
<Button
title={I18n.t('Create_a_new_workspace')}
type='secondary'
style={styles.button}
backgroundColor={themes[theme].chatComponentBackground}
onPress={this.createWorkspace}
theme={theme}
/>
</View>
</View>
{this.renderClose()}
</SafeAreaView>

View File

@ -12,7 +12,7 @@ export default StyleSheet.create({
},
onboarding: {
alignSelf: 'center',
marginTop: verticalScale(116),
marginTop: !isTablet && verticalScale(116),
marginBottom: verticalScale(50),
maxHeight: verticalScale(150),
resizeMode: 'contain',
@ -41,42 +41,8 @@ export default StyleSheet.create({
},
buttonsContainer: {
marginBottom: verticalScale(10),
marginTop: verticalScale(30)
},
buttonContainer: {
marginHorizontal: 15,
marginVertical: 5,
flexDirection: 'row',
height: 60,
alignItems: 'center',
borderWidth: 1,
borderRadius: 2
},
buttonCenter: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
},
buttonTitle: {
...sharedStyles.textSemibold,
fontSize: 17
},
buttonSubtitle: {
...sharedStyles.textRegular,
fontSize: 15
},
buttonIconContainer: {
width: 65,
alignItems: 'center',
justifyContent: 'center'
},
buttonIcon: {
marginHorizontal: 10,
width: 20,
height: 20
},
buttonActive: {
opacity: 0.5
marginTop: verticalScale(30),
marginHorizontal: 16
},
closeModal: {
position: 'absolute',