Skip to content

Fix pay button overlapping avatar #61568

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
merged 4 commits into from
May 7, 2025
Merged

Fix pay button overlapping avatar #61568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98d132a
Fix pay button overlapping avatar
jnowakow May 7, 2025
0a5fc97
adjust table
jnowakow May 7, 2025
d6c9336
fix TS
jnowakow May 7, 2025
77692ec
Fix storybook
jnowakow May 7, 2025
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
21 changes: 11 additions & 10 deletions src/components/MoneyReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,8 @@ type MoneyReportHeaderProps = {
function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, shouldDisplayBackButton = false, onBackButtonPress}: MoneyReportHeaderProps) {
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth;
const route = useRoute();
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`, {canBeMissing: true});
Expand Down Expand Up @@ -699,7 +700,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
shouldShowBorderBottom={false}
shouldEnableDetailPageNavigation
>
{!shouldUseNarrowLayout && (
{!shouldDisplayNarrowVersion && (
<View style={[styles.flexRow, styles.gap2]}>
{!!primaryAction && !shouldShowSelectedTransactionsButton && primaryActionsImplementation[primaryAction]}
{!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && (
Expand All @@ -712,7 +713,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
isSplitButton={false}
/>
)}
{shouldShowSelectedTransactionsButton && !shouldUseNarrowLayout && (
{shouldShowSelectedTransactionsButton && (
<View>
<ButtonWithDropdownMenu
onPress={() => null}
Expand All @@ -726,10 +727,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
</View>
)}
</HeaderWithBackButton>
{shouldUseNarrowLayout && (
{shouldDisplayNarrowVersion && !shouldShowSelectedTransactionsButton && (
<View style={[styles.flexRow, styles.gap2, styles.pb3, styles.ph5, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}>
{!!primaryAction && !shouldShowSelectedTransactionsButton && <View style={[styles.flex1]}>{primaryActionsImplementation[primaryAction]}</View>}
{!!applicableSecondaryActions.length && !shouldShowSelectedTransactionsButton && (
{!!primaryAction && <View style={[styles.flex1]}>{primaryActionsImplementation[primaryAction]}</View>}
{!!applicableSecondaryActions.length && (
<ButtonWithDropdownMenu
success={false}
onPress={() => {}}
Expand All @@ -744,8 +745,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
)}
{isMoreContentShown && (
<View style={[styles.dFlex, styles.flexColumn, shouldAddGapToContents && styles.gap3, styles.pb3, styles.ph5]}>
<View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
{shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && (
{shouldShowSelectedTransactionsButton && shouldDisplayNarrowVersion && (
<View style={[styles.dFlex, styles.w100, styles.pb3]}>
<ButtonWithDropdownMenu
onPress={() => null}
options={selectedTransactionsOptions}
Expand All @@ -754,8 +755,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
shouldAlwaysShowDropdownMenu
wrapperStyle={styles.w100}
/>
)}
</View>
</View>
)}
{shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={optimisticNextStep} />}
{!!statusBarProps && (
<MoneyRequestHeaderStatusBar
Expand Down
41 changes: 22 additions & 19 deletions src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
const displayNarrowVersion = isMediumScreenWidth || shouldUseNarrowLayout;
const [isModalVisible, setIsModalVisible] = useState(false);
const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');

Expand Down Expand Up @@ -178,9 +177,9 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
const listHorizontalPadding = styles.ph5;
return !isEmpty(transactions) ? (
<>
{!displayNarrowVersion && (
<View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr8, StyleUtils.getPaddingBottom(6), styles.justifyContentCenter, styles.alignItemsCenter]}>
<View style={[styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
{!shouldUseNarrowLayout && (
<View style={[styles.dFlex, styles.flexRow, styles.pl5, styles.pr8, StyleUtils.getPaddingBottom(6), styles.alignItemsCenter]}>
<View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
<Checkbox
onPress={() => {
if (selectedTransactionsID.length === transactions.length) {
Expand All @@ -193,20 +192,23 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
isIndeterminate={selectedTransactionsID.length > 0 && selectedTransactionsID.length !== transactions.length}
isChecked={selectedTransactionsID.length === transactions.length}
/>
{isMediumScreenWidth && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB: I couldn't find any mention of adding this one but after adding it, it looks better.

</View>
<MoneyRequestReportTableHeader
shouldShowSorting
sortBy={sortBy}
sortOrder={sortOrder}
dateColumnSize={dateColumnSize}
onSortPress={(selectedSortBy, selectedSortOrder) => {
if (!isSortableColumnName(selectedSortBy)) {
return;
}

setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
}}
/>
{!isMediumScreenWidth && (
<MoneyRequestReportTableHeader
shouldShowSorting
sortBy={sortBy}
sortOrder={sortOrder}
dateColumnSize={dateColumnSize}
onSortPress={(selectedSortBy, selectedSortOrder) => {
if (!isSortableColumnName(selectedSortBy)) {
return;
}

setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
}}
/>
)}
</View>
)}
<View style={[listHorizontalPadding, styles.gap2, styles.pb4]}>
Expand Down Expand Up @@ -236,7 +238,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
style={[pressableStyle]}
onMouseLeave={handleMouseLeave}
onLongPress={() => {
if (!displayNarrowVersion) {
if (!shouldUseNarrowLayout) {
return;
}
if (selectionMode?.isEnabled) {
Expand All @@ -252,7 +254,8 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
isSelected={isTransactionSelected(transaction.transactionID)}
dateColumnSize={dateColumnSize}
shouldShowTooltip
shouldUseNarrowLayout={displayNarrowVersion}
shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth}
shouldShowChatBubbleComponent
onCheckboxPress={toggleTransaction}
/>
Expand Down
6 changes: 3 additions & 3 deletions src/components/TransactionItemRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import DateCell from '@components/SelectionList/Search/DateCell';
import Text from '@components/Text';
import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
import useHover from '@hooks/useHover';
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
Expand All @@ -27,6 +26,7 @@ import TransactionItemRowRBR from './TransactionItemRowRBR';
function TransactionItemRow({
transactionItem,
shouldUseNarrowLayout,
shouldShowCheckbox,
isSelected,
shouldShowTooltip,
dateColumnSize,
Expand All @@ -35,6 +35,7 @@ function TransactionItemRow({
}: {
transactionItem: TransactionWithOptionalHighlight;
shouldUseNarrowLayout: boolean;
shouldShowCheckbox: boolean;
isSelected: boolean;
shouldShowTooltip: boolean;
dateColumnSize: TableColumnSize;
Expand All @@ -57,7 +58,6 @@ function TransactionItemRow({
backgroundColor: theme.highlightBG,
});

const {selectionMode} = useMobileSelectionMode();
const {hovered, bind: bindHover} = useHover();
const bgActiveStyles = useMemo(() => {
if (isSelected) {
Expand All @@ -79,7 +79,7 @@ function TransactionItemRow({
<Animated.View style={[animatedHighlightStyle]}>
<View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.gap3, bgActiveStyles]}>
<View style={[styles.flexRow, styles.mt3, styles.mr3, styles.ml3]}>
{!!selectionMode?.isEnabled && (
{shouldShowCheckbox && (
<View style={[styles.mr2, styles.justifyContentCenter]}>
<Checkbox
onPress={() => {
Expand Down
35 changes: 23 additions & 12 deletions src/stories/TransactionItemRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type {Meta, StoryFn} from '@storybook/react';
import React from 'react';
import ScreenWrapper from '@components/ScreenWrapper';
import ThemeProvider from '@components/ThemeProvider';
import ThemeStylesProvider from '@components/ThemeStylesProvider';
import TransactionItemRow from '@components/TransactionItemRow';
Expand All @@ -14,6 +15,7 @@ type TransactionItemRowProps = {
shouldUseNarrowLayout: boolean;
isSelected: boolean;
shouldShowTooltip: boolean;
shouldShowCheckbox: boolean;
};

const story: Meta<typeof TransactionItemRow> = {
Expand All @@ -38,28 +40,37 @@ const story: Meta<typeof TransactionItemRow> = {
shouldShowTooltip: {
control: 'boolean',
},
shouldShowCheckbox: {
control: 'boolean',
},
},
parameters: {
useLightTheme: true,
},
};

function Template({transactionItem, shouldUseNarrowLayout, isSelected, shouldShowTooltip}: TransactionItemRowProps, {parameters}: {parameters: {useLightTheme?: boolean}}) {
function Template(
{transactionItem, shouldUseNarrowLayout, isSelected, shouldShowTooltip, shouldShowCheckbox}: TransactionItemRowProps,
{parameters}: {parameters: {useLightTheme?: boolean}},
) {
const theme = parameters.useLightTheme ? CONST.THEME.LIGHT : CONST.THEME.DARK;

return (
<ThemeProvider theme={theme}>
<ThemeStylesProvider>
<TransactionItemRow
transactionItem={transactionItem}
shouldUseNarrowLayout={shouldUseNarrowLayout}
isSelected={isSelected}
shouldShowTooltip={shouldShowTooltip}
shouldShowChatBubbleComponent
dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
onCheckboxPress={() => {}}
/>
</ThemeStylesProvider>
<ScreenWrapper testID="testID">
<ThemeStylesProvider>
<TransactionItemRow
transactionItem={transactionItem}
shouldUseNarrowLayout={shouldUseNarrowLayout}
shouldShowCheckbox={shouldShowCheckbox}
isSelected={isSelected}
shouldShowTooltip={shouldShowTooltip}
shouldShowChatBubbleComponent
dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
onCheckboxPress={() => {}}
/>
</ThemeStylesProvider>
</ScreenWrapper>
</ThemeProvider>
);
}
Expand Down
Loading