EDIT refactor/ui add font

wipcamp · Apr 4, 2018 · cbbe34c · cbbe34c
1 parent 0a82da6
commit cbbe34c
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 18 deletions.
diff --git a/App.js b/App.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
+import { View, Text } from 'react-native'
 import { createStore, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
 import { Provider } from 'react-redux'
-import { Notifications } from 'expo'
+import { Notifications, Font } from 'expo'
 
 import MainNavigator from './utils/MainNavigator'
 import Reducers from './utils/Reducers'
@@ -15,18 +16,43 @@ const store = createStore(
 store.dispatch(SET_INIT())
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loadFont: false
+    }
+  }
+
   componentWillMount() {
     this._notificationSubscription = Notifications.addListener(this._handleNotification)
   }
 
+  async componentDidMount() {
+    await Font.loadAsync({
+      'Kanit': require('./src/fonts/Kanit-Regular.ttf'),
+    })
+
+    this.setState({ loadFont: true })
+  }
+
   _handleNotification = (notification) => {
     console.log('notification : ', notification)
   }
 
   render() {
     return (
       <Provider store={store}>
-        <MainNavigator />
+        { this.state.loadFont
+          ? <MainNavigator />
+          : <View
+              style={{
+                flex: 1,
+                alignItems: 'center'
+              }}
+            >
+              <Text>loading font</Text>
+            </View>
+        }
       </Provider>
     )
   }

diff --git a/components/DetailDescriptionCompoent.js b/components/DetailDescriptionCompoent.js
@@ -17,7 +17,14 @@ class DetailDescription extends Component {
                     ColorStyles.borderBotBlack04
                 ]}
             >
-                <Text style={TextStyles.size18}>รายละเอียด :</Text>
+                <Text
+                    style={[
+                        TextStyles.kanit,
+                        TextStyles.size18
+                    ]}
+                >
+                    รายละเอียด :
+                </Text>
                 {this.props.children}
             </View>
         )

diff --git a/components/DetailTopicComponent.js b/components/DetailTopicComponent.js
@@ -18,6 +18,7 @@ class DetailTopic extends Component {
             >
                 <Text
                     style={[
+                        TextStyles.kanit,
                         TextStyles.size18,
                         TextStyles.bold
                     ]}

diff --git a/components/EventCardComponent.js b/components/EventCardComponent.js
@@ -29,12 +29,16 @@ class EventCard extends Component {
                     ]}
                 >
                     <Text
-                        style={TextStyles.size19}
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size19
+                        ]}
                     >
                         { this.__renderTime() }
                     </Text>
                     <Text
                         style={[
+                            TextStyles.kanit,
                             TextStyles.size10,
                             ColorStyles.textGray
                         ]}
@@ -77,6 +81,7 @@ class EventCard extends Component {
                 >
                     <Text
                         style={[
+                            TextStyles.kanit,
                             TextStyles.size16,
                             TextStyles.bold
                         ]}
@@ -87,6 +92,7 @@ class EventCard extends Component {
                     </Text>
                     <Text
                         style={[
+                            TextStyles.kanit,
                             TextStyles.size14,
                             ColorStyles.textGray
                         ]}

diff --git a/components/MenuIconComponent.js b/components/MenuIconComponent.js
@@ -71,20 +71,23 @@ class MenuIcon extends Component {
     }
 
     __renderTextStyle() {
-        let styles = []
+        let styles = [
+            TextStyles.kanit
+        ]
+        let styles2 = []
         if (this.props.two) {
-            styles = [
+            styles2 = [
                 LayoutStyles.right95,
                 TextStyles.size25
             ]
         }
         else {
-            styles = [
+            styles2 = [
                 LayoutStyles.padT5,
                 TextStyles.size16
             ]
         }
-        return styles
+        return [...styles, ...styles2]
     }
 }
 

diff --git a/components/NotificationCardComponent.js b/components/NotificationCardComponent.js
@@ -99,14 +99,18 @@ class NotificationCard extends Component {
                     ]}
                 >
                     <Text
-                        style={TextStyles.size18}
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size18
+                        ]}
                         ellipsizeMode='tail'
                         numberOfLines={1}
                     >
                         {this.props.data.title}
                     </Text>
                     <Text
                         style={[
+                            TextStyles.kanit,
                             TextStyles.size16,
                             ColorStyles.textGray
                         ]}

