Skip to content

[CHORE] BackdropOpacity based on themes #2863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 5 commits into from
Feb 19, 2021
Merged

[CHORE] BackdropOpacity based on themes #2863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bddc6a5
Added backdropOpacity based on theme
gerzonc Feb 2, 2021
a74ea68
Merge branch 'develop' into improve.backdrop-opacity-themes
diegolmello Feb 9, 2021
f60c0db
Updated ActionSheet, ReactionsModal, ReactionPicker and Sidebar
gerzonc Feb 11, 2021
44eed2e
Updated MultiSelect
gerzonc Feb 11, 2021
e935cae
Merge branch 'develop' into improve.backdrop-opacity-themes
diegolmello Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/constants/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const themes = {
passcodeDotFull: '#6C727A',
previewBackground: '#1F2329',
previewTintColor: '#ffffff',
backdropOpacity: 0.3,
...mentions
},
dark: {
Expand Down Expand Up @@ -109,6 +110,7 @@ export const themes = {
passcodeDotFull: '#6C727A',
previewBackground: '#030b1b',
previewTintColor: '#ffffff',
backdropOpacity: 0.9,
...mentions
},
black: {
Expand Down Expand Up @@ -155,6 +157,7 @@ export const themes = {
passcodeDotFull: '#6C727A',
previewBackground: '#000000',
previewTintColor: '#ffffff',
backdropOpacity: 0.9,
...mentions
}
};
2 changes: 1 addition & 1 deletion app/containers/ActionSheet/ActionSheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});

Expand Down
2 changes: 1 addition & 1 deletion app/containers/ReactionsModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']}
>
Expand Down
4 changes: 2 additions & 2 deletions app/containers/UIKit/MultiSelect/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 0 additions & 4 deletions app/containers/UIKit/MultiSelect/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ export default StyleSheet.create({
alignItems: 'center',
justifyContent: 'flex-end'
},
backdrop: {
...StyleSheet.absoluteFill,
opacity: 0.3
},
modal: {
height: 300,
width: '100%',
Expand Down
32 changes: 19 additions & 13 deletions app/stacks/InsideStack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
Expand Down
8 changes: 4 additions & 4 deletions app/views/DirectoryView/Options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
10 changes: 7 additions & 3 deletions app/views/RoomView/ReactionPicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand All @@ -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;
Expand All @@ -58,6 +61,7 @@ class ReactionPicker extends React.Component {
onBackButtonPress={reactionClose}
animationIn='fadeIn'
animationOut='fadeOut'
backdropOpacity={themes[theme].backdropOpacity}
>
<View
style={[
Expand Down Expand Up @@ -87,4 +91,4 @@ const mapStateToProps = state => ({
isMasterDetail: state.app.isMasterDetail
});

export default connect(mapStateToProps)(ReactionPicker);
export default connect(mapStateToProps)(withTheme(ReactionPicker));
1 change: 1 addition & 0 deletions app/views/RoomView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion app/views/RoomsListView/ServerDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down
8 changes: 4 additions & 4 deletions app/views/RoomsListView/SortDropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down
2 changes: 1 addition & 1 deletion app/views/ThreadMessagesView/Dropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down