From 5fb9d70036b42e74e95a0077aedf89367b1cce06 Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Mon, 15 Mar 2021 09:52:44 +0530 Subject: [PATCH] Use modals for theme and display settings --- src/components/common/NovelCover.js | 33 +++-- src/components/settings/Checkbox.js | 2 +- src/redux/actions/theme.js | 11 +- src/redux/reducers/theme.js | 19 ++- src/screens/More/Settings.js | 184 +++++++++++++++------------- src/services/AsyncStorage.js | 23 ---- 6 files changed, 150 insertions(+), 122 deletions(-) diff --git a/src/components/common/NovelCover.js b/src/components/common/NovelCover.js index d6a53960..24ae449b 100644 --- a/src/components/common/NovelCover.js +++ b/src/components/common/NovelCover.js @@ -2,15 +2,17 @@ import React, { useState } from "react"; import { StyleSheet, View, Text, ImageBackground } from "react-native"; import { LinearGradient } from "expo-linear-gradient"; import { TouchableRipple } from "react-native-paper"; -import { theme } from "../../theme/theme"; import { useSelector } from "react-redux"; +import { color } from "react-native-reanimated"; const NovelCover = ({ item, onPress, libraryStatus }) => { const displayMode = useSelector( (state) => state.settingsReducer.displayMode ); + const theme = useSelector((state) => state.themeReducer.theme); + return ( { ]} progressiveRenderingEnabled={true} > - {(!displayMode || displayMode === 0) && ( + {displayMode === 0 && ( { > {item.novelName} @@ -54,11 +62,19 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { ) : ( - HAHAHAHAH + + Novel Cover Doesn't Exist + )} {displayMode === 1 && ( - + {item.novelName} )} @@ -72,7 +88,7 @@ export default NovelCover; const styles = StyleSheet.create({ logo: { - height: 173, + height: 177, borderRadius: 4, }, titleContainer: { @@ -83,12 +99,9 @@ const styles = StyleSheet.create({ title: { fontFamily: "pt-sans-bold", fontSize: 14, - color: "white", padding: 8, - textShadowColor: "rgba(0, 0, 0, 0.75)", - textShadowOffset: { width: -1, height: 1 }, - textShadowRadius: 10, }, + linearGradient: { borderRadius: 4, }, diff --git a/src/components/settings/Checkbox.js b/src/components/settings/Checkbox.js index 3df68379..ea8ba16d 100644 --- a/src/components/settings/Checkbox.js +++ b/src/components/settings/Checkbox.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { Checkbox } from "react-native-paper"; import { useSelector } from "react-redux"; diff --git a/src/redux/actions/theme.js b/src/redux/actions/theme.js index 47ce440c..240a43ce 100644 --- a/src/redux/actions/theme.js +++ b/src/redux/actions/theme.js @@ -1,8 +1,15 @@ import { SWITCH_THEME } from "./types"; -export const switchTheme = (theme) => (dispatch) => { +/** + * 0 -> Amoled Dark Theme + * 1 -> Light Theme + * 2 -> Dark Theme + * 3 -> Midnight Dusk Theme + */ + +export const switchTheme = (val) => (dispatch) => { dispatch({ type: SWITCH_THEME, - payload: theme, + payload: val, }); }; diff --git a/src/redux/reducers/theme.js b/src/redux/reducers/theme.js index c03574c4..e40620c8 100644 --- a/src/redux/reducers/theme.js +++ b/src/redux/reducers/theme.js @@ -1,7 +1,20 @@ -import { amoledDarkTheme } from "../../theme/theme"; +import { + amoledDarkTheme, + lightTheme, + darkTheme, + midnightDuskTheme, +} from "../../theme/theme"; + +const themes = { + 0: amoledDarkTheme, + 1: lightTheme, + 2: darkTheme, + 3: midnightDuskTheme, +}; const initialState = { - theme: amoledDarkTheme, + themeCode: 0, + theme: themes[0], }; const themeReducer = (state = initialState, action) => { @@ -9,7 +22,7 @@ const themeReducer = (state = initialState, action) => { switch (type) { case "SWITCH_THEME": - return { theme: payload }; + return { ...state, themeCode: payload, theme: themes[payload] }; default: return state; } diff --git a/src/screens/More/Settings.js b/src/screens/More/Settings.js index 118526ac..c0685462 100644 --- a/src/screens/More/Settings.js +++ b/src/screens/More/Settings.js @@ -1,17 +1,11 @@ import React, { useState } from "react"; import { View, ToastAndroid } from "react-native"; import { setStatusBarStyle } from "expo-status-bar"; -import { List } from "react-native-paper"; +import { List, Modal, Provider, Portal } from "react-native-paper"; import { connect } from "react-redux"; import { switchTheme } from "../../redux/actions/theme"; import { setDisplayMode } from "../../redux/actions/settings"; -import { - amoledDarkTheme, - darkTheme, - midnightDuskTheme, - lightTheme, -} from "../../theme/theme"; import { CustomAppbar } from "../../components/common/Appbar"; import { @@ -19,13 +13,6 @@ import { ThemeCheckbox, } from "../../components/settings/Checkbox"; -import { - setAppTheme, - getAppTheme, - // getDisplayMode, - // setDisplayMode, -} from "../../services/asyncStorage"; - import { deleteHistory, deleteNovelsNotInLibrary, @@ -35,25 +22,43 @@ import { const SettingsScreen = ({ navigation, theme, + themeCode, displayMode, switchTheme, setDisplayMode, }) => { + const label = { + 0: "Compact", + 1: "Comfortable", + }; + + const themes = { + 0: "Amoled Dark Theme", + 1: "Light Theme", + 2: "Dark Theme", + 3: "Midnight Dusk Theme", + }; + const desciptionStyles = { color: theme.textColorSecondaryDark, }; const titleStyles = { color: theme.textColorPrimaryDark }; - // const [displayMode, setDisplay] = useState("compact"); - const [applicationTheme, setApplicationTheme] = useState("amoledDarkTheme"); + // Display Mode Modal + const [displayModalVisible, setDisplayModalVisible] = useState(false); - getAppTheme().then((res) => setApplicationTheme(res)); + const showDisplayModal = () => setDisplayModalVisible(true); + const hideDisplayModal = () => setDisplayModalVisible(false); - // getDisplayMode().then((res) => setDisplay(res)); + // Theme Modal + const [themeModalVisible, setthemeModalVisible] = useState(false); + + const showthemeModal = () => setthemeModalVisible(true); + const hidethemeModal = () => setthemeModalVisible(false); return ( - <> + navigation.goBack()} @@ -99,20 +104,40 @@ const SettingsScreen = ({ > Display - - setDisplayMode(1)} - /> - - - setDisplayMode(0)} - /> - + + + + + setDisplayMode(1)} + /> + + + setDisplayMode(0)} + /> + + + {/* Theme - - { - switchTheme(lightTheme); - setApplicationTheme(`lightTheme`); - setAppTheme("lightTheme"); - setStatusBarStyle("dark"); + + + - - - { - switchTheme(darkTheme); - setApplicationTheme("darkTheme"); - setAppTheme("darkTheme"); - setStatusBarStyle("light"); - }} - /> - + > { - switchTheme(amoledDarkTheme); - setApplicationTheme(`amoledDarkTheme`); - setAppTheme("amoledDarkTheme"); + switchTheme(1); + setStatusBarStyle("dark"); + }} + /> + { + switchTheme(2); setStatusBarStyle("light"); }} /> - - { - switchTheme(midnightDuskTheme); - setApplicationTheme("midnightDuskTheme"); - setAppTheme("midnightDuskTheme"); + switchTheme(0); setStatusBarStyle("light"); }} /> - - + { + switchTheme(3); + setStatusBarStyle("light"); + }} + /> + + - + ); }; const mapStateToProps = (state) => ({ + themeCode: state.themeReducer.themeCode, theme: state.themeReducer.theme, displayMode: state.settingsReducer.displayMode, }); diff --git a/src/services/AsyncStorage.js b/src/services/AsyncStorage.js index 6f1c9a9f..949c0b97 100644 --- a/src/services/AsyncStorage.js +++ b/src/services/AsyncStorage.js @@ -13,29 +13,6 @@ export const getReaderTheme = async () => { return theme; }; -export const setAppTheme = async (val) => { - AsyncStorage.setItem("@application_theme", JSON.stringify(val)); -}; - -export const getAppTheme = async () => { - let theme = await AsyncStorage.getItem("@application_theme").then( - (value) => { - if (value) return JSON.parse(value); - } - ); - - return theme; -}; - -export const getDisplayMode = async () => { - let displayMode = await AsyncStorage.getItem("@display_mode"); - return displayMode; -}; - -export const setDisplayMode = async (val) => { - AsyncStorage.setItem("@display_mode", val); -}; - export const setStatusBar = () => { AsyncStorage.getItem("@application_theme").then((value) => { if (JSON.parse(value) === "lightTheme") {