diff --git a/components/ProblemCardComponent.js b/components/ProblemCardComponent.js
@@ -83,14 +83,18 @@ class ProblemCard extends Component {
                     ]}
                 >
                     <Text
-                        style={TextStyles.size18}
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size18
+                        ]}
                         ellipsizeMode='tail'
                         numberOfLines={1}
                     >
                         {this.props.data.topic}
                     </Text>
                     <Text
                         style={[
+                            TextStyles.kanit,
                             TextStyles.size16,
                             ColorStyles.textGray
                         ]}

diff --git a/components/TopicInputComponent.js b/components/TopicInputComponent.js
@@ -4,6 +4,7 @@ import { TextField } from 'react-native-material-textfield'
 
 import LayoutStyles from '../styles/LayoutStyle'
 import ColorStyles from '../styles/ColorStyle'
+import TextStyles from '../styles/TextStyles'
 
 class TopicInput extends Component {
     render() {

diff --git a/pages/AnnouncePage.js b/pages/AnnouncePage.js
@@ -53,10 +53,24 @@ class AnnouncePage extends Component {
             <View>
                 <DetailTopic topic={`เรื่อง ${this.state.data.topic}`} />
                 <DetailData>
-                    <Text style={TextStyles.size16}>ถึง : {this.state.to}</Text>
+                    <Text
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size16
+                        ]}
+                    >
+                        ถึง : {this.state.to}
+                    </Text>
                 </DetailData>
                 <DetailDescription>
-                    <Text style={TextStyles.size16}>{this.state.data.description}</Text>
+                    <Text
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size16
+                        ]}
+                    >
+                        {this.state.data.description}
+                    </Text>
                 </DetailDescription>
             </View>
         )

