Theming - settings and view update (#29)

* Add Theme-related strings to localization resources

* Implement theme in database storage

* Add Theme selection to settings panel

* Implement theming as ThemedView with source of truth

* Apply theming to background and elements of app

* Correct colors of app title buttons

Author: BartoszKlonowski

src/CreateNotePanel.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import Colors from './Resources/Colors';
 import * as dict from './Resources/Dictionary';
+import * as theming from './Resources/Theming/ThemeHOC';
 
 interface Props {}
 
@@ -72,7 +73,7 @@ class CreateNotePanel extends React.Component<Props, State> {
 
   render() {
     return (
-      <View style={styles.mainPanel}>
+      <theming.ThemedView style={styles.mainPanel}>
         <TextInput
           style={styles.titleBox}
           onChangeText={this.titleOnChange}
@@ -102,7 +103,7 @@ class CreateNotePanel extends React.Component<Props, State> {
             onPress={this.createButtonPressed}
           />
         </View>
-      </View>
+      </theming.ThemedView>
     );
   }
 }
@@ -112,7 +113,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
-    margin: 30,
   },
   titleBox: {
     borderLeftWidth: 0,
@@ -122,6 +122,7 @@ const styles = StyleSheet.create({
     width: '90%',
     borderColor: Colors.noteTextPanelBorder,
     fontWeight: 'bold',
+    marginTop: 30,
   },
   noteMessageBox: {
     borderWidth: 0.2,

src/NoteWidgetDetailsPanel.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import Colors from './Resources/Colors';
 import * as dictionary from './Resources/Dictionary';
+import * as theming from './Resources/Theming/ThemeHOC';
 
 interface Props {}
 
@@ -134,7 +135,7 @@ class NoteWidgetDetailsPanel extends React.Component<Props, State> {
 
   render() {
     return (
-      <View style={styles.mainPanel}>
+      <theming.ThemedView style={styles.mainPanel}>
         <TextInput
           style={styles.titleBox}
           onChangeText={this.titleOnChange}
@@ -148,7 +149,7 @@ class NoteWidgetDetailsPanel extends React.Component<Props, State> {
         />
 
         <TextInput
-          style={styles.noteMessageBox}
+          style={theming.applyTheming(styles.noteMessageBox)}
           multiline={true}
           onChangeText={this.messageOnChange}
           value={this.state.message}
@@ -178,7 +179,7 @@ class NoteWidgetDetailsPanel extends React.Component<Props, State> {
             onPress={this.deleteButtonPressed}
           />
         </View>
-      </View>
+      </theming.ThemedView>
     );
   }
 }
@@ -188,14 +189,14 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
-    margin: 30,
     backgroundColor: Colors.transparent,
   },
   titleBox: {
     borderLeftWidth: 0,
     borderRightWidth: 0,
     borderBottomWidth: 1,
     borderTopWidth: 0,
+    marginTop: 40,
     width: '90%',
     borderColor: Colors.noteTextPanelBorder,
     fontWeight: 'bold',

src/NotesMainPanel.tsx

@@ -11,11 +11,11 @@ import {
   NativeModules,
   StyleSheet,
   Text,
-  View,
 } from 'react-native';
 import NoteWidget from './Widgets/NoteWidget';
 import Colors from './Resources/Colors';
 import Dictionary from './Resources/Dictionary';
+import * as theming from './Resources/Theming/ThemeHOC';
 
 const noteWidgetWidth = 300;
 
@@ -74,7 +74,7 @@ class NotesMainPanel extends React.Component<Props, State> {
 
   renderWelcomePage = () => {
     return (
-      <View style={styles.welcomePage}>
+      <theming.ThemedView style={styles.welcomePage}>
         <Text style={styles.logoText}>ReactNativeNotes</Text>
         <Dictionary
           textLabel={'mainAppScreen.introductionTextUpper'}
@@ -85,13 +85,13 @@ class NotesMainPanel extends React.Component<Props, State> {
           textLabel={'mainAppScreen.introductionTextLower'}
           style={styles.introductionText}
         />
-      </View>
+      </theming.ThemedView>
     );
   };
 
   renderNotesPage = () => {
     return (
-      <View style={styles.mainContainer}>
+      <theming.ThemedView style={styles.mainContainer}>
         <FlatList<INote>
           key={this.state.columns}
           numColumns={this.state.columns}
@@ -105,7 +105,7 @@ class NotesMainPanel extends React.Component<Props, State> {
             />
           )}
         />
-      </View>
+      </theming.ThemedView>
     );
   };
 

src/Resources/Localization/en.json

@@ -23,5 +23,8 @@
   "alert.ok": "OK",
   "alert.noteDeleteConfirmation": "Are you sure?",
   "alert.noteDeletionConfirmExplanation": "Deleting the note cannot be reversed...",
-  "alert.delete": "Delete"
+  "alert.delete": "Delete",
+  "theme.default": "Default",
+  "theme.dark": "Dark",
+  "theme.theme": "Theme:"
 }

src/Resources/Localization/pl.json

@@ -23,6 +23,9 @@
   "alert.ok": "OK",
   "alert.noteDeleteConfirmation": "Jesteś pewien?",
   "alert.noteDeletionConfirmExplanation": "Usunięcie notatki jest nieodwracalne...",
-  "alert.delete": "Usuń"
+  "alert.delete": "Usuń",
+  "theme.default": "Domyślny",
+  "theme.dark": "Ciemny",
+  "theme.theme": "Motyw:"
 }
 

src/Resources/Theming/ThemeHOC.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {NativeModules, View} from 'react-native';
+
+interface Props {
+  style: any;
+}
+
+interface State {
+  themeValue: number;
+  style: any;
+}
+
+export function applyTheming(style: any) {
+  let theme = 0;
+  const getTheme = async () => {
+    await NativeModules.Database.getThemeValue()
+      .then((result: number) => {
+        theme = result;
+        return result;
+      })
+      .catch((error: Error) => {
+        console.log(`ERROR: ${error.message}`);
+      });
+  };
+
+  getTheme();
+  switch (theme) {
+    case 0:
+      return {...style, backgroundColor: 'transparent'};
+    case 1:
+      return {...style, backgroundColor: '454859', color: 'white'};
+  }
+}
+
+export class ThemedView extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      themeValue: 0,
+      style: props.style,
+    };
+  }
+
+  requireTheming = (style: any) => {
+    const getTheme = async () => {
+      await NativeModules.Database.getThemeValue()
+        .then((result: number) => {
+          this.setState({themeValue: result});
+          return result;
+        })
+        .catch((error: Error) => {
+          console.log(`ERROR: ${error.message}`);
+        });
+    };
+
+    getTheme();
+    switch (this.state.themeValue) {
+      case 0:
+        return {...style, backgroundColor: 'transparent'};
+      case 1:
+        return {...style, backgroundColor: '#454859'};
+    }
+  };
+
+  render() {
+    return (
+      <View style={this.requireTheming(this.state.style)}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+export default ThemedView;

src/SettingsPanel.tsx

@@ -6,19 +6,22 @@ import React from 'react';
 import {AppRegistry, StyleSheet, View, NativeModules} from 'react-native';
 import {Picker} from 'react-native-windows';
 import Colors from './Resources/Colors';
-import Dictionary from './Resources/Dictionary';
+import * as dictionary from './Resources/Dictionary';
+import * as theming from './Resources/Theming/ThemeHOC';
 
 interface Properties {}
 
 interface State {
   selectedLanguage: number;
+  selectedTheme: number;
 }
 
 class SettingsPanel extends React.Component<Properties, State> {
   constructor(props: Properties) {
     super(props);
     this.state = {
       selectedLanguage: 0,
+      selectedTheme: 0,
     };
   }
 
@@ -27,13 +30,18 @@ class SettingsPanel extends React.Component<Properties, State> {
     this.setState({selectedLanguage: value});
   };
 
+  themeValueChanged = (value: number) => {
+    NativeModules.Database.setThemeValue(value);
+    this.setState({selectedTheme: value});
+  };
+
   render() {
     return (
-      <View style={styles.mainPanel}>
+      <theming.ThemedView style={styles.mainPanel}>
         <View style={styles.languageField}>
-          <Dictionary
+          <dictionary.Dictionary
             style={styles.languageText}
-            textLabel={'settings.languageLabel'}></Dictionary>
+            textLabel={'settings.languageLabel'}></dictionary.Dictionary>
           <Picker
             selectedValue={this.state.selectedLanguage}
             style={styles.languageSelectionBox}
@@ -42,7 +50,25 @@ class SettingsPanel extends React.Component<Properties, State> {
             <Picker.Item label="Polski" value={1} />
           </Picker>
         </View>
-      </View>
+        <View style={styles.themeField}>
+          <dictionary.Dictionary
+            style={styles.languageText}
+            textLabel={'theme.theme'}></dictionary.Dictionary>
+          <Picker
+            selectedValue={this.state.selectedTheme}
+            style={styles.themeSelectionBox}
+            onValueChange={this.themeValueChanged}>
+            <Picker.Item
+              label={dictionary.getTextByKey('theme.default')}
+              value={0}
+            />
+            <Picker.Item
+              label={dictionary.getTextByKey('theme.dark')}
+              value={1}
+            />
+          </Picker>
+        </View>
+      </theming.ThemedView>
     );
   }
 }
@@ -52,7 +78,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
-    margin: 30,
   },
   languageText: {
     fontWeight: 'bold',
@@ -66,10 +91,22 @@ const styles = StyleSheet.create({
     width: '50%',
     alignItems: 'center',
   },
+  themeField: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    margin: 20,
+    width: '50%',
+    alignItems: 'center',
+  },
   languageSelectionBox: {
     height: 30,
     width: 150,
   },
+  themeSelectionBox: {
+    height: 30,
+    width: 150,
+  },
 });
 
 AppRegistry.registerComponent('SettingsPanel', () => SettingsPanel);

src/ToDoListPanel.tsx

@@ -15,6 +15,7 @@ import DateTimePicker from '@react-native-community/datetimepicker';
 import TaskWidget from './Widgets/TaskWidget';
 import Colors from './Resources/Colors';
 import * as dictionary from './Resources/Dictionary';
+import * as theming from './Resources/Theming/ThemeHOC';
 
 interface Props {}
 
@@ -70,7 +71,7 @@ class ToDoListPanel extends React.Component<Props, State> {
 
   render() {
     return (
-      <View style={styles.mainPanel}>
+      <theming.ThemedView style={styles.mainPanel}>
         <View style={styles.flatListPanel}>
           <FlatList
             numColumns={1}
@@ -105,7 +106,7 @@ class ToDoListPanel extends React.Component<Props, State> {
             />
           </View>
         </View>
-      </View>
+      </theming.ThemedView>
     );
   }
 }