Skip to content
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

Consistent modal paddings #2571

Merged
merged 11 commits into from
Apr 22, 2024
Merged

Consistent modal paddings #2571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
267e12b
Update autocomplete types
joel-jeremy Mar 19, 2024
5884002
Remote optional type
joel-jeremy Mar 20, 2024
d000650
Improve SingleInputModal
joel-jeremy Mar 22, 2024
a1dc159
Fix lint error
joel-jeremy Mar 22, 2024
cd6e14c
Update modal paddings
joel-jeremy Apr 9, 2024
f7b4d28
Release notes
joel-jeremy Apr 9, 2024
2657827
Update release notes
joel-jeremy Apr 9, 2024
5006249
Update default Modal padding and style
joel-jeremy Apr 22, 2024
f9d8cd6
VRT update
joel-jeremy Apr 22, 2024
cbb00f4
VRT
joel-jeremy Apr 22, 2024
611e960
VRT
joel-jeremy Apr 22, 2024
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
Binary file modified .../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...e-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions packages/desktop-client/src/components/Modals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ import { ConfirmCategoryDelete } from './modals/ConfirmCategoryDelete';
import { ConfirmTransactionEdit } from './modals/ConfirmTransactionEdit';
import { ConfirmUnlinkAccount } from './modals/ConfirmUnlinkAccount';
import { CoverModal } from './modals/CoverModal';
import { CreateAccount } from './modals/CreateAccount';
import { CreateAccountModal } from './modals/CreateAccountModal';
import { CreateEncryptionKeyModal } from './modals/CreateEncryptionKeyModal';
import { CreateLocalAccount } from './modals/CreateLocalAccount';
import { CreateLocalAccountModal } from './modals/CreateLocalAccountModal';
import { EditField } from './modals/EditField';
import { EditRule } from './modals/EditRule';
import { FixEncryptionKeyModal } from './modals/FixEncryptionKeyModal';
Expand Down Expand Up @@ -105,7 +105,7 @@ export function Modals() {

case 'add-account':
return (
<CreateAccount
<CreateAccountModal
key={name}
modalProps={modalProps}
syncServerStatus={syncServerStatus}
Expand All @@ -115,7 +115,7 @@ export function Modals() {

case 'add-local-account':
return (
<CreateLocalAccount
<CreateLocalAccountModal
key={name}
modalProps={modalProps}
actions={actions}
Expand Down
20 changes: 7 additions & 13 deletions packages/desktop-client/src/components/common/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import ReactModal from 'react-modal';
import { AnimatedLoading } from '../../icons/AnimatedLoading';
import { SvgLogo } from '../../icons/logo';
import { SvgDelete } from '../../icons/v0';
import { useResponsive } from '../../ResponsiveProvider';
import { type CSSProperties, styles, theme } from '../../style';
import { tokens } from '../../tokens';

Expand Down Expand Up @@ -52,7 +51,7 @@ export const Modal = ({
isCurrent,
isHidden,
size,
padding = 20,
padding = 10,
showHeader = true,
leftHeaderContent,
CloseButton: CloseButtonComponent = ModalCloseButton,
Expand All @@ -69,7 +68,6 @@ export const Modal = ({
children,
onClose,
}: ModalProps) => {
const { isNarrowWidth } = useResponsive();
const { enableScope, disableScope } = useHotkeysContext();

// This deactivates any key handlers in the "app" scope
Expand Down Expand Up @@ -133,12 +131,14 @@ export const Modal = ({
isCurrent={isCurrent}
size={size}
style={{
flex: 1,
padding,
willChange: 'opacity, transform',
maxWidth: '90vw',
minWidth: '90vw',
maxHeight: '90vh',
minHeight: 0,
borderRadius: 4,
borderRadius: 6,
//border: '1px solid ' + theme.modalBorder,
color: theme.pageText,
backgroundColor: theme.modalBackground,
Expand All @@ -156,17 +156,14 @@ export const Modal = ({
style={{
justifyContent: 'center',
alignItems: 'center',
padding: '0 20px',
position: 'relative',
height: 70,
height: 60,
}}
>
<View
style={{
position: 'absolute',
left: 0,
marginRight: !isNarrowWidth ? 5 : undefined,
marginLeft: !isNarrowWidth ? 15 : undefined,
}}
>
{leftHeaderContent}
Expand All @@ -178,8 +175,7 @@ export const Modal = ({
textAlign: 'center',
// We need to force a width for the text-overflow
// ellipses to work because we are aligning center.
// This effectively gives it a padding of 20px
width: 'calc(100% - 40px)',
width: 'calc(100% - 60px)',
}}
>
{!title ? (
Expand All @@ -200,15 +196,13 @@ export const Modal = ({
style={{
position: 'absolute',
right: 0,
marginRight: !isNarrowWidth ? 15 : undefined,
marginLeft: !isNarrowWidth ? 5 : undefined,
}}
>
<CloseButtonComponent onClick={onClose} />
</View>
</View>
)}
<View style={{ padding, paddingTop: 0, flex: 1 }}>
<View style={{ paddingTop: 0, flex: 1 }}>
{typeof children === 'function' ? children() : children}
</View>
{loading && (
Expand Down
1 change: 0 additions & 1 deletion packages/desktop-client/src/components/manager/DeleteFile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export function DeleteFile({ modalProps, actions, file }: DeleteFileProps) {
<Modal
{...modalProps}
title={'Delete ' + file.name}
padding={0}
showOverlay={false}
onClose={modalProps.onBack}
>
Expand Down
4 changes: 0 additions & 4 deletions packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,8 @@ export function AccountAutocompleteModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
padding={0}
style={{
flex: 0,
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
Expand Down
5 changes: 0 additions & 5 deletions packages/desktop-client/src/components/modals/AccountMenuModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,8 @@ export function AccountMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
padding={0}
style={{
flex: 1,
height: '45vh',
padding: '0 10px',
borderRadius: '6px',
}}
leftHeaderContent={
<AdditionalAccountMenu
Expand Down Expand Up @@ -137,7 +133,6 @@ export function AccountMenuModal({
justifyContent: 'space-between',
alignContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
}}
>
<Button style={buttonStyle} onClick={_onEditNotes}>
Expand Down
13 changes: 1 addition & 12 deletions packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,7 @@ export function BudgetPageMenuModal({
};

return (
<Modal
showHeader
focusAfterClose={false}
{...modalProps}
padding={0}
style={{
flex: 1,
padding: '0 10px',
paddingBottom: 10,
borderRadius: '6px',
}}
>
<Modal showHeader focusAfterClose={false} {...modalProps}>
<BudgetPageMenu
getItemStyle={() => defaultMenuItemStyle}
onAddCategoryGroup={onAddCategoryGroup}
Expand Down
4 changes: 0 additions & 4 deletions packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,8 @@ export function CategoryAutocompleteModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
padding={0}
style={{
flex: 0,
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
backgroundColor: theme.menuAutoCompleteBackground,
}}
CloseButton={props => (
Expand Down
5 changes: 0 additions & 5 deletions packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,8 @@ export function CategoryGroupMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
padding={0}
style={{
flex: 1,
height: '45vh',
padding: '0 10px',
borderRadius: '6px',
}}
leftHeaderContent={
<AdditionalCategoryGroupMenu
Expand Down Expand Up @@ -142,7 +138,6 @@ export function CategoryGroupMenuModal({
justifyContent: 'space-between',
alignContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
}}
>
<Button style={buttonStyle} onClick={_onAddCategory}>
Expand Down
5 changes: 0 additions & 5 deletions packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,8 @@ export function CategoryMenuModal({
focusAfterClose={false}
{...modalProps}
onClose={_onClose}
padding={0}
style={{
flex: 1,
height: '45vh',
padding: '0 10px',
borderRadius: '6px',
}}
leftHeaderContent={
<AdditionalCategoryMenu
Expand Down Expand Up @@ -133,7 +129,6 @@ export function CategoryMenuModal({
justifyContent: 'space-between',
alignContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
}}
>
<Button style={buttonStyle} onClick={_onEditNotes}>
Expand Down
57 changes: 23 additions & 34 deletions packages/desktop-client/src/components/modals/CoverModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,42 +79,31 @@ export function CoverModal({
showHeader
focusAfterClose={false}
{...modalProps}
padding={0}
style={{
flex: 1,
padding: '0 10px',
paddingBottom: 10,
borderRadius: '6px',
}}
>
{() => (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed lambda

<>
<View>
<FieldLabel title="Cover from category:" />
<TapField value={fromCategory?.name} onClick={onCategoryClick} />
</View>
<View>
<FieldLabel title="Cover from category:" />
<TapField value={fromCategory?.name} onClick={onCategoryClick} />
</View>

<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
}}
>
<Button
type="primary"
style={{
height: styles.mobileMinHeight,
marginLeft: styles.mobileEditingPadding,
marginRight: styles.mobileEditingPadding,
}}
onClick={() => _onSubmit(fromCategoryId)}
>
Transfer
</Button>
</View>
</>
)}
<View
style={{
justifyContent: 'center',
alignItems: 'center',
paddingTop: 10,
}}
>
<Button
type="primary"
style={{
height: styles.mobileMinHeight,
marginLeft: styles.mobileEditingPadding,
marginRight: styles.mobileEditingPadding,
}}
onClick={() => _onSubmit(fromCategoryId)}
>
Transfer
</Button>
</View>
</Modal>
);
}
2 changes: 1 addition & 1 deletion ...t/src/components/modals/CreateAccount.tsx → .../components/modals/CreateAccountModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ type CreateAccountProps = {
upgradingAccountId?: string;
};

export function CreateAccount({
export function CreateAccountModal({
modalProps,
syncServerStatus,
upgradingAccountId,
Expand Down
3 changes: 0 additions & 3 deletions packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,8 @@ export function CreateEncryptionKeyModal({
<Modal
{...modalProps}
style={{
flex: 1,
padding: '0 10px',
borderRadius: '6px',
}}
padding={10}
title={isRecreating ? 'Generate new key' : 'Enable encryption'}
onClose={modalProps.onClose}
>
Expand Down
15 changes: 9 additions & 6 deletions .../components/modals/CreateLocalAccount.tsx → ...onents/modals/CreateLocalAccountModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { InitialFocus } from '../common/InitialFocus';
import { InlineField } from '../common/InlineField';
import { Input } from '../common/Input';
import { Link } from '../common/Link';
import { Modal, ModalButtons } from '../common/Modal';
import { Modal, ModalButtons, ModalTitle } from '../common/Modal';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { Checkbox } from '../forms';
Expand All @@ -23,7 +23,7 @@ type CreateLocalAccountProps = {
actions: BoundActions;
};

export function CreateLocalAccount({
export function CreateLocalAccountModal({
modalProps,
actions,
}: CreateLocalAccountProps) {
Expand All @@ -38,7 +38,10 @@ export function CreateLocalAccount({
const validateBalance = balance => !isNaN(parseFloat(balance));

return (
<Modal title="Create Local Account" {...modalProps}>
<Modal
title={<ModalTitle title="Create Local Account" shrinkOnOverflow />}
{...modalProps}
>
{() => (
<View>
<form
Expand All @@ -62,7 +65,7 @@ export function CreateLocalAccount({
}
}}
>
<InlineField label="Name" width="75%">
<InlineField label="Name" width="100%">
<InitialFocus>
<Input
name="name"
Expand All @@ -85,7 +88,7 @@ export function CreateLocalAccount({

<View
style={{
width: '75%',
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-end',
}}
Expand Down Expand Up @@ -137,7 +140,7 @@ export function CreateLocalAccount({
</View>
</View>

<InlineField label="Balance" width="75%">
<InlineField label="Balance" width="100%">
<Input
name="balance"
inputMode="decimal"
Expand Down
2 changes: 0 additions & 2 deletions packages/desktop-client/src/components/modals/EditField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,12 +221,10 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
focusAfterClose={false}
{...modalProps}
onClose={onCloseInner}
padding={0}
style={{
flex: 0,
height: isNarrowWidth ? '85vh' : 275,
padding: '15px 10px',
borderRadius: '6px',
...(minWidth && { minWidth }),
backgroundColor: theme.menuAutoCompleteBackground,
}}
Expand Down
1 change: 0 additions & 1 deletion packages/desktop-client/src/components/modals/EditRule.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -894,7 +894,6 @@ export function EditRule({ modalProps, defaultRule, onSave: originalOnSave }) {
return (
<Modal
title="Rule"
padding={0}
{...modalProps}
style={{ ...modalProps.style, flex: 'inherit' }}
>
Expand Down
Loading
Loading