Unverified Commit 4c148bde authored by Gerzon Z's avatar Gerzon Z Committed by GitHub
Browse files

[CHORE] BackdropOpacity based on themes (#2863)



* Added backdropOpacity based on theme

* Updated ActionSheet, ReactionsModal, ReactionPicker and Sidebar

* Updated MultiSelect
Co-authored-by: default avatarDiego Mello <diegolmello@gmail.com>
parent 9a8047e6
......@@ -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
}
};
......@@ -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
});
......
......@@ -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']}
>
......
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(({
>
<TouchableWithoutFeedback onPress={onHide}>
<View style={styles.container}>
<View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor }]} />
<View style={{ ...StyleSheet.absoluteFill, opacity: themes[theme].backdropOpacity, backgroundColor: themes[theme].backdropColor }} />
<KeyboardAvoidingView style={styles.keyboardView} behavior={behavior}>
<Animated.View style={[styles.animatedContent, { transform: [{ translateY }] }]}>
{showContent ? renderContent() : null}
......
......@@ -8,10 +8,6 @@ export default StyleSheet.create({
alignItems: 'center',
justifyContent: 'flex-end'
},
backdrop: {
...StyleSheet.absoluteFill,
opacity: 0.3
},
modal: {
height: 300,
width: '100%',
......
......@@ -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 = () => (
<Drawer.Navigator
drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
screenOptions={{ swipeEnabled: false }}
drawerType='back'
>
<Drawer.Screen name='ChatsStackNavigator' component={ChatsStackNavigator} />
<Drawer.Screen name='ProfileStackNavigator' component={ProfileStackNavigator} />
<Drawer.Screen name='SettingsStackNavigator' component={SettingsStackNavigator} />
<Drawer.Screen name='AdminPanelStackNavigator' component={AdminPanelStackNavigator} />
</Drawer.Navigator>
);
const DrawerNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<Drawer.Navigator
drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
screenOptions={{ swipeEnabled: false }}
drawerType='back'
overlayColor={`rgba(0,0,0,${ themes[theme].backdropOpacity })`}
>
<Drawer.Screen name='ChatsStackNavigator' component={ChatsStackNavigator} />
<Drawer.Screen name='ProfileStackNavigator' component={ProfileStackNavigator} />
<Drawer.Screen name='SettingsStackNavigator' component={SettingsStackNavigator} />
<Drawer.Screen name='AdminPanelStackNavigator' component={AdminPanelStackNavigator} />
</Drawer.Navigator>
);
};
// NewMessageStackNavigator
const NewMessageStack = createStackNavigator();
......
......@@ -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 (
<>
<TouchableWithoutFeedback onPress={this.close}>
......
......@@ -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}
>
<View
style={[
......@@ -87,4 +91,4 @@ const mapStateToProps = state => ({
isMasterDetail: state.app.isMasterDetail
});
export default connect(mapStateToProps)(ReactionPicker);
export default connect(mapStateToProps)(withTheme(ReactionPicker));
......@@ -1084,6 +1084,7 @@ class RoomView extends React.Component {
reactionClose={this.onReactionClose}
width={width}
height={height}
theme={theme}
/>
<UploadProgress rid={this.rid} user={user} baseUrl={baseUrl} width={width} />
<ReactionsModal
......
......@@ -225,7 +225,7 @@ class ServerDropdown extends Component {
});
const backdropOpacity = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.6]
outputRange: [0, themes[theme].backdropOpacity]
});
return (
<>
......
......@@ -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 (
<>
......
......@@ -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 (
<>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment