Merge pull request #147 from BoostIO/new-style

New style

Author: kazup01

android/app/build.gradle

@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-svg')
     compile project(':react-native-device-info')
     compile project(':react-native-code-push')
     compile project(':react-native-fetch-blob')

android/app/src/main/java/io/boostnote/MainApplication.java

@@ -4,11 +4,13 @@
 
 import com.RNFetchBlob.RNFetchBlobPackage;
 import com.facebook.react.ReactApplication;
+import com.horcrux.svg.SvgPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.learnium.RNDeviceInfo.RNDeviceInfo;
 import com.microsoft.codepush.react.CodePush;
+import com.horcrux.svg.SvgPackage;
 
 import java.util.Arrays;
 import java.util.List;
@@ -33,7 +35,8 @@ protected List<ReactPackage> getPackages() {
           new MyMainReactPackage(),
           new RNDeviceInfo(),
           new RNFetchBlobPackage(),
-          new CodePush("byLfL38UaCCfKxo_2kTLHuR190e81a2d16b3-a6fd-494f-8deb-050bb34a68be", MainApplication.this, BuildConfig.DEBUG)
+          new CodePush("byLfL38UaCCfKxo_2kTLHuR190e81a2d16b3-a6fd-494f-8deb-050bb34a68be", MainApplication.this, BuildConfig.DEBUG),
+          new SvgPackage()
       );
     }
   };

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'boostnotemobile'
+include ':react-native-svg'
+project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-device-info'
 project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
 include ':react-native-fetch-blob'

app/App.js

