Add action bar and use pressable
This commit is contained in:
Rajarshee Chatterjee
@@ -19,6 +19,7 @@ const HistoryItem = ({ history, theme, dispatch, navigation }) => {
|
||||
novelCover,
|
||||
chapterName,
|
||||
chapterUrl,
|
||||
bookmark,
|
||||
} = history;
|
||||
|
||||
const getChapterNumber = () =>
|
||||
@@ -37,6 +38,7 @@ const HistoryItem = ({ history, theme, dispatch, navigation }) => {
|
||||
novelId,
|
||||
chapterName,
|
||||
novelName,
|
||||
bookmark,
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
+102
-82
@@ -125,6 +125,7 @@ const Novel = ({ route, navigation }) => {
|
||||
alignItems: "center",
|
||||
paddingTop: StatusBar.currentHeight,
|
||||
paddingBottom: 8,
|
||||
elevation: 2,
|
||||
}}
|
||||
>
|
||||
<Appbar.Action
|
||||
@@ -138,89 +139,7 @@ const Novel = ({ route, navigation }) => {
|
||||
title={selected.length}
|
||||
titleStyle={{ color: theme.textColorPrimary }}
|
||||
/>
|
||||
<Appbar.Action
|
||||
icon="bookmark-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(bookmarkChapterAction(selected));
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
|
||||
{selected.some((obj) => obj.read === 0) && (
|
||||
<Appbar.Action
|
||||
icon="check"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
markChaptersRead(
|
||||
selected,
|
||||
novel.novelId,
|
||||
sort,
|
||||
filter
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selected.some((obj) => obj.read === 1) && (
|
||||
<Appbar.Action
|
||||
icon="check-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
markChapterUnreadAction(
|
||||
selected,
|
||||
novel.novelId
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selected.length === 1 && (
|
||||
<Appbar.Action
|
||||
icon="playlist-check"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
markPreviousChaptersReadAction(
|
||||
selected[0].chapterId,
|
||||
selected[0].novelId
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selected.some((obj) => obj.downloaded === 1) && (
|
||||
<Appbar.Action
|
||||
icon="trash-can-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(deleteAllChaptersAction(selected));
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selected.some((obj) => obj.downloaded === 0) && (
|
||||
<Appbar.Action
|
||||
icon="download-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
downloadAllChaptersAction(
|
||||
novel.sourceId,
|
||||
novel.novelUrl,
|
||||
selected
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Appbar.Action
|
||||
icon="select-all"
|
||||
color={theme.textColorPrimary}
|
||||
@@ -338,6 +257,107 @@ const Novel = ({ route, navigation }) => {
|
||||
}
|
||||
refreshControl={refreshControl()}
|
||||
/>
|
||||
{selected.length > 0 && (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: Dimensions.get("window").width - 32,
|
||||
bottom: 0,
|
||||
margin: 16,
|
||||
backgroundColor: theme.colorPrimary,
|
||||
borderRadius: 6,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
elevation: 2,
|
||||
}}
|
||||
>
|
||||
{selected.some((obj) => obj.downloaded === 0) && (
|
||||
<Appbar.Action
|
||||
icon="download-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
downloadAllChaptersAction(
|
||||
novel.sourceId,
|
||||
novel.novelUrl,
|
||||
selected
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selected.some((obj) => obj.downloaded === 1) && (
|
||||
<Appbar.Action
|
||||
icon="trash-can-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(deleteAllChaptersAction(selected));
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Appbar.Action
|
||||
icon="bookmark-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(bookmarkChapterAction(selected));
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
|
||||
{selected.some((obj) => obj.read === 0) && (
|
||||
<Appbar.Action
|
||||
icon="check"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
markChaptersRead(
|
||||
selected,
|
||||
novel.novelId,
|
||||
sort,
|
||||
filter
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selected.some((obj) => obj.read === 1) && (
|
||||
<Appbar.Action
|
||||
icon="check-outline"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
markChapterUnreadAction(
|
||||
selected,
|
||||
novel.novelId
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{selected.length === 1 && (
|
||||
<Appbar.Action
|
||||
icon="playlist-check"
|
||||
color={theme.textColorPrimary}
|
||||
onPress={() => {
|
||||
dispatch(
|
||||
markPreviousChaptersReadAction(
|
||||
selected[0].chapterId,
|
||||
selected[0].novelId
|
||||
)
|
||||
);
|
||||
setSelected([]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
{!loading && (
|
||||
<Portal>
|
||||
<ChaptersSettingsSheet
|
||||
|
||||
@@ -45,6 +45,7 @@ const ChapterItem = ({
|
||||
chapterUrl: chapter.chapterUrl,
|
||||
chapterName: chapter.chapterName,
|
||||
novelName: novelName,
|
||||
bookmark: chapter.bookmark,
|
||||
});
|
||||
|
||||
const displayDownloadButton = () => {
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Pressable,
|
||||
} from "react-native";
|
||||
|
||||
import { Chip, IconButton } from "react-native-paper";
|
||||
@@ -73,42 +74,71 @@ const NovelInfo = ({ theme, children }) => (
|
||||
);
|
||||
|
||||
const FollowButton = ({ theme, onPress, followed }) => (
|
||||
<View style={{ alignItems: "center", flex: 1 }}>
|
||||
<IconButton
|
||||
icon={followed ? "heart" : "heart-outline"}
|
||||
color={followed ? theme.colorAccent : theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
<View style={{ borderRadius: 4, overflow: "hidden", flex: 1 }}>
|
||||
<Pressable
|
||||
android_ripple={{
|
||||
color: theme.rippleColor,
|
||||
borderless: false,
|
||||
}}
|
||||
onPress={onPress}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: followed ? theme.colorAccent : theme.textColorSecondary,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingBottom: 8,
|
||||
}}
|
||||
>
|
||||
{followed ? "In Library" : "Add to library"}
|
||||
</Text>
|
||||
<IconButton
|
||||
icon={followed ? "heart" : "heart-outline"}
|
||||
color={followed ? theme.colorAccent : theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: followed
|
||||
? theme.colorAccent
|
||||
: theme.textColorSecondary,
|
||||
}}
|
||||
>
|
||||
{followed ? "In Library" : "Add to library"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
|
||||
const TrackerButton = ({ theme, isTracked, onPress }) => (
|
||||
<View style={{ alignItems: "center", flex: 1 }}>
|
||||
<IconButton
|
||||
icon={isTracked ? "check" : "sync"}
|
||||
color={isTracked ? theme.colorAccent : theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
<View style={{ borderRadius: 4, overflow: "hidden", flex: 1 }}>
|
||||
<Pressable
|
||||
android_ripple={{
|
||||
color: theme.rippleColor,
|
||||
borderless: false,
|
||||
}}
|
||||
onPress={onPress}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: isTracked ? theme.colorAccent : theme.textColorSecondary,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingBottom: 8,
|
||||
}}
|
||||
>
|
||||
{isTracked ? "Tracked" : "Tracking"}
|
||||
</Text>
|
||||
<IconButton
|
||||
icon={isTracked ? "check" : "sync"}
|
||||
color={isTracked ? theme.colorAccent : theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
onPress={onPress}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: isTracked
|
||||
? theme.colorAccent
|
||||
: theme.textColorSecondary,
|
||||
}}
|
||||
>
|
||||
{isTracked ? "Tracked" : "Tracking"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
|
||||
|
||||
@@ -24,6 +24,7 @@ const ReadButton = ({ navigation, novel, chapters, theme, lastRead }) => {
|
||||
sourceId: novel.sourceId,
|
||||
chapterName: lastRead.chapterName,
|
||||
novelName: novel.novelName,
|
||||
novelName: lastRead.bookmark,
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, Clipboard } from "react-native";
|
||||
import { View, Text, StyleSheet, Clipboard, Pressable } from "react-native";
|
||||
|
||||
import * as WebBrowser from "expo-web-browser";
|
||||
import { TouchableRipple, IconButton } from "react-native-paper";
|
||||
@@ -103,46 +103,82 @@ const NovelInfoHeader = ({
|
||||
onPress={() => trackerSheetRef.current.show()}
|
||||
/>
|
||||
)}
|
||||
<View style={{ alignItems: "center", flex: 1 }}>
|
||||
<IconButton
|
||||
icon="swap-vertical-variant"
|
||||
color={theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 4,
|
||||
overflow: "hidden",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
android_ripple={{
|
||||
color: theme.rippleColor,
|
||||
borderless: false,
|
||||
}}
|
||||
onPress={() =>
|
||||
navigation.navigate("MigrateNovel", {
|
||||
sourceId: novel.sourceId,
|
||||
novelName: novel.novelName,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: theme.textColorSecondary,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingBottom: 8,
|
||||
}}
|
||||
>
|
||||
Migrate
|
||||
</Text>
|
||||
<IconButton
|
||||
icon="swap-vertical-variant"
|
||||
color={theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: theme.textColorSecondary,
|
||||
}}
|
||||
>
|
||||
Migrate
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={{ alignItems: "center", flex: 1 }}>
|
||||
<IconButton
|
||||
icon="earth"
|
||||
color={theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 4,
|
||||
overflow: "hidden",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
android_ripple={{
|
||||
color: theme.rippleColor,
|
||||
borderless: false,
|
||||
}}
|
||||
onPress={() =>
|
||||
WebBrowser.openBrowserAsync(novel.sourceUrl)
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: theme.textColorSecondary,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingBottom: 8,
|
||||
}}
|
||||
>
|
||||
WebView
|
||||
</Text>
|
||||
<IconButton
|
||||
icon="earth"
|
||||
color={theme.textColorSecondary}
|
||||
size={24}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: theme.textColorSecondary,
|
||||
}}
|
||||
>
|
||||
WebView
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</Row>
|
||||
<NovelSummary
|
||||
|
||||
@@ -53,6 +53,7 @@ const Updates = ({ navigation }) => {
|
||||
chapterName: item.chapterName,
|
||||
novelId: item.novelId,
|
||||
novelName: item.novelName,
|
||||
bookmark: item.bookmark,
|
||||
});
|
||||
|
||||
const renderItem = ({ item }) => (
|
||||
|
||||
Reference in New Issue
Block a user