Tablet mode

packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts

@@ -39,9 +39,9 @@ const useSource = (tempDirPath: string, themeId: number) => {
 		`;
 	}, [tempDirPath]);
 
-	const [paddingLeft, paddingRight] = useMemo(() => {
+	const [paddingLeft, paddingRight, extraRawCss] = useMemo(() => {
 		const theme = themeStyle(themeId);
-		return [theme.marginLeft, theme.marginRight];
+		return [theme.marginLeft, theme.marginRight, theme.extraRawCss];
 	}, [themeId]);
 
 	const html = useMemo(() => {
@@ -75,6 +75,7 @@ const useSource = (tempDirPath: string, themeId: number) => {
 					<meta name="viewport" content="width=device-width, initial-scale=1">
 					<style>
 						${defaultCss}
+						${extraRawCss || ''}
 						${shim.mobilePlatform() === 'ios' ? iOSSpecificCss : ''}
 					</style>
 				</head>

packages/app-mobile/components/SideMenu.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { AccessibilityInfo, Animated, Dimensions, Easing, I18nManager, LayoutChangeEvent, PanResponder, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { State } from '@joplin/lib/reducer';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import AccessibleView from './accessibility/AccessibleView';
 import { _ } from '@joplin/lib/locale';
 import useReduceMotionEnabled from '../utils/hooks/useReduceMotionEnabled';
 import { themeStyle } from './global-style';
+import { AppState } from '../utils/types';
 
 export enum SideMenuPosition {
 	Left = 'left',
 	Right = 'right',
 }
 
 export type OnChangeCallback = (isOpen: boolean)=> void;
+const isTablet = true;// DeviceInfo.isTablet();
 
 interface Props {
 	themeId: number;
@@ -29,16 +30,18 @@ interface Props {
 
 	onChange: OnChangeCallback;
 	disableGestures: boolean;
+	editMode: boolean;
 }
 
 interface UseStylesProps {
 	themeId: number;
 	isLeftMenu: boolean;
 	menuWidth: number;
 	menuOpenFraction: Animated.AnimatedInterpolation<number>;
+	isMenuOpen: boolean;
 }
 
-const useStyles = ({ themeId, isLeftMenu, menuWidth, menuOpenFraction }: UseStylesProps) => {
+const useStyles = ({ themeId, isLeftMenu, menuWidth, menuOpenFraction, isMenuOpen }: UseStylesProps) => {
 	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
 	return useMemo(() => {
 		const theme = themeStyle(themeId);
@@ -53,16 +56,9 @@ const useStyles = ({ themeId, isLeftMenu, menuWidth, menuOpenFraction }: UseStyl
 			contentOuterWrapper: {
 				flexGrow: 1,
 				flexShrink: 1,
-				width: windowWidth,
+				width: windowWidth - (isMenuOpen  ? menuWidth : 0),
 				height: windowHeight,
-				transform: [{
-					translateX: menuOpenFraction.interpolate({
-						inputRange: [0, 1],
-						outputRange: [0, isLeftMenu ? menuWidth : -menuWidth],
-					}),
-					// The RN Animation docs suggests setting "perspective" while setting other transform styles:
-					// https://reactnative.dev/docs/animations#bear-in-mind
-				}, { perspective: 1000 }],
+				transform: isMenuOpen  ? 'translateX(' + menuWidth + 'px)' : 'none',
 			},
 			contentWrapper: {
 				display: 'flex',
@@ -107,7 +103,7 @@ const useStyles = ({ themeId, isLeftMenu, menuWidth, menuOpenFraction }: UseStyl
 				width: windowWidth,
 			},
 		});
-	}, [themeId, isLeftMenu, windowWidth, windowHeight, menuWidth, menuOpenFraction]);
+	}, [themeId, isLeftMenu, windowWidth, windowHeight, menuWidth, menuOpenFraction, isMenuOpen]);
 };
 
 interface UseAnimationsProps {
@@ -265,11 +261,11 @@ const SideMenuComponent: React.FC<Props> = props => {
 		setIsAnimating(true);
 	}, [setIsAnimating]);
 
-	const styles = useStyles({ themeId: props.themeId, menuOpenFraction, menuWidth, isLeftMenu });
-
+	const styles = useStyles({ themeId: props.themeId, menuOpenFraction, menuWidth, isLeftMenu, isMenuOpen: open });
+	
 	const menuComponent = (
 		<AccessibleView
-			inert={!open}
+			inert={isTablet ? false : !open}
 			style={styles.menuWrapper}
 		>
 			<AccessibleView
@@ -285,7 +281,7 @@ const SideMenuComponent: React.FC<Props> = props => {
 
 	const contentComponent = (
 		<AccessibleView
-			inert={open}
+			inert={isTablet ? false : open}
 			style={styles.contentWrapper}
 		>
 			<AccessibleView refocusCounter={open ? 1 : undefined} />
@@ -314,16 +310,18 @@ const SideMenuComponent: React.FC<Props> = props => {
 			{menuComponent}
 			<Animated.View style={styles.contentOuterWrapper}>
 				{contentComponent}
-				{closeButtonOverlay}
+				{!isTablet && closeButtonOverlay}
 			</Animated.View>
 		</View>
 	);
 };
 
-const SideMenu = connect((state: State) => {
+const SideMenu = connect((state: AppState) => {
 	return {
+		route: state.route,
 		themeId: state.settings.theme,
 		isOpen: state.showSideMenu,
+		editMode: state.editMode,
 	};
 })(SideMenuComponent);
 

packages/app-mobile/components/screens/Note/Note.tsx

@@ -33,7 +33,7 @@ import { BaseScreenComponent } from '../../base-screen';
 import { themeStyle, editorFont } from '../../global-style';
 import shared, { BaseNoteScreenComponent, Props as BaseProps } from '@joplin/lib/components/shared/note-screen-shared';
 import SelectDateTimeDialog from '../../SelectDateTimeDialog';
-import ShareExtension from '../../../utils/ShareExtension.js';
+import ShareExtension from '../../../utils/ShareExtension';
 import CameraView from '../../CameraView/CameraView';
 import { FolderEntity, NoteEntity, ResourceEntity } from '@joplin/lib/services/database/types';
 import Logger from '@joplin/utils/Logger';
@@ -338,6 +338,12 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 				getMode: () => this.state.mode,
 				setMode: (mode: 'view'|'edit') => {
 					this.setState({ mode });
+					if (mode === 'view') {
+						this.props.dispatch({
+							type: 'SET_EDIT_MODE',
+							payload: false,
+						});
+					}
 				},
 			},
 			commands,
@@ -486,6 +492,7 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 			fontSize: theme.fontSize,
 			paddingTop: 10, // Added for iOS (Not needed for Android??)
 			paddingBottom: 10, // Added for iOS (Not needed for Android??)
+			...theme.titleTextInput,
 		};
 
 		this.styles_[cacheKey] = StyleSheet.create(styles);
@@ -1543,6 +1550,10 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 				icon: 'create',
 				onPress: () => {
 					this.setState({ mode: 'edit' });
+					this.props.dispatch({
+						type: 'SET_EDIT_MODE',
+						payload: true,
+					})
 
 					this.doFocusUpdate_ = true;
 				},

packages/app-mobile/package.json

@@ -40,15 +40,15 @@
     "crypto-browserify": "3.12.0",
     "deprecated-react-native-prop-types": "5.0.0",
     "events": "3.3.0",
-    "expo": "51.0.26",
+    "expo": "52.0.*",
     "expo-camera": "15.0.16",
     "lodash": "4.17.21",
     "md5": "2.3.0",
     "path-browserify": "1.0.1",
     "prop-types": "15.8.1",
     "punycode": "2.3.1",
     "react": "18.3.1",
-    "react-native": "0.74.1",
+    "react-native": "0.75.*",
     "react-native-device-info": "10.14.0",
     "react-native-document-picker": "9.3.0",
     "react-native-dropdownalert": "5.1.0",
@@ -125,6 +125,7 @@
     "react-test-renderer": "18.3.1",
     "sharp": "0.33.4",
     "sqlite3": "5.1.6",
+    "tesseract": "^0.0.3",
     "timers-browserify": "2.0.12",
     "ts-jest": "29.1.5",
     "ts-loader": "9.5.1",

packages/app-mobile/root.tsx

@@ -42,7 +42,7 @@ import NavService from '@joplin/lib/services/NavService';
 import { createStore, applyMiddleware, Dispatch } from 'redux';
 import reduxSharedMiddleware from '@joplin/lib/components/shared/reduxSharedMiddleware';
 import shimInit from './utils/shim-init-react';
-const { AppNav } = require('./components/app-nav.js');
+const { AppNav } = require('./components/app-nav');
 import Note from '@joplin/lib/models/Note';
 import Folder from '@joplin/lib/models/Folder';
 import BaseSyncTarget from '@joplin/lib/BaseSyncTarget';
@@ -58,13 +58,13 @@ import Database from '@joplin/lib/database';
 import NotesScreen from './components/screens/Notes';
 import TagsScreen from './components/screens/tags';
 import ConfigScreen from './components/screens/ConfigScreen/ConfigScreen';
-const { FolderScreen } = require('./components/screens/folder.js');
+const { FolderScreen } = require('./components/screens/folder');
 import LogScreen from './components/screens/LogScreen';
 import StatusScreen from './components/screens/status';
 import SearchScreen from './components/screens/SearchScreen';
-const { OneDriveLoginScreen } = require('./components/screens/onedrive-login.js');
+const { OneDriveLoginScreen } = require('./components/screens/onedrive-login');
 import EncryptionConfigScreen from './components/screens/encryption-config';
-import DropboxLoginScreen from './components/screens/dropbox-login.js';
+import DropboxLoginScreen from './components/screens/dropbox-login';
 import { MenuProvider } from 'react-native-popup-menu';
 import SideMenu, { SideMenuPosition } from './components/SideMenu';
 import SideMenuContent from './components/side-menu-content';
@@ -78,10 +78,10 @@ import WelcomeUtils from '@joplin/lib/WelcomeUtils';
 import { themeStyle } from './components/global-style';
 import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 import SyncTargetFilesystem from '@joplin/lib/SyncTargetFilesystem';
-const SyncTargetNextcloud = require('@joplin/lib/SyncTargetNextcloud.js');
-const SyncTargetWebDAV = require('@joplin/lib/SyncTargetWebDAV.js');
-const SyncTargetDropbox = require('@joplin/lib/SyncTargetDropbox.js');
-const SyncTargetAmazonS3 = require('@joplin/lib/SyncTargetAmazonS3.js');
+const SyncTargetNextcloud = require('@joplin/lib/SyncTargetNextcloud');
+const SyncTargetWebDAV = require('@joplin/lib/SyncTargetWebDAV');
+const SyncTargetDropbox = require('@joplin/lib/SyncTargetDropbox');
+const SyncTargetAmazonS3 = require('@joplin/lib/SyncTargetAmazonS3');
 import BiometricPopup from './components/biometrics/BiometricPopup';
 import initLib from '@joplin/lib/initLib';
 import { isCallbackUrl, parseCallbackUrl, CallbackUrlCommand } from '@joplin/lib/callbackUrlUtils';
@@ -141,6 +141,7 @@ import { AppState } from './utils/types';
 import { getDisplayParentId } from '@joplin/lib/services/trash';
 
 const logger = Logger.create('root');
+const isTablet = true;// DeviceInfo.isTablet();
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 let storeDispatch: any = function(_action: any) {};
@@ -284,10 +285,18 @@ function historyCanGoBackTo(route: any) {
 const appReducer = (state = appDefaultState, action: any) => {
 	let newState = state;
 	let historyGoingBack = false;
-
+	
 	try {
 		switch (action.type) {
 
+		case 'SET_EDIT_MODE':
+			newState = {
+				...state,
+				editMode: action.payload,
+				showSideMenu: !action.payload,
+			};
+		break;
+
 		case 'NAV_BACK':
 		case 'NAV_GO':
 
@@ -318,7 +327,7 @@ const appReducer = (state = appDefaultState, action: any) => {
 					navHistory.splice(0, navHistory.length);
 				}
 
-				newState = { ...state };
+				newState = { ...state, editMode: false };
 
 				newState.selectedNoteHash = '';
 
@@ -384,9 +393,10 @@ const appReducer = (state = appDefaultState, action: any) => {
 			break;
 
 		case 'SIDE_MENU_CLOSE':
-
-			newState = { ...state };
-			newState.showSideMenu = false;
+			if (!isTablet) {
+				newState = { ...state };
+				newState.showSideMenu = false;
+			}
 			break;
 
 		case 'SET_PLUGIN_PANELS_DIALOG_VISIBLE':
@@ -1256,7 +1266,7 @@ class AppComponent extends React.Component {
 		let menuPosition = SideMenuPosition.Left;
 		let disableSideMenuGestures = this.props.disableSideMenuGestures;
 
-		if (this.props.routeName === 'Note') {
+		if (this.props.routeName === 'Note' && !isTablet) {
 			sideMenuContent = <SafeAreaView style={{ flex: 1, backgroundColor: theme.backgroundColor }}><SideMenuContentNote options={this.props.noteSideMenuOptions}/></SafeAreaView>;
 			menuPosition = SideMenuPosition.Right;
 		} else if (this.props.routeName === 'Config') {
@@ -1311,7 +1321,7 @@ class AppComponent extends React.Component {
 					toleranceY={20}
 					openMenuOffset={this.state.sideMenuWidth}
 					menuPosition={menuPosition}
-					onChange={(isOpen: boolean) => this.sideMenu_change(isOpen)}
+					onChange={(isOpen: boolean) => !isTablet && this.sideMenu_change(isOpen)}
 					disableGestures={disableSideMenuGestures}
 				>
 					<StatusBar barStyle={statusBarStyle} />

packages/app-mobile/tsconfig.json

@@ -12,6 +12,8 @@
 	],
 	"compilerOptions": {
 		"types": ["jest", "node"],
-		"moduleSuffixes": [".ios", ".android", ".native", ""]
+		"moduleSuffixes": [".ios", ".android", ".native", ""],
+		"allowSyntheticDefaultImports": true,
+		"noImplicitAny": false
 	}
 }

packages/app-mobile/utils/appDefaultState.ts

@@ -7,6 +7,8 @@ export const DEFAULT_ROUTE = {
 	smartFilterId: 'c3176726992c11e9ac940492261af972',
 };
 
+const isTablet = true;//DeviceInfo.isTablet();
+
 const appDefaultState: AppState = {
 	smartFilterId: undefined,
 	keyboardVisible: false,
@@ -18,6 +20,8 @@ const appDefaultState: AppState = {
 	showPanelsDialog: false,
 	newNoteAttachFileAction: null,
 	...defaultState,
+	editMode: false,
+	showSideMenu: isTablet,
 
 	// On mobile, it's possible to select notes that aren't in the selected folder/tag/etc.
 	allowSelectionInOtherFolders: true,

packages/app-mobile/utils/types.ts

@@ -13,4 +13,5 @@ export interface AppState extends State {
 	disableSideMenuGestures: boolean;
 
 	newNoteAttachFileAction: AttachFileAction | null;
+	editMode?: boolean;
 }

packages/lib/models/Setting.ts

@@ -164,6 +164,7 @@ class Setting extends BaseModel {
 	public static THEME_DRACULA = 5;
 	public static THEME_NORD = 6;
 	public static THEME_ARITIM_DARK = 7;
+	public static THEME_TOPLIN = 8;
 
 	public static FONT_DEFAULT = 0;
 	public static FONT_MENLO = 1;

packages/lib/theme.ts

@@ -6,6 +6,7 @@ import theme_solarizedDark from './themes/solarizedDark';
 import theme_nord from './themes/nord';
 import theme_aritimDark from './themes/aritimDark';
 import theme_oledDark from './themes/oledDark';
+import theme_toplin from './themes/toplin';
 import Setting from './models/Setting';
 import { Theme, ThemeAppearance } from './themes/type';
 
@@ -20,6 +21,7 @@ const themes: Record<number, Theme> = {
 	[Setting.THEME_NORD]: theme_nord,
 	[Setting.THEME_ARITIM_DARK]: theme_aritimDark,
 	[Setting.THEME_OLED_DARK]: theme_oledDark,
+	[Setting.THEME_TOPLIN]: theme_toplin,
 };
 
 export function themeById(themeId: number) {

packages/lib/themes/solarizedLight.ts

@@ -32,6 +32,7 @@ const theme: Theme = {
 
 	codeMirrorTheme: 'solarized light',
 	codeThemeCss: 'atom-one-light.css',
+	useNormalization: true,
 };
 
 export default theme;