Full redesign of the application & code simplify

.circleci/config.yml

@@ -66,18 +66,3 @@ workflows:
           platform: "x64"
           requires:
             - install
-  build-ARM64:
-    jobs:
-      - install
-      - build-Application-Configuration-Platform:
-          name: build-Application-Release-ARM
-          configuration: "release"
-          platform: "ARM"
-          requires:
-            - install
-      - build-Application-Configuration-Platform:
-          name: build-Application-Debug-ARM
-          configuration: "debug"
-          platform: "ARM"
-          requires:
-            - install

index.js

@@ -5,8 +5,6 @@
 import {AppRegistry} from 'react-native';
 
 import NotesMainPanel from './src/NotesMainPanel';
-import UserAccountPanel from './src/UserAccountPanel';
-import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
 import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
 import CreateNotePanel from './src/CreateNotePanel';
 import ToDoListPanel from './src/ToDoListPanel';

src/CreateNotePanel.js

@@ -11,66 +11,38 @@ import {
   StyleSheet,
   TextInput,
   View,
-  Dimensions,
   Button,
 } from 'react-native';
 
 
-const window = Dimensions.get("window");
-
 
 class CreateNotePanel extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       title: "",
       message: "",
-      windowHeight: window.height
     }
   };
 
-  componentDidMount() {
-    Dimensions.addEventListener("change", this.windowDimensionOnChange);
-  };
-
-  componentWillUnmount() {
-    Dimensions.removeEventListener("change", this.windowDimensionOnChange);
-  };
-
-  windowDimensionOnChange = ({window, screen}) => {
-    this.setState({windowWidth: window.width, windowHeight: window.height});
-  };
-
-  calculateTitleFormWidth = () => {
-    return Dimensions.get("window").width - 100;
-  };
-
-  calculateMessageFormWidth = () => {
-    return Dimensions.get("window").width - 100;
-  };
-
   titleOnChange = (text) => {
     this.setState({title: text});
   };
 
   messageOnChange = (text) => {
     this.setState({message: text});
-  }
-
-  calculateMessagePanelHeight = () => {
-    return Dimensions.get("window").height - styles.titlePanel.height - 100;
   };
 
   cancelButtonPressed = () => {
     if(this.state.title !== "" || this.state.message !== "") {
       Alert.alert("Are you sure?", "It looks like you still have unsaved changes, which are going to be lost.",
       [
         {
-          text: "No!",
+          text: "Cancel",
           style: "cancel"
         },
         {
-          text: "Yes, cancel!",
+          text: "Discard",
           onPress: () => NativeModules.NoteWidgetClickHandler.goToNotesScreen()
         }
       ])
@@ -90,23 +62,23 @@ class CreateNotePanel extends React.Component {
     return (
       <View style={styles.mainPanel}>
 
-          <TextInput style={[styles.titleBox, {width: this.calculateTitleFormWidth()}]}
+          <TextInput style={styles.titleBox}
             onChangeText={this.titleOnChange}
             value={this.state.title}
             autoFocus={true}
             clearButtonMode={"while-editing"}
             placeholder={"Title"}
           />
 
-          <TextInput style={[styles.noteMessageBox, { height: this.calculateMessagePanelHeight(), width: this.calculateMessageFormWidth()}]}
+          <TextInput style={styles.noteMessageBox}
             multiline={true}
             onChangeText={this.messageOnChange}
             value={this.state.message}
             placeholder={"Note content"}
           />
 
         <View style={styles.actionsPanel}>
-          <Button title={"Cancel!"} onPress={this.cancelButtonPressed}/>
+          <Button title={"Discard"} onPress={this.cancelButtonPressed}/>
           <Button title={"Create!"} onPress={this.createButtonPressed}/>
         </View>
 
@@ -127,17 +99,19 @@ const styles = StyleSheet.create({
     height: 60,
   },
   titleBox: {
-    height: 35,
     borderLeftWidth: 0,
     borderRightWidth: 0,
     borderBottomWidth: 1,
     borderTopWidth: 0,
+    width: "90%",
     borderColor: "#D0D0D0",
-    color: "blue"
+    fontWeight: "bold"
   },
   noteMessageBox: {
     borderWidth: 0.2,
     margin: 10,
+    width: "90%",
+    height: "85%",
     borderColor: "#D0D0D0",
     alignContent: "center",
     textAlignVertical: "center",
@@ -146,8 +120,8 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     justifyContent: "space-around",
-    width: 500,
-    height: 40,
+    width: "60%",
+    maxHeight: 35,
   }
 });
 

src/NoteWidgetDetailsPanel.js

@@ -11,13 +11,10 @@ import {
   StyleSheet,
   TextInput,
   View,
-  Dimensions,
   Button,
 } from 'react-native';
 
 
-const window = Dimensions.get("window");
-
 class NoteWidgetDetailsPanel extends React.Component {
   constructor(props) {
     super(props);
@@ -26,7 +23,6 @@ class NoteWidgetDetailsPanel extends React.Component {
       title: "",
       message: "",
       isEditing: false,
-      windowHeight: window.height
     }
   };
 
@@ -38,24 +34,6 @@ class NoteWidgetDetailsPanel extends React.Component {
         this.getNoteMessage();        
       })
       .catch(error => {Alert.alert("ERROR!", `Could not find the opened note\n${error}`)});
-
-    Dimensions.addEventListener("change", this.windowDimensionOnChange);
-  };
-
-  componentWillUnmount() {
-    Dimensions.removeEventListener("change", this.windowDimensionOnChange);
-  };
-
-  windowDimensionOnChange = ({window, screen}) => {
-    this.setState({windowWidth: window.width, windowHeight: window.height});
-  };
-
-  calculateTitleFormWidth = () => {
-    return Dimensions.get("window").width - 100;
-  };
-
-  calculateMessageFormWidth = () => {
-    return Dimensions.get("window").width - 100;
   };
 
   titleOnChange = (text) => {
@@ -64,10 +42,6 @@ class NoteWidgetDetailsPanel extends React.Component {
 
   messageOnChange = (text) => {
     this.setState({message: text});
-  }
-
-  calculateMessagePanelHeight = () => {
-    return Dimensions.get("window").height - styles.titlePanel.height - 100;
   };
 
   getNoteTitle = () => {
@@ -87,11 +61,11 @@ class NoteWidgetDetailsPanel extends React.Component {
       Alert.alert("Are you sure?", "It looks like you still have unsaved changes, which are going to be lost.",
       [
         {
-          text: "No!",
+          text: "Cancel",
           style: "cancel"
         },
         {
-          text: "Yes, cancel!",
+          text: "Discard",
           onPress: () => NativeModules.NoteWidgetClickHandler.goToNotesScreen()
         }
       ])
@@ -114,10 +88,10 @@ class NoteWidgetDetailsPanel extends React.Component {
     Alert.alert("Are you sure?", "Deleting the note cannot be reversed...",
     [
       {
-        text: "No!",
+        text: "Cancel",
         style: "cancel"
       },
-      { text: "Yes, delete!", onPress: () => {
+      { text: "Delete", onPress: () => {
         NativeModules.Database.deleteNote(this.state.id);
         NativeModules.NoteWidgetClickHandler.goToNotesScreen();
       }}
@@ -129,7 +103,7 @@ class NoteWidgetDetailsPanel extends React.Component {
     return (
       <View style={styles.mainPanel}>
 
-        <TextInput style={[styles.titleBox, {width: this.calculateTitleFormWidth()}]}
+        <TextInput style={styles.titleBox}
           onChangeText={this.titleOnChange}
           value={this.state.title}
           autoFocus={true}
@@ -138,7 +112,7 @@ class NoteWidgetDetailsPanel extends React.Component {
           editable={this.state.isEditing}
         />
 
-        <TextInput style={[styles.noteMessageBox, { height: this.calculateMessagePanelHeight(), width: this.calculateMessageFormWidth()}]}
+        <TextInput style={styles.noteMessageBox}
           multiline={true}
           onChangeText={this.messageOnChange}
           value={this.state.message}
@@ -147,7 +121,7 @@ class NoteWidgetDetailsPanel extends React.Component {
         />
 
         <View style={styles.actionsPanel}>
-          <Button title={"Cancel!"} onPress={this.cancelButtonPressed}/>
+          <Button title={"Discard"} onPress={this.cancelButtonPressed}/>
           <Button title={"Edit"} disabled={this.state.isEditing} onPress={this.editButtonPressed}/>
           <Button title={"Save"} disabled={!this.state.isEditing} onPress={this.saveButtonPressed}/>
           <Button title={"Delete"} onPress={this.deleteButtonPressed}/>
@@ -167,21 +141,20 @@ const styles = StyleSheet.create({
     alignItems: "center",
     margin: 30
   },
-  titlePanel: {
-    height: 60,
-  },
   titleBox: {
-    height: 35,
     borderLeftWidth: 0,
     borderRightWidth: 0,
     borderBottomWidth: 1,
     borderTopWidth: 0,
+    width: "90%",
     borderColor: "#D0D0D0",
-    color: "blue"
+    fontWeight: "bold"
   },
   noteMessageBox: {
     borderWidth: 0.2,
     margin: 10,
+    width: "90%",
+    height: "85%",
     borderColor: "#D0D0D0",
     alignContent: "center",
     textAlignVertical: "center",
@@ -190,8 +163,8 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     justifyContent: "space-around",
-    width: 500,
-    height: 40,
+    width: "60%",
+    maxHeight: 35,
   }
 });