Add option to select text
This commit is contained in:
Rajarshee Chatterjee
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { StyleSheet, View, Text, Dimensions } from "react-native";
|
||||
import { ToggleButton, IconButton, Menu } from "react-native-paper";
|
||||
import { ToggleButton, IconButton, Menu, Switch } from "react-native-paper";
|
||||
import Slider from "@react-native-community/slider";
|
||||
import Bottomsheet from "rn-sliding-up-panel";
|
||||
import { fonts } from "../../../Services/utils/constants";
|
||||
@@ -9,7 +9,14 @@ import { setReaderSettings } from "../../../redux/settings/settings.actions";
|
||||
import BottomSheetHandle from "../../../Components/BottomSheetHandle";
|
||||
import { Row } from "../../../Components/Common";
|
||||
|
||||
const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => {
|
||||
const ReaderSheet = ({
|
||||
theme,
|
||||
reader,
|
||||
dispatch,
|
||||
bottomSheetRef,
|
||||
selectText,
|
||||
setSelectText,
|
||||
}) => {
|
||||
const [fontMenu, setFontMenu] = useState(false);
|
||||
const openFontMenu = () => setFontMenu(true);
|
||||
const closeFontMenu = () => setFontMenu(false);
|
||||
@@ -21,8 +28,8 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => {
|
||||
return (
|
||||
<Bottomsheet
|
||||
ref={bottomSheetRef}
|
||||
draggableRange={{ top: 400, bottom: 0 }}
|
||||
snappingPoints={[0, 400]}
|
||||
draggableRange={{ top: 420, bottom: 0 }}
|
||||
snappingPoints={[0, 420]}
|
||||
showBackdrop={true}
|
||||
backdropOpacity={0}
|
||||
>
|
||||
@@ -344,6 +351,31 @@ const ReaderSheet = ({ theme, reader, dispatch, bottomSheetRef }) => {
|
||||
))}
|
||||
</Menu>
|
||||
</Row>
|
||||
<Row
|
||||
style={{
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
paddingHorizontal: 16,
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<ReaderSettingTitle title="Select Text " />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
(Justify does not work with selectable text)
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={selectText}
|
||||
onValueChange={setSelectText}
|
||||
color={theme.colorAccent}
|
||||
/>
|
||||
</Row>
|
||||
</View>
|
||||
</View>
|
||||
</Bottomsheet>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { StyleSheet, Text } from "react-native";
|
||||
import { Modal, TextInput } from "react-native-paper";
|
||||
import { Modal, Portal, TextInput } from "react-native-paper";
|
||||
import { setAccentColor } from "../../../redux/settings/settings.actions";
|
||||
|
||||
const AccentColorModal = ({
|
||||
@@ -13,50 +13,55 @@ const AccentColorModal = ({
|
||||
const [error, setError] = useState();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={accentColorModal}
|
||||
onDismiss={() => {
|
||||
hideAccentColorModal();
|
||||
setText();
|
||||
setError();
|
||||
}}
|
||||
contentContainerStyle={[
|
||||
styles.containerStyle,
|
||||
{ backgroundColor: theme.colorPrimary },
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[styles.dialogTitle, { color: theme.textColorPrimary }]}
|
||||
<Portal>
|
||||
<Modal
|
||||
visible={accentColorModal}
|
||||
onDismiss={() => {
|
||||
hideAccentColorModal();
|
||||
setText();
|
||||
setError();
|
||||
}}
|
||||
contentContainerStyle={[
|
||||
styles.containerStyle,
|
||||
{ backgroundColor: theme.colorPrimary },
|
||||
]}
|
||||
>
|
||||
Hex Color Code
|
||||
</Text>
|
||||
<TextInput
|
||||
value={text}
|
||||
defaultValue={theme.colorAccent}
|
||||
onChangeText={(text) => setText(text)}
|
||||
onSubmitEditing={() => {
|
||||
if (text.match(/^#[0-9a-f]{3,6}$/i)) {
|
||||
dispatch(setAccentColor(text));
|
||||
hideAccentColorModal();
|
||||
} else {
|
||||
setError("Enter a valid hex color code");
|
||||
}
|
||||
}}
|
||||
mode="outlined"
|
||||
theme={{
|
||||
colors: {
|
||||
primary: theme.colorAccent,
|
||||
placeholder: theme.textColorHint,
|
||||
text: theme.textColorPrimary,
|
||||
background: "transparent",
|
||||
},
|
||||
}}
|
||||
underlineColor={theme.textColorHint}
|
||||
dense
|
||||
error={error}
|
||||
/>
|
||||
<Text style={{ color: "#FF0033", paddingTop: 8 }}>{error}</Text>
|
||||
</Modal>
|
||||
<Text
|
||||
style={[
|
||||
styles.dialogTitle,
|
||||
{ color: theme.textColorPrimary },
|
||||
]}
|
||||
>
|
||||
Hex Color Code
|
||||
</Text>
|
||||
<TextInput
|
||||
value={text}
|
||||
defaultValue={theme.colorAccent}
|
||||
onChangeText={(text) => setText(text)}
|
||||
onSubmitEditing={() => {
|
||||
if (text.match(/^#[0-9a-f]{3,6}$/i)) {
|
||||
dispatch(setAccentColor(text));
|
||||
hideAccentColorModal();
|
||||
} else {
|
||||
setError("Enter a valid hex color code");
|
||||
}
|
||||
}}
|
||||
mode="outlined"
|
||||
theme={{
|
||||
colors: {
|
||||
primary: theme.colorAccent,
|
||||
placeholder: theme.textColorHint,
|
||||
text: theme.textColorPrimary,
|
||||
background: "transparent",
|
||||
},
|
||||
}}
|
||||
underlineColor={theme.textColorHint}
|
||||
dense
|
||||
error={error}
|
||||
/>
|
||||
<Text style={{ color: "#FF0033", paddingTop: 8 }}>{error}</Text>
|
||||
</Modal>
|
||||
</Portal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+2
-2
@@ -29,7 +29,7 @@ export const lightTheme = {
|
||||
dividerColor: "rgba(0,0,0,0.1)",
|
||||
filterColor: "#FFC107",
|
||||
colorDisabled: "rgba(220,220,220,255)",
|
||||
colorButtonText: "#000000",
|
||||
colorButtonText: "#FFFFFF",
|
||||
statusBar: "dark",
|
||||
};
|
||||
|
||||
@@ -67,7 +67,7 @@ export const amoledDarkTheme = {
|
||||
textColorPrimary: "#FFFFFF",
|
||||
textColorSecondary: "rgba(255,255,255,0.7)",
|
||||
textColorHint: "rgba(255,255,255,0.5)",
|
||||
rippleColor: "rgba(255,255,255,0.06)",
|
||||
rippleColor: "rgba(255,255,255,0.12)",
|
||||
searchBarColor: "#1F1F1F",
|
||||
menuColor: "#242529",
|
||||
filterColor: "#FFEB3B",
|
||||
|
||||
Reference in New Issue
Block a user