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

Custom background and text color

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2021-06-06 20:35:04 +05:30
parent 223f00ef7d
commit 22078309eb
10 changed files with 148 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.js
+7 -2
View File
@@ -1,9 +1,12 @@
import React, { useEffect } from "react";
import { StatusBar } from "react-native";
import * as SplashScreen from "expo-splash-screen";
SplashScreen.preventAutoHideAsync();
import { useFonts } from "expo-font";
import { Provider as PaperProvider } from "react-native-paper";
import * as SplashScreen from "expo-splash-screen";
import { Provider } from "react-redux";
import { persistor, store } from "./src/redux/store";
import { PersistGate } from "redux-persist/lib/integration/react";
@@ -18,7 +21,9 @@ const App = () => {
useEffect(() => {
createDB();
SplashScreen.hideAsync();
setTimeout(async () => {
await SplashScreen.hideAsync();
}, 2000);
}, []);
if (!loaded) {
src/Screens/Browse/BrowseMal.js
+1 -5
View File
@@ -25,7 +25,6 @@ const BrowseMalScreen = ({ navigation, route }) => {
const getNovels = async () => {
try {
const url = `https://api.jikan.moe/v3/top/manga/1/novels`;
console.log(url);
const res = await fetch(url);
const data = await res.json();
@@ -69,15 +68,12 @@ const BrowseMalScreen = ({ navigation, route }) => {
const getSearchResults = () => {
setLoading(true);
console.log(
`https://api.jikan.moe/v3/search/manga?q=${searchText}&page=1&type=novel`
);
fetch(
`https://api.jikan.moe/v3/search/manga?q=${searchText}&page=1&type=novel`
)
.then((response) => response.json())
.then((json) => {
console.log(json.results);
setNovels(json.results);
setLoading(false);
})
src/Screens/Chapter/Chapter.js
+2 -2
View File
@@ -194,7 +194,7 @@ const Chapter = ({ route, navigation }) => {
paddingVertical: 16,
paddingBottom: 32,
fontSize: reader.textSize,
color: readerTextColor(reader.theme),
color: reader.textColor,
lineHeight: readerLineHeight(reader.textSize, reader.lineHeight),
textAlign: reader.textAlign,
paddingHorizontal: `${reader.padding}%`,
@@ -298,7 +298,7 @@ const Chapter = ({ route, navigation }) => {
style={[
styles.scrollPercentage,
{
color: readerTextColor(reader.theme),
color: reader.textColor,
backgroundColor: readerBackground(reader.theme),
},
]}
src/Screens/Chapter/components/ReaderSheet.js
+13
View File
@@ -29,6 +29,13 @@ const ReaderSheet = ({
<Text style={styles.title}>{title}</Text>
);
const textColor = {
1: "rgba(255,255,255,0.7)",
2: "#000000",
3: "#000000",
4: "#FFFFFF",
};
return (
<Bottomsheet
ref={bottomSheetRef}
@@ -74,6 +81,12 @@ const ReaderSheet = ({
value ?? reader.theme
)
);
dispatch(
setReaderSettings(
"textColor",
textColor[value] ?? reader.textColor
)
);
}}
value={reader.theme}
>
src/Screens/Chapter/readerStyleController.js
+2 -2
View File
@@ -6,14 +6,14 @@ export const readerBackground = (val) => {
4: "#444444",
};
return backgroundColor[val] ?? "#FFFFFF";
return backgroundColor[val] ?? val;
};
export const readerTextColor = (val) => {
const textColor =
val === 1 ? "rgba(255,255,255,0.7)" : val === 4 ? "#FFFFFF" : "#000000";
return textColor;
return textColor ?? val;
};
export const readerLineHeight = (fontSize, lineHeightMultiplier) => {
src/Screens/More/GeneralSettings.js
+3
View File
@@ -15,6 +15,7 @@ import DisplayModeModal from "./components/DisplayModeModal";
import GridSizeModal from "./components/GridSizeModal";
import ThemeModal from "./components/ThemeModal";
import AccentColorModal from "./components/AccentColorModal";
import { setAccentColor } from "../../redux/settings/settings.actions";
const GenralSettings = ({ navigation }) => {
const theme = useTheme();
@@ -120,6 +121,8 @@ const GenralSettings = ({ navigation }) => {
dispatch={dispatch}
accentColorModal={accentColorModal}
hideAccentColorModal={hideAccentColorModal}
color={theme.colorAccent}
onPress={(val) => dispatch(setAccentColor(val))}
theme={theme}
/>
</ScreenContainer>
src/Screens/More/ReaderSettings.js
+110 -2
View File
@@ -1,18 +1,126 @@
import React from "react";
import React, { useState } from "react";
import { Text, View } from "react-native";
import { useDispatch } from "react-redux";
import { Appbar } from "../../Components/Appbar";
import { ScreenContainer } from "../../Components/Common";
import { ListItem, ListSection, ListSubHeader } from "../../Components/List";
import { useTheme } from "../../Hooks/reduxHooks";
import { useReaderSettings, useTheme } from "../../Hooks/reduxHooks";
import { setReaderSettings } from "../../redux/settings/settings.actions";
import {
readerBackground,
readerLineHeight,
readerTextColor,
} from "../Chapter/readerStyleController";
import AccentColorModal from "./components/AccentColorModal";
const ReaderSettings = ({ navigation }) => {
const theme = useTheme();
const dispatch = useDispatch();
const reader = useReaderSettings();
const textColor = {
1: "rgba(255,255,255,0.7)",
2: "#000000",
3: "#000000",
4: "#FFFFFF",
};
/**
* Reader Background Color Modal
*/
const [readerBackgroundColorModal, setReaderBackgroundtColorModal] =
useState(false);
const showReaderBackgroundtColorModal = () =>
setReaderBackgroundtColorModal(true);
const hideReaderBackgroundtColorModal = () =>
setReaderBackgroundtColorModal(false);
/**
* Reader Text Color Modal
*/
const [readerTextColorModal, setReaderTextColorModal] = useState(false);
const showReaderTextColorModal = () => setReaderTextColorModal(true);
const hideReaderTextColorModal = () => setReaderTextColorModal(false);
const setReaderBackground = (val) => {
dispatch(setReaderSettings("theme", val));
};
const setReaderTextColor = (val) => {
dispatch(setReaderSettings("textColor", val ?? reader.textColor));
};
const readerStyles = [
{
paddingVertical: 16,
paddingBottom: 32,
fontSize: reader.textSize,
color: reader.textColor,
lineHeight: readerLineHeight(reader.textSize, reader.lineHeight),
textAlign: reader.textAlign,
paddingHorizontal: `${reader.padding}%`,
},
reader.fontFamily && {
fontFamily: reader.fontFamily,
},
];
return (
<ScreenContainer theme={theme}>
<Appbar title="Reader" onBackAction={() => navigation.goBack()} />
<View style={{ backgroundColor: readerBackground(reader.theme) }}>
<Text style={readerStyles}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
lobortis nunc id nisl tempor, sed tristique sem sagittis.
Mauris consequat orci egestas volutpat vestibulum. Nullam
convallis, leo in porttitor fringilla, ex mi finibus felis,
non molestie ligula ligula facilisis ligula. Nam eu est a
turpis porttitor aliquet sed vel risus. Ut ac scelerisque
diam. Nulla fringilla enim non ex rhoncus faucibus. Integer
eget lacus justo. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut vitae tempor metus. Morbi nec nisl
cursus, gravida ex vitae, laoreet leo. Pellentesque in
lectus ante. Aliquam porta suscipit pretium. Sed ut ligula
at dolor pretium egestas quis vitae urna. In ullamcorper
venenatis orci, eu pulvinar nibh venenatis sit amet.
</Text>
</View>
<ListSection>
<ListSubHeader theme={theme}>Reader</ListSubHeader>
<ListItem
title="Background Color"
description={readerBackground(reader.theme)}
onPress={showReaderBackgroundtColorModal}
theme={theme}
iconColor={readerBackground(reader.theme)}
right="circle"
/>
<ListItem
title="Text Color"
description={reader.textColor}
onPress={showReaderTextColorModal}
theme={theme}
iconColor={reader.textColor}
right="circle"
/>
</ListSection>
<AccentColorModal
accentColorModal={readerBackgroundColorModal}
color={readerBackground(reader.theme)}
hideAccentColorModal={hideReaderBackgroundtColorModal}
theme={theme}
onPress={setReaderBackground}
/>
<AccentColorModal
accentColorModal={readerTextColorModal}
color={reader.textColor}
hideAccentColorModal={hideReaderTextColorModal}
theme={theme}
onPress={setReaderTextColor}
/>
</ScreenContainer>
);
};
src/Screens/More/Settings.js
+2 -2
View File
@@ -43,7 +43,7 @@ const SettingsScreen = ({ navigation }) => {
}
theme={theme}
/>
{/* <ListItem
<ListItem
title="Reader"
icon="book-open-outline"
onPress={() =>
@@ -52,7 +52,7 @@ const SettingsScreen = ({ navigation }) => {
})
}
theme={theme}
/> */}
/>
<ListItem
title="Tracking"
icon="sync"
src/Screens/More/components/AccentColorModal.js
+6 -6
View File
@@ -1,15 +1,15 @@
import React, { useState } from "react";
import { StyleSheet, Text } from "react-native";
import { Modal, Portal, TextInput } from "react-native-paper";
import { setAccentColor } from "../../../redux/settings/settings.actions";
const AccentColorModal = ({
dispatch,
accentColorModal,
hideAccentColorModal,
theme,
onPress,
color,
}) => {
const [text, setText] = useState(theme.colorAccent);
const [text, setText] = useState(color);
const [error, setError] = useState();
return (
@@ -36,11 +36,11 @@ const AccentColorModal = ({
</Text>
<TextInput
value={text}
defaultValue={theme.colorAccent}
defaultValue={color}
onChangeText={(text) => setText(text)}
onSubmitEditing={() => {
if (text.match(/^#([0-9a-f]{6}|[0-9a-f]{3})$/i)) {
dispatch(setAccentColor(text));
onPress(text);
hideAccentColorModal();
} else {
setError("Enter a valid hex color code");
@@ -49,7 +49,7 @@ const AccentColorModal = ({
mode="outlined"
theme={{
colors: {
primary: theme.colorAccent,
primary: color,
placeholder: theme.textColorHint,
text: theme.textColorPrimary,
background: "transparent",
src/redux/settings/settings.reducer.js
+2
View File
@@ -45,6 +45,7 @@ const initialState = {
novelsPerRow: 3,
reader: {
theme: 1,
textColor: "rgba(255,255,255,0.7)",
textSize: 16,
textAlign: "left",
padding: 5,
@@ -82,6 +83,7 @@ const settingsReducer = (state = initialState, action) => {
[payload.key]: payload.val,
};
case SET_READER_SETTINGS:
console.log(payload.val);
return {
...state,
reader: {