Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 19:57:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: ui issues on ipad

Browse Source
This commit is contained in:
ammarahm-ed
2022-07-11 13:00:22 +05:00
parent f84f1cd76a
commit 616cb7e47a
14 changed files with 90 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/ios/Podfile.lock
View File

@@ -653,7 +653,7 @@ SPEC CHECKSUMS:
React: dbd201f781b180eab148aa961683943c72f67dcf
React-bridging: 10a863fdc0fc6f9c9f8527640936b293cd288bdc
React-callinvoker: 6ad32eee2630dab9023de5df2a6a8cacbfc99a67
React-Codegen: fe3423fa6f37d05e233ab0e85e34fe0b443a5654
React-Codegen: 20ed65b0b247402f78ed54d352e97dd19789e4d1
React-Core: 6177b1f2dd794fe202a5042d3678b2ddfcbfb7d4
React-CoreModules: c74e6b155f9876b1947fc8a13f0cb437cc7f6dcd
React-cxxreact: a07b7d90c4c71dd38c7383c7344b34d0a1336aee

5
apps/mobile/src/components/auth/login.js
View File

@@ -190,10 +190,11 @@ export const Login = ({ changeMode, welcome }) => {
</View>
<View
style={{
width: focused ? '100%' : '99.9%',
width: DDS.isTab ? (focused ? '50%' : '49.99%') : focused ? '100%' : '99.9%',
padding: 12,
backgroundColor: colors.bg,
flexGrow: 1
flexGrow: 1,
alignSelf: 'center'
}}
>
<Input

5
apps/mobile/src/components/auth/signup.js
View File

@@ -139,10 +139,11 @@ export const Signup = ({ changeMode, welcome, trial }) => {
</View>
<View
style={{
width: '100%',
width: DDS.isTab ? '50%' : '100%',
padding: 12,
backgroundColor: colors.bg,
flexGrow: 1
flexGrow: 1,
alignSelf: 'center'
}}
>
<Input

6
apps/mobile/src/components/header/leftmenus.js
View File

@@ -16,7 +16,11 @@ export const LeftMenus = () => {
const onLeftButtonPress = () => {
if (!canGoBack) {
Navigation.openDrawer();
if (tabBarRef.current?.isDrawerOpen()) {
Navigation.closeDrawer();
} else {
Navigation.openDrawer();
}
return;
}
Navigation.goBack();

3
apps/mobile/src/components/intro/index.js
View File

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
import { Dimensions, Image, TouchableOpacity, useWindowDimensions, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { DDS } from '../../services/device-detection';
import SettingsService from '../../services/settings';
import { useSettingStore } from '../../stores/use-setting-store';
import { useThemeStore } from '../../stores/use-theme-store';
@@ -153,7 +154,7 @@ const Intro = ({ navigation, route }) => {
<BouncingView
style={{
position: 'absolute',
bottom: -100,
bottom: DDS.isTab ? -300 : -100,
zIndex: -1
}}
duration={3000}

4
apps/mobile/src/components/intro/welcome.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import Animated, { FadeInDown } from 'react-native-reanimated';
import { DDS } from '../../services/device-detection';
import { eSendEvent } from '../../services/event-manager';
import Navigation from '../../services/navigation';
import SettingsService from '../../services/settings';
@@ -25,7 +26,8 @@ export const WelcomeNotice = () => {
padding: 12,
alignItems: 'center',
justifyContent: 'center',
width: '100%'
width: DDS.isTab ? '50%' : '95%',
alignSelf: 'center'
}}
>
<SvgView width={200} height={200} src={IMAGE(colors.accent)} />

12
apps/mobile/src/components/tabs/index.tsx
View File

@@ -16,6 +16,7 @@ import Animated, {
withSpring,
withTiming
} from 'react-native-reanimated';
import { useSettingStore } from '../../stores/use-setting-store';
interface TabProps extends ViewProps {
dimensions: { width: number; height: number };
@@ -44,6 +45,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(
{ children, dimensions, widths, onChangeTab, onScroll, enabled, onDrawerStateChange }: TabProps,
ref
) => {
const deviceMode = useSettingStore(state => state.deviceMode);
const translateX = useSharedValue(widths ? widths.a : 0);
const startX = useSharedValue(0);
const currentTab = useSharedValue(1);
@@ -58,9 +60,11 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(
const [disabled, setDisabled] = useState(false);
const node = useRef<Animated.View>(null);
const containerWidth = widths ? widths.a + widths.b + widths.c : dimensions.width;
console.log(containerWidth, dimensions.width);
const drawerPosition = 0;
const homePosition = widths.a;
const editorPosition = widths.a + widths.b;
const isSmallTab = deviceMode === 'smallTablet';
useEffect(() => {
const sub = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -189,7 +193,13 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(
.onChange(event => {
if (locked.value || forcedLock.value) return;
let value = translateX.value + event.changeX * -1;
if (value < 0 || currentTab.value === 2 || value > editorPosition) return;
if (
value < 0 ||
currentTab.value === 2 ||
value > editorPosition ||
(value >= homePosition && isSmallTab)
)
return;
translateX.value = value;
})
.onEnd(event => {

14
apps/mobile/src/navigation/tabsholder.js
View File

@@ -12,7 +12,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { notesnook } from '../../e2e/test.ids';
import { SideMenu } from '../components/side-menu';
import { FluidTabs } from '../components/tabs';
import { editorState } from '../screens/editor/tiptap/utils';
import { editorController, editorState } from '../screens/editor/tiptap/utils';
import { EditorWrapper } from '../screens/editor/wrapper';
import { DDS } from '../services/device-detection';
import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../services/event-manager';
@@ -46,6 +46,7 @@ export const TabsHolder = React.memo(
const animatedTranslateY = useSharedValue(-9999);
const overlayRef = useRef();
const [orientation, setOrientation] = useState(getInitialOrientation());
const introCompleted = useSettingStore(state => state.settings.introCompleted);
const onOrientationChange = (o, o2) => {
setOrientation(o || o2);
@@ -63,6 +64,7 @@ export const TabsHolder = React.memo(
const showFullScreenEditor = () => {
setFullscreen(true);
tabBarRef.current?.openDrawer();
editorRef.current?.setNativeProps({
style: {
width: dimensions.width,
@@ -74,7 +76,11 @@ export const TabsHolder = React.memo(
};
const closeFullScreenEditor = () => {
tabBarRef.current?.closeDrawer();
setFullscreen(false);
editorController.current?.commands.updateSettings({
fullscreen: false
});
editorRef.current?.setNativeProps({
style: {
width:
@@ -287,7 +293,7 @@ export const TabsHolder = React.memo(
<FluidTabs
ref={tabBarRef}
dimensions={dimensions}
widths={widths[deviceMode]}
widths={!introCompleted ? widths['mobile'] : widths[deviceMode]}
enabled={deviceMode !== 'tablet'}
onScroll={onScroll}
onChangeTab={onChangeTab}
@@ -297,7 +303,7 @@ export const TabsHolder = React.memo(
key="1"
style={{
height: '100%',
width: fullscreen ? 0 : widths[deviceMode]?.a
width: fullscreen ? 0 : widths[!introCompleted ? 'mobile' : deviceMode]?.a
}}
>
<SideMenu />
@@ -307,7 +313,7 @@ export const TabsHolder = React.memo(
key="2"
style={{
height: '100%',
width: fullscreen ? 0 : widths[deviceMode]?.b
width: fullscreen ? 0 : widths[!introCompleted ? 'mobile' : deviceMode]?.b
}}
>
{deviceMode === 'mobile' ? (

2
apps/mobile/src/screens/editor/index.tsx
View File

@@ -136,7 +136,7 @@ const Editor = React.memo(
allowUniversalAccessFromFileURLs={true}
originWhitelist={['*']}
source={{
uri: __DEV__ ? 'http://localhost:3000/' : EDITOR_URI
uri: __DEV__ ? 'http://192.168.10.7:3000' : EDITOR_URI
}}
style={style}
autoManageStatusBarEnabled={false}

13
apps/mobile/src/screens/editor/tiptap/commands.ts
View File

@@ -117,6 +117,19 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
`);
};
updateSettings = async (settings?: Partial<Settings>) => {
if (!this.previousSettings) return;
this.previousSettings = {
...this.previousSettings,
...settings
};
await this.doAsync(`
if (typeof globalThis.settingsController !== "undefined") {
globalThis.settingsController.update(${JSON.stringify(this.previousSettings)})
}
`);
};
setSettings = async (settings?: Partial<Settings>) => {
if (settings) {
this.previousSettings = settings;

1
apps/mobile/src/screens/editor/tiptap/useEditor.ts
View File

@@ -341,6 +341,7 @@ export const useEditor = (
await commands.setPlaceholder(placeholderTip.current);
isDefaultEditor && restoreEditorState();
}
commands.setSettings();
}, [state, currentNote, loadNote]);
async function restoreEditorState() {

25
apps/mobile/src/screens/editor/tiptap/useEditorEvents.ts
View File

@@ -21,6 +21,7 @@ import {
eClearEditor,
eCloseFullscreenEditor,
eOnLoadNote,
eOpenFullscreenEditor,
eOpenLoginDialog,
eOpenPremiumDialog,
eOpenPublishNoteDialog,
@@ -48,7 +49,8 @@ export const EventTypes = {
back: 'editor-event:back',
pro: 'editor-event:pro',
monograph: 'editor-event:monograph',
properties: 'editor-event:properties'
properties: 'editor-event:properties',
fullscreen: 'editor-event:fullscreen'
};
const publishNote = async (editor: useEditorType) => {
@@ -124,17 +126,26 @@ export const useEditorEvents = (
if (!editor) return null;
useEffect(() => {
console.log('settings', readonly);
console.log('settings', fullscreen);
editor.commands.setSettings({
deviceMode: deviceMode || 'mobile',
fullscreen: fullscreen,
fullscreen: fullscreen || false,
premium: isPremium,
readonly: readonly || editorPropReadonly,
tools: tools,
noHeader: noHeader,
noToolbar: readonly || editorPropReadonly || noToolbar
});
}, [fullscreen, isPremium, readonly, editor.sessionId, editor.loading, tools, editor.commands]);
}, [
fullscreen,
isPremium,
readonly,
editor.sessionId,
editor.loading,
deviceMode,
tools,
editor.commands
]);
const onBackPress = useCallback(async () => {
const editorHandledBack = await editor.commands.handleBack();
@@ -163,7 +174,7 @@ export const useEditorEvents = (
editorState().currentlyEditing = false;
editor.reset();
}, 1);
}, []);
}, [fullscreen, deviceMode]);
const onHardwareBackPress = useCallback(() => {
if (editorState().currentlyEditing) {
@@ -302,6 +313,10 @@ export const useEditorEvents = (
case EventTypes.properties:
showActionsheet(editor);
break;
case EventTypes.fullscreen:
editorState().isFullscreen = true;
eSendEvent(eOpenFullscreenEditor);
break;
case EventTypes.back:
onBackPress();
break;

21
apps/mobile/src/screens/editor/wrapper.js
View File

@@ -1,12 +1,5 @@
import React, { useEffect } from 'react';
import {
AppState,
KeyboardAvoidingView,
Platform,
SafeAreaView,
TextInput,
View
} from 'react-native';
import { AppState, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Editor from '.';
import { PremiumToast } from '../../components/premium/premium-toast';
@@ -16,6 +9,7 @@ import { useSettingStore } from '../../stores/use-setting-store';
import { useThemeStore } from '../../stores/use-theme-store';
import { editorRef } from '../../utils/global-refs';
import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
import useKeyboard from '../../utils/hooks/use-keyboard';
import { ProgressBar } from './progress';
import { editorController, editorState, textInput } from './tiptap/utils';
@@ -26,6 +20,7 @@ export const EditorWrapper = ({ width }) => {
const insets = useSafeAreaInsets();
const floating = useIsFloatingKeyboard();
const introCompleted = useSettingStore(state => state.settings.introCompleted);
const keyboard = useKeyboard();
const onAppStateChanged = async state => {
if (editorState().movedAway) return;
@@ -47,7 +42,7 @@ export const EditorWrapper = ({ width }) => {
testID="editor-wrapper"
ref={editorRef}
style={{
width: width[deviceMode]?.c,
width: width[!introCompleted ? 'mobile' : deviceMode]?.c,
height: '100%',
backgroundColor: colors.bg,
borderLeftWidth: DDS.isTab ? 1 : 0,
@@ -58,7 +53,13 @@ export const EditorWrapper = ({ width }) => {
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{
flex: 1
flex: 1,
marginBottom:
Platform.OS === 'ios'
? keyboard?.keyboardShown && !floating
? 16
: insets.bottom
: 6
}}
enabled={!floating}
keyboardVerticalOffset={0}

9
apps/mobile/src/screens/settings/applock.js
View File

@@ -11,6 +11,7 @@ import { SvgView } from '../../components/ui/svg';
import { BouncingView } from '../../components/ui/transitions/bouncing-view';
import Heading from '../../components/ui/typography/heading';
import Paragraph from '../../components/ui/typography/paragraph';
import { DDS } from '../../services/device-detection';
import { presentSheet } from '../../services/event-manager';
import SettingsService from '../../services/settings';
import { useSettingStore } from '../../stores/use-setting-store';
@@ -68,7 +69,7 @@ const AppLock = ({ navigation, route }) => {
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'space-between',
width: '95%',
width: DDS.isTab && welcome ? '50%' : '95%',
paddingVertical: 12,
paddingHorizontal: 0,
alignSelf: 'center',
@@ -108,7 +109,9 @@ const AppLock = ({ navigation, route }) => {
<Seperator />
<View
style={{
paddingHorizontal: 12
paddingHorizontal: 12,
width: DDS.isTab && welcome ? '50%' : undefined,
alignSelf: 'center'
}}
>
{modes.map(item => (
@@ -187,7 +190,7 @@ const AppLock = ({ navigation, route }) => {
<BouncingView
style={{
position: 'absolute',
bottom: -130,
bottom: DDS.isTab ? -300 : -130,
zIndex: -1
}}
animated={false}