Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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

File tree

1 file changed

+45
-5
lines changed

1 file changed

+45
-5
lines changed

‎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)

AltStyle によって変換されたページ (->オリジナル) /