Read-only Responsive view (#435)

* Split the Settings component into multiple files (#434) * Remove need for isMobile in CSS: lean on media queries in styles.js and glamor Co-authored-by: Matiss Janis Aboltins <[email protected]> Co-authored-by: Jed Fox <[email protected]>
actualbudget · Jan 10, 2023 · c2b6870 · c2b6870
1 parent 89dc139
commit c2b6870
Show file tree

Hide file tree

Showing 71 changed files with 4,436 additions and 664 deletions.
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -90,5 +90,13 @@
   },
   "browserslist": [
     "electron 3.0"
-  ]
+  ],
+  "dependencies": {
+    "@react-aria/focus": "^3.8.0",
+    "@react-aria/listbox": "^3.6.1",
+    "@react-aria/utils": "^3.13.3",
+    "@react-stately/collections": "^3.4.3",
+    "@react-stately/list": "^3.5.3",
+    "react-router-dom-v5-compat": "^6.4.1"
+  }
 }
diff --git a/packages/desktop-client/public/index.html b/packages/desktop-client/public/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
+    />
     <title>Actual</title>
     <link rel="canonical" href="/" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/packages/desktop-client/src/components/BankSyncStatus.js b/packages/desktop-client/src/components/BankSyncStatus.js
@@ -46,7 +46,7 @@ function BankSyncStatus({ accountsSyncing }) {
                   padding: '5px 13px',
                   flexDirection: 'row',
                   alignItems: 'center',
-                  boxShadow: styles.shadow
+                  ...styles.shadow
                 }}
               >
                 <AnimatedRefresh

