improve user experience

2025-12-24 07:29:30 +01:00 · 2019-12-11 15:20:18 +05:00
parent d44285c4a0
commit 58071b3605
12 changed files with 92 additions and 39 deletions
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -5,23 +5,14 @@ import NavigationService, {
 import {
  StatusBar,
  View,
-  SafeAreaView,
-  TouchableOpacity,
  DeviceEventEmitter,
  Platform,
-  Text,
  Keyboard,
-  Animated,
 } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {
  COLOR_SCHEME,
  COLOR_SCHEME_DARK,
-  SIZE,
-  opacity,
-  WEIGHT,
-  pv,
-  ph,
  setColorScheme,
  onThemeUpdate,
  clearThemeUpdateListener,
@@ -77,10 +68,10 @@ const App = () => {

  useEffect(() => {
    DeviceEventEmitter.addListener('openSidebar', () => {
-      setSidebar('30%');
+      Platform.isPad ? setSidebar('30%') : setOpen(true);
    });
    DeviceEventEmitter.addListener('closeSidebar', () => {
-      setSidebar('0%');
+      Platform.isPad ? setSidebar('0%') : setOpen(false);
    });
    DeviceEventEmitter.addListener('disableGesture', () => {
      setDisableGesture(true);
@@ -91,10 +82,10 @@ const App = () => {

    return () => {
      DeviceEventEmitter.removeListener('openSidebar', () => {
-        setSidebar('30%');
+        Platform.isPad ? setSidebar('30%') : setOpen(true);
      });
      DeviceEventEmitter.removeListener('closeSidebar', () => {
-        setSidebar('0%');
+        Platform.isPad ? setSidebar('0%') : setOpen(false);
      });
      DeviceEventEmitter.removeListener('disableGesture', () => {
        setDisableGesture(true);
--- a/apps/mobile/src/components/AddNotebookDialog/index.js
+++ b/apps/mobile/src/components/AddNotebookDialog/index.js
@@ -120,6 +120,8 @@ export const AddNotebookDialog = ({visible, close}) => {
    <Modal
      visible={visible}
      transparent={true}
+      animated
+      animationType="fade"
      onRequestClose={() => (refs = [])}>
      <View
        style={{
@@ -131,9 +133,10 @@ export const AddNotebookDialog = ({visible, close}) => {
        }}>
        <View
          style={{
+            ...getElevation(5),
            width: '80%',
            maxHeight: 350,
-            elevation: 5,
+
            borderRadius: 5,
            backgroundColor: colors.bg,
            paddingHorizontal: ph,
--- a/apps/mobile/src/components/AddTopicDialog/index.js
+++ b/apps/mobile/src/components/AddTopicDialog/index.js
@@ -52,6 +52,8 @@ export const AddTopicDialog = ({
  return (
    <Modal
      visible={visible}
+      animated
+      animationType="fade"
      transparent={true}
      onRequestClose={() => (refs = [])}>
      <View
@@ -64,9 +66,10 @@ export const AddTopicDialog = ({
        }}>
        <View
          style={{
+            ...getElevation(5),
            width: '80%',
            maxHeight: 350,
-            elevation: 5,
+
            borderRadius: 5,
            backgroundColor: colors.bg,
            paddingHorizontal: ph,
--- a/apps/mobile/src/components/Dialog/index.js
+++ b/apps/mobile/src/components/Dialog/index.js
@@ -13,6 +13,7 @@ import {
  WEIGHT,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
+import {getElevation} from '../../utils/utils';

 export const Dialog = ({
  title,
@@ -43,9 +44,9 @@ export const Dialog = ({
        }}>
        <View
          style={{
+            ...getElevation(5),
            width: '80%',
            maxHeight: 350,
-            elevation: 5,
            borderRadius: 5,
            backgroundColor: colors.bg,
            paddingHorizontal: ph,
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -132,8 +132,10 @@ export const NotebookItem = ({
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 5,
+                width: '80%',
+                maxWidth: '80%',
              }}>
-              {item.topics.slice(0, 4).map(topic => (
+              {item.topics.slice(0, 2).map(topic => (
                <View
                  style={{
                    borderRadius: 5,
@@ -143,11 +145,12 @@ export const NotebookItem = ({
                    marginRight: 10,
                  }}>
                  <Text
+                    numberOfLines={1}
                    style={{
                      color: 'white',
-
                      fontFamily: WEIGHT.regular,
                      fontSize: SIZE.xxs + 1,
+                      maxWidth: '100%',
                    }}>
                    {topic.title}
                  </Text>
@@ -277,11 +280,19 @@ export const NotebookItem = ({
          <TouchableOpacity
            activeOpacity={opacity}
            onPress={async () => {
+              if (!noteToMove.notebook.notebook) {
                await db.addNoteToTopic(
                  notebookID,
                  item.title,
                  noteToMove.dateCreated,
                );
+              } else if (noteToMove.notebook.notebook) {
+                await db.moveNote(noteToMove.dateCreated, noteToMove.notebook, {
+                  notebook: notebookID,
+                  topic: item.title,
+                });
+              }
+
              NavigationService.navigate('Home');
              ToastEvent.show(`Note moved to ${item.title}`, 'success', 3000);
            }}
--- a/apps/mobile/src/components/SearchInput/index.js
+++ b/apps/mobile/src/components/SearchInput/index.js
@@ -25,13 +25,18 @@ export const Search = props => {
        props.sendHeight(e.nativeEvent.layout.height);
      }}
      transition="opacity"
-      duration={300}
+      duration={200}
      style={{
        opacity: props.hide ? 0 : 1,
      }}>
      <Animatable.View
-        transition="height"
-        duration={400}
+        transition={[
+          'marginTop',
+          'borderWidth',
+          'marginBottom',
+          'paddingVertical',
+        ]}
+        duration={300}
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
@@ -41,7 +46,6 @@ export const Search = props => {
          borderRadius: br,
          borderWidth: props.hide ? 0 : 1.5,
          paddingHorizontal: ph,
-
          paddingVertical: props.hide
            ? 0
            : Platform.OS == 'ios'
@@ -49,7 +53,7 @@ export const Search = props => {
            : pv - 8,
          marginBottom: props.hide ? 0 : 10,
          borderColor: focus ? colors.accent : colors.nav,
-          height: props.hide ? 0 : 55,
+          marginTop: props.hide ? -60 : 0,
        }}>
        <TextInput
          ref={inputRef}
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -2,8 +2,9 @@ import React, {useEffect, useState} from 'react';
 import {View, TouchableOpacity, Platform, Text} from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import {SIZE, WEIGHT} from '../../common/common';
-import {h} from '../../utils/utils';
+import {h, SideMenuEvent} from '../../utils/utils';
 import * as Animatable from 'react-native-animatable';
+import NavigationService from '../../services/NavigationService';

 export const Header = ({
  heading,
@@ -11,6 +12,7 @@ export const Header = ({
  canGoBack = true,
  hide,
  showSearch,
+  menu,
  sendHeight = e => {},
 }) => {
  return (
@@ -44,15 +46,21 @@ export const Header = ({
        }}>
        {canGoBack ? (
          <TouchableOpacity
+            hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
+            onPress={() => {
+              NavigationService.goBack();
+            }}
            style={{
-              justifyContent: 'center',
-              alignItems: 'center',
-              paddingRight: 15,
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
              height: 40,
-              width: 40,
-              marginTop: 5,
+              width: 25,
            }}>
            <Icon
+              style={{
+                marginLeft: -10,
+                marginTop: 5,
+              }}
              color={colors.pri}
              name={'chevron-left'}
              size={hide ? SIZE.xl : SIZE.xxl}
@@ -61,6 +69,30 @@ export const Header = ({
        ) : (
          undefined
        )}
+        {menu ? (
+          <TouchableOpacity
+            hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
+            onPress={() => {
+              SideMenuEvent.open();
+            }}
+            style={{
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+              height: 40,
+              width: 42,
+            }}>
+            <Icon
+              style={{
+                marginTop: 6,
+              }}
+              color={colors.pri}
+              name={'menu'}
+              size={hide ? SIZE.xl : SIZE.xxl - 2}
+            />
+          </TouchableOpacity>
+        ) : (
+          undefined
+        )}

        <Animatable.Text
          transition="fontSize"
--- a/apps/mobile/src/services/NavigationService.js
+++ b/apps/mobile/src/services/NavigationService.js
@@ -141,10 +141,15 @@ function push(routeName, params) {
  );
 }

+function goBack() {
+  _navigator.dispatch(NavigationActions.back());
+}
+
 // add other navigation functions that you need and export them

 export default {
  navigate,
  push,
+  goBack,
  setTopLevelNavigator,
 };
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -320,7 +320,8 @@ const Editor = ({navigation}) => {
    SideMenuEvent.close();
    SideMenuEvent.disable();
    return () => {
-      SideMenuEvent.open();
+      Platform.isPad ? SideMenuEvent.open() : null;
+
      SideMenuEvent.enable();
    };
  });
--- a/apps/mobile/src/views/Editor/web/texteditor.html
+++ b/apps/mobile/src/views/Editor/web/texteditor.html
@@ -1240,6 +1240,9 @@
   
    border-top: 1px solid ${pageTheme.colors.nav};
  }
+  .ql-editor.ql-blank::before {
+    color: ${pageTheme.colors.icon};
+  }

  

@@ -1252,9 +1255,7 @@
                $('.ql-picker-options').css('border-color',pageTheme.colors.nav);
               
                $('.ql-container').css('color',pageTheme.colors.pri );
-                $('.ql-editor.ql-blank').before(function() {
-                $(this).css('color',pageTheme.colors.icon);
-                })
+                
                return;
              } 
              if (data.data.substr(0, 7) === '$image$') {
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -216,6 +216,7 @@ export const Home = ({navigation}) => {
              headerHeight = height;
              setMarginTop();
            }}
+            menu={true}
            hide={hideHeader}
            showSearch={() => {
              setHideHeader(false);
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -130,7 +130,7 @@ export const Notebook = ({navigation}) => {
            }}
            colors={colors}
            heading={params.title}
-            canGoBack={false}
+            canGoBack={true}
          />

          <Search