QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Bank pages layout breaking

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-04 09:51:35 +02:00
parent 3dd827417a
commit 4ef00ab122
3 changed files with 142 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx
View File

@@ -34,21 +34,23 @@ import {
} from '@/constants/cashflowOptions';
import { useRefreshCashflowTransactions } from '@/hooks/query';
import { useAccountTransactionsContext } from './AccountTransactionsProvider';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { useAppShellContext } from '@/components/AppShell/AppContentShell/AppContentShellProvider';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withSettings from '@/containers/Settings/withSettings';
import withSettingsActions from '@/containers/Settings/withSettingsActions';
import { compose } from '@/utils';
import { withBankingActions } from '../withBankingActions';
import { withBanking } from '../withBanking';
import withAlertActions from '@/containers/Alert/withAlertActions';
import {
useUpdateBankAccount,
useExcludeUncategorizedTransactions,
useUnexcludeUncategorizedTransactions,
} from '@/hooks/query/bank-rules';
import { withBankingActions } from '../withBankingActions';
import { withBanking } from '../withBanking';
import withAlertActions from '@/containers/Alert/withAlertActions';
import { DialogsName } from '@/constants/dialogs';
import { compose } from '@/utils';
function AccountTransactionsActionsBar({
// #withDialogActions
@@ -221,6 +223,13 @@ function AccountTransactionsActionsBar({
});
};
const { hideAside } = useAppShellContext();
const isMin1350Query = useMediaQuery('(min-width: 1350px)');
// Shrink actions to dropdown if the aside is open and matched the media query,
// To avoid actions overflow in small screens.
const shrinkActions = !hideAside && !isMin1350Query;
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -241,23 +250,27 @@ function AccountTransactionsActionsBar({
}}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-import-16" iconSize={16} />}
text={<T id={'import'} />}
onClick={handleImportBtnClick}
/>
<NavbarDivider />
<If condition={!shrinkActions}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-import-16" iconSize={16} />}
text={<T id={'import'} />}
onClick={handleImportBtnClick}
/>
<NavbarDivider />
</If>
<DashboardRowsHeightButton
initialValue={cashflowTansactionsTableSize}
onChange={handleTableRowSizeChange}
@@ -290,6 +303,40 @@ function AccountTransactionsActionsBar({
</Tooltip>
</If>
<If condition={shrinkActions}>
<NavbarDivider />
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={
<Menu>
<MenuItem
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
<MenuItem
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
<MenuItem
icon={<Icon icon="file-import-16" iconSize={16} />}
text={<T id={'import'} />}
onClick={handleImportBtnClick}
/>
</Menu>
}
>
<Button
icon={<Icon icon="more-h-16" iconSize={16} />}
minimal={true}
/>
</Popover>
</If>
{!isEmpty(uncategorizedTransationsIdsSelected) && (
<Button
icon={<Icon icon="disable" iconSize={16} />}
@@ -368,7 +415,6 @@ function AccountTransactionsActionsBar({
</If>
<MenuItem onClick={handleBankRulesClick} text={'Bank rules'} />
<MenuDivider />
<If condition={isSyncingOwner && isFeedsActive}>
<MenuItem

15
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
View File

@@ -2,6 +2,8 @@
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { curry } from 'lodash/fp';
import { useHistory } from 'react-router-dom';
import {
Popover,
Menu,
@@ -11,10 +13,9 @@ import {
Classes,
} from '@blueprintjs/core';
import { Icon } from '@/components';
import { useHistory } from 'react-router-dom';
import { curry } from 'lodash/fp';
import { useAccountTransactionsContext } from './AccountTransactionsProvider';
import { useAppShellContext } from '@/components/AppShell/AppContentShell/AppContentShellProvider';
function AccountSwitchButton() {
const { currentAccount } = useAccountTransactionsContext();
@@ -22,7 +23,7 @@ function AccountSwitchButton() {
return (
<AccountSwitchButtonBase
minimal={true}
rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
rightIcon={<Icon icon={'caret-down-16'} iconSize={16} />}
>
<AccountSwitchText>{currentAccount.name}</AccountSwitchText>
</AccountSwitchButtonBase>
@@ -110,12 +111,16 @@ function AccountTransactionsDetailsBarSkeleton() {
}
function AccountTransactionsDetailsContent() {
const { hideAside } = useAppShellContext();
return (
<React.Fragment>
<AccountSwitchItem />
<AccountNumberItem />
{/** Hide some details once the aside opens to preserve space on details bar. */}
{hideAside && <AccountNumberItem />}
<AccountBalanceItem />
<AccountBankBalanceItem />
{hideAside && <AccountBankBalanceItem />}
</React.Fragment>
);
}