diff --git a/src/CONST.js b/src/CONST.js index 156df68f4836..8997b0b285fd 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -829,6 +829,7 @@ const CONST = { WIDTH: 320, HEIGHT: 416, }, + DESKTOP_HEADER_PADDING: 12, CATEGORY_SHORTCUT_BAR_HEIGHT: 32, SMALL_EMOJI_PICKER_SIZE: { WIDTH: '100%', diff --git a/src/components/HeaderWithBackButton.js b/src/components/HeaderWithBackButton.js index dab5f024a9e6..e82251542987 100755 --- a/src/components/HeaderWithBackButton.js +++ b/src/components/HeaderWithBackButton.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {View, Keyboard} from 'react-native'; +import _ from 'underscore'; import styles from '../styles/styles'; import Header from './Header'; import Navigation from '../libs/Navigation/Navigation'; @@ -18,6 +19,7 @@ import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; import AvatarWithDisplayName from './AvatarWithDisplayName'; import iouReportPropTypes from '../pages/iouReportPropTypes'; import participantPropTypes from './participantPropTypes'; +import CONST from '../CONST'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import PinButton from './PinButton'; @@ -66,6 +68,12 @@ const propTypes = { left: PropTypes.number, }), + /** The anchor alignment of the menu */ + threeDotsAnchorAlignment: PropTypes.shape({ + horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), + vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), + }), + /** Whether we should show a close button */ shouldShowCloseButton: PropTypes.bool, @@ -135,6 +143,10 @@ const defaultProps = { vertical: 0, horizontal: 0, }, + threeDotsAnchorAlignment: { + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }, }; class HeaderWithBackButton extends Component { @@ -233,6 +245,7 @@ class HeaderWithBackButton extends Component { menuItems={this.props.threeDotsMenuItems} onIconPress={this.props.onThreeDotsButtonPress} anchorPosition={this.props.threeDotsAnchorPosition} + anchorAlignment={this.props.threeDotsAnchorAlignment} /> )} diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 17982c0d5684..330a6a8b61f5 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -64,7 +64,7 @@ const PopoverMenu = (props) => { return ( { diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index b395d4dcb388..5217ca8441a1 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; +import _ from 'underscore'; import Icon from '../Icon'; import PopoverMenu from '../PopoverMenu'; import styles from '../../styles/styles'; @@ -8,6 +9,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Tooltip from '../Tooltip'; import * as Expensicons from '../Icon/Expensicons'; import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes'; +import CONST from '../../CONST'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; const propTypes = { @@ -39,6 +41,12 @@ const propTypes = { bottom: PropTypes.number, left: PropTypes.number, }).isRequired, + + /** The anchor alignment of the menu */ + anchorAlignment: PropTypes.shape({ + horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), + vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), + }), }; const defaultProps = { @@ -47,6 +55,10 @@ const defaultProps = { iconStyles: [], icon: Expensicons.ThreeDots, onIconPress: () => {}, + anchorAlignment: { + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, + }, }; class ThreeDotsMenu extends Component { @@ -97,6 +109,7 @@ class ThreeDotsMenu extends Component { onClose={this.hidePopoverMenu} isVisible={this.state.isPopupMenuVisible} anchorPosition={this.props.anchorPosition} + anchorAlignment={this.props.anchorAlignment} onItemSelected={this.hidePopoverMenu} menuItems={this.props.menuItems} /> diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index b6c3be67d9e9..9d0a83855be0 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -93,7 +93,7 @@ const ProfilePage = (props) => { onImageSelected={PersonalDetails.updateAvatar} onImageRemoved={PersonalDetails.deleteAvatar} anchorPosition={styles.createMenuPositionProfile(props.windowWidth)} - anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} + anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} size={CONST.AVATAR_SIZE.LARGE} pendingAction={lodashGet(props.currentUserPersonalDetails, 'pendingFields.avatar', null)} errors={lodashGet(props.currentUserPersonalDetails, 'errorFields.avatar', null)} diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index 94ba1d835b50..333e7fb87076 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -123,7 +123,7 @@ function WorkspaceSettingsPage(props) { fallbackIcon={Expensicons.FallbackWorkspaceAvatar} style={[styles.mb3]} anchorPosition={styles.createMenuPositionProfile(props.windowWidth)} - anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} + anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} isUsingDefaultAvatar={!lodashGet(props.policy, 'avatar', null)} onImageSelected={(file) => Policy.updateWorkspaceAvatar(lodashGet(props.policy, 'id', ''), file)} onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(props.policy, 'id', ''))} diff --git a/src/styles/getPopOverVerticalOffset/index.desktop.js b/src/styles/getPopOverVerticalOffset/index.desktop.js new file mode 100644 index 000000000000..bd58266d0bd0 --- /dev/null +++ b/src/styles/getPopOverVerticalOffset/index.desktop.js @@ -0,0 +1,13 @@ +import CONST from '../../CONST'; + +/** + * Adds the header padding with vertical offset on desktop + * @param {Number} vertical + * @returns {Object} + */ +export default (vertical) => ({ + // We add CONST.DESKTOP_HEADER_GAP on desktop which we + // need to add to vertical offset to have proper vertical + // offset on desktop + vertical: vertical + CONST.DESKTOP_HEADER_PADDING, +}); diff --git a/src/styles/getPopOverVerticalOffset/index.js b/src/styles/getPopOverVerticalOffset/index.js new file mode 100644 index 000000000000..2e7c4fbc07ff --- /dev/null +++ b/src/styles/getPopOverVerticalOffset/index.js @@ -0,0 +1 @@ +export default (vertical) => ({vertical}); diff --git a/src/styles/styles.js b/src/styles/styles.js index 70cfac3de847..b093876e1496 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -18,6 +18,7 @@ import writingDirection from './utilities/writingDirection'; import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles'; import pointerEventsNone from './pointerEventsNone'; import pointerEventsAuto from './pointerEventsAuto'; +import getPopOverVerticalOffset from './getPopOverVerticalOffset'; import overflowXHidden from './overflowXHidden'; import CONST from '../CONST'; import cursor from './utilities/cursor'; @@ -768,7 +769,7 @@ const styles = { }, headerGap: { - height: 12, + height: CONST.DESKTOP_HEADER_PADDING, }, pushTextRight: { @@ -1272,7 +1273,7 @@ const styles = { createMenuPositionProfile: (windowWidth) => ({ horizontal: windowWidth - 355, - vertical: 250, + ...getPopOverVerticalOffset(162), }), createMenuPositionReportActionCompose: (windowHeight) => ({ @@ -2979,12 +2980,12 @@ const styles = { }, threeDotsPopoverOffset: (windowWidth) => ({ - vertical: 50, + ...getPopOverVerticalOffset(60), horizontal: windowWidth - 60, }), threeDotsPopoverOffsetNoCloseButton: (windowWidth) => ({ - vertical: 50, + ...getPopOverVerticalOffset(60), horizontal: windowWidth - 10, }),