Skip to content

Commit 6d7f3bc

Browse files
Welcome page - Text and introduction (#19)
* Add welcome text and button * Remove Create button The Create button is a very problematic as it would require changing the navigation root to open a screen on UWP layer from different frame. To simplify the solution the button was replaced by user-firendly text guiding to the navigation panel. * Adjust fonts for introduction text
1 parent f476cbd commit 6d7f3bc

1 file changed

Lines changed: 45 additions & 5 deletions

File tree

src/NotesMainPanel.js

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import React from 'react';
77
import {
88
Alert,
99
AppRegistry,
10+
Button,
1011
Dimensions,
1112
FlatList,
1213
NativeModules,
1314
StyleSheet,
15+
Text,
1416
View,
1517
} from 'react-native';
1618
import NoteWidget from './Widgets/NoteWidget';
@@ -63,12 +65,33 @@ class NotesMainPanel extends React.Component {
6365
return <NoteWidget width={noteWidgetWidth} ID={notes.item.key} title={notes.item.title} shortMessage={notes.item.shortMessage}/>
6466
};
6567

66-
render() {
68+
69+
renderWelcomePage = () => {
70+
return(
71+
<View style={styles.welcomePage}>
72+
<Text style={styles.logoText}>ReactNativeNotes</Text>
73+
<Text style={styles.introductionText}>Create your first note by clicking</Text>
74+
<Text style={styles.plusIcon}>+</Text>
75+
<Text style={styles.introductionText}>on the navigation panel</Text>
76+
</View>
77+
)
78+
};
79+
80+
renderNotesPage = () => {
6781
return(
6882
<View style={styles.mainContainer}>
6983
<FlatList key={this.state.columns} numColumns={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
7084
</View>
71-
);
85+
)
86+
}
87+
88+
render() {
89+
if(this.state.notes.length > 0){
90+
return this.renderNotesPage();
91+
}
92+
else {
93+
return this.renderWelcomePage();
94+
}
7295
}
7396
};
7497

@@ -81,9 +104,26 @@ const styles = StyleSheet.create({
81104
backgroundColor: "transparent",
82105
justifyContent: "space-around",
83106
},
84-
welcomeText: {
85-
fontSize: 25,
86-
fontFamily: "Papyrus",
107+
welcomePage: {
108+
flex: 1,
109+
justifyContent: "center",
110+
alignItems: "center"
111+
},
112+
logoText: {
113+
fontSize: 35,
114+
margin: 25,
115+
color: "white"
116+
},
117+
plusIcon: {
118+
fontSize: 30,
119+
fontWeight: "bold",
120+
color: "white"
121+
},
122+
introductionText: {
123+
fontSize: 18,
124+
margin: 0,
125+
fontFamily: "Calibri",
126+
color: "white"
87127
}
88128
});
89129

0 commit comments

Comments
 (0)