open-lab/lnreader
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Use modals for theme and display settings

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2021-03-15 09:52:44 +05:30
parent b3ec043e32
commit 5fb9d70036
6 changed files with 150 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/NovelCover.js
+23 -10
View File
@@ -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 (
<View style={{ flex: 1 / 3 }}>
<TouchableRipple
@@ -33,7 +35,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
]}
progressiveRenderingEnabled={true}
>
{(!displayMode || displayMode === 0) && (
{displayMode === 0 && (
<View style={styles.titleContainer}>
<LinearGradient
colors={[
@@ -44,7 +46,13 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
>
<Text
numberOfLines={2}
style={styles.title}
style={[
styles.title,
{
color:
theme.textColorPrimaryDark,
},
]}
>
{item.novelName}
</Text>
@@ -54,11 +62,19 @@ const NovelCover = ({ item, onPress, libraryStatus }) => {
</ImageBackground>
) : (
<View>
<Text style={{ color: "white" }}>HAHAHAHAH</Text>
<Text style={{ color: "white" }}>
Novel Cover Doesn't Exist
</Text>
</View>
)}
{displayMode === 1 && (
<Text numberOfLines={2} style={styles.title}>
<Text
numberOfLines={2}
style={[
styles.title,
{ color: theme.textColorPrimaryDark },
]}
>
{item.novelName}
</Text>
)}
@@ -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,
},
src/components/settings/Checkbox.js
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React from "react";
import { Checkbox } from "react-native-paper";
import { useSelector } from "react-redux";
src/redux/actions/theme.js
+9 -2
View File
@@ -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,
});
};
src/redux/reducers/theme.js
+16 -3
View File
@@ -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;
}
src/screens/More/Settings.js
+101 -83
View File
@@ -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 (
<>
<Provider>
<CustomAppbar
title="Settings"
onBackAction={() => navigation.goBack()}
@@ -99,20 +104,40 @@ const SettingsScreen = ({
>
Display
</List.Subheader>
<View>
<DisplayCheckbox
value={1}
displayMode={displayMode}
onPress={() => setDisplayMode(1)}
/>
</View>
<View>
<DisplayCheckbox
value={0}
displayMode={displayMode}
onPress={() => setDisplayMode(0)}
/>
</View>
<List.Item
titleStyle={titleStyles}
title="Display Mode"
descriptionStyle={desciptionStyles}
description={label[displayMode]}
onPress={showDisplayModal}
rippleColor={theme.rippleColorDark}
/>
<Portal>
<Modal
visible={displayModalVisible}
onDismiss={hideDisplayModal}
contentContainerStyle={{
backgroundColor: theme.colorDarkPrimaryDark,
padding: 20,
margin: 20,
}}
>
<View>
<DisplayCheckbox
value={1}
displayMode={displayMode}
onPress={() => setDisplayMode(1)}
/>
</View>
<View>
<DisplayCheckbox
value={0}
displayMode={displayMode}
onPress={() => setDisplayMode(0)}
/>
</View>
</Modal>
</Portal>
{/* <List.Subheader
style={{
color: theme.colorAccentDark,
@@ -138,73 +163,66 @@ const SettingsScreen = ({
>
Theme
</List.Subheader>
<View>
<ThemeCheckbox
label="Light Theme"
checked={
applicationTheme === "lightTheme" ? true : false
}
onPress={() => {
switchTheme(lightTheme);
setApplicationTheme(`lightTheme`);
setAppTheme("lightTheme");
setStatusBarStyle("dark");
<List.Item
titleStyle={titleStyles}
title="Theme"
descriptionStyle={desciptionStyles}
description={themes[themeCode]}
onPress={showthemeModal}
rippleColor={theme.rippleColorDark}
/>
<Portal>
<Modal
visible={themeModalVisible}
onDismiss={hidethemeModal}
contentContainerStyle={{
backgroundColor: theme.colorDarkPrimaryDark,
padding: 20,
margin: 20,
}}
/>
</View>
<View>
<ThemeCheckbox
label="Dark Theme"
checked={
applicationTheme === "darkTheme" ? true : false
}
onPress={() => {
switchTheme(darkTheme);
setApplicationTheme("darkTheme");
setAppTheme("darkTheme");
setStatusBarStyle("light");
}}
/>
<View>
>
<ThemeCheckbox
label="Amoled Dark Theme"
checked={
applicationTheme === "amoledDarkTheme"
? true
: false
}
label={themes[1]}
checked={themeCode === 1 ? true : false}
onPress={() => {
switchTheme(amoledDarkTheme);
setApplicationTheme(`amoledDarkTheme`);
setAppTheme("amoledDarkTheme");
switchTheme(1);
setStatusBarStyle("dark");
}}
/>
<ThemeCheckbox
label={themes[2]}
checked={themeCode === 2 ? true : false}
onPress={() => {
switchTheme(2);
setStatusBarStyle("light");
}}
/>
</View>
<View>
<ThemeCheckbox
label="Midnight Dusk Theme"
checked={
applicationTheme === "midnightDuskTheme"
? true
: false
}
label={themes[0]}
checked={themeCode === 0 ? true : false}
onPress={() => {
switchTheme(midnightDuskTheme);
setApplicationTheme("midnightDuskTheme");
setAppTheme("midnightDuskTheme");
switchTheme(0);
setStatusBarStyle("light");
}}
/>
</View>
</View>
<ThemeCheckbox
label={themes[3]}
checked={themeCode === 3 ? true : false}
onPress={() => {
switchTheme(3);
setStatusBarStyle("light");
}}
/>
</Modal>
</Portal>
</List.Section>
</View>
</>
</Provider>
);
};
const mapStateToProps = (state) => ({
themeCode: state.themeReducer.themeCode,
theme: state.themeReducer.theme,
displayMode: state.settingsReducer.displayMode,
});
src/services/AsyncStorage.js
-23
View File
@@ -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") {