@@ -37,24 +37,24 @@ const DEFAULT_FOLDER = "DEFAULT_FOLDER"
 
 const styles = {
     iosHeader: {
-        backgroundColor: '#239F85',
+        backgroundColor: '#f9f9f9',
     },
     androidHeader: {
-        backgroundColor: '#29BB9C',
+        backgroundColor: '#f9f9f9',
         height: 70
     },
     iOsAppName: {
-        color: '#ffffff',
-        fontSize: 21,
-        fontWeight: '300',
+        color: '#1ec38b',
+        fontSize: 18,
+        fontWeight: '600',
     },
     androidAppName: {
-        color: '#ffffff',
-        fontSize: 21,
-        fontWeight: '300',
+        color: '#1ec38b',
+        fontSize: 18,
+        fontWeight: '600',
     },
     headerMenuButton: {
-        color: '#ffffff',
+        color: '#1ec38b',
         fontSize: 24,
     },
     headerRightMenuButton: {
@@ -80,7 +80,7 @@ const styles = {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: '#D15419',
+        backgroundColor: '#1ec38b',
         width: 60,
         height: 60,
         borderRadius: 50,
@@ -337,7 +337,7 @@ export default class App extends Component {
                         <Left>
                             <View>
                                 <Button transparent onPress={this.openDrawer}>
-                                    <Icon name='md-list' style={styles.headerMenuButton}/>
+                                    <Icon name='md-reorder' style={styles.headerMenuButton}/>
                                 </Button>
                             </View>
                         </Left>
@@ -347,7 +347,7 @@ export default class App extends Component {
                                 <Title style={Platform.OS === 'android' ? styles.androidAppName : styles.iOsAppName}>
                                     {
                                         mode === 0
-                                        ? 'NOTES'
+                                        ? 'All Notes'
                                         : 'Dropbox'
                                     }
                                 </Title>
@@ -380,7 +380,7 @@ export default class App extends Component {
                       onPress={() => this.onPressActionButton()}
                       style={styles.newPostButtonWrap}>
                         <View style={styles.newPostButton}>
-                            <Icon name='md-create' style={{color: "#fff"}}/>
+                            <Icon name='md-add' style={{color: "#fff"}}/>
                         </View>
                     </Button>
                     <NoteModal setIsOpen={this.setNoteModalIsOpen}

app/resource/noteInputSupportIcons/icon-bold.svg

@@ -34,18 +34,34 @@ import NoteInputSupport from './inputSupport/NoteInputSupport'
 const styles = {
    switchButton: {
        backgroundColor: 'transparent',
-       borderColor: '#EFF1F5',
+       borderColor: '#1ec38b',
        borderWidth: 1
    },
    switchButtonActive: {
        backgroundColor: '#EFF1F5',
-       borderColor: '#EFF1F5',
+       borderColor: '#1ec38b',
        borderWidth: 1
    },
+   switchEditButton: {
+     position:'absolute',
+     width: 40,
+     right: 20
+   },
+   switchEditText: {
+     color: '#1ec38b',
+     fontSize: 16,
+     lineHeight: 16
+   },
    noteDetailButton: {
-       color: '#EFF1F5',
+       color: '#1ec38b',
        fontSize: 23
    },
+   backHomeText: {
+       color: '#1ec38b',
+       fontSize: 17,
+       lineHeight: 17,
+       paddingLeft: 10
+   }
 }
 
 export default class NoteModal extends React.Component {
@@ -57,7 +73,7 @@ export default class NoteModal extends React.Component {
             fileName: this.props.fileName,
             text: this.props.content,
             height: 0,
-            isLeftSegmentActive: true,
+            isEditting: true,
             visibleHeight: 230,
             endOfSelection: 0,
         }
@@ -73,7 +89,7 @@ export default class NoteModal extends React.Component {
 
         // if user open an another file, set state.
         this.setState({
-            isLeftSegmentActive: true,
+            isEditting: true,
             fileName: props.fileName,
             text: props.content,
         })
@@ -110,7 +126,7 @@ export default class NoteModal extends React.Component {
     }
 
     getNoteComponent() {
-        if (this.state.isLeftSegmentActive) {
+        if (this.state.isEditting) {
             return <View style={{flex: 1}}>
                 <ScrollView keyboardShouldPersistTaps='always'>
                     <TextInput
@@ -184,6 +200,12 @@ export default class NoteModal extends React.Component {
       this.onChangeText(lines.join('\n'))
     }
 
+    handleSwitchEditButtonClick () {
+      this.setState({
+        isEditting: !this.state.isEditting
+      })
+    }
+
     render() {
         return (
             <Modal
@@ -193,33 +215,24 @@ export default class NoteModal extends React.Component {
                 swipeToClose={false}
                 onClosed={() => this.props.setIsOpen('', false)}>
                 <Container>
-                    <Header style={Platform.OS === 'android' ? {height: 47,backgroundColor: '#6C81A6'} : {backgroundColor: '#6C81A6'}} androidStatusBarColor='#239F85'>
+                    <Header style={Platform.OS === 'android' ? {height: 47,backgroundColor: '#f9f9f9'} : {backgroundColor: '#f9f9f9'}} androidStatusBarColor='#239F85'>
                         <Left style={Platform.OS === 'android' ? {top: 0} : null}>
                             <Button transparent onPress={() => this.props.setIsOpen('', false)}>
-                                <Text><Icon name='md-close' style={styles.noteDetailButton}/></Text>
+                                <Text><Icon name='ios-arrow-back' style={styles.noteDetailButton}/></Text>
+                                <Text style={styles.backHomeText}>All Notes</Text>
                             </Button>
                         </Left>
 
-                        <Body style={Platform.OS === 'android' ? {top: 0} : null}>
-                            <Segment style={Platform.OS === 'android' ? {paddingRight: 25, position: 'relative', backgroundColor: 'transparent', borderWidth:1} : {marginLeft: 50, position: 'absolute', top: -22, backgroundColor: 'transparent'}}>
-                                <Button onPress={() => {
-                                    this.setState({isLeftSegmentActive: true})
-                                }} first active={this.state.isLeftSegmentActive}
-                                style={this.state.isLeftSegmentActive ? styles.switchButtonActive : styles.switchButton}>
-                                    <Text><Icon name='create' style={this.state.isLeftSegmentActive ? {color: '#6C81A6'} : {}}/></Text>
-                                </Button>
-                                <Button onPress={() => {
-                                    this.setState({isLeftSegmentActive: false})
-                                }} last active={!this.state.isLeftSegmentActive}
-                                style={this.state.isLeftSegmentActive ? styles.switchButton : styles.switchButtonActive}>
-                                    <Text><Icon name='eye' style={this.state.isLeftSegmentActive ? {color: '#EFF1F5'} : {color: '#6C81A6'}}/></Text>
-                                </Button>
-                            </Segment>
-                        </Body>
-
-                        <Right style={Platform.OS === 'android' ? {top: 0} : {top: 3}}>
+                        <Right style={Platform.OS === 'android' ? {top: 0} : {top: 3, flex: 1, flexDirection: 'row'}}>
                             <View>
                                 <Root>
+                                    <Button transparent
+                                        style={styles.switchEditButton}
+                                        onPress={this.handleSwitchEditButtonClick.bind(this)}>
+                                         <Text style={styles.switchEditText}>
+                                             {this.state.isEditting ? 'Done' : 'Edit'}
+                                         </Text>
+                                    </Button>
                                     <Button transparent onPress={() => ActionSheet.show(
                                         {
                                             options: ["Delete", "Cancel"],