Skip to content

P
pianoApp
Commit 0bdc5be3 authored by norhalimah's avatar norhalimah
Browse files
Options

updating UI

parent 3e25fd61
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 127 deletions
App.js
View file @ 0bdc5be3
...@@ -4,7 +4,6 @@ import {Image, Dimensions} from 'react-native'; ...@@ -4,7 +4,6 @@ import {Image, Dimensions} from 'react-native';
import {NavigationContainer} from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack'; import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements'; import {Icon} from 'react-native-elements';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
//import Settings from './screens/settings'; //import Settings from './screens/settings';
import SettingsScale from './screens/settingScale'; import SettingsScale from './screens/settingScale';
import SettingsListen from './screens/settingListen'; import SettingsListen from './screens/settingListen';
...@@ -19,7 +18,6 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs ...@@ -19,7 +18,6 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs
const closeIcon = require('./media/img/btn_close.png'); const closeIcon = require('./media/img/btn_close.png');
const Stack = createStackNavigator(); const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const TabTop = createMaterialTopTabNavigator(); const TabTop = createMaterialTopTabNavigator();
function LogBook() { function LogBook() {
...@@ -140,64 +138,20 @@ class App extends React.PureComponent { ...@@ -140,64 +138,20 @@ class App extends React.PureComponent {
<Stack.Screen <Stack.Screen
name="2" name="2"
component={Quiz} component={Quiz}
options={({navigation}) => ({ options={{
title: 'Scale', title: ' ',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerLeft: null,
<Icon }}
name="close"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}}
/>
),
})}
/> />
<Stack.Screen <Stack.Screen
name="3" name="3"
component={Listen} component={Listen}
options={({navigation}) => ({ options={{
title: 'Listen Skill', title: ' ',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerLeft: null,
<Icon }}
name="close"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}}
/>
),
})}
/> />
<Stack.Screen <Stack.Screen
name="4" name="4"
......
screens/listening.js
View file @ 0bdc5be3
This diff is collapsed.
screens/quiz.js
View file @ 0bdc5be3
...@@ -29,10 +29,6 @@ import Sound from 'react-native-sound'; ...@@ -29,10 +29,6 @@ import Sound from 'react-native-sound';
import moment from 'moment'; import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
const con = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
const date = moment().utcOffset('+08:00').format('DD/MM/YYYY'); const date = moment().utcOffset('+08:00').format('DD/MM/YYYY');
const time = moment().utcOffset('+08:00').format('h:mm a'); const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd'); const day = moment().utcOffset('+08:00').format('ddd');
...@@ -77,6 +73,11 @@ const corIcon = require('../media/img/icon_check.png'); ...@@ -77,6 +73,11 @@ const corIcon = require('../media/img/icon_check.png');
const timerIcon = require('../media/img/icon_timer.png'); const timerIcon = require('../media/img/icon_timer.png');
const undo1 = require('../media/img/btn_reset_grey.png'); const undo1 = require('../media/img/btn_reset_grey.png');
const undo2 = require('../media/img/btn_reset_orange.png'); const undo2 = require('../media/img/btn_reset_orange.png');
const closeIcon = require('../media/img/btn_close.png');
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
var imageN = ''; var imageN = '';
var indexN = 0; var indexN = 0;
...@@ -996,7 +997,13 @@ class Quiz extends React.Component { ...@@ -996,7 +997,13 @@ class Quiz extends React.Component {
{this.showCorrect()} {this.showCorrect()}
{this.showWrong()} {this.showWrong()}
{this.showDone()} {this.showDone()}
{this.clickSubmitButton()} <View style={styles.viewTitle}>
<TouchableOpacity style={{marginHorizontal:height * 0.01}} onPress={() => this.homeExit()}>
<Image style={styles.closeIcon} source={closeIcon} />
</TouchableOpacity>
<Text style={styles.textTitle}>Scale</Text>
{this.clickSubmitButton()}
</View>
<View style={styles.view1}> <View style={styles.view1}>
<View style={styles.viewQues}> <View style={styles.viewQues}>
......
style/styleListen.js
View file @ 0bdc5be3
This diff is collapsed.
style/styleQuiz.js
View file @ 0bdc5be3
...@@ -5,19 +5,38 @@ const width = Dimensions.get('window').width; ...@@ -5,19 +5,38 @@ const width = Dimensions.get('window').width;
export default StyleSheet.create({ export default StyleSheet.create({
viewTitle: {
flexDirection: 'row',
height:'15%',
width:height,
marginTop:'2%',
},
textTitle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginLeft: height * 0.36,
marginTop:width * 0.04,
},
closeIcon: {
height: 50,
width: 50,
padding:10,
},
// clickSubmitButton () // clickSubmitButton ()
viewSubmitButton:{ viewSubmitButton:{
flexDirection: 'row', flexDirection: 'row',
width:width, width:height * 0.2,
marginBottom:height * 0.05, marginBottom:width * 0.05,
height:width * 0.15,
marginLeft:height * 0.08,
}, },
// clickSubmitButton () if true // clickSubmitButton () if true
buttonSubmitButtonT:{ buttonSubmitButtonT:{
backgroundColor:'#E7E7E7', backgroundColor:'#E7E7E7',
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.75, marginHorizontal:height * 0.05,
marginTop:'3%',
}, },
textSubmitButtonT:{ textSubmitButtonT:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -25,14 +44,14 @@ textSubmitButtonT:{ ...@@ -25,14 +44,14 @@ textSubmitButtonT:{
textAlign:'center', textAlign:'center',
lineHeight:20, lineHeight:20,
color:'#848484', color:'#848484',
paddingVertical:height * 0.035, paddingVertical:width * 0.035,
}, },
// clickSubmitButton () if false // clickSubmitButton () if false
buttonSubmitButtonF:{ buttonSubmitButtonF:{
backgroundColor:'#EF476F', backgroundColor:'#EF476F',
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.75, marginHorizontal:height * 0.05,
marginTop:'3%', marginTop:'3%',
}, },
textSubmitButtonF:{ textSubmitButtonF:{
...@@ -41,7 +60,7 @@ textSubmitButtonF:{ ...@@ -41,7 +60,7 @@ textSubmitButtonF:{
textAlign:'center', textAlign:'center',
lineHeight:20, lineHeight:20,
color:'#FFFBF0', color:'#FFFBF0',
paddingVertical:height * 0.035, paddingVertical:width * 0.035,
}, },
//clickResetButton () //clickResetButton ()
...@@ -56,9 +75,9 @@ buttonResetButtonT:{ ...@@ -56,9 +75,9 @@ buttonResetButtonT:{
borderColor:'#E7E7E7', borderColor:'#E7E7E7',
borderWidth:1, borderWidth:1,
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.72, marginHorizontal:height * 0.72,
marginTop:height * 0.03, marginTop:width * 0.03,
}, },
textResetButtonT:{ textResetButtonT:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -66,16 +85,16 @@ textResetButtonT:{ ...@@ -66,16 +85,16 @@ textResetButtonT:{
textAlign:'left', textAlign:'left',
lineHeight:18, lineHeight:18,
color:'#848484', color:'#848484',
paddingVertical:height * 0.04, paddingVertical:width * 0.04,
}, },
buttonResetButtonF:{ buttonResetButtonF:{
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderColor:'#FC8121', borderColor:'#FC8121',
borderWidth:1, borderWidth:1,
borderRadius:8, borderRadius:8,
width:width * 0.22, width:height * 0.22,
marginHorizontal:width * 0.72, marginHorizontal:height * 0.72,
marginTop:height * 0.03, marginTop:width * 0.03,
}, },
textResetButtonF:{ textResetButtonF:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -83,15 +102,15 @@ textResetButtonF:{ ...@@ -83,15 +102,15 @@ textResetButtonF:{
textAlign:'left', textAlign:'left',
lineHeight:18, lineHeight:18,
color:'#FC8121', color:'#FC8121',
paddingVertical:height * 0.04, paddingVertical:width * 0.04,
}, },
//showQuit() //showQuit()
viewShowQuit:{ viewShowQuit:{
marginHorizontal:width * 0.28, marginHorizontal:height * 0.28,
width:width * 0.45, width:height * 0.45,
height:height * 0.6, height:width * 0.6,
marginTop:width * 0.13, marginTop:height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -109,7 +128,7 @@ textQuitScale:{ ...@@ -109,7 +128,7 @@ textQuitScale:{
textAlign: 'center', textAlign: 'center',
lineHeight:30, lineHeight:30,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.17, paddingTop:width * 0.17,
}, },
viewButtonQuit:{ viewButtonQuit:{
alignItems: 'center', alignItems: 'center',
...@@ -133,7 +152,7 @@ textNoQuit:{ ...@@ -133,7 +152,7 @@ textNoQuit:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.04, paddingHorizontal:height * 0.04,
}, },
buttonYesQuit:{ buttonYesQuit:{
backgroundColor: 'white', backgroundColor: 'white',
...@@ -154,15 +173,15 @@ textYesQuit:{ ...@@ -154,15 +173,15 @@ textYesQuit:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.03, paddingHorizontal:height * 0.03,
}, },
//showCorrect() //showCorrect()
viewShowCorrect:{ viewShowCorrect:{
marginHorizontal: Dimensions.get('window').width * 0.28, marginHorizontal: height * 0.28,
width :width * 0.45, width :height * 0.45,
height :height * 0.6, height :width * 0.6,
marginTop :width * 0.13, marginTop :height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -180,7 +199,7 @@ textScaleResult:{ ...@@ -180,7 +199,7 @@ textScaleResult:{
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.17, paddingTop:width * 0.17,
}, },
textCorrect:{ textCorrect:{
fontSize: 24, fontSize: 24,
...@@ -188,11 +207,11 @@ textCorrect:{ ...@@ -188,11 +207,11 @@ textCorrect:{
textAlign: 'center', textAlign: 'center',
lineHeight:30, lineHeight:30,
color:'#14A76C', color:'#14A76C',
paddingTop:height * 0.02, paddingTop:width * 0.02,
}, },
buttonOK:{ buttonOK:{
backgroundColor: '#81C9C9', backgroundColor: '#81C9C9',
width :width * 0.3, width :height * 0.3,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 8, borderRadius: 8,
...@@ -206,15 +225,15 @@ textOK:{ ...@@ -206,15 +225,15 @@ textOK:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.12, paddingHorizontal:height * 0.12,
}, },
//showWrong() //showWrong()
viewShowWrong: { viewShowWrong: {
marginHorizontal:width * 0.28, marginHorizontal:height * 0.28,
width :width * 0.45, width :height * 0.45,
height :height * 0.6, height :width * 0.6,
marginTop :width * 0.13, marginTop :height * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -232,7 +251,7 @@ textScaleResultW:{ ...@@ -232,7 +251,7 @@ textScaleResultW:{
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.17, paddingTop:width * 0.17,
}, },
textWrong:{ textWrong:{
fontSize: 24, fontSize: 24,
...@@ -240,11 +259,11 @@ textWrong:{ ...@@ -240,11 +259,11 @@ textWrong:{
textAlign: 'center', textAlign: 'center',
lineHeight:30, lineHeight:30,
color:'#D11427', color:'#D11427',
paddingTop:height * 0.02, paddingTop:width * 0.02,
}, },
buttonOKW:{ buttonOKW:{
backgroundColor: '#81C9C9', backgroundColor: '#81C9C9',
width :width * 0.3, width :height * 0.3,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 8, borderRadius: 8,
...@@ -258,15 +277,15 @@ textOKW:{ ...@@ -258,15 +277,15 @@ textOKW:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.12, paddingHorizontal:height * 0.12,
}, },
//showDone() //showDone()
viewShowDone:{ viewShowDone:{
marginHorizontal:width * 0.28, marginHorizontal:height * 0.28,
width :width * 0.42, width :height * 0.42,
height :height * 0.73, height :width * 0.73,
marginTop :width * 0.08, marginTop :height * 0.08,
alignItems: 'center', alignItems: 'center',
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
borderRadius: 16, borderRadius: 16,
...@@ -284,7 +303,7 @@ textWellDone:{ ...@@ -284,7 +303,7 @@ textWellDone:{
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3B3A39', color:'#3B3A39',
paddingTop:height * 0.14, paddingTop:width * 0.14,
}, },
viewScaleResult:{ viewScaleResult:{
borderRadius:16, borderRadius:16,
...@@ -293,7 +312,8 @@ viewScaleResult:{ ...@@ -293,7 +312,8 @@ viewScaleResult:{
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
marginTop:'2.5%', marginTop:'2.5%',
marginLeft:'2%', marginLeft:'2%',
width:width * 0.33, marginBottom:'1.7%', width:height * 0.33,
marginBottom:'1.7%',
}, },
textScaleResultD: { textScaleResultD: {
fontSize: 20, fontSize: 20,
...@@ -301,13 +321,13 @@ textScaleResultD: { ...@@ -301,13 +321,13 @@ textScaleResultD: {
textAlign: 'center', textAlign: 'center',
lineHeight:25, lineHeight:25,
color:'#3D9090', color:'#3D9090',
paddingHorizontal:width * 0.06, paddingHorizontal: height * 0.06,
paddingTop:height * 0.02, paddingTop:width * 0.02,
}, },
viewCorrectWrong:{ viewCorrectWrong:{
flexDirection: 'row', flexDirection: 'row',
paddingHorizontal:width * 0.07, paddingHorizontal:height * 0.07,
paddingVertical:height * 0.02, paddingVertical:width * 0.02,
}, },
corIcon:{ corIcon:{
height:'65%', height:'65%',
...@@ -337,7 +357,7 @@ textWrongD:{ ...@@ -337,7 +357,7 @@ textWrongD:{
}, },
buttonDone:{ buttonDone:{
backgroundColor: '#81C9C9', backgroundColor: '#81C9C9',
width :width * 0.33, width :height * 0.33,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 8, borderRadius: 8,
...@@ -351,21 +371,21 @@ textDone:{ ...@@ -351,21 +371,21 @@ textDone:{
fontSize:16, fontSize:16,
textAlign: 'left', textAlign: 'left',
lineHeight:20, lineHeight:20,
paddingHorizontal:width * 0.14, paddingHorizontal:height * 0.12,
}, },
//render() //render()
view1:{ view1:{
backgroundColor:'#FFFBF0', backgroundColor:'#FFFBF0',
flexDirection: 'row', flexDirection: 'row',
width:width, width:height,
height:height * 0.4, height:width * 0.4,
borderTopLeftRadius:8, borderTopLeftRadius:8,
borderTopRightRadius:8, borderTopRightRadius:8,
}, },
viewQues:{ viewQues:{
width:width * 0.25, width:height * 0.25,
marginHorizontal:width * 0.03, marginHorizontal:height * 0.03,
marginTop:'6%', marginTop:'6%',
marginBottom:'2%', marginBottom:'2%',
}, },
...@@ -401,13 +421,13 @@ textCorrectQ:{ ...@@ -401,13 +421,13 @@ textCorrectQ:{
}, },
viewImageNotes:{ viewImageNotes:{
alignItems:'center', alignItems:'center',
width:width * 0.32, width:height * 0.32,
marginHorizontal:width * 0.03, marginHorizontal:height * 0.03,
marginTop:'2%', marginTop:'2%',
}, },
imageNote:{ imageNote:{
height:height * 0.27, height:width * 0.27,
width:width * 0.18, width:height * 0.18,
}, },
textKeyLeft:{ textKeyLeft:{
fontFamily:'Gilroy-Bold', fontFamily:'Gilroy-Bold',
...@@ -426,8 +446,8 @@ textKeyCount:{ ...@@ -426,8 +446,8 @@ textKeyCount:{
}, },
viewTimerUndo:{ viewTimerUndo:{
alignItems:'center', alignItems:'center',
width:width * 0.25, width:height * 0.25,
marginHorizontal:width * 0.045, marginHorizontal:height * 0.045,
marginTop:'2.5%', marginTop:'2.5%',
}, },
//stopwatch //stopwatch
...@@ -437,7 +457,7 @@ containerStopWatch:{ ...@@ -437,7 +457,7 @@ containerStopWatch:{
borderRadius: 8, borderRadius: 8,
borderColor:'#FFECDA', borderColor:'#FFECDA',
borderWidth:2, borderWidth:2,
width:width * 0.22, width:height * 0.22,
alignItems: 'center', alignItems: 'center',
}, },
textStopWatch:{ textStopWatch:{
...@@ -451,15 +471,15 @@ textStopWatch:{ ...@@ -451,15 +471,15 @@ textStopWatch:{
}, },
timerIcon:{ timerIcon:{
height:'18%', height:'18%',
width:'13%', width:'15%',
position: 'absolute', position: 'absolute',
left:25, left:22,
top:15, top:16,
}, },
//White Notes //White Notes
whiteNotesButton: { whiteNotesButton: {
width:width / 14, width:height / 14,
borderWidth: 0.5, borderWidth: 0.5,
borderColor: '#707070', borderColor: '#707070',
alignItems: 'center', alignItems: 'center',
...@@ -467,7 +487,7 @@ whiteNotesButton: { ...@@ -467,7 +487,7 @@ whiteNotesButton: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
whiteNotesButtonPress:{ whiteNotesButtonPress:{
width:width / 14, width:height / 14,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#FCE1FF', backgroundColor: '#FCE1FF',
borderWidth: 0.5, borderWidth: 0.5,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment