From 4c148bde3bc77ea0b4586d11266d7f5424f093b9 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Fri, 19 Feb 2021 14:05:47 -0400 Subject: [PATCH] [CHORE] BackdropOpacity based on themes (#2863) * Added backdropOpacity based on theme * Updated ActionSheet, ReactionsModal, ReactionPicker and Sidebar * Updated MultiSelect Co-authored-by: Diego Mello --- app/constants/colors.js | 3 ++ app/containers/ActionSheet/ActionSheet.js | 2 +- app/containers/ReactionsModal.js | 2 +- app/containers/UIKit/MultiSelect/index.js | 4 +-- app/containers/UIKit/MultiSelect/styles.js | 4 --- app/stacks/InsideStack.js | 32 +++++++++++-------- app/views/DirectoryView/Options.js | 8 ++--- app/views/RoomView/ReactionPicker.js | 10 ++++-- app/views/RoomView/index.js | 1 + app/views/RoomsListView/ServerDropdown.js | 2 +- app/views/RoomsListView/SortDropdown/index.js | 8 ++--- .../ThreadMessagesView/Dropdown/index.js | 2 +- 12 files changed, 44 insertions(+), 34 deletions(-) diff --git a/app/constants/colors.js b/app/constants/colors.js index b1fdcd7f3..f29f03d1d 100644 --- a/app/constants/colors.js +++ b/app/constants/colors.js @@ -63,6 +63,7 @@ export const themes = { passcodeDotFull: '#6C727A', previewBackground: '#1F2329', previewTintColor: '#ffffff', + backdropOpacity: 0.3, ...mentions }, dark: { @@ -109,6 +110,7 @@ export const themes = { passcodeDotFull: '#6C727A', previewBackground: '#030b1b', previewTintColor: '#ffffff', + backdropOpacity: 0.9, ...mentions }, black: { @@ -155,6 +157,7 @@ export const themes = { passcodeDotFull: '#6C727A', previewBackground: '#000000', previewTintColor: '#ffffff', + backdropOpacity: 0.9, ...mentions } }; diff --git a/app/containers/ActionSheet/ActionSheet.js b/app/containers/ActionSheet/ActionSheet.js index 81b3496ae..af98a75ce 100644 --- a/app/containers/ActionSheet/ActionSheet.js +++ b/app/containers/ActionSheet/ActionSheet.js @@ -147,7 +147,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { const animatedPosition = React.useRef(new Value(0)); const opacity = interpolate(animatedPosition.current, { inputRange: [0, 1], - outputRange: [0, 0.7], + outputRange: [0, themes[theme].backdropOpacity], extrapolate: Extrapolate.CLAMP }); diff --git a/app/containers/ReactionsModal.js b/app/containers/ReactionsModal.js index f4f1889d9..c828be0cd 100644 --- a/app/containers/ReactionsModal.js +++ b/app/containers/ReactionsModal.js @@ -129,7 +129,7 @@ const ReactionsModal = React.memo(({ isVisible={isVisible} onBackdropPress={onClose} onBackButtonPress={onClose} - backdropOpacity={0.8} + backdropOpacity={themes[theme].backdropOpacity} onSwipeComplete={onClose} swipeDirection={['up', 'left', 'right', 'down']} > diff --git a/app/containers/UIKit/MultiSelect/index.js b/app/containers/UIKit/MultiSelect/index.js index b88330e4e..246a44ec0 100644 --- a/app/containers/UIKit/MultiSelect/index.js +++ b/app/containers/UIKit/MultiSelect/index.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { - View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing + View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; @@ -172,7 +172,7 @@ export const MultiSelect = React.memo(({ > - + {showContent ? renderContent() : null} diff --git a/app/containers/UIKit/MultiSelect/styles.js b/app/containers/UIKit/MultiSelect/styles.js index f261932c3..8bc2c2124 100644 --- a/app/containers/UIKit/MultiSelect/styles.js +++ b/app/containers/UIKit/MultiSelect/styles.js @@ -8,10 +8,6 @@ export default StyleSheet.create({ alignItems: 'center', justifyContent: 'flex-end' }, - backdrop: { - ...StyleSheet.absoluteFill, - opacity: 0.3 - }, modal: { height: 300, width: '100%', diff --git a/app/stacks/InsideStack.js b/app/stacks/InsideStack.js index 75d01708e..a0af96177 100644 --- a/app/stacks/InsideStack.js +++ b/app/stacks/InsideStack.js @@ -31,6 +31,7 @@ import PickerView from '../views/PickerView'; import ThreadMessagesView from '../views/ThreadMessagesView'; import MarkdownTableView from '../views/MarkdownTableView'; import ReadReceiptsView from '../views/ReadReceiptView'; +import { themes } from '../constants/colors'; // Profile Stack import ProfileView from '../views/ProfileView'; @@ -280,19 +281,24 @@ const AdminPanelStackNavigator = () => { // DrawerNavigator const Drawer = createDrawerNavigator(); -const DrawerNavigator = () => ( - } - drawerPosition={I18nManager.isRTL ? 'right' : 'left'} - screenOptions={{ swipeEnabled: false }} - drawerType='back' - > - - - - - -); +const DrawerNavigator = () => { + const { theme } = React.useContext(ThemeContext); + + return ( + } + drawerPosition={I18nManager.isRTL ? 'right' : 'left'} + screenOptions={{ swipeEnabled: false }} + drawerType='back' + overlayColor={`rgba(0,0,0,${ themes[theme].backdropOpacity })`} + > + + + + + + ); +}; // NewMessageStackNavigator const NewMessageStack = createStackNavigator(); diff --git a/app/views/DirectoryView/Options.js b/app/views/DirectoryView/Options.js index ab69b11f4..ad8de1da1 100644 --- a/app/views/DirectoryView/Options.js +++ b/app/views/DirectoryView/Options.js @@ -84,13 +84,13 @@ export default class DirectoryOptions extends PureComponent { inputRange: [0, 1], outputRange: [-326, 0] }); - const backdropOpacity = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [0, 0.3] - }); const { globalUsers, toggleWorkspace, isFederationEnabled, theme } = this.props; + const backdropOpacity = this.animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [0, themes[theme].backdropOpacity] + }); return ( <> diff --git a/app/views/RoomView/ReactionPicker.js b/app/views/RoomView/ReactionPicker.js index 556d18256..9e9c470f8 100644 --- a/app/views/RoomView/ReactionPicker.js +++ b/app/views/RoomView/ReactionPicker.js @@ -7,6 +7,8 @@ import Modal from 'react-native-modal'; import EmojiPicker from '../../containers/EmojiPicker'; import styles from './styles'; import { isAndroid } from '../../utils/deviceInfo'; +import { themes } from '../../constants/colors'; +import { withTheme } from '../../theme'; const margin = isAndroid ? 40 : 20; const maxSize = 400; @@ -20,7 +22,8 @@ class ReactionPicker extends React.Component { reactionClose: PropTypes.func, onEmojiSelected: PropTypes.func, width: PropTypes.number, - height: PropTypes.number + height: PropTypes.number, + theme: PropTypes.string }; shouldComponentUpdate(nextProps) { @@ -38,7 +41,7 @@ class ReactionPicker extends React.Component { render() { const { - width, height, show, baseUrl, reactionClose, isMasterDetail + width, height, show, baseUrl, reactionClose, isMasterDetail, theme } = this.props; let widthStyle = width - margin; @@ -58,6 +61,7 @@ class ReactionPicker extends React.Component { onBackButtonPress={reactionClose} animationIn='fadeIn' animationOut='fadeOut' + backdropOpacity={themes[theme].backdropOpacity} > ({ isMasterDetail: state.app.isMasterDetail }); -export default connect(mapStateToProps)(ReactionPicker); +export default connect(mapStateToProps)(withTheme(ReactionPicker)); diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 0ef67a80a..e85784958 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -1084,6 +1084,7 @@ class RoomView extends React.Component { reactionClose={this.onReactionClose} width={width} height={height} + theme={theme} /> diff --git a/app/views/RoomsListView/SortDropdown/index.js b/app/views/RoomsListView/SortDropdown/index.js index cb85edcd5..06a398a82 100644 --- a/app/views/RoomsListView/SortDropdown/index.js +++ b/app/views/RoomsListView/SortDropdown/index.js @@ -124,13 +124,13 @@ class Sort extends PureComponent { inputRange: [0, 1], outputRange: [-326, heightDestination] }); - const backdropOpacity = this.animatedValue.interpolate({ - inputRange: [0, 1], - outputRange: [0, 0.3] - }); const { sortBy, groupByType, showFavorites, showUnread, theme } = this.props; + const backdropOpacity = this.animatedValue.interpolate({ + inputRange: [0, 1], + outputRange: [0, themes[theme].backdropOpacity] + }); return ( <> diff --git a/app/views/ThreadMessagesView/Dropdown/index.js b/app/views/ThreadMessagesView/Dropdown/index.js index 49533e4be..fdf1acba7 100644 --- a/app/views/ThreadMessagesView/Dropdown/index.js +++ b/app/views/ThreadMessagesView/Dropdown/index.js @@ -68,7 +68,7 @@ class Dropdown extends React.Component { }); const backdropOpacity = this.animatedValue.interpolate({ inputRange: [0, 1], - outputRange: [0, 0.3] + outputRange: [0, themes[theme].backdropOpacity] }); return ( <>