Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#11] update style #84

Merged
merged 2 commits into from
May 29, 2022
Merged

[#11] update style #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45cfcf0
[#11] update: change copy and button composition
hee-suh May 28, 2022
2ad472d
[#11] style: add backdrop to image background
hee-suh May 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 58 additions & 64 deletions react-native/components/BottomDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Dimensions, View, TouchableOpacity, TouchableHighlight, ScrollView, Alert, Linking } from 'react-native';
import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { Popover, Button, Text, Modal, FormControl, Input, VStack, Select, CheckIcon, AlertDialog } from 'native-base';
import { theme } from '../core/theme';
import type { BottomDrawerProps, EventForm, ResultsForm, UserData } from '../types';
Expand Down Expand Up @@ -128,63 +128,11 @@ function BottomDrawer(props: BottomDrawerProps) {
<View style={{ flex: 1 }}>
<View style={styles.horizontalLine} />
<View style={[styles.spaceBetween, { paddingBottom: 24 }]}>
<Text fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize='2xl' color="primary.500">{props.showKorean ? i18n.t('korean') : i18n.t('results')}</Text>
<Text fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize='2xl' color="primary.500">{props.showKorean ? i18n.t('korean') : i18n.t('translation')}</Text>
<View style={styles.alignRow}>
<TouchableOpacity style={styles.rightSpace} onPress={props.handleKorean}>
<TouchableOpacity onPress={props.handleKorean}>
<MaterialIcons name="translate" size={32} color="#000"/>
</TouchableOpacity>
{props.isTranslateScreen && props.handleOpenSaveForm &&
<>
<TouchableOpacity onPress={props.handleOpenSaveForm}>
<FontAwesome name="save" size={32} color='#000' />
</TouchableOpacity>
<Modal isOpen={props.openSaveForm} onClose={props.handleOpenSaveForm}>
<Modal.Content maxWidth="400px">
<Modal.CloseButton />
<Modal.Header>{i18n.t('saveResults')}</Modal.Header>
<Modal.Body>
<VStack space={2}>
<FormControl>
<FormControl.Label>{i18n.t('child')}</FormControl.Label>
<Select selectedValue={resultsForm?.cid.toString()} accessibilityLabel="Child" onValueChange={itemValue => {
setResultsForm({...resultsForm, ['cid']: Number(itemValue)})
}} _selectedItem={{
bg: "skyblue.500",
endIcon: <CheckIcon size={3} />
}}>
{/* Country code 3 digit ISO */}
{user?.uchildren?.map((child, index) =>
child?.cname && child?.cid &&
<Select.Item key={'cs_'+index} label={child?.cname} value={child?.cid.toString()} />
)}
</Select>
</FormControl>
<FormControl>
<FormControl.Label>Title</FormControl.Label>
<Input
value={resultsForm['title']}
onChangeText={(text) => setResultsForm({...resultsForm, ['title']: text})}
/>
<FormControl.HelperText>
{i18n.t('helpertext')}
</FormControl.HelperText>
</FormControl>
</VStack>
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button variant="ghost" colorScheme="blueGray" onPress={props.handleOpenSaveForm}>
{i18n.t('cancel')}
</Button>
<Button onPress={() => props?.saveResults && props.saveResults(resultsForm)}>
{i18n.t('save')}
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
</>
}
</View>
</View>

Expand Down Expand Up @@ -331,13 +279,62 @@ function BottomDrawer(props: BottomDrawerProps) {
</View>
{props.isTranslateScreen &&
<View style={[styles.spaceBetween, props.isFullDrawer && styles.full ]}>
<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.closeResults}>
<Text color="white">{i18n.t('close')}</Text>
<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.retakePicture}>
<Text color="white">{i18n.t('retake')}</Text>
</TouchableHighlight>
<View style={styles.gap} />
<TouchableHighlight style={[styles.regularButton, styles.primaryBackground]} onPress={props.retakePicture}>
<Text color="white">{i18n.t('tryAgain')}</Text>
</TouchableHighlight>
{props.handleOpenSaveForm &&
<>
<TouchableHighlight style={[styles.regularButton, styles.primaryBackground]} onPress={props.handleOpenSaveForm}>
<Text color="white">{i18n.t('save')}</Text>
</TouchableHighlight>
<Modal isOpen={props.openSaveForm} onClose={props.handleOpenSaveForm}>
<Modal.Content maxWidth="400px">
<Modal.CloseButton />
<Modal.Header>{i18n.t('saveResults')}</Modal.Header>
<Modal.Body>
<VStack space={2}>
<FormControl>
<FormControl.Label>{i18n.t('child')}</FormControl.Label>
<Select selectedValue={resultsForm?.cid.toString()} accessibilityLabel="Child" onValueChange={itemValue => {
setResultsForm({...resultsForm, ['cid']: Number(itemValue)})
}} _selectedItem={{
bg: "skyblue.500",
endIcon: <CheckIcon size={3} />
}}>
{/* Country code 3 digit ISO */}
{user?.uchildren?.map((child, index) =>
child?.cname && child?.cid &&
<Select.Item key={'cs_'+index} label={child?.cname} value={child?.cid.toString()} />
)}
</Select>
</FormControl>
<FormControl>
<FormControl.Label>Title</FormControl.Label>
<Input
value={resultsForm['title']}
onChangeText={(text) => setResultsForm({...resultsForm, ['title']: text})}
/>
<FormControl.HelperText>
{i18n.t('helpertext')}
</FormControl.HelperText>
</FormControl>
</VStack>
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button variant="ghost" colorScheme="blueGray" onPress={props.handleOpenSaveForm}>
{i18n.t('cancel')}
</Button>
<Button onPress={() => props?.saveResults && props.saveResults(resultsForm)}>
{i18n.t('save')}
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
</>
}
</View>
}
</View>
Expand Down Expand Up @@ -392,9 +389,6 @@ const styles = StyleSheet.create({
highlighted: {
backgroundColor: theme.colors.skyblue
},
rightSpace: {
paddingRight: 8
},
full: {
paddingBottom: 96
},
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default {
start: 'Start NotiNote',
/* Home */
translate: 'Translate',
translation: 'Translation',
translateDesc: 'Translation and calendar registration are all possible just by taking a picture of the notice.',
search: 'Search',
searchDesc: 'You can find notices you have translated.',
Expand Down Expand Up @@ -68,7 +69,7 @@ export default {
tip_1: 'You can save the results and check them on the search screen!',
registerFailed: 'Failed to add event. Please try again.',
authFailed: "Authentication failed. Please try again.",
tryAgain: 'Try Again',
retake: 'Retake',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

와 이거 바꾸느라 고생하셨슴다.....

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저 파일들 볼 때마다 수연 정말 대다나다는 걸 느낌 😇

join: 'Join',
searchResult: "Search Result",
noEvent: "There is no event today!"
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/ja.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
swipe: 'スワイプして続行します ≫',
start: 'NotiNoteを起動します',
translate: '翻訳',
translation: '翻訳文',
translateDesc: '通知の写真を撮るだけで、翻訳やカレンダー登録が可能です。',
search: '検索',
searchDesc: 'あなたが翻訳した通知を見つけることができます。',
Expand Down Expand Up @@ -62,7 +63,7 @@ export default {
gotIt: '了解しました',
registerFailed: 'イベントの追加に失敗しました。 もう一度やり直してください。',
authFailed: "認証に失敗しました。もう一度やり直してください。",
tryAgain: '再試行',
retake: '再撮影',
join: '参加',
searchResult: "検索結果",
noEvent: "今日はイベントはありません！"
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/km.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
swipe: 'អូសដើម្បីបន្ត ≫',
start: 'ចាប់ផ្តើម NotiNote',
translate: 'បកប្រែ',
translation: 'ការបកប្រែ',
translateDesc: 'ការបកប្រែ និងការចុះឈ្មោះប្រតិទិនគឺអាចធ្វើទៅបានដោយគ្រាន់តែថតរូបការជូនដំណឹង។',
search: 'ស្វែងរក',
searchDesc: 'អ្នកអាចស្វែងរកការជូនដំណឹងដែលអ្នកបានបកប្រែ។',
Expand Down Expand Up @@ -62,7 +63,7 @@ export default {
gotIt: 'យល់ហើយ',
registerFailed: 'បានបរាជ័យក្នុងការបន្ថែមព្រឹត្តិការណ៍។ សូម​ព្យាយាម​ម្តង​ទៀត។',
authFailed: "ការផ្ទៀងផ្ទាត់បានបរាជ័យ។ សូមព្យាយាមម្តងទៀត",
tryAgain: 'ព្យាយាមម្តងទៀត',
retake: 'បាញ់ឡើងវិញ',
join: 'ចូលរួម',
searchResult: "លទ្ធផលស្វែងរក",
noEvent: "មិនមានព្រឹត្តិការណ៍ថ្ងៃនេះទេ!"
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/ko.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
swipe: '계속하려면 넘겨주세요 ≫',
start: 'NotiNote 시작하기',
translate: '번역',
translation: '번역문',
translateDesc: '가정통신문을 사진으로 찍기만 하면 번역부터 캘린더 등록까지 모두 가능합니다.',
search: '검색',
searchDesc: '이전에 번역한 가정통신문을 검색할 수 있습니다.',
Expand Down Expand Up @@ -61,7 +62,7 @@ export default {
gotIt: '확인',
registerFailed: '이벤트를 추가하지 못했습니다. 다시 시도해 주세요.',
authFailed: "인증에 실패했습니다. 다시 시도하십시오.",
tryAgain: '다시 시도',
retake: '다시 촬영',
join: '가입',
searchResult: "검색 결과",
noEvent: "오늘은 이벤트가 없어요!"
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/th.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
swipe: 'ปัดเพื่อดำเนินการต่อ ≫',
start: 'เริ่ม NotiNote',
translate: 'แปล',
translation: 'การแปล',
translateDesc: 'การแปลและการลงทะเบียนปฏิทินทำได้เพียงแค่ถ่ายรูปประกาศ',
ค้นหา: 'ค้นหา',
searchDesc: 'คุณสามารถค้นหาประกาศที่คุณแปลได้',
Expand Down Expand Up @@ -62,7 +63,7 @@ export default {
gotIt: 'เข้าใจแล้ว',
registerFailed: 'ไม่สามารถเพิ่มเหตุการณ์ได้ กรุณาลองอีกครั้ง.',
authFailed: "การตรวจสอบสิทธิ์ล้มเหลว โปรดลองอีกครั้ง",
tryAgain: 'ลองอีกครั้ง',
retake: 'ถ่ายใหม่',
join: 'เข้าร่วม',
searchResult: "ผลการค้นหา",
noEvent: "วันนี้ไม่มีกิจกรรม!"
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/vn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
swipe: 'Vuốt để tiếp tục ≫',
start: 'Bắt ​​đầu NotiNote',
translate: 'dịch',
translation: 'dịch',
translateDesc: 'Bạn có thể làm mọi thứ từ dịch thuật đến đăng ký lịch chỉ bằng cách chụp ảnh thư từ tại nhà.',
search: 'tìm kiếm',
searchDesc: 'Bạn có thể tìm kiếm thư từ trong gia đình đã được dịch trước đây.',
Expand Down Expand Up @@ -61,7 +62,7 @@ export default {
gotIt: 'Đã hiểu',
registerFailed: 'Không thêm được sự kiện. Vui lòng thử lại.',
authFailed: "Xác thực không thành công. Vui lòng thử lại.",
tryAgain: 'Thử lại',
retake: 'chụp lại',
join: 'Tham gia',
searchResult: "Kết quả tìm kiếm",
noEvent: "Không có sự kiện hôm nay!"
Expand Down
3 changes: 2 additions & 1 deletion react-native/locales/zh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
swipe: '滑动继续≫',
start: '启动 NotiNote',
translate: '翻译',
translation: '翻译',
translateDesc: '您只需拍摄家庭信件的照片即可完成从翻译到日历登记的所有工作。',
search: '搜索',
searchDesc: '您可以搜索以前翻译的家庭信件。',
Expand Down Expand Up @@ -61,7 +62,7 @@ export default {
gotIt: '得到它',
registerFailed: '添加事件失败。 请再试一次。',
authFailed: "验证失败，请重试。",
tryAgain: '再试一次',
retake: '重拍',
join: '加入',
searchResult: "搜索结果",
noEvent: "今天没有活动！"
Expand Down
Loading