From 22078309ebee620a94dae39590a77be86cfbe35e Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sun, 6 Jun 2021 20:35:04 +0530 Subject: [PATCH] Custom background and text color --- App.js | 9 +- src/Screens/Browse/BrowseMal.js | 6 +- src/Screens/Chapter/Chapter.js | 4 +- src/Screens/Chapter/components/ReaderSheet.js | 13 ++ src/Screens/Chapter/readerStyleController.js | 4 +- src/Screens/More/GeneralSettings.js | 3 + src/Screens/More/ReaderSettings.js | 112 +++++++++++++++++- src/Screens/More/Settings.js | 4 +- .../More/components/AccentColorModal.js | 12 +- src/redux/settings/settings.reducer.js | 2 + 10 files changed, 148 insertions(+), 21 deletions(-) diff --git a/App.js b/App.js index 53457002..b93d9665 100644 --- a/App.js +++ b/App.js @@ -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) { diff --git a/src/Screens/Browse/BrowseMal.js b/src/Screens/Browse/BrowseMal.js index e60f007f..1edfe4b9 100644 --- a/src/Screens/Browse/BrowseMal.js +++ b/src/Screens/Browse/BrowseMal.js @@ -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); }) diff --git a/src/Screens/Chapter/Chapter.js b/src/Screens/Chapter/Chapter.js index f831e7a9..8c9ae121 100644 --- a/src/Screens/Chapter/Chapter.js +++ b/src/Screens/Chapter/Chapter.js @@ -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), }, ]} diff --git a/src/Screens/Chapter/components/ReaderSheet.js b/src/Screens/Chapter/components/ReaderSheet.js index fc3b6583..39edf6bd 100644 --- a/src/Screens/Chapter/components/ReaderSheet.js +++ b/src/Screens/Chapter/components/ReaderSheet.js @@ -29,6 +29,13 @@ const ReaderSheet = ({ {title} ); + const textColor = { + 1: "rgba(255,255,255,0.7)", + 2: "#000000", + 3: "#000000", + 4: "#FFFFFF", + }; + return ( diff --git a/src/Screens/Chapter/readerStyleController.js b/src/Screens/Chapter/readerStyleController.js index b4915a99..a3d58012 100644 --- a/src/Screens/Chapter/readerStyleController.js +++ b/src/Screens/Chapter/readerStyleController.js @@ -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) => { diff --git a/src/Screens/More/GeneralSettings.js b/src/Screens/More/GeneralSettings.js index b0f528df..7124d8a5 100644 --- a/src/Screens/More/GeneralSettings.js +++ b/src/Screens/More/GeneralSettings.js @@ -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} /> diff --git a/src/Screens/More/ReaderSettings.js b/src/Screens/More/ReaderSettings.js index 7125b497..7615a3b2 100644 --- a/src/Screens/More/ReaderSettings.js +++ b/src/Screens/More/ReaderSettings.js @@ -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 ( navigation.goBack()} /> + + + 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. + + + + Reader + + + + + ); }; diff --git a/src/Screens/More/Settings.js b/src/Screens/More/Settings.js index 02997386..d86855d3 100644 --- a/src/Screens/More/Settings.js +++ b/src/Screens/More/Settings.js @@ -43,7 +43,7 @@ const SettingsScreen = ({ navigation }) => { } theme={theme} /> - {/* @@ -52,7 +52,7 @@ const SettingsScreen = ({ navigation }) => { }) } theme={theme} - /> */} + /> { - const [text, setText] = useState(theme.colorAccent); + const [text, setText] = useState(color); const [error, setError] = useState(); return ( @@ -36,11 +36,11 @@ const AccentColorModal = ({ 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", diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index 7dc20203..b2e7d04a 100644 --- a/src/redux/settings/settings.reducer.js +++ b/src/redux/settings/settings.reducer.js @@ -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: {