verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FIX] Action sheet cutting emojis on the header (#2263) 

* [FIX] Action sheet cutting emojis on the header

* fix tablet case

Co-authored-by: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>
This commit is contained in:
Diego Mello 2020-07-08 17:45:13 -03:00
parent 3d987cc988
commit 118b1352c4
3 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/containers/ActionSheet/styles.js
View File

@ -29,7 +29,8 @@ export default StyleSheet.create({
}, },
handle: { handle: {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center',
paddingBottom: 8
}, },
handleIndicator: { handleIndicator: {
width: 40, width: 40,

20
app/containers/MessageActions/Header.js
View File

@ -14,17 +14,20 @@ import { Button } from '../ActionSheet';
import { useDimensions } from '../../dimensions'; import { useDimensions } from '../../dimensions';
export const HEADER_HEIGHT = 36; export const HEADER_HEIGHT = 36;
const ITEM_SIZE = 36;
const CONTAINER_MARGIN = 8;
const ITEM_MARGIN = 8;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
alignItems: 'center', alignItems: 'center',
marginHorizontal: 8 marginHorizontal: CONTAINER_MARGIN
}, },
headerItem: { headerItem: {
height: 36, height: ITEM_SIZE,
width: 36, width: ITEM_SIZE,
borderRadius: 20, borderRadius: ITEM_SIZE / 2,
marginHorizontal: 8, marginHorizontal: ITEM_MARGIN,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center'
}, },
@ -84,7 +87,7 @@ HeaderFooter.propTypes = {
}; };
const Header = React.memo(({ const Header = React.memo(({
handleReaction, server, message, theme handleReaction, server, message, isMasterDetail, theme
}) => { }) => {
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
const { width, height } = useDimensions(); const { width, height } = useDimensions();
@ -96,8 +99,8 @@ const Header = React.memo(({
let freqEmojis = await freqEmojiCollection.query().fetch(); let freqEmojis = await freqEmojiCollection.query().fetch();
const isLandscape = width > height; const isLandscape = width > height;
const size = isLandscape ? width / 2 : width; const size = (isLandscape || isMasterDetail ? width / 2 : width) - (CONTAINER_MARGIN * 2);
const quantity = (size / 50) - 1; const quantity = (size / (ITEM_SIZE + (ITEM_MARGIN * 2))) - 1;
freqEmojis = freqEmojis.concat(DEFAULT_EMOJIS).slice(0, quantity); freqEmojis = freqEmojis.concat(DEFAULT_EMOJIS).slice(0, quantity);
setItems(freqEmojis); setItems(freqEmojis);
@ -135,6 +138,7 @@ Header.propTypes = {
handleReaction: PropTypes.func, handleReaction: PropTypes.func,
server: PropTypes.string, server: PropTypes.string,
message: PropTypes.object, message: PropTypes.object,
isMasterDetail: PropTypes.bool,
theme: PropTypes.string theme: PropTypes.string
}; };
export default withTheme(Header); export default withTheme(Header);

7
app/containers/MessageActions/index.js
View File

@ -32,7 +32,8 @@ const MessageActions = React.memo(forwardRef(({
Message_AllowEditing_BlockEditInMinutes, Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning, Message_AllowPinning,
Message_AllowStarring, Message_AllowStarring,
Message_Read_Receipt_Store_Users Message_Read_Receipt_Store_Users,
isMasterDetail
}, ref) => { }, ref) => {
let permissions = {}; let permissions = {};
const { showActionSheet, hideActionSheet } = useActionSheet(); const { showActionSheet, hideActionSheet } = useActionSheet();
@ -377,6 +378,7 @@ const MessageActions = React.memo(forwardRef(({
<Header <Header
server={server} server={server}
handleReaction={handleReaction} handleReaction={handleReaction}
isMasterDetail={isMasterDetail}
message={message} message={message}
/> />
) : null) ) : null)
@ -412,7 +414,8 @@ const mapStateToProps = state => ({
Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes, Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning: state.settings.Message_AllowPinning, Message_AllowPinning: state.settings.Message_AllowPinning,
Message_AllowStarring: state.settings.Message_AllowStarring, Message_AllowStarring: state.settings.Message_AllowStarring,
Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users,
isMasterDetail: state.app.isMasterDetail
}); });
export default connect(mapStateToProps, null, null, { forwardRef: true })(MessageActions); export default connect(mapStateToProps, null, null, { forwardRef: true })(MessageActions);