diff --git a/.github/readme-images/logo.png b/.github/readme-images/logo.png deleted file mode 100644 index d14512a9..00000000 Binary files a/.github/readme-images/logo.png and /dev/null differ diff --git a/App.js b/App.js index ba75570b..29067e6f 100644 --- a/App.js +++ b/App.js @@ -15,6 +15,12 @@ import { createDB, deleteDb } from "./src/database/DBHelper"; const getFonts = () => Font.loadAsync({ "pt-sans-bold": require("./assets/fonts/PTSansNarrow-Bold.ttf"), + "arbutus-slab": require("./assets/fonts/ArbutusSlab-Regular.ttf"), + domine: require("./assets/fonts/Domine-VariableFont_wght.ttf"), + lato: require("./assets/fonts/Lato-Regular.ttf"), + "noto-sans": require("./assets/fonts/NotoSans-Regular.ttf"), + "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"), + "pt-serif": require("./assets/fonts/PTSerif-Regular.ttf"), }); const App = () => { diff --git a/assets/fonts/ArbutusSlab-Regular.ttf b/assets/fonts/ArbutusSlab-Regular.ttf new file mode 100644 index 00000000..010b97d5 Binary files /dev/null and b/assets/fonts/ArbutusSlab-Regular.ttf differ diff --git a/assets/fonts/Domine-VariableFont_wght.ttf b/assets/fonts/Domine-VariableFont_wght.ttf new file mode 100644 index 00000000..022ebb25 Binary files /dev/null and b/assets/fonts/Domine-VariableFont_wght.ttf differ diff --git a/assets/fonts/Lato-Regular.ttf b/assets/fonts/Lato-Regular.ttf new file mode 100644 index 00000000..33eba8b1 Binary files /dev/null and b/assets/fonts/Lato-Regular.ttf differ diff --git a/assets/fonts/NotoSans-Regular.ttf b/assets/fonts/NotoSans-Regular.ttf new file mode 100644 index 00000000..10589e27 Binary files /dev/null and b/assets/fonts/NotoSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 00000000..29bfd35a Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/PTSerif-Regular.ttf b/assets/fonts/PTSerif-Regular.ttf new file mode 100644 index 00000000..24af4785 Binary files /dev/null and b/assets/fonts/PTSerif-Regular.ttf differ diff --git a/src/redux/settings/settings.actions.js b/src/redux/settings/settings.actions.js index 7f31e0ab..5c4204d4 100644 --- a/src/redux/settings/settings.actions.js +++ b/src/redux/settings/settings.actions.js @@ -5,6 +5,7 @@ import { UPDATE_READER_THEME, UPDATE_READER_TEXT_ALIGN, UPDATE_READER_PADDING, + SET_READER_FONT, } from "./settings.types"; export const setDisplayMode = (val) => (dispatch) => { @@ -48,3 +49,10 @@ export const updateReaderPadding = (val) => (dispatch) => { payload: val, }); }; + +export const setReaderFont = (val) => (dispatch) => { + dispatch({ + type: SET_READER_FONT, + payload: val, + }); +}; diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index 6bf2e9a4..aa7199c3 100644 --- a/src/redux/settings/settings.reducer.js +++ b/src/redux/settings/settings.reducer.js @@ -1,6 +1,7 @@ import { SET_DISPLAY_MODE, SET_ITEMS_PER_ROW, + SET_READER_FONT, UPDATE_READER_PADDING, UPDATE_READER_TEXT_ALIGN, UPDATE_READER_TEXT_SIZE, @@ -15,6 +16,7 @@ const initialState = { textSize: 16, textAlign: "left", padding: 5, + fontFamily: null, }, }; @@ -62,6 +64,11 @@ const settingsReducer = (state = initialState, action) => { ...state, reader: { ...state.reader, padding: payload }, }; + case SET_READER_FONT: + return { + ...state, + reader: { ...state.reader, fontFamily: payload }, + }; default: return state; } diff --git a/src/redux/settings/settings.types.js b/src/redux/settings/settings.types.js index 1c5eb1da..513d717e 100644 --- a/src/redux/settings/settings.types.js +++ b/src/redux/settings/settings.types.js @@ -4,3 +4,4 @@ export const UPDATE_READER_THEME = "UPDATE_READER_THEME"; export const UPDATE_READER_TEXT_SIZE = "UPDATE_READER_TEXT_SIZE"; export const UPDATE_READER_TEXT_ALIGN = "UPDATE_READER_TEXT_ALIGN"; export const UPDATE_READER_PADDING = "UPDATE_READER_PADDING"; +export const SET_READER_FONT = "SET_READER_FONT"; diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index af4f347b..9da3fd82 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -173,6 +173,9 @@ const ChapterItem = ({ textAlign: reader.textAlign, paddingHorizontal: `${reader.padding}%`, }, + reader.fontFamily && { + fontFamily: reader.fontFamily, + }, ]} > {chapter.chapterText.trim()} diff --git a/src/screens/Chapter/components/BottomSheet.js b/src/screens/Chapter/components/BottomSheet.js index 05917cf8..33e8bcbf 100644 --- a/src/screens/Chapter/components/BottomSheet.js +++ b/src/screens/Chapter/components/BottomSheet.js @@ -1,13 +1,14 @@ import React from "react"; import { Animated, StyleSheet, View, Text, Dimensions } from "react-native"; -import { ToggleButton, IconButton } from "react-native-paper"; +import { ToggleButton, IconButton, Chip } from "react-native-paper"; import Slider from "@react-native-community/slider"; import Bottomsheet from "rn-sliding-up-panel"; import { connect } from "react-redux"; import { + setReaderFont, updateReaderPadding, updateReaderTextAlign, updateReaderTextSize, @@ -23,13 +24,24 @@ const ChapterBottomSheet = ({ updateReaderTheme, updateReaderTextAlign, updateReaderPadding, + setReaderFont, }) => { + const fonts = [ + { fontFamily: "", name: "Original" }, + { fontFamily: "arbutus-slab", name: "Arbutus Slab" }, + { fontFamily: "domine", name: "Domine" }, + { fontFamily: "lato", name: "Lato" }, + { fontFamily: "noto-sans", name: "Noto Sans" }, + { fontFamily: "open-sans", name: "Open Sans" }, + { fontFamily: "pt-serif", name: "PT Serif" }, + ]; + return ( @@ -37,7 +49,7 @@ const ChapterBottomSheet = ({ @@ -59,7 +71,7 @@ const ChapterBottomSheet = ({ /> @@ -100,7 +112,7 @@ const ChapterBottomSheet = ({ @@ -186,6 +198,42 @@ const ChapterBottomSheet = ({ } /> + + Font Style + + + {fonts.map((font, index) => ( + setReaderFont(font.fontFamily)} + textStyle={{ fontFamily: font.fontFamily }} + style={{ + borderWidth: 0, + marginHorizontal: 5, + marginVertical: 5, + }} + selected={ + reader.fontFamily === font.fontFamily + ? true + : false + } + > + {font.name} + + ))} + @@ -202,6 +250,7 @@ export default connect(mapStateToProps, { updateReaderTheme, updateReaderTextAlign, updateReaderPadding, + setReaderFont, })(ChapterBottomSheet); const styles = StyleSheet.create({