diff --git a/app/containers/ActionSheet/styles.js b/app/containers/ActionSheet/styles.js index d87c35f12..76078233b 100644 --- a/app/containers/ActionSheet/styles.js +++ b/app/containers/ActionSheet/styles.js @@ -29,7 +29,8 @@ export default StyleSheet.create({ }, handle: { justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', + paddingBottom: 8 }, handleIndicator: { width: 40, diff --git a/app/containers/MessageActions/Header.js b/app/containers/MessageActions/Header.js index 5db34acec..7847069e1 100644 --- a/app/containers/MessageActions/Header.js +++ b/app/containers/MessageActions/Header.js @@ -14,17 +14,20 @@ import { Button } from '../ActionSheet'; import { useDimensions } from '../../dimensions'; export const HEADER_HEIGHT = 36; +const ITEM_SIZE = 36; +const CONTAINER_MARGIN = 8; +const ITEM_MARGIN = 8; const styles = StyleSheet.create({ container: { alignItems: 'center', - marginHorizontal: 8 + marginHorizontal: CONTAINER_MARGIN }, headerItem: { - height: 36, - width: 36, - borderRadius: 20, - marginHorizontal: 8, + height: ITEM_SIZE, + width: ITEM_SIZE, + borderRadius: ITEM_SIZE / 2, + marginHorizontal: ITEM_MARGIN, justifyContent: 'center', alignItems: 'center' }, @@ -84,7 +87,7 @@ HeaderFooter.propTypes = { }; const Header = React.memo(({ - handleReaction, server, message, theme + handleReaction, server, message, isMasterDetail, theme }) => { const [items, setItems] = useState([]); const { width, height } = useDimensions(); @@ -96,8 +99,8 @@ const Header = React.memo(({ let freqEmojis = await freqEmojiCollection.query().fetch(); const isLandscape = width > height; - const size = isLandscape ? width / 2 : width; - const quantity = (size / 50) - 1; + const size = (isLandscape || isMasterDetail ? width / 2 : width) - (CONTAINER_MARGIN * 2); + const quantity = (size / (ITEM_SIZE + (ITEM_MARGIN * 2))) - 1; freqEmojis = freqEmojis.concat(DEFAULT_EMOJIS).slice(0, quantity); setItems(freqEmojis); @@ -135,6 +138,7 @@ Header.propTypes = { handleReaction: PropTypes.func, server: PropTypes.string, message: PropTypes.object, + isMasterDetail: PropTypes.bool, theme: PropTypes.string }; export default withTheme(Header); diff --git a/app/containers/MessageActions/index.js b/app/containers/MessageActions/index.js index 4ba286db9..afed3f487 100644 --- a/app/containers/MessageActions/index.js +++ b/app/containers/MessageActions/index.js @@ -32,7 +32,8 @@ const MessageActions = React.memo(forwardRef(({ Message_AllowEditing_BlockEditInMinutes, Message_AllowPinning, Message_AllowStarring, - Message_Read_Receipt_Store_Users + Message_Read_Receipt_Store_Users, + isMasterDetail }, ref) => { let permissions = {}; const { showActionSheet, hideActionSheet } = useActionSheet(); @@ -377,6 +378,7 @@ const MessageActions = React.memo(forwardRef(({
) : null) @@ -412,7 +414,8 @@ const mapStateToProps = state => ({ Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes, Message_AllowPinning: state.settings.Message_AllowPinning, 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);