Skip to content

P
pianoApp
Commit 87a83bd7 authored by norhalimah's avatar norhalimah
Browse files
Options

UI

parent 0bdc5be3
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 130 deletions
App.js
View file @ 87a83bd7
......@@ -64,7 +64,7 @@ function Settings() {
<TabTop.Navigator
tabBarOptions={{
indicatorStyle: {
backgroundColor: '#3D9090',
backgroundColor: 'transparent',
},
labelStyle: {
fontSize: 14,
......@@ -167,6 +167,7 @@ class App extends React.PureComponent {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginLeft: '5%',
},
headerBackImage: () => (
<Image
......@@ -213,7 +214,7 @@ class App extends React.PureComponent {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.2,
marginHorizontal: Dimensions.get('window').width * 0.22,
},
headerBackImage: () => (
<Image style={{height: 50, width: 50}} source={closeIcon} />
......
screens/listening.js
View file @ 87a83bd7
......@@ -72,6 +72,7 @@ const rightIcon = require('../media/img/btn_right.png');
const leftIcon = require('../media/img/btn_left.png');
const playIcon = require('../media/img/btn_play.png');
const closeIcon = require('../media/img/btn_close.png');
const playingIcon = require('../media/img/icon_ac8th_white.png');
const keySound = Listennotes;
var soundN = '';
......@@ -526,7 +527,7 @@ class Listen extends React.Component {
<TouchableOpacity style={styles.buttonPlayingP}
onPress={() => this.playButton()}>
<View style={{flexDirection:'row'}}>
<Image style={styles.playIconP} source={playIcon}/>
<Image style={styles.playIconP} source={playingIcon}/>
<Text style={styles.textPlayingP}>Playing...</Text>
</View>
</TouchableOpacity>
......@@ -542,8 +543,10 @@ class Listen extends React.Component {
<ScrollView style={styles.container} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false} ref={(scroller) => {this.scroller = scroller;}}>
<View style={styles.screen}>
<View style={styles.viewPages}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.9}]}>1/4</Text>
<TouchableOpacity onPress={this.scrollToB} style={{width: '25%', marginRight: width * 1}}>
<View style={{marginLeft:width * 0.83, width: width * 0.2}}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.06}]}>1/4</Text>
</View>
<TouchableOpacity onPress={this.scrollToB}>
<Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity>
</View>
......@@ -661,10 +664,10 @@ class Listen extends React.Component {
<ScrollView style={styles.container} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false} ref={(scroller) => {this.scroller = scroller;}}>
<View style={styles.screen}>
<View style={styles.viewPages}>
<View style={{marginLeft:width * 0.85, width: width * 0.2, backgroundColor:'gray'}}>
<View style={{marginLeft:width * 0.83, width: width * 0.2}}>
<Text style={[styles.textPages, {paddingHorizontal:width * 0.06}]}>1/4</Text>
</View>
<TouchableOpacity onPress={this.scrollToB} style={{width: width * 0.2, marginLeft: width * 0.25, backgroundColor:'gray'}}>
<TouchableOpacity onPress={this.scrollToB} style={{width: width * 0.2, marginLeft: width * 0.25}}>
<Image style={styles.rightIcon} source={rightIcon}/>
</TouchableOpacity>
</View>
......
screens/logbookListen.js
View file @ 87a83bd7
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
Image,
Text,
View,
// eslint-disable-next-line no-unused-vars
ScrollView,
BackHandler,
FlatList,
Dimensions,
} from 'react-native';
import styles from '../style/styleLogbook';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';
const pianoIcon = require('../media/img/icon_scalerecord.png');
const listenIcon = require('../media/img/icon_listenskillrecord.png');
class LogBookListen extends React.PureComponent {
......@@ -48,38 +53,31 @@ class LogBookListen extends React.PureComponent {
//Orientation.lockToPortrait();
};
render() {
return (
<View style={[styles.container, {backgroundColor:'#81C9C9'}]}>
<SafeAreaView>
<ScrollView
style={styles.scroll}>
{this.state.logbook && this.state.logbook.map((item, id) => (
<View
key ={id}
style={styles.view1}>
<View style={styles.icon}>
<Image style={{height:50, width:50, marginVertical:20}} source={pianoIcon}/>
</View>
<View style={[styles.details, {marginTop:20}]}>
<Text style={styles.textcorrect}>{item.correct} of {item.correct + item.wrong} correct answers</Text>
<Text style={styles.texttimer}>Completed in {item.timer}</Text>
</View>
<View style={[styles.datedays, {marginTop:20}]}>
<View>
<Text style={styles.textdate1}>{item.date}</Text>
</View>
<View>
<Text style={styles.texttime}>{item.time}</Text>
</View>
</View>
</View>
)).reverse()}
</ScrollView>
</SafeAreaView>
</View>
);
}
render() {
return (
<View style={[styles.container, {backgroundColor:'#F7F7F7'}]}>
<SafeAreaView>
<FlatList
data={this.state.logbook}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View key ={item.id} style={styles.view1}>
<Image style={{height:50, width:50, marginVertical:20}} source={listenIcon}/>
<View style={[styles.details, {marginTop:20}]}>
<Text style={styles.textcorrect}>{item.correct} of {item.correct + item.wrong} correct answers</Text>
<Text style={styles.texttimer}>Completed in {item.timer}</Text>
</View>
<View style={{flexDirection: 'column',width:Dimensions.get('window').width * 0.22, marginVertical:Dimensions.get('window').height * 0.033}}>
<Text style={styles.textdate1}>{item.date}</Text>
<Text style={styles.texttime}>{item.time}</Text>
</View>
</View>
)}
/>
</SafeAreaView>
</View>
);
}
}
export default LogBookListen;
......
screens/logbookScale.js
View file @ 87a83bd7
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
......@@ -8,6 +11,7 @@ import {
ScrollView,
BackHandler,
Image,
FlatList,
} from 'react-native';
import styles from '../style/styleLogbook';
import AsyncStorage from '@react-native-async-storage/async-storage';
......@@ -51,33 +55,26 @@ class LogBookScale extends React.PureComponent {
render() {
return (
<View style={[styles.container, {backgroundColor:'#F7F7F7'}]}>
<SafeAreaView>
<ScrollView
style={styles.scroll}>
{this.state.logbook && this.state.logbook.map((item, id) => (
<View
key ={id}
style={styles.view1}>
<View style={styles.icon}>
<Image style={{height:50, width:50, marginVertical:20}} source={pianoIcon}/>
</View>
<View style={[styles.details, {marginTop:20}]}>
<View style={[styles.container, {backgroundColor:'#F7F7F7'}]}>
<SafeAreaView>
<FlatList
data={this.state.logbook}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View key ={item.id} style={styles.view1}>
<Image style={{height:50, width:50, marginVertical:20}} source={pianoIcon}/>
<View style={[styles.details, {marginTop:20}]}>
<Text style={styles.textcorrect}>{item.correct} of {item.correct + item.wrong} correct answers</Text>
<Text style={styles.texttimer}>Completed in {item.timer}</Text>
</View>
<View style={[styles.datedays, {marginTop:20}]}>
<View>
<Text style={styles.textdate1}>{item.date}</Text>
</View>
<View>
<Text style={styles.texttime}>{item.time}</Text>
</View>
</View>
</View>
)).reverse()}
</ScrollView>
</SafeAreaView>
</View>
<View style={styles.datedays}>
<Text style={styles.textdate1}>{item.date}</Text>
<Text style={styles.texttime}>{item.time}</Text>
</View>
</View>
)}
/>
</SafeAreaView>
</View>
);
}
......
screens/metronome.js
View file @ 87a83bd7
......@@ -136,8 +136,8 @@ class MetronomeSkill extends React.Component {
count: 0,
bpm: 100,
beatsPerMeasure: 3,
soundNumber: 0,
showImg: true,
soundNumber: 0,
showImg: true,
showSet : false,
showList: false,
showNotes: false,
......
screens/quiz.js
View file @ 87a83bd7
......@@ -124,7 +124,7 @@ class Quiz extends React.Component {
}
});
});
this.setState({click: false});
let list = keywordsList;
let index = -1;
if ((index = keywordsList.indexOf(keyword.name)) !== -1) {
......@@ -1050,7 +1050,7 @@ class Quiz extends React.Component {
</View>
</View>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.45}}>
{NOTESWHITE.map((item, id) => (
<TouchableHighlight style={keywordsList.find((element) => element === item.name) ? styles.whiteNotesButtonPress : styles.whiteNotesButton }
onPress={() => this.toggleKeyword(item)}
......
screens/settingListen.js
View file @ 87a83bd7
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
ImageBackground,
Text,
View,
Image,
ScrollView,
BackHandler,
Pressable,
......@@ -15,11 +15,11 @@ import {
} from 'react-native';
import styles from '../style/styleSettings';
import Orientation from 'react-native-orientation';
import Notes from './data';
//import Notes from './data';
import * as RNFS from 'react-native-fs';
import NumericInput from 'react-native-numeric-input';
import AsyncStorage from '@react-native-async-storage/async-storage';
import notesData from './dataNotes';
//import notesData from './dataNotes';
const octave = [
'Octave 1','Octave 2','Octave 3','Octave 4','Octave 5','Octave 6','Octave 7',
......@@ -151,13 +151,14 @@ export default class SettingsListen extends React.Component {
//Orientation.lockToPortrait();
};
render() {
return (
<View style={styles.container}>
<SafeAreaView>
<View style={styles.view1}>
<View>
<Text style={styles.textques}>No. of Questions : </Text>
<View>
<Text style={styles.textquesL}>No. of Questions : </Text>
</View>
<View style={{marginHorizontal: Dimensions.get('window').width * 0.15}}>
<NumericInput
......@@ -180,13 +181,13 @@ export default class SettingsListen extends React.Component {
<View>
<Text style={styles.textques2}>Major Lists</Text>
</View>
<View>
<Text style={styles.textques3}> {this.state.listN.length}/7 octave are selected</Text>
<View style={{flexDirection: 'row', marginLeft: Dimensions.get('window').width * 0.27, marginTop:'4%'}}>
<Text style={styles.textques4}>{this.state.listN.length} </Text>
<Text style={styles.textques3}>/ 7 octave are selected</Text>
</View>
</View>
<ScrollView style={styles.scroll}>
<View
style={styles.view2}>
<View
style={styles.view3}>
{octave.map((item, id) => (
<View key={id}>
<Pressable
......@@ -204,9 +205,8 @@ export default class SettingsListen extends React.Component {
</View>
))}
</View>
</ScrollView>
</SafeAreaView>
</View>
);
}
}
\ No newline at end of file
}
screens/settingScale.js
View file @ 87a83bd7
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
......@@ -173,8 +175,9 @@ export default class SettingsScale extends React.Component {
<View>
<Text style={styles.textques2}>Major Lists</Text>
</View>
<View>
<Text style={styles.textques3}>{this.state.listN.length}/28 major are selected</Text>
<View style={{flexDirection: 'row', marginLeft: Dimensions.get('window').width * 0.25, marginTop:'3.5%'}}>
<Text style={styles.textques4}>{this.state.listN.length} </Text>
<Text style={styles.textques3}>/ 28 major are selected</Text>
</View>
</View>
<ScrollView style={styles.scroll}>
......
style/styleListen.js
View file @ 87a83bd7
......@@ -418,7 +418,7 @@ playIconP: {
viewStopWatch:{
alignItems:'center',
width:height * 0.25,
marginHorizontal:height * 0.064,
marginLeft:height * 0.074,
marginTop:'3.5%',
},
//stopwatch
......@@ -456,19 +456,19 @@ screen: {
},
screenA: {
width: height,
height:width * 0.4,
height:width * 0.42,
backgroundColor: '#F7CAC9',
flexDirection: 'row',
},
screenB: {
width: height,
height:width * 0.4,
height:width * 0.42,
backgroundColor: '#92A8D1',
flexDirection: 'row',
},
screenC: {
width:height,
height:width * 0.4,
height:width * 0.42,
backgroundColor: '#88B04B',
flexDirection: 'row',
},
......@@ -487,7 +487,7 @@ textStyle:{
fontFamily: 'Gilroy-Light',
textAlign: 'left',
lineHeight:14,
marginTop: height * 0.13,
marginTop: height * 0.15,
},
textStyleB:{
color:'#FFFBF0',
......@@ -517,7 +517,7 @@ buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '5%',
width: '6%',
position: 'absolute',
},
SbuttonB1: {
......@@ -525,7 +525,7 @@ SbuttonB1: {
backgroundColor: '#FCE1FF',
height: '55%',
marginLeft: height * 0.048,
width: '5%',
width: '6%',
position: 'absolute',
},
......@@ -533,7 +533,7 @@ viewPages: {
backgroundColor:'#3B3A39',
flexDirection:'row',
width:height,
height:width * 0.12,
height:width * 0.1,
},
textPages:{
color:'#FFFFFF',
......@@ -544,16 +544,13 @@ textPages:{
fontSize:16,
},
leftIcon:{
height:width * 0.03,
width:height * 0.03,
paddingHorizontal: height * 0.045,
paddingVertical: width * 0.052,
height:'10%',
width:'10%',
},
rightIcon:{
height:width * 0.03,
width:height * 0.03,
paddingHorizontal: height * 0.055,
paddingVertical: width * 0.052,
height:'10%',
width:'10%',
},
......
style/styleLogbook.js
View file @ 87a83bd7
/* eslint-disable prettier/prettier */
import {Dimensions,StyleSheet} from 'react-native';
//import config from './config';
const width = Dimensions.get('window').width;
export default StyleSheet.create({
container: {
flex: 1,
......@@ -20,30 +20,25 @@ export default StyleSheet.create({
borderWidth: 2,
borderColor: 'white',
},
imagebackground: {
width: '100%',
height: '100%',
},
scroll: {
marginTop: 0,
},
view1: {
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15,
paddingBottom:10,
paddingHorizontal: width * 0.02,
paddingBottom:5,
paddingTop:5,
marginTop:10,
//backgroundColor: 'gray',
backgroundColor: '#FFFFFF',
width: Dimensions.get('window').width * 0.92,
width: Dimensions.get('window').width * 0.93,
borderRadius:8,
},
icon: {
alignItems: 'center',
},
datedays: {
alignItems: 'center',
marginLeft:12,
flexDirection: 'column',
width:Dimensions.get('window').width * 0.22,
marginVertical:Dimensions.get('window').height * 0.033,
},
border: {
borderWidth:1,
......@@ -51,13 +46,14 @@ export default StyleSheet.create({
},
details: {
flexDirection: 'column',
marginLeft:5,
marginLeft: width * 0.015,
marginRight: width * 0.015,
marginTop:10,
},
textdate1 : {
color:'#3B3A39',
fontFamily: 'Gilroy-Light',
fontSize: 14,
fontSize: 13,
textAlign: 'right',
lineHeight: 16,
},
......@@ -76,21 +72,21 @@ export default StyleSheet.create({
textcorrect: {
color:'#14A76C',
fontFamily: 'Gilroy-Bold',
fontSize: 16,
fontSize: 15,
textAlign: 'left',
lineHeight: 20,
},
texttimer: {
color:'#3B3A39',
fontFamily: 'Gilroy-Bold',
fontSize: 14,
fontSize: 13,
lineHeight: 18,
textAlign: 'left',
},
texttime: {
color:'#3B3A39',
fontFamily: 'Gilroy-Light',
fontSize: 14,
fontSize: 13,
lineHeight: 16,
textAlign: 'right',
},
......
style/styleQuiz.js
View file @ 87a83bd7
......@@ -16,7 +16,7 @@ textTitle: {
fontSize: 20,
lineHeight: 25,
marginLeft: height * 0.36,
marginTop:width * 0.04,
marginTop:width * 0.03,
},
closeIcon: {
height: 50,
......@@ -27,9 +27,9 @@ closeIcon: {
viewSubmitButton:{
flexDirection: 'row',
width:height * 0.2,
marginBottom:width * 0.05,
height:width * 0.15,
marginLeft:height * 0.08,
marginBottom:width * 0.07,
height:width * 0.132,
marginLeft:height * 0.17,
},
// clickSubmitButton () if true
buttonSubmitButtonT:{
......@@ -379,7 +379,7 @@ view1:{
backgroundColor:'#FFFBF0',
flexDirection: 'row',
width:height,
height:width * 0.4,
height:width * 0.45,
borderTopLeftRadius:8,
borderTopRightRadius:8,
},
......
style/styleSettings.js
View file @ 87a83bd7
......@@ -78,6 +78,13 @@ export default StyleSheet.create({
marginHorizontal: config.deviceWidth * 0.292,
marginVertical: config.deviceHeight * 0.02,
},
textquesL: {
fontSize: 16,
fontFamily: 'Gilroy-Bold',
lineHeight: 20,
marginHorizontal: config.deviceWidth * 0.292,
marginVertical: config.deviceHeight * 0.03,
},
textques2: {
fontSize: 16,
......@@ -91,9 +98,16 @@ export default StyleSheet.create({
fontSize: 14,
fontFamily: 'Gilroy',
lineHeight: 20,
marginHorizontal: config.deviceWidth * 0.28,
marginVertical: config.deviceHeight * 0.02,
marginLeft:'0.3%',
},
textques4: {
fontSize: 14,
fontFamily: 'Gilroy',
lineHeight: 20,
color:'#3D9090',
},
scroll: {
marginTop: '4%',
backgroundColor: '#F7F7F7',
......@@ -102,16 +116,28 @@ export default StyleSheet.create({
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginTop: config.deviceHeight * 0.03,
marginTop: config.deviceHeight * 0.05,
marginLeft: config.deviceWidth * 0.027,
marginRight: config.deviceWidth * 0.027,
marginBottom: config.deviceHeight * 0.1,
},
view3: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginTop: '7%',
backgroundColor: '#F7F7F7',
marginLeft: config.deviceWidth * 0.027,
marginRight: config.deviceWidth * 0.027,
marginBottom: config.deviceHeight * 0.1,
},
textname: {
textAlign: 'center',
fontFamily: 'Gilroy-Bold',
fontSize:16,
lineHeight:20,
marginTop:'3%',
},
textnameOct: {
textAlign: 'center',
......@@ -122,7 +148,7 @@ textnameOct: {
paddingVertical: config.deviceHeight * 0.02,
},
image: {
width: 115,
height: 115,
width: config.deviceWidth * 0.275,
height: config.deviceHeight * 0.13,
},
});
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