diff --git a/src/screens/Browse/BrowseSettings.js b/src/screens/Browse/BrowseSettings.js index d06faa47..ac77b842 100644 --- a/src/screens/Browse/BrowseSettings.js +++ b/src/screens/Browse/BrowseSettings.js @@ -60,69 +60,83 @@ const BrowseSettings = ({ navigation }) => { - Global Search - - dispatch( - setAppSettings( - "searchAllSources", - !searchAllSources - ) - ) - } - > - - Search all sources - - - dispatch( - setAppSettings( - "searchAllSources", - !searchAllSources - ) - ) - } - /> - - - Discover - dispatch(enableDiscover("showMyAnimeList"))} - > - - MyAnimeList - - - dispatch(enableDiscover("showMyAnimeList")) - } - /> - - - Languages item} renderItem={renderItem} + ListHeaderComponent={ + + + Global Search + + + dispatch( + setAppSettings( + "searchAllSources", + !searchAllSources + ) + ) + } + > + + Search all sources + + + dispatch( + setAppSettings( + "searchAllSources", + !searchAllSources + ) + ) + } + /> + + + + Discover + + + dispatch(enableDiscover("showMyAnimeList")) + } + > + + MyAnimeList + + + dispatch( + enableDiscover("showMyAnimeList") + ) + } + /> + + + + Languages + + + } /> diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index 407486c7..037b90a3 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -419,6 +419,9 @@ const Chapter = ({ route, navigation }) => { height: auto; max-width: 100%; } + + diff --git a/src/screens/More/ReaderSettings.js b/src/screens/More/ReaderSettings.js index c0840da0..b0707108 100644 --- a/src/screens/More/ReaderSettings.js +++ b/src/screens/More/ReaderSettings.js @@ -1,15 +1,18 @@ -import React, { useState } from "react"; +import React, { useCallback, useState } from "react"; import { + Dimensions, Pressable, ScrollView, StyleSheet, Text, TextInput, + useWindowDimensions, View, } from "react-native"; import { Button } from "react-native-paper"; import WebView from "react-native-webview"; import { useDispatch } from "react-redux"; +import { TabView, SceneMap, TabBar } from "react-native-tab-view"; import { Appbar } from "../../components/Appbar"; import ColorPickerModal from "../../components/ColorPickerModal"; @@ -28,11 +31,25 @@ import { readerTextColor, } from "../Chapter/readerStyleController"; -const ReaderSettings = ({ navigation }) => { - const theme = useTheme(); - const dispatch = useDispatch(); +const FirstRoute = React.memo(({ theme, dispatch, reader }) => { + const presetThemes = [ + { + value: 1, + backgroundColor: "#000000", + textColor: "rgba(255,255,255,0.7)", + }, + { value: 2, backgroundColor: "#FFFFFF", textColor: "#111111" }, + { value: 3, backgroundColor: "#F7DFC6", textColor: "#593100" }, + { value: 4, backgroundColor: "#292832", textColor: "#CCCCCC" }, + { value: 5, backgroundColor: "#2B2C30", textColor: "#CCCCCC" }, + ]; - const reader = useReaderSettings(); + const textAlignments = [ + { value: "left", icon: "format-align-left" }, + { value: "center", icon: "format-align-center" }, + { value: "justify", icon: "format-align-justify" }, + { value: "right", icon: "format-align-right" }, + ]; /** * Reader Background Color Modal @@ -59,100 +76,10 @@ const ReaderSettings = ({ navigation }) => { 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, - }, - ]; - - const presetThemes = [ - { - value: 1, - backgroundColor: "#000000", - textColor: "rgba(255,255,255,0.7)", - }, - { value: 2, backgroundColor: "#FFFFFF", textColor: "#111111" }, - { value: 3, backgroundColor: "#F7DFC6", textColor: "#593100" }, - { value: 4, backgroundColor: "#292832", textColor: "#CCCCCC" }, - { value: 5, backgroundColor: "#2B2C30", textColor: "#CCCCCC" }, - ]; - - const textAlignments = [ - { value: "left", icon: "format-align-left" }, - { value: "center", icon: "format-align-center" }, - { value: "justify", icon: "format-align-justify" }, - { value: "right", icon: "format-align-right" }, - ]; - const [customHtmlCSS, setcustomHtmlCSS] = useState(reader.customCSS); return ( - - - - - - - - - -

- 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 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. - - - `, - }} - /> - + Preset @@ -219,10 +146,7 @@ const ReaderSettings = ({ navigation }) => { /> Text - + { - { theme={theme} onSubmit={setReaderTextColor} /> + + ); +}); + +const SecondRoute = React.memo(({ reader }) => ( + + + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis, diam sed malesuada bibendum, nulla libero scelerisque sapien, nec interdum nisl ipsum ac ipsum. In lacinia eros ut quam commodo, in finibus augue ultricies. Vestibulum ex purus, condimentum eget sem at, molestie semper mi. Mauris ac feugiat quam. Pellentesque sagittis bibendum nibh eu lacinia. Aenean rhoncus, velit sit amet mollis egestas, diam turpis ornare velit, a dictum elit velit in erat. Quisque luctus in sem a vulputate. +

+

Pellentesque id tempus orci, non finibus tortor. Suspendisse in neque non eros eleifend hendrerit vitae a lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc interdum magna nulla, eget pharetra arcu dapibus eu. Pellentesque sed lectus sit amet sem porta lacinia. Curabitur consectetur dolor in nibh varius, ac placerat erat pellentesque. Proin in justo condimentum, fermentum lacus eget, ultrices ante. Fusce tempor blandit erat nec mollis. Vivamus in leo et nunc consectetur elementum nec ac lectus. +

+

In consectetur libero tempor metus interdum, sit amet viverra leo dapibus. Nullam tincidunt justo hendrerit lorem maximus, eu pretium erat fringilla. Nulla scelerisque leo at enim convallis, a elementum velit laoreet. Aliquam quis vestibulum quam. Morbi ut sollicitudin mi, et laoreet elit. Vivamus mattis, nulla at blandit sodales, lectus lacus luctus metus, non euismod neque urna vel nisl. Quisque vitae ante vitae orci tempus egestas quis eu nibh. Phasellus eget nulla non velit tincidunt fringilla eget nec libero. Morbi tempor erat quis rutrum condimentum. +

+

Cras sem magna, tempus sed urna eget, scelerisque tincidunt tortor. Cras euismod turpis libero, ut condimentum nulla ultrices id. Phasellus faucibus, elit ut imperdiet euismod, enim dui volutpat turpis, in tincidunt ex ligula non felis. Praesent erat erat, ultrices ut imperdiet sed, congue eu leo. Aliquam viverra fringilla ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ac malesuada massa. Cras eu augue in dui venenatis laoreet sit amet eget sem. Nullam malesuada sapien felis, et varius neque auctor eu. +

+

Sed vestibulum facilisis libero, in aliquet mauris lobortis et. In vitae lectus id risus cursus dictum at ac mi. Praesent ac lectus eget nunc elementum pellentesque. Ut at dui magna. Aliquam mattis posuere gravida. Morbi volutpat, dolor quis varius tincidunt, quam nulla vulputate libero, eu sagittis dui odio et magna. Sed luctus lectus ante, sit amet ultrices ligula convallis vitae. Sed efficitur libero nec quam porta, et fringilla turpis egestas. Nulla facilisi. Duis leo tellus, porta non enim eu, tincidunt cursus lorem. +

+ + + `, + }} + /> + +)); + +const ReaderSettings = ({ navigation }) => { + const theme = useTheme(); + const dispatch = useDispatch(); + + const reader = useReaderSettings(); + + const renderScene = ({ route }) => { + switch (route.key) { + case "first": + return ( + + ); + case "second": + return ; + } + }; + + const layout = useWindowDimensions(); + + const [index, setIndex] = useState(0); + const [routes] = useState([ + { key: "first", title: "Settings" }, + { key: "second", title: "Preview" }, + ]); + + const renderTabBar = (props) => ( + ( + {route.title} + )} + inactiveColor={theme.textColorSecondary} + activeColor={theme.colorAccent} + pressColor={theme.rippleColor} + /> + ); + + return ( + + + + ); };