From 9804f25de4ea7f9eefbbe1e2c1fac00c24d17331 Mon Sep 17 00:00:00 2001 From: pappnu Date: Wed, 17 Feb 2021 15:35:04 +0200 Subject: [PATCH 1/2] Add settings for column count and image quality --- src/common/actions/displaySettings.js | 20 +++++ src/common/constants/actionTypes.js | 6 ++ src/common/constants/index.js | 14 ++++ src/common/constants/strings/en.json | 5 ++ src/common/constants/strings/ja.json | 7 +- src/common/constants/strings/zh-HK.json | 7 +- src/common/constants/strings/zh-MO.json | 7 +- src/common/constants/strings/zh-TW.json | 7 +- src/common/constants/strings/zh.json | 7 +- src/common/reducers/displaySettings.js | 32 ++++++++ src/common/reducers/index.js | 2 + src/common/store/configureStore.js | 1 + src/components/IllustDetailContent.js | 17 +++-- src/components/IllustList.js | 27 +++++-- .../DetailScreenImageQualitySettingsModal.js | 50 +++++++++++++ .../IllustListColumnsSettingsModal.js | 45 ++++++++++++ src/containers/ModalRoot.js | 4 + src/navigations/AppNavigator.js | 9 +++ src/screens/MyPage/DisplaySettings.js | 73 +++++++++++++++++++ src/screens/MyPage/Settings.js | 8 ++ 20 files changed, 330 insertions(+), 18 deletions(-) create mode 100644 src/common/actions/displaySettings.js create mode 100644 src/common/reducers/displaySettings.js create mode 100644 src/containers/DetailScreenImageQualitySettingsModal.js create mode 100644 src/containers/IllustListColumnsSettingsModal.js create mode 100644 src/screens/MyPage/DisplaySettings.js diff --git a/src/common/actions/displaySettings.js b/src/common/actions/displaySettings.js new file mode 100644 index 00000000..90ca6d4a --- /dev/null +++ b/src/common/actions/displaySettings.js @@ -0,0 +1,20 @@ +import { DISPLAY_SETTINGS } from '../constants/actionTypes'; + +export function setSettings({ illustListColumns, detailScreenImageQuality }) { + return { + type: DISPLAY_SETTINGS.SET, + payload: { + illustListColumns, + detailScreenImageQuality, + }, + }; +} + +export function restoreSettings(state) { + return { + type: DISPLAY_SETTINGS.RESTORE, + payload: { + state, + }, + }; +} diff --git a/src/common/constants/actionTypes.js b/src/common/constants/actionTypes.js index 817c1af7..512813ef 100644 --- a/src/common/constants/actionTypes.js +++ b/src/common/constants/actionTypes.js @@ -468,6 +468,12 @@ export const READING_SETTINGS = defineAction( appNamespace, ); +export const DISPLAY_SETTINGS = defineAction( + 'DISPLAY_SETTINGS', + [SET, RESTORE], + appNamespace, +); + export const TRENDING_SEARCH_SETTINGS = defineAction( 'TRENDING_SEARCH_SETTINGS', [SET, RESTORE], diff --git a/src/common/constants/index.js b/src/common/constants/index.js index 63ccefc4..f22439c5 100644 --- a/src/common/constants/index.js +++ b/src/common/constants/index.js @@ -24,6 +24,8 @@ export const MODAL_TYPES = { BOOKMARK_NOVEL: 'BOOKMARK_NOVEL', NOVEL_SETTINGS: 'NOVEL_SETTINGS', READING_DIRECTION_SETTINGS: 'READING_DIRECTION_SETTINGS', + ILLUST_LIST_COLUMNS_SETTINGS: 'ILLUST_LIST_COLUMNS_SETTINGS', + DETAIL_SCREEN_IMAGE_QUALITY_SETTINGS: 'DETAIL_SCREEN_IMAGE_QUALITY_SETTINGS', INITIAL_SCREEN_SETTINGS: 'INITIAL_SCREEN_SETTINGS', LANGUAGE_SETTINGS: 'LANGUAGE_SETTINGS', SAVE_IMAGE_FILE_NAME_FORMAT: 'SAVE_IMAGE_FILE_NAME_FORMAT', @@ -171,6 +173,17 @@ export const READING_DIRECTION_TYPES = { RIGHT_TO_LEFT: 'RIGHT_TO_LEFT', }; +export const ILLUST_LIST_COLUMNS = {}; +for (let i = 1; i < 7; i += 1) { + console.log(i); + ILLUST_LIST_COLUMNS[i.toString()] = i; +} + +export const IMAGE_QUALITY_LEVELS = { + MEDIUM: 'medium', + HIGH: 'large', +}; + export const SCREENS = { Main: 'Main', Auth: 'Auth', @@ -220,6 +233,7 @@ export const SCREENS = { AccountSettings: 'AccountSettings', AdvanceAccountSettings: 'AdvanceAccountSettings', ReadingSettings: 'ReadingSettings', + DisplaySettings: 'DisplaySettings', SaveImageSettings: 'SaveImageSettings', InitialScreenSettings: 'InitialScreenSettings', LikeButtonSettings: 'LikeButtonSettings', diff --git a/src/common/constants/strings/en.json b/src/common/constants/strings/en.json index 0f71f7aa..ae74d2f2 100644 --- a/src/common/constants/strings/en.json +++ b/src/common/constants/strings/en.json @@ -48,6 +48,11 @@ "comments": "Comments", "connection": "Connection", "contactUs": "Contact us", + "displaySettings": "Display Settings", + "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality", + "displaySettingsDetailScreenImageQualityHigh": "High", + "displaySettingsDetailScreenImageQualityMedium": "Medium", + "displaySettingsIllustListColumns": "Illust List Columns", "donations": "Donations", "emailVerificationPostComment": "Email verification is required to add comment", "emailVerificationSend": "Send confirmation email", diff --git a/src/common/constants/strings/ja.json b/src/common/constants/strings/ja.json index 4df2f2df..69e51547 100644 --- a/src/common/constants/strings/ja.json +++ b/src/common/constants/strings/ja.json @@ -48,6 +48,11 @@ "comments": "コメント", "connection": "つながり", "contactUs": "お問い合わせ", + "displaySettings": "Display Settings", + "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality", + "displaySettingsDetailScreenImageQualityHigh": "High", + "displaySettingsDetailScreenImageQualityMedium": "Medium", + "displaySettingsIllustListColumns": "Illust List Columns", "donations": "寄付", "emailVerificationPostComment": "コメントをするにはメール認証が必要です。", "emailVerificationSend": "認証メールを送信", @@ -232,4 +237,4 @@ "userNovels": "小説作品", "viewMore": "もっと見る", "worksCount": "件の作品" -} \ No newline at end of file +} diff --git a/src/common/constants/strings/zh-HK.json b/src/common/constants/strings/zh-HK.json index 318cb145..818a3e56 100644 --- a/src/common/constants/strings/zh-HK.json +++ b/src/common/constants/strings/zh-HK.json @@ -48,6 +48,11 @@ "comments": "評論", "connection": "連接", "contactUs": "聯繫我們", + "displaySettings": "Display Settings", + "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality", + "displaySettingsDetailScreenImageQualityHigh": "High", + "displaySettingsDetailScreenImageQualityMedium": "Medium", + "displaySettingsIllustListColumns": "Illust List Columns", "donations": "捐贈", "emailVerificationPostComment": "發布評論需要先進行郵件驗證", "emailVerificationSend": "發送驗證郵件", @@ -232,4 +237,4 @@ "userNovels": "小說", "viewMore": "查看更多", "worksCount": "件作品" -} \ No newline at end of file +} diff --git a/src/common/constants/strings/zh-MO.json b/src/common/constants/strings/zh-MO.json index 318cb145..818a3e56 100644 --- a/src/common/constants/strings/zh-MO.json +++ b/src/common/constants/strings/zh-MO.json @@ -48,6 +48,11 @@ "comments": "評論", "connection": "連接", "contactUs": "聯繫我們", + "displaySettings": "Display Settings", + "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality", + "displaySettingsDetailScreenImageQualityHigh": "High", + "displaySettingsDetailScreenImageQualityMedium": "Medium", + "displaySettingsIllustListColumns": "Illust List Columns", "donations": "捐贈", "emailVerificationPostComment": "發布評論需要先進行郵件驗證", "emailVerificationSend": "發送驗證郵件", @@ -232,4 +237,4 @@ "userNovels": "小說", "viewMore": "查看更多", "worksCount": "件作品" -} \ No newline at end of file +} diff --git a/src/common/constants/strings/zh-TW.json b/src/common/constants/strings/zh-TW.json index 318cb145..818a3e56 100644 --- a/src/common/constants/strings/zh-TW.json +++ b/src/common/constants/strings/zh-TW.json @@ -48,6 +48,11 @@ "comments": "評論", "connection": "連接", "contactUs": "聯繫我們", + "displaySettings": "Display Settings", + "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality", + "displaySettingsDetailScreenImageQualityHigh": "High", + "displaySettingsDetailScreenImageQualityMedium": "Medium", + "displaySettingsIllustListColumns": "Illust List Columns", "donations": "捐贈", "emailVerificationPostComment": "發布評論需要先進行郵件驗證", "emailVerificationSend": "發送驗證郵件", @@ -232,4 +237,4 @@ "userNovels": "小說", "viewMore": "查看更多", "worksCount": "件作品" -} \ No newline at end of file +} diff --git a/src/common/constants/strings/zh.json b/src/common/constants/strings/zh.json index 164e901c..76257ffb 100644 --- a/src/common/constants/strings/zh.json +++ b/src/common/constants/strings/zh.json @@ -48,6 +48,11 @@ "comments": "评论", "connection": "连接", "contactUs": "联系我们", + "displaySettings": "Display Settings", + "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality", + "displaySettingsDetailScreenImageQualityHigh": "High", + "displaySettingsDetailScreenImageQualityMedium": "Medium", + "displaySettingsIllustListColumns": "Illust List Columns", "donations": "捐赠", "emailVerificationPostComment": "发布评论需要先进行邮件验证", "emailVerificationSend": "发送验证邮件", @@ -232,4 +237,4 @@ "userNovels": "小说", "viewMore": "查看更多", "worksCount": "件作品" -} \ No newline at end of file +} diff --git a/src/common/reducers/displaySettings.js b/src/common/reducers/displaySettings.js new file mode 100644 index 00000000..412cecda --- /dev/null +++ b/src/common/reducers/displaySettings.js @@ -0,0 +1,32 @@ +import { DISPLAY_SETTINGS } from '../constants/actionTypes'; +import { ILLUST_LIST_COLUMNS, IMAGE_QUALITY_LEVELS } from '../constants'; + +export default function displaySettings( + state = { + illustListColumns: ILLUST_LIST_COLUMNS['3'], + detailScreenImageQuality: IMAGE_QUALITY_LEVELS.MEDIUM, + }, + action = {}, +) { + switch (action.type) { + case DISPLAY_SETTINGS.SET: + return { + ...state, + illustListColumns: + action.payload.illustListColumns !== undefined + ? action.payload.illustListColumns + : state.illustListColumns, + detailScreenImageQuality: + action.payload.detailScreenImageQuality !== undefined + ? action.payload.detailScreenImageQuality + : state.detailScreenImageQuality, + }; + case DISPLAY_SETTINGS.RESTORE: + return { + ...state, + ...action.payload.state, + }; + default: + return state; + } +} diff --git a/src/common/reducers/index.js b/src/common/reducers/index.js index 9eb0c596..8e287164 100644 --- a/src/common/reducers/index.js +++ b/src/common/reducers/index.js @@ -69,6 +69,7 @@ import initialScreenSettings from './initialScreenSettings'; import novelSettings from './novelSettings'; import likeButtonSettings from './likeButtonSettings'; import readingSettings from './readingSettings'; +import displaySettings from './displaySettings'; import trendingSearchSettings from './trendingSearchSettings'; import i18n from './i18n'; import theme from './theme'; @@ -146,6 +147,7 @@ const rootReducer = combineReducers({ novelSettings, likeButtonSettings, readingSettings, + displaySettings, trendingSearchSettings, i18n, theme, diff --git a/src/common/store/configureStore.js b/src/common/store/configureStore.js index ef626682..bdb1bc6c 100644 --- a/src/common/store/configureStore.js +++ b/src/common/store/configureStore.js @@ -275,6 +275,7 @@ export default function configureStore() { 'novelSettings', 'likeButtonSettings', 'readingSettings', + 'displaySettings', 'trendingSearchSettings', 'entities', 'auth', diff --git a/src/components/IllustDetailContent.js b/src/components/IllustDetailContent.js index 7f32e243..acbf7f5e 100644 --- a/src/components/IllustDetailContent.js +++ b/src/components/IllustDetailContent.js @@ -216,11 +216,11 @@ class IllustDetailContent extends Component { }; renderItem = ({ item, index }) => { - const { onPressImage, onLongPressImage } = this.props; + const { onPressImage, onLongPressImage, imageQuality } = this.props; return ( { - const { item, onPressImage, onLongPressImage, theme } = this.props; + const { + item, + onPressImage, + onLongPressImage, + theme, + imageQuality, + } = this.props; if (isMute) { return ( globalStyleVariables.WINDOW_WIDTH ? globalStyleVariables.WINDOW_WIDTH @@ -363,6 +369,7 @@ export default withTheme( (m) => m.id === props.item.user.id, ), tags: getTagsWithStatus(state, props), + imageQuality: state.displaySettings.detailScreenImageQuality, }); }, searchHistoryActionCreators)(IllustDetailContent), ); diff --git a/src/components/IllustList.js b/src/components/IllustList.js index 78a8453a..4e53708a 100644 --- a/src/components/IllustList.js +++ b/src/components/IllustList.js @@ -7,6 +7,7 @@ import { Platform, DeviceEventEmitter, } from 'react-native'; +import { connect } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; import { useTheme } from 'react-native-paper'; import IllustItem from './IllustItem'; @@ -14,8 +15,6 @@ import Loader from './Loader'; import { globalStyles, globalStyleVariables } from '../styles'; import { SCREENS } from '../common/constants'; -const ILLUST_COLUMNS = 3; - const styles = StyleSheet.create({ footer: { marginBottom: 20, @@ -41,13 +40,13 @@ class IllustList extends Component { } renderItem = ({ item, index }) => { - const { hideBookmarkButton } = this.props; + const { hideBookmarkButton, illustColumns } = this.props; return ( this.handleOnPressItem(item, index)} /> @@ -102,7 +101,9 @@ class IllustList extends Component { maxItems, theme, innerRef, + illustColumns, } = this.props; + return ( item.id.toString()} listKey={listKey} renderItem={this.renderItem} getItemLayout={(data, index) => ({ - length: globalStyleVariables.WINDOW_WIDTH / ILLUST_COLUMNS, + length: globalStyleVariables.WINDOW_WIDTH / illustColumns, offset: - (globalStyleVariables.WINDOW_WIDTH / ILLUST_COLUMNS) * index, + (globalStyleVariables.WINDOW_WIDTH / illustColumns) * index, index, })} removeClippedSubviews={Platform.OS === 'android'} @@ -159,11 +161,20 @@ class IllustList extends Component { } } +const ConnectedIllustList = connect( + (state) => { + return { illustColumns: state.displaySettings.illustListColumns }; + }, + null, + null, + { forwardRef: true }, +)(IllustList); + export default forwardRef((props, ref) => { const theme = useTheme(); const navigation = useNavigation(); return ( - { + const dispatch = useDispatch(); + const { i18n } = useLocalization(); + + const settingsList = [ + { + value: IMAGE_QUALITY_LEVELS.MEDIUM, + label: i18n.displaySettingsDetailScreenImageQualityMedium, + }, + { + value: IMAGE_QUALITY_LEVELS.HIGH, + label: i18n.displaySettingsDetailScreenImageQualityHigh, + }, + ]; + + const handleOnCancelPickerDialog = () => { + dispatch(closeModal()); + }; + + const handleOnOkPickerDialog = (value) => { + const payload = { + detailScreenImageQuality: value, + }; + dispatch(setSettings(payload)); + handleOnCancelPickerDialog(); + }; + + return ( + + ); +}; + +export default DetailScreenImageQualitySettingsModal; diff --git a/src/containers/IllustListColumnsSettingsModal.js b/src/containers/IllustListColumnsSettingsModal.js new file mode 100644 index 00000000..990b73ad --- /dev/null +++ b/src/containers/IllustListColumnsSettingsModal.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { useDispatch } from 'react-redux'; +import { useLocalization } from '../components/Localization'; +import SingleChoiceDialog from '../components/SingleChoiceDialog'; +import { closeModal } from '../common/actions/modal'; +import { setSettings } from '../common/actions/displaySettings'; +import { ILLUST_LIST_COLUMNS } from '../common/constants'; + +const IllustListColumnsSettingsModal = ({ illustListColumns }) => { + const dispatch = useDispatch(); + const { i18n } = useLocalization(); + + const settingsList = []; + Object.keys(ILLUST_LIST_COLUMNS).forEach((key) => + settingsList.push({ + value: ILLUST_LIST_COLUMNS[key], + label: key.toString(), + }), + ); + + const handleOnCancelPickerDialog = () => { + dispatch(closeModal()); + }; + + const handleOnOkPickerDialog = (value) => { + const payload = { + illustListColumns: value, + }; + dispatch(setSettings(payload)); + handleOnCancelPickerDialog(); + }; + + return ( + + ); +}; + +export default IllustListColumnsSettingsModal; diff --git a/src/containers/ModalRoot.js b/src/containers/ModalRoot.js index 8a054936..a149b05b 100644 --- a/src/containers/ModalRoot.js +++ b/src/containers/ModalRoot.js @@ -9,6 +9,8 @@ import LanguageSettingsModal from './LanguageSettingsModal'; import SaveImageFileNameModal from './SaveImageFileNameModal'; import LikeButtonSettingsModal from './LikeButtonSettingsModal'; import ReadingDirectionSettingsModal from './ReadingDirectionSettingsModal'; +import IllustListColumnsSettingsModal from './IllustListColumnsSettingsModal'; +import DetailScreenImageQualitySettingsModal from './DetailScreenImageQualitySettingsModal'; const MODAL_COMPONENTS = { FOLLOW: FollowModal, @@ -20,6 +22,8 @@ const MODAL_COMPONENTS = { SAVE_IMAGE_FILE_NAME_FORMAT: SaveImageFileNameModal, LIKE_BUTTON_SETTINGS: LikeButtonSettingsModal, READING_DIRECTION_SETTINGS: ReadingDirectionSettingsModal, + ILLUST_LIST_COLUMNS_SETTINGS: IllustListColumnsSettingsModal, + DETAIL_SCREEN_IMAGE_QUALITY_SETTINGS: DetailScreenImageQualitySettingsModal, }; const ModalRoot = ({ modal: { modalType, modalProps } }) => { diff --git a/src/navigations/AppNavigator.js b/src/navigations/AppNavigator.js index 9583fed3..76eb907b 100644 --- a/src/navigations/AppNavigator.js +++ b/src/navigations/AppNavigator.js @@ -39,6 +39,7 @@ import BrowsingHistory from '../screens/MyPage/BrowsingHistory/BrowsingHistory'; import Settings from '../screens/MyPage/Settings'; import AdvanceAccountSettings from '../screens/MyPage/AccountSettings/AdvanceAccountSettings'; import ReadingSettings from '../screens/MyPage/ReadingSettings'; +import DisplaySettings from '../screens/MyPage/DisplaySettings'; import SaveImageSettings from '../screens/MyPage/SaveImageSettings'; import LikeButtonSettings from '../screens/MyPage/LikeButtonSettings'; import TrendingSearchSettings from '../screens/MyPage/TrendingSearchSettings'; @@ -364,6 +365,14 @@ const AppNavigator = ({ initialRouteName }) => { headerStyle, }} /> + { + const dispatch = useDispatch(); + const { illustListColumns, detailScreenImageQuality } = useSelector( + (state) => state.displaySettings, + ); + const theme = useTheme(); + const { i18n } = useLocalization(); + + const handleOnPressOpenIllustListColumnsSettingsModal = () => { + dispatch( + openModal(MODAL_TYPES.ILLUST_LIST_COLUMNS_SETTINGS, { + illustListColumns, + type: WORK_TYPES.IMAGE, + }), + ); + }; + + const handleOnPressOpenDetailScreenImageQualitySettingsModal = () => { + dispatch( + openModal(MODAL_TYPES.DETAIL_SCREEN_IMAGE_QUALITY_SETTINGS, { + detailScreenImageQuality, + type: WORK_TYPES.NOVEL, + }), + ); + }; + + const mapDetailScreenImageQualityName = (imageQuality) => { + switch (imageQuality) { + case IMAGE_QUALITY_LEVELS.MEDIUM: + return i18n.displaySettingsDetailScreenImageQualityMedium; + case IMAGE_QUALITY_LEVELS.HIGH: + return i18n.displaySettingsDetailScreenImageQualityHigh; + default: + return ''; + } + }; + + return ( + + + + + ); +}; + +export default DisplaySettings; diff --git a/src/screens/MyPage/Settings.js b/src/screens/MyPage/Settings.js index 04c3ed28..9be7c07e 100644 --- a/src/screens/MyPage/Settings.js +++ b/src/screens/MyPage/Settings.js @@ -30,6 +30,10 @@ const settingsList = [ id: 'readingSettings', title: 'readingSettings', }, + { + id: 'displaySettings', + title: 'displaySettings', + }, { id: 'saveImageSettings', title: 'saveImageSettings', @@ -157,6 +161,10 @@ class Settings extends Component { navigate(SCREENS.ReadingSettings); break; } + case 'displaySettings': { + navigate(SCREENS.DisplaySettings); + break; + } case 'saveImageSettings': { navigate(SCREENS.SaveImageSettings); break; From a24428e7b7a28e2313c7cf608471d7a196c43fb2 Mon Sep 17 00:00:00 2001 From: pappnu Date: Thu, 18 Feb 2021 20:58:52 +0200 Subject: [PATCH 2/2] Removed leftover console.log --- src/common/constants/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common/constants/index.js b/src/common/constants/index.js index f22439c5..3827406b 100644 --- a/src/common/constants/index.js +++ b/src/common/constants/index.js @@ -175,7 +175,6 @@ export const READING_DIRECTION_TYPES = { export const ILLUST_LIST_COLUMNS = {}; for (let i = 1; i < 7; i += 1) { - console.log(i); ILLUST_LIST_COLUMNS[i.toString()] = i; }