diff --git a/pages/InternetNotFoundPage.js b/pages/InternetNotFoundPage.js
@@ -45,6 +45,7 @@ class InternetNotFound extends Component {
                 <Text
                     style={[
                         LayoutStyles.padTB10,
+                        TextStyles.kanit,
                         TextStyles.size24,
                         TextStyles.center,
                         ColorStyles.textWhite
@@ -63,6 +64,7 @@ class InternetNotFound extends Component {
                 >
                     <Text
                         style={[
+                            TextStyles.kanit,
                             TextStyles.size18,
                             ColorStyles.textOrange
                         ]}

diff --git a/pages/LoginPage.js b/pages/LoginPage.js
@@ -15,6 +15,7 @@ import { registerPushNotiAsync } from '../utils/Notification'
 import LayoutStyles from '../styles/LayoutStyle'
 import ColorStyles from '../styles/ColorStyle'
 import ImageStyles from '../styles/ImageStyle'
+import TextStyles from '../styles/TextStyles'
 import ComponentStyles from '../styles/ComponentStyle'
 
 import WipLogo from '../src/images/Logo_WIPCamp.png'
@@ -50,7 +51,8 @@ class Login extends Component {
                     <Text
                         style={[
                             LayoutStyles.maTop5,
-                            ColorStyles.textWhite
+                            ColorStyles.textWhite,
+                            TextStyles.kanit
                         ]}
                     >
                         Facebook Login

diff --git a/pages/ProfilePage.js b/pages/ProfilePage.js
@@ -86,15 +86,25 @@ class Profile extends Component {
                     ]}
                 >
                     <DetailData>
-                        <Text style={TextStyles.size16}>
+                        <Text
+                            style={[
+                                TextStyles.kanit,
+                                TextStyles.size16
+                            ]}
+                        >
                             ชื่อ-สกุล : { this.state.user
                                 ? `${this.state.user.first_name} ${this.state.user.last_name}`
                                 : null
                             }
                         </Text>
                     </DetailData>
                     <DetailData>
-                        <Text style={TextStyles.size16}>
+                        <Text
+                            style={[
+                                TextStyles.kanit,
+                                TextStyles.size16
+                            ]}
+                        >
                             ชื่อเล่น : { this.state.user
                                 ? this.state.user.nickname
                                 : null
@@ -131,6 +141,7 @@ class Profile extends Component {
                         <Text
                             style={[
                                 LayoutStyles.padL15,
+                                TextStyles.kanit,
                                 TextStyles.size18,
                                 ColorStyles.textRed
                             ]}
@@ -153,6 +164,7 @@ class Profile extends Component {
                     <Text
                         style={[
                             LayoutStyles.padL10,
+                            TextStyles.kanit,
                             TextStyles.size16
                         ]}
                         key={i}

diff --git a/pages/TimetableDetailPage.js b/pages/TimetableDetailPage.js
@@ -61,7 +61,14 @@ class TimetableDetail extends Component {
             <View>
                 <DetailTopic topic={`กิจกรรม ${this.state.data.event}`} />
                 <DetailData>
-                    <Text style={TextStyles.size16}>ถึง : {this.state.role}</Text>
+                    <Text
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size16
+                        ]}
+                    >
+                        ถึง : {this.state.role}
+                    </Text>
                 </DetailData>
                 <DetailData>
                     <Icon
@@ -71,6 +78,7 @@ class TimetableDetail extends Component {
                     <Text
                         style={[
                             LayoutStyles.padL10,
+                            TextStyles.kanit,
                             TextStyles.size16
                         ]}
                     >
@@ -107,6 +115,7 @@ class TimetableDetail extends Component {
                 <Text
                     style={[
                         LayoutStyles.padL10,
+                        TextStyles.kanit,
                         TextStyles.size16
                     ]}
                 >
@@ -144,6 +153,7 @@ class TimetableDetail extends Component {
                             <Text
                                 style={[
                                     LayoutStyles.padL10,
+                                    TextStyles.kanit,
                                     TextStyles.size16
                                 ]}
                             >

diff --git a/pages/TimetablePage.js b/pages/TimetablePage.js
@@ -74,6 +74,7 @@ class Timetable extends Component {
                         LayoutStyles.padTB10,
                         ColorStyles.bgWhite,
                         ColorStyles.borderBotBlack04,
+                        TextStyles.kanit,
                         TextStyles.size18,
                         TextStyles.center
                     ]}

diff --git a/pages/ViewAProblemPage.js b/pages/ViewAProblemPage.js
@@ -92,10 +92,24 @@ class ViewAProblem extends Component {
             <ScrollView>
                 <DetailTopic topic={`ปัญหา : ${this.state.data.topic}`} />
                 <DetailData>
-                    <Text style={TextStyles.size16}>สำคัญ : {this.__renderPriority()}</Text>
+                    <Text
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size16
+                        ]}
+                    >
+                        สำคัญ : {this.__renderPriority()}
+                    </Text>
                 </DetailData>
                 <DetailData>
-                    <Text style={TextStyles.size16}>ประเภท : {this.__renderCategory()}</Text>
+                    <Text
+                        style={[
+                            TextStyles.kanit,
+                            TextStyles.size16
+                        ]}
+                    >
+                        ประเภท : {this.__renderCategory()}
+                    </Text>
                 </DetailData>
                 <DetailDescription>
                     <Text style={TextStyles.size16}>{this.state.data.description}</Text>

diff --git a/utils/FeatureNavigation.js b/utils/FeatureNavigation.js
@@ -98,6 +98,9 @@ const FeatureNavigation = TabNavigator(
             style: {
                 backgroundColor: '#FFF',
                 paddingTop: 5
+            },
+            labelStyle: {
+                fontFamily: 'Kanit'
             }
         }
     }

diff --git a/utils/MainNavigator.js b/utils/MainNavigator.js
@@ -73,6 +73,13 @@ const MainNavigator = StackNavigator(
                 gesturesEnabled: false
             }
         }
+    },
+    {
+        navigationOptions: {
+            headerTitleStyle: {
+                fontFamily: 'Kanit'
+            }
+        }
     }
 )