Add reader settings and use pressable
This commit is contained in:
Rajarshee Chatterjee
@@ -1,10 +1,11 @@
|
||||
import React, { useState } from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
import { ToggleButton } from "react-native-paper";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
import { Appbar } from "../../Components/Appbar";
|
||||
import ColorPickerModal from "../../Components/ColorPickerModal";
|
||||
import { ScreenContainer } from "../../Components/Common";
|
||||
import { Row, ScreenContainer } from "../../Components/Common";
|
||||
import { ListItem, ListSection, ListSubHeader } from "../../Components/List";
|
||||
|
||||
import { useReaderSettings, useTheme } from "../../Hooks/reduxHooks";
|
||||
@@ -68,50 +69,174 @@ const ReaderSettings = ({ navigation }) => {
|
||||
},
|
||||
];
|
||||
|
||||
const presetThemes = [
|
||||
{
|
||||
value: 1,
|
||||
backgroundColor: "#000000",
|
||||
textColor: "rgba(255,255,255,0.7)",
|
||||
},
|
||||
{ value: 2, backgroundColor: "#FFFFFF", textColor: "#000000" },
|
||||
{ value: 3, backgroundColor: "#F4ECD8", textColor: "#000000" },
|
||||
{ value: 4, backgroundColor: "#444444", textColor: "#FFFFFF" },
|
||||
];
|
||||
|
||||
const onValueChange = (value) => {
|
||||
dispatch(setReaderSettings("theme", value ?? reader.theme));
|
||||
dispatch(
|
||||
setReaderSettings("textColor", textColor[value] ?? reader.textColor)
|
||||
);
|
||||
};
|
||||
|
||||
const textAlignments = [
|
||||
{ value: "left", icon: "format-align-left" },
|
||||
{ value: "justify", icon: "format-align-justify" },
|
||||
{ value: "right", icon: "format-align-right" },
|
||||
];
|
||||
|
||||
const onValueChangeTextAlign = (value) => {
|
||||
dispatch(setReaderSettings("textAlign", value ?? reader.textAlign));
|
||||
};
|
||||
|
||||
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).toUpperCase()}
|
||||
onPress={showReaderBackgroundtColorModal}
|
||||
theme={theme}
|
||||
iconColor={readerBackground(reader.theme)}
|
||||
right="circle"
|
||||
/>
|
||||
<ListItem
|
||||
title="Text Color"
|
||||
description={
|
||||
reader.textColor.toUpperCase() ||
|
||||
readerTextColor(reader.theme)
|
||||
}
|
||||
onPress={showReaderTextColorModal}
|
||||
theme={theme}
|
||||
iconColor={
|
||||
reader.textColor || readerTextColor(reader.theme)
|
||||
}
|
||||
right="circle"
|
||||
/>
|
||||
</ListSection>
|
||||
<Appbar title="Reader" onBackAction={navigation.goBack} />
|
||||
<ScrollView>
|
||||
<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}>Preset</ListSubHeader>
|
||||
<Pressable
|
||||
android_ripple={{ color: theme.rippleColor }}
|
||||
style={styles.pressableListItem}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.textColorPrimary,
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
Preset Themes
|
||||
</Text>
|
||||
<Row>
|
||||
<ToggleButton.Row
|
||||
onValueChange={onValueChange}
|
||||
value={reader.theme}
|
||||
>
|
||||
{presetThemes.map((theme) => (
|
||||
<ToggleButton
|
||||
key={theme.value}
|
||||
icon={
|
||||
reader.theme === theme.value &&
|
||||
"check"
|
||||
}
|
||||
color={theme.textColor}
|
||||
value={theme.value}
|
||||
style={[
|
||||
{
|
||||
backgroundColor:
|
||||
theme.backgroundColor,
|
||||
},
|
||||
styles.presetToggleButton,
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</ToggleButton.Row>
|
||||
</Row>
|
||||
</Pressable>
|
||||
<ListSubHeader theme={theme}>Reader</ListSubHeader>
|
||||
<ListItem
|
||||
title="Background Color"
|
||||
description={readerBackground(
|
||||
reader.theme
|
||||
).toUpperCase()}
|
||||
onPress={showReaderBackgroundtColorModal}
|
||||
theme={theme}
|
||||
iconColor={readerBackground(reader.theme)}
|
||||
right="circle"
|
||||
/>
|
||||
<ListItem
|
||||
title="Text Color"
|
||||
description={
|
||||
reader.textColor.toUpperCase() ||
|
||||
readerTextColor(reader.theme)
|
||||
}
|
||||
onPress={showReaderTextColorModal}
|
||||
theme={theme}
|
||||
iconColor={
|
||||
reader.textColor || readerTextColor(reader.theme)
|
||||
}
|
||||
right="circle"
|
||||
/>
|
||||
<ListSubHeader theme={theme}>Text</ListSubHeader>
|
||||
<Pressable
|
||||
android_ripple={{ color: theme.rippleColor }}
|
||||
style={styles.pressableListItem}
|
||||
>
|
||||
<View>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.textColorPrimary,
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
Text Align
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.textColorSecondary,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
{reader.textAlign}
|
||||
</Text>
|
||||
</View>
|
||||
<Row>
|
||||
<ToggleButton.Row
|
||||
onValueChange={onValueChangeTextAlign}
|
||||
value={reader.textAlign}
|
||||
>
|
||||
{textAlignments.map((item) => (
|
||||
<ToggleButton
|
||||
key={item.value}
|
||||
icon={item.icon}
|
||||
color={
|
||||
reader.textAlign === item.value
|
||||
? theme.colorAccent
|
||||
: "#FFFFFF"
|
||||
}
|
||||
value={item.value}
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
marginHorizontal: 10,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ToggleButton.Row>
|
||||
</Row>
|
||||
</Pressable>
|
||||
</ListSection>
|
||||
</ScrollView>
|
||||
<ColorPickerModal
|
||||
title="Reader background color"
|
||||
modalVisible={readerBackgroundColorModal}
|
||||
@@ -133,3 +258,21 @@ const ReaderSettings = ({ navigation }) => {
|
||||
};
|
||||
|
||||
export default ReaderSettings;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pressableListItem: {
|
||||
padding: 16,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
presetToggleButton: {
|
||||
marginLeft: 12,
|
||||
borderRadius: 50,
|
||||
borderTopRightRadius: 50,
|
||||
borderBottomRightRadius: 50,
|
||||
borderTopLeftRadius: 50,
|
||||
borderBottomLeftRadius: 50,
|
||||
borderWidth: 0,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
Pressable,
|
||||
} from "react-native";
|
||||
|
||||
import { TouchableRipple, IconButton, Menu } from "react-native-paper";
|
||||
import { Row } from "../../../Components/Common";
|
||||
|
||||
import {
|
||||
deleteChapterAction,
|
||||
@@ -121,127 +128,114 @@ const ChapterItem = ({
|
||||
return selected.some((obj) => obj.chapterId === chapterId);
|
||||
};
|
||||
|
||||
const onPress = () => {
|
||||
if (selected.length === 0) {
|
||||
navigateToChapter();
|
||||
} else {
|
||||
if (isSelected(chapter.chapterId)) {
|
||||
setSelected((selected) =>
|
||||
selected.filter(
|
||||
(item) => item.chapterId !== chapter.chapterId
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setSelected((selected) => [...selected, chapter]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onLongPress = () => {
|
||||
if (isSelected(chapter.chapterId)) {
|
||||
setSelected((selected) =>
|
||||
selected.filter((item) => item.chapterId !== chapter.chapterId)
|
||||
);
|
||||
} else {
|
||||
setSelected((selected) => [...selected, chapter]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableRipple
|
||||
<Pressable
|
||||
style={[
|
||||
styles.chapterCardContainer,
|
||||
isSelected(chapter.chapterId) && {
|
||||
backgroundColor: theme.rippleColor,
|
||||
},
|
||||
]}
|
||||
onPress={() => {
|
||||
if (selected.length === 0) {
|
||||
navigateToChapter();
|
||||
} else {
|
||||
if (isSelected(chapter.chapterId)) {
|
||||
setSelected((selected) =>
|
||||
selected.filter(
|
||||
(item) => item.chapterId !== chapter.chapterId
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setSelected((selected) => [...selected, chapter]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
onLongPress={() => {
|
||||
if (isSelected(chapter.chapterId)) {
|
||||
setSelected((selected) =>
|
||||
selected.filter(
|
||||
(item) => item.chapterId !== chapter.chapterId
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setSelected((selected) => [...selected, chapter]);
|
||||
}
|
||||
// chapterActionsSheetRef.current.show();
|
||||
}}
|
||||
rippleColor={theme.rippleColor}
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
android_ripple={{ color: theme.rippleColor }}
|
||||
>
|
||||
<>
|
||||
<Row>
|
||||
{bookmarkButton()}
|
||||
<View>
|
||||
<Text
|
||||
style={[
|
||||
{ color: theme.textColorPrimary },
|
||||
chapter.read && {
|
||||
color: theme.textColorHint,
|
||||
},
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{showChapterTitles
|
||||
? parseChapterNumber(chapter.chapterName)
|
||||
? "Chapter " +
|
||||
parseChapterNumber(chapter.chapterName)
|
||||
: "Chapter " + index
|
||||
: chapter.chapterName.substring(0, 50)}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginTop: 5,
|
||||
}}
|
||||
>
|
||||
{bookmarkButton()}
|
||||
<View>
|
||||
{chapter.releaseDate && (
|
||||
<Text
|
||||
style={[
|
||||
{ color: theme.textColorPrimary },
|
||||
{
|
||||
color: theme.textColorSecondary,
|
||||
fontSize: 12,
|
||||
},
|
||||
chapter.read && {
|
||||
color: theme.textColorHint,
|
||||
},
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{showChapterTitles
|
||||
? parseChapterNumber(chapter.chapterName)
|
||||
? "Chapter " +
|
||||
parseChapterNumber(
|
||||
chapter.chapterName
|
||||
)
|
||||
: "Chapter " + index
|
||||
: chapter.chapterName.substring(0, 50)}
|
||||
{chapter.releaseDate}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginTop: 5,
|
||||
}}
|
||||
>
|
||||
{chapter.releaseDate && (
|
||||
<Text
|
||||
style={[
|
||||
{
|
||||
color: theme.textColorSecondary,
|
||||
fontSize: 12,
|
||||
},
|
||||
chapter.read && {
|
||||
color: theme.textColorHint,
|
||||
},
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{chapter.releaseDate}
|
||||
</Text>
|
||||
)}
|
||||
{position &&
|
||||
!chapter.read &&
|
||||
position[chapter.chapterId] &&
|
||||
position[chapter.chapterId].percentage <
|
||||
100 &&
|
||||
position[chapter.chapterId].percentage >
|
||||
0 && (
|
||||
<Text
|
||||
style={[
|
||||
{
|
||||
color: theme.textColorHint,
|
||||
fontSize: 12,
|
||||
marginLeft: 0,
|
||||
},
|
||||
chapter.releaseDate && {
|
||||
marginLeft: 5,
|
||||
},
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{chapter.releaseDate && "• "}
|
||||
{"Progress " +
|
||||
position[chapter.chapterId]
|
||||
.percentage +
|
||||
"%"}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
{position &&
|
||||
!chapter.read &&
|
||||
position[chapter.chapterId] &&
|
||||
position[chapter.chapterId].percentage < 100 &&
|
||||
position[chapter.chapterId].percentage > 0 && (
|
||||
<Text
|
||||
style={[
|
||||
{
|
||||
color: theme.textColorHint,
|
||||
fontSize: 12,
|
||||
marginLeft: 0,
|
||||
},
|
||||
chapter.releaseDate && {
|
||||
marginLeft: 5,
|
||||
},
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{chapter.releaseDate && "• "}
|
||||
{"Progress " +
|
||||
position[chapter.chapterId].percentage +
|
||||
"%"}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View>{displayDownloadButton()}</View>
|
||||
</>
|
||||
</TouchableRipple>
|
||||
</Row>
|
||||
<View>{displayDownloadButton()}</View>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -83,7 +83,6 @@ const settingsReducer = (state = initialState, action) => {
|
||||
[payload.key]: payload.val,
|
||||
};
|
||||
case SET_READER_SETTINGS:
|
||||
console.log(payload.val);
|
||||
return {
|
||||
...state,
|
||||
reader: {
|
||||
|
||||
Reference in New Issue
Block a user