diff --git a/packages/desktop-client/src/components/FinancesApp.js b/packages/desktop-client/src/components/FinancesApp.js
@@ -2,7 +2,15 @@ import React, { useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
 import Backend from 'react-dnd-html5-backend';
 import { connect } from 'react-redux';
-import { Router, Route, Redirect, Switch, useLocation } from 'react-router-dom';
+import {
+  Router,
+  Route,
+  Redirect,
+  Switch,
+  useLocation,
+  NavLink
+} from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { createBrowserHistory } from 'history';
 import hotkeys from 'hotkeys-js';
@@ -15,13 +23,20 @@ import checkForUpgradeNotifications from 'loot-core/src/client/upgrade-notificat
 import * as undo from 'loot-core/src/platform/client/undo';
 import { BudgetMonthCountProvider } from 'loot-design/src/components/budget/BudgetMonthCountContext';
 import { View } from 'loot-design/src/components/common';
-import { colors } from 'loot-design/src/style';
+import { colors, styles } from 'loot-design/src/style';
+import Cog from 'loot-design/src/svg/v1/Cog';
+import PiggyBank from 'loot-design/src/svg/v1/PiggyBank';
+import Wallet from 'loot-design/src/svg/v1/Wallet';
 
+import { isMobile } from '../util';
 import { getLocationState, makeLocationState } from '../util/location-state';
 import Account from './accounts/Account';
+import { default as MobileAccount } from './accounts/MobileAccount';
+import { default as MobileAccounts } from './accounts/MobileAccounts';
 import { ActiveLocationProvider } from './ActiveLocation';
 import BankSyncStatus from './BankSyncStatus';
 import Budget from './budget';
+import { default as MobileBudget } from './budget/MobileBudget';
 import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
 import GlobalKeys from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
@@ -35,9 +50,10 @@ import DiscoverSchedules from './schedules/DiscoverSchedules';
 import EditSchedule from './schedules/EditSchedule';
 import LinkSchedule from './schedules/LinkSchedule';
 import PostsOfflineNotification from './schedules/PostsOfflineNotification';
-import Settings from './Settings';
+import Settings from './settings';
 import Titlebar, { TitlebarProvider } from './Titlebar';
 import FixSplitsTool from './tools/FixSplitsTool';
+
 // import Debugger from './Debugger';
 
 function PageRoute({ path, component: Component }) {
@@ -60,14 +76,17 @@ function PageRoute({ path, component: Component }) {
   );
 }
 
-function Routes({ location }) {
+function Routes({ isMobile, location }) {
   return (
     <Switch location={location}>
       <Route path="/">
         <Route path="/" exact render={() => <Redirect to="/budget" />} />
 
         <PageRoute path="/reports" component={Reports} />
-        <PageRoute path="/budget" component={Budget} />
+        <PageRoute
+          path="/budget"
+          component={isMobile ? MobileBudget : Budget}
+        />
 
         <Route path="/schedules" exact component={Schedules} />
         <Route path="/schedule/edit" exact component={EditSchedule} />
@@ -82,24 +101,28 @@ function Routes({ location }) {
         <Route path="/rules" exact component={ManageRulesPage} />
         <Route path="/payees" exact component={ManagePayeesPage} />
         <Route path="/tools/fix-splits" exact component={FixSplitsTool} />
-
         <Route
           path="/accounts/:id"
           exact
           children={props => {
+            const AcctCmp = isMobile ? MobileAccount : Account;
             return (
-              props.match && <Account key={props.match.params.id} {...props} />
+              props.match && <AcctCmp key={props.match.params.id} {...props} />
             );
           }}
         />
-        <Route path="/accounts" exact component={Account} />
+        <Route
+          path="/accounts"
+          exact
+          component={isMobile ? MobileAccounts : Account}
+        />
         <Route path="/settings" component={Settings} />
       </Route>
     </Switch>
   );
 }
 
-function StackedRoutes() {
+function StackedRoutes({ isMobile }) {
   let location = useLocation();
   let locationPtr = getLocationState(location, 'locationPtr');
 
@@ -114,23 +137,74 @@ function StackedRoutes() {
 
   return (
     <ActiveLocationProvider location={locations[locations.length - 1]}>
-      <Routes location={base} />
+      <Routes location={base} isMobile={isMobile} />
       {stack.map((location, idx) => (
         <PageTypeProvider
           key={location.key}
           type="modal"
           current={idx === stack.length - 1}
         >
-          <Routes location={location} />
+          <Routes location={location} isMobile={isMobile} />
         </PageTypeProvider>
       ))}
     </ActiveLocationProvider>
   );
 }
 
+function NavTab({ icon: TabIcon, name, path }) {
+  return (
+    <NavLink
+      to={path}
+      style={{
+        alignItems: 'center',
+        color: '#8E8E8F',
+        display: 'flex',
+        flexDirection: 'column',
+        textDecoration: 'none'
+      }}
+      activeStyle={{ color: colors.p5 }}
+    >
+      <TabIcon
+        width={22}
+        height={22}
+        style={{ color: 'inherit', marginBottom: '5px' }}
+      />
+      {name}
+    </NavLink>
+  );
+}
+
+function MobileNavTabs() {
+  return (
+    <div
+      style={{
+        backgroundColor: 'white',
+        borderTop: `1px solid ${colors.n10}`,
+        bottom: 0,
+        ...styles.shadow,
+        display: 'flex',
+        height: '80px',
+        justifyContent: 'space-around',
+        paddingTop: 10,
+        width: '100%'
+      }}
+    >
+      <NavTab name="Budget" path="/budget" icon={Wallet} isActive={false} />
+      <NavTab
+        name="Accounts"
+        path="/accounts"
+        icon={PiggyBank}
+        isActive={false}
+      />
+      <NavTab name="Settings" path="/settings" icon={Cog} isActive={false} />
+    </div>
+  );
+}
+
 class FinancesApp extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { isMobile: isMobile(window.innerWidth) };
     this.history = createBrowserHistory();
 
     let oldPush = this.history.push;
@@ -148,6 +222,15 @@ class FinancesApp extends React.Component {
     this.cleanup = this.history.listen(location => {
       undo.setUndoState('url', window.location.href);
     });
+
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+  }
+
+  handleWindowResize() {
+    this.setState({
+      isMobile: isMobile(window.innerWidth),
+      windowWidth: window.innerWidth
+    });
   }
 
   componentDidMount() {
@@ -182,57 +265,72 @@ class FinancesApp extends React.Component {
         this.history
       );
     }, 100);
+
+    window.addEventListener('resize', this.handleWindowResize);
   }
 
   componentWillUnmount() {
     this.cleanup();
+    window.removeEventListener('resize', this.handleWindowResize);
   }
 
   render() {
     return (
       <Router history={this.history}>
-        <View style={{ height: '100%', backgroundColor: colors.n10 }}>
-          <GlobalKeys />
-
-          <View style={{ flexDirection: 'row', flex: 1 }}>
-            <FloatableSidebar />
-
-            <div
-              style={{
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'hidden',
-                position: 'relative'
-              }}
-            >
-              <Titlebar
-                style={{
-                  WebkitAppRegion: 'drag',
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  zIndex: 1000
-                }}
-              />
+        <CompatRouter>
+          <View style={{ height: '100%', backgroundColor: colors.n10 }}>
+            <GlobalKeys />
+
+            <View style={{ flexDirection: 'row', flex: 1 }}>
+              {!this.state.isMobile && <FloatableSidebar />}
+
               <div
                 style={{
                   flex: 1,
                   display: 'flex',
-                  overflow: 'auto',
-                  position: 'relative'
+                  flexDirection: 'column',
+                  overflow: 'hidden',
+                  position: 'relative',
+                  width: '100%'
                 }}
               >
-                <Notifications />
-                <BankSyncStatus />
-                <StackedRoutes />
-                {/*window.Actual.IS_DEV && <Debugger />*/}
-                <Modals history={this.history} />
+                {!this.state.isMobile && (
+                  <Titlebar
+                    style={{
+                      WebkitAppRegion: 'drag',
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      zIndex: 1000
+                    }}
+                  />
+                )}
+                <div
+                  style={{
+                    flex: 1,
+                    display: 'flex',
+                    overflow: 'auto',
+                    position: 'relative'
+                  }}
+                >
+                  <Notifications />
+                  <BankSyncStatus />
+                  <StackedRoutes isMobile={this.state.isMobile} />
+                  {/*window.Actual.IS_DEV && <Debugger />*/}
+                  <Modals history={this.history} />
+                </div>
+                {this.state.isMobile && (
+                  <Switch>
+                    <Route path="/budget" component={MobileNavTabs} />
+                    <Route path="/accounts" component={MobileNavTabs} />
+                    <Route path="/settings" component={MobileNavTabs} />
+                  </Switch>
+                )}
               </div>
-            </div>
+            </View>
           </View>
-        </View>
+        </CompatRouter>
       </Router>
     );
   }