[WIP] Implement "pill gesture" icon in navigation bar on Mobile view …

…for better UX (#2419) * Fix mobile UX, issue #2079 * upcoming-release-notes * Fix navigation bar buttons not fully displayed * pill size changed, exported nav bar height * Edit navigation bar const Edit nav bar pill color * Removed export * Fixes release notes * Fixed formatting * Fix mobile UX, issue #2079 * upcoming-release-notes * Fix navigation bar buttons not fully displayed * pill size changed, exported nav bar height * Edit navigation bar const Edit nav bar pill color * Removed export * Fixes release notes * Fixed formatting * Test schedules and mobile images created * Reverted schedules checks test images
actualbudget · Mar 6, 2024 · 90eaf2b · 90eaf2b
1 parent a5fa0f3
commit 90eaf2b
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 13 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/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png b/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png
diff --git a/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png b/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-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/accounts/MobileAccounts.jsx b/packages/desktop-client/src/components/accounts/MobileAccounts.jsx
@@ -15,7 +15,7 @@ import { Button } from '../common/Button';
 import { Text } from '../common/Text';
 import { TextOneLine } from '../common/TextOneLine';
 import { View } from '../common/View';
-import { ROW_HEIGHT as MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
+import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
 import { Page } from '../Page';
 import { PullToRefresh } from '../responsive/PullToRefresh';
 import { CellValue } from '../spreadsheet/CellValue';

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
@@ -24,7 +24,7 @@ import { Label } from '../common/Label';
 import { Menu } from '../common/Menu';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
-import { ROW_HEIGHT as MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
+import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
 import { Page } from '../Page';
 import { PullToRefresh } from '../responsive/PullToRefresh';
 import { CellValue } from '../spreadsheet/CellValue';

diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -20,8 +20,10 @@ import { theme, styles, type CSSProperties } from '../../style';
 import { View } from '../common/View';
 import { useScroll } from '../ScrollProvider';
 
-export const ROW_HEIGHT = 70;
 const COLUMN_COUNT = 3;
+const PILL_HEIGHT = 15;
+const ROW_HEIGHT = 70;
+export const MOBILE_NAV_HEIGHT = ROW_HEIGHT + PILL_HEIGHT;
 
 export function MobileNavTabs() {
   const { isNarrowWidth } = useResponsive();
@@ -179,23 +181,36 @@ export function MobileNavTabs() {
         backgroundColor: theme.mobileNavBackground,
         borderTop: `1px solid ${theme.menuBorder}`,
         ...styles.shadow,
-        height: totalHeight,
+        height: totalHeight + PILL_HEIGHT,
         width: '100%',
         position: 'fixed',
         zIndex: 100,
         bottom: 0,
         ...(!isNarrowWidth && { display: 'none' }),
       }}
     >
-      <View
-        style={{
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          height: totalHeight,
-          width: '100%',
-        }}
-      >
-        {[navTabs, bufferTabs]}
+      <View>
+        <div
+          style={{
+            background: theme.pillBorder,
+            borderRadius: 10,
+            width: 30,
+            marginTop: 5,
+            marginBottom: 5,
+            padding: 2,
+            alignSelf: 'center',
+          }}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            height: totalHeight,
+            width: '100%',
+          }}
+        >
+          {[navTabs, bufferTabs]}
+        </View>
       </View>
     </animated.div>
   );

diff --git a/upcoming-release-notes/2419.md b/upcoming-release-notes/2419.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [CampaniaGuy]
+---
+
+Implemented a "pill gesture" icon on navigation bar for better mobile UX