Mobile create account (actualbudget#1853)

* Mobile create account * Release notes * Update add button style * Add back desktop page header padding * Empty accounts handling * decimal keyboard on CreateLocalAccount balance input * VRT updates
FlorianLang06 · Nov 19, 2023 · 4c844fa · 4c844fa
1 parent ea74785
commit 4c844fa
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 156 deletions.
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png
diff --git a/...ots/Mobile-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png b/...ots/Mobile-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png
diff --git a/...ots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png b/...ots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
@@ -6,13 +6,21 @@ import { theme, styles, type CSSProperties } from '../style';
 import Text from './common/Text';
 import View from './common/View';
 
-function PageTitle({
-  name,
-  style,
-}: {
+type PageHeaderProps = {
   name: ReactNode;
   style?: CSSProperties;
-}) {
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+};
+
+const HEADER_HEIGHT = 50;
+
+function PageHeader({
+  name,
+  style,
+  leftContent,
+  rightContent,
+}: PageHeaderProps) {
   const { isNarrowWidth } = useResponsive();
 
   if (isNarrowWidth) {
@@ -23,16 +31,42 @@ function PageTitle({
           backgroundColor: theme.mobilePageBackground,
           color: theme.mobileModalText,
           flexDirection: 'row',
-          flex: '1 0 auto',
-          fontSize: 18,
-          fontWeight: 500,
-          height: 50,
-          justifyContent: 'center',
-          overflowY: 'auto',
+          flexShrink: 0,
+          height: HEADER_HEIGHT,
           ...style,
         }}
       >
-        {name}
+        <View
+          style={{
+            flexBasis: '25%',
+            justifyContent: 'flex-start',
+            flexDirection: 'row',
+          }}
+        >
+          {leftContent}
+        </View>
+        <View
+          style={{
+            alignItems: 'center',
+            flexDirection: 'row',
+            flexBasis: '50%',
+            fontSize: 18,
+            fontWeight: 500,
+            justifyContent: 'center',
+            overflowY: 'auto',
+          }}
+        >
+          {name}
+        </View>
+        <View
+          style={{
+            flexBasis: '25%',
+            justifyContent: 'flex-end',
+            flexDirection: 'row',
+          }}
+        >
+          {rightContent}
+        </View>
       </View>
     );
   }
@@ -51,25 +85,33 @@ function PageTitle({
   );
 }
 
+type PageProps = {
+  title: ReactNode;
+  titleStyle?: CSSProperties;
+  headerLeftContent?: ReactNode;
+  headerRightContent?: ReactNode;
+  children: ReactNode;
+};
+
 export function Page({
   title,
-  children,
   titleStyle,
-}: {
-  title: ReactNode;
-  children: ReactNode;
-  titleStyle?: CSSProperties;
-}) {
+  headerLeftContent,
+  headerRightContent,
+  children,
+}: PageProps) {
   let { isNarrowWidth } = useResponsive();
   let HORIZONTAL_PADDING = isNarrowWidth ? 10 : 20;
 
   return (
     <View style={isNarrowWidth ? undefined : styles.page}>
-      <PageTitle
+      <PageHeader
         name={title}
+        leftContent={headerLeftContent}
+        rightContent={headerRightContent}
         style={{
           ...titleStyle,
-          paddingInline: HORIZONTAL_PADDING,
+          ...(!isNarrowWidth && { paddingInline: HORIZONTAL_PADDING }),
         }}
       />
       <View

diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -106,109 +106,7 @@ export default function AccountDetails({
           top: 0,
         }}
       >
-        <View
-          style={{
-            flexDirection: 'row',
-            flexShrink: 0,
-            height: BUDGET_HEADER_HEIGHT,
-            width: '100%',
-            backgroundColor: theme.mobileHeaderBackground,
-          }}
-        >
-          <View
-            style={{
-              width: LEFT_RIGHT_FLEX_WIDTH,
-              flexDirection: 'row',
-            }}
-          >
-            <Button
-              type="bare"
-              style={{
-                color: theme.mobileHeaderText,
-                justifyContent: 'center',
-                margin: 10,
-                paddingLeft: 5,
-                paddingRight: 3,
-              }}
-              hoveredStyle={{
-                color: theme.mobileHeaderText,
-                background: theme.mobileHeaderTextHover,
-              }}
-            >
-              <Link
-                to={-1}
-                style={{
-                  alignItems: 'center',
-                  display: 'flex',
-                  textDecoration: 'none',
-                }}
-              >
-                <CheveronLeft
-                  style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
-                />
-                <Text
-                  style={{
-                    ...styles.text,
-                    fontWeight: 500,
-                    marginLeft: 5,
-                    marginRight: 5,
-                  }}
-                >
-                  Back
-                </Text>
-              </Link>
-            </Button>
-            <View
-              style={{
-                flex: 1,
-              }}
-            />
-          </View>
-          <View
-            style={{
-              flex: 1,
-              fontSize: 16,
-              fontWeight: 500,
-              alignItems: 'center',
-              justifyContent: 'center',
-              color: theme.mobileHeaderText,
-            }}
-            role="heading"
-          >
-            {account.name}
-          </View>
-
-          <View
-            style={{
-              width: LEFT_RIGHT_FLEX_WIDTH,
-              flexDirection: 'row',
-            }}
-          >
-            <View
-              style={{
-                flex: 1,
-              }}
-            />
-            <ButtonLink
-              to="transactions/new"
-              type="bare"
-              aria-label="Add Transaction"
-              style={{
-                justifyContent: 'center',
-                padding: 10,
-                margin: 10,
-                color: theme.mobileHeaderText,
-              }}
-              hoveredStyle={{
-                color: theme.mobileHeaderText,
-                background: theme.mobileHeaderTextHover,
-              }}
-              activeStyle={{ background: 'transparent' }}
-            >
-              <Add width={20} height={20} style={{ margin: -5 }} />
-            </ButtonLink>
-          </View>
-        </View>
+        <AccountDetailsHeader account={account} />
         <Label title="BALANCE" style={{ marginTop: 10 }} />
         <CellValue
           binding={balance}
@@ -245,3 +143,112 @@ export default function AccountDetails({
     </View>
   );
 }
+
+function AccountDetailsHeader({ account }) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        flexShrink: 0,
+        height: BUDGET_HEADER_HEIGHT,
+        width: '100%',
+        backgroundColor: theme.mobileHeaderBackground,
+      }}
+    >
+      <View
+        style={{
+          width: LEFT_RIGHT_FLEX_WIDTH,
+          flexDirection: 'row',
+        }}
+      >
+        <Button
+          type="bare"
+          style={{
+            color: theme.mobileHeaderText,
+            justifyContent: 'center',
+            margin: 10,
+            paddingLeft: 5,
+            paddingRight: 3,
+          }}
+          hoveredStyle={{
+            color: theme.mobileHeaderText,
+            background: theme.mobileHeaderTextHover,
+          }}
+        >
+          <Link
+            to={-1}
+            style={{
+              ...styles.noTapHighlight,
+              alignItems: 'center',
+              display: 'flex',
+              textDecoration: 'none',
+            }}
+          >
+            <CheveronLeft
+              style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
+            />
+            <Text
+              style={{
+                ...styles.text,
+                fontWeight: 500,
+                marginLeft: 5,
+                marginRight: 5,
+              }}
+            >
+              Back
+            </Text>
+          </Link>
+        </Button>
+        <View
+          style={{
+            flex: 1,
+          }}
+        />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          fontSize: 16,
+          fontWeight: 500,
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.mobileHeaderText,
+        }}
+        role="heading"
+      >
+        {account.name}
+      </View>
+
+      <View
+        style={{
+          width: LEFT_RIGHT_FLEX_WIDTH,
+          flexDirection: 'row',
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+          }}
+        />
+        <ButtonLink
+          to="transactions/new"
+          type="bare"
+          aria-label="Add Transaction"
+          style={{
+            justifyContent: 'center',
+            padding: 10,
+            margin: 10,
+            color: theme.mobileHeaderText,
+          }}
+          hoveredStyle={{
+            color: theme.mobileHeaderText,
+            background: theme.mobileHeaderTextHover,
+          }}
+          activeStyle={{ background: 'transparent' }}
+        >
+          <Add width={20} height={20} style={{ margin: -5 }} />
+        </ButtonLink>
+      </View>
+    </View>
+  );
+}