[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:
parent
afb0707028
commit
fc8432488e
|
@ -29,7 +29,8 @@ export default StyleSheet.create({
|
|||
},
|
||||
handle: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
alignItems: 'center',
|
||||
paddingBottom: 8
|
||||
},
|
||||
handleIndicator: {
|
||||
width: 40,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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(({
|
|||
<Header
|
||||
server={server}
|
||||
handleReaction={handleReaction}
|
||||
isMasterDetail={isMasterDetail}
|
||||
message={message}
|
||||
/>
|
||||
) : 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);
|
||||
|
|
Loading…
Reference in New Issue