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';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
//import Settings from './screens/settings';
import SettingsScale from './screens/settingScale';
import SettingsListen from './screens/settingListen';
......@@ -19,7 +18,6 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs
const closeIcon = require('./media/img/btn_close.png');
const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const TabTop = createMaterialTopTabNavigator();
function LogBook() {
......@@ -140,64 +138,20 @@ class App extends React.PureComponent {
<Stack.Screen
name="2"
component={Quiz}
options={({navigation}) => ({
title: 'Scale',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
options={{
title: ' ',
headerTransparent: true,
headerBackImage: () => (
<Icon
name="close"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}}
/>
),
})}
headerLeft: null,
}}
/>
<Stack.Screen
name="3"
component={Listen}
options={({navigation}) => ({
title: 'Listen Skill',
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerStyle: {
backgroundColor: '#E07EF9',
},
headerTintColor: '#fff',
options={{
title: ' ',
headerTransparent: true,
headerBackImage: () => (
<Icon
name="close"
type="font-awesome"
size={26}
color="black"
onPress={() => {
navigation.navigate('1');
Orientation.lockToPortrait();
}}
/>
),
})}
headerLeft: null,
}}
/>
<Stack.Screen
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';
import moment from 'moment';
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 time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd');
......@@ -77,6 +73,11 @@ const corIcon = require('../media/img/icon_check.png');
const timerIcon = require('../media/img/icon_timer.png');
const undo1 = require('../media/img/btn_reset_grey.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 indexN = 0;
......@@ -996,7 +997,13 @@ class Quiz extends React.Component {
{this.showCorrect()}
{this.showWrong()}
{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.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;
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 ()
viewSubmitButton:{
flexDirection: 'row',
width:width,
marginBottom:height * 0.05,
width:height * 0.2,
marginBottom:width * 0.05,
height:width * 0.15,
marginLeft:height * 0.08,
},
// clickSubmitButton () if true
buttonSubmitButtonT:{
backgroundColor:'#E7E7E7',
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.75,
marginTop:'3%',
width:height * 0.22,
marginHorizontal:height * 0.05,
},
textSubmitButtonT:{
fontFamily:'Gilroy-Bold',
......@@ -25,14 +44,14 @@ textSubmitButtonT:{
textAlign:'center',
lineHeight:20,
color:'#848484',
paddingVertical:height * 0.035,
paddingVertical:width * 0.035,
},
// clickSubmitButton () if false
buttonSubmitButtonF:{
backgroundColor:'#EF476F',
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.75,
width:height * 0.22,
marginHorizontal:height * 0.05,
marginTop:'3%',
},
textSubmitButtonF:{
......@@ -41,7 +60,7 @@ textSubmitButtonF:{
textAlign:'center',
lineHeight:20,
color:'#FFFBF0',
paddingVertical:height * 0.035,
paddingVertical:width * 0.035,
},
//clickResetButton ()
......@@ -56,9 +75,9 @@ buttonResetButtonT:{
borderColor:'#E7E7E7',
borderWidth:1,
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.72,
marginTop:height * 0.03,
width:height * 0.22,
marginHorizontal:height * 0.72,
marginTop:width * 0.03,
},
textResetButtonT:{
fontFamily:'Gilroy-Bold',
......@@ -66,16 +85,16 @@ textResetButtonT:{
textAlign:'left',
lineHeight:18,
color:'#848484',
paddingVertical:height * 0.04,
paddingVertical:width * 0.04,
},
buttonResetButtonF:{
backgroundColor:'#FFFBF0',
borderColor:'#FC8121',
borderWidth:1,
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.72,
marginTop:height * 0.03,
width:height * 0.22,
marginHorizontal:height * 0.72,
marginTop:width * 0.03,
},
textResetButtonF:{
fontFamily:'Gilroy-Bold',
......@@ -83,15 +102,15 @@ textResetButtonF:{
textAlign:'left',
lineHeight:18,
color:'#FC8121',
paddingVertical:height * 0.04,
paddingVertical:width * 0.04,
},
//showQuit()
viewShowQuit:{
marginHorizontal:width * 0.28,
width:width * 0.45,
height:height * 0.6,
marginTop:width * 0.13,
marginHorizontal:height * 0.28,
width:height * 0.45,
height:width * 0.6,
marginTop:height * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
......@@ -109,7 +128,7 @@ textQuitScale:{
textAlign: 'center',
lineHeight:30,
color:'#3B3A39',
paddingTop:height * 0.17,
paddingTop:width * 0.17,
},
viewButtonQuit:{
alignItems: 'center',
......@@ -133,7 +152,7 @@ textNoQuit:{
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.04,
paddingHorizontal:height * 0.04,
},
buttonYesQuit:{
backgroundColor: 'white',
......@@ -154,15 +173,15 @@ textYesQuit:{
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.03,
paddingHorizontal:height * 0.03,
},
//showCorrect()
viewShowCorrect:{
marginHorizontal: Dimensions.get('window').width * 0.28,
width :width * 0.45,
height :height * 0.6,
marginTop :width * 0.13,
marginHorizontal: height * 0.28,
width :height * 0.45,
height :width * 0.6,
marginTop :height * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
......@@ -180,7 +199,7 @@ textScaleResult:{
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:height * 0.17,
paddingTop:width * 0.17,
},
textCorrect:{
fontSize: 24,
......@@ -188,11 +207,11 @@ textCorrect:{
textAlign: 'center',
lineHeight:30,
color:'#14A76C',
paddingTop:height * 0.02,
paddingTop:width * 0.02,
},
buttonOK:{
backgroundColor: '#81C9C9',
width :width * 0.3,
width :height * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
......@@ -206,15 +225,15 @@ textOK:{
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.12,
paddingHorizontal:height * 0.12,
},
//showWrong()
viewShowWrong: {
marginHorizontal:width * 0.28,
width :width * 0.45,
height :height * 0.6,
marginTop :width * 0.13,
marginHorizontal:height * 0.28,
width :height * 0.45,
height :width * 0.6,
marginTop :height * 0.13,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
......@@ -232,7 +251,7 @@ textScaleResultW:{
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:height * 0.17,
paddingTop:width * 0.17,
},
textWrong:{
fontSize: 24,
......@@ -240,11 +259,11 @@ textWrong:{
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:height * 0.02,
paddingTop:width * 0.02,
},
buttonOKW:{
backgroundColor: '#81C9C9',
width :width * 0.3,
width :height * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
......@@ -258,15 +277,15 @@ textOKW:{
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.12,
paddingHorizontal:height * 0.12,
},
//showDone()
viewShowDone:{
marginHorizontal:width * 0.28,
width :width * 0.42,
height :height * 0.73,
marginTop :width * 0.08,
marginHorizontal:height * 0.28,
width :height * 0.42,
height :width * 0.73,
marginTop :height * 0.08,
alignItems: 'center',
backgroundColor:'#FFFBF0',
borderRadius: 16,
......@@ -284,7 +303,7 @@ textWellDone:{
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:height * 0.14,
paddingTop:width * 0.14,
},
viewScaleResult:{
borderRadius:16,
......@@ -293,7 +312,8 @@ viewScaleResult:{
backgroundColor:'#FFFBF0',
marginTop:'2.5%',
marginLeft:'2%',
width:width * 0.33, marginBottom:'1.7%',
width:height * 0.33,
marginBottom:'1.7%',
},
textScaleResultD: {
fontSize: 20,
......@@ -301,13 +321,13 @@ textScaleResultD: {
textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:width * 0.06,
paddingTop:height * 0.02,
paddingHorizontal: height * 0.06,
paddingTop:width * 0.02,
},
viewCorrectWrong:{
flexDirection: 'row',
paddingHorizontal:width * 0.07,
paddingVertical:height * 0.02,
paddingHorizontal:height * 0.07,
paddingVertical:width * 0.02,
},
corIcon:{
height:'65%',
......@@ -337,7 +357,7 @@ textWrongD:{
},
buttonDone:{
backgroundColor: '#81C9C9',
width :width * 0.33,
width :height * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
......@@ -351,21 +371,21 @@ textDone:{
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.14,
paddingHorizontal:height * 0.12,
},
//render()
view1:{
backgroundColor:'#FFFBF0',
flexDirection: 'row',
width:width,
height:height * 0.4,
width:height,
height:width * 0.4,
borderTopLeftRadius:8,
borderTopRightRadius:8,
},
viewQues:{
width:width * 0.25,
marginHorizontal:width * 0.03,
width:height * 0.25,
marginHorizontal:height * 0.03,
marginTop:'6%',
marginBottom:'2%',
},
......@@ -401,13 +421,13 @@ textCorrectQ:{
},
viewImageNotes:{
alignItems:'center',
width:width * 0.32,
marginHorizontal:width * 0.03,
width:height * 0.32,
marginHorizontal:height * 0.03,
marginTop:'2%',
},
imageNote:{
height:height * 0.27,
width:width * 0.18,
height:width * 0.27,
width:height * 0.18,
},
textKeyLeft:{
fontFamily:'Gilroy-Bold',
......@@ -426,8 +446,8 @@ textKeyCount:{
},
viewTimerUndo:{
alignItems:'center',
width:width * 0.25,
marginHorizontal:width * 0.045,
width:height * 0.25,
marginHorizontal:height * 0.045,
marginTop:'2.5%',
},
//stopwatch
......@@ -437,7 +457,7 @@ containerStopWatch:{
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:width * 0.22,
width:height * 0.22,
alignItems: 'center',
},
textStopWatch:{
......@@ -451,15 +471,15 @@ textStopWatch:{
},
timerIcon:{
height:'18%',
width:'13%',
width:'15%',
position: 'absolute',
left:25,
top:15,
left:22,
top:16,
},
//White Notes
whiteNotesButton: {
width:width / 14,
width:height / 14,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center',
......@@ -467,7 +487,7 @@ whiteNotesButton: {
borderBottomWidth: 1,
},
whiteNotesButtonPress:{
width:width / 14,
width:height / 14,
alignItems: 'center',
backgroundColor: '#FCE1FF',
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