minor ui fixes

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {db, DDS} from '../../../App';
 import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {ACTIONS} from '../../provider';
-import {getElevation, ToastEvent, timeSince} from '../../utils/utils';
+import {getElevation, ToastEvent} from '../../utils/utils';
 import {updateEvent} from '../DialogManager';
 
 let refs = [];

apps/mobile/src/components/Container/index.js

@@ -17,6 +17,10 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
 
+const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
+  TouchableOpacity,
+);
+
 export const Container = ({
   children,
   bottomButtonOnPress,
@@ -31,21 +35,25 @@ export const Container = ({
 
   useEffect(() => {
     Keyboard.addListener('keyboardDidShow', () => {
-      setButtonHide(true);
+      setTimeout(() => {
+        setButtonHide(true);
+      }, 300);
     });
     Keyboard.addListener('keyboardDidHide', () => {
       setTimeout(() => {
         setButtonHide(false);
-      }, 100);
+      }, 300);
     });
     return () => {
       Keyboard.removeListener('keyboardDidShow', () => {
-        setButtonHide(true);
+        setTimeout(() => {
+          setButtonHide(true);
+        }, 300);
       });
       Keyboard.removeListener('keyboardDidHide', () => {
         setTimeout(() => {
           setButtonHide(false);
-        }, 100);
+        }, 300);
       });
     };
   }, []);
@@ -67,8 +75,11 @@ export const Container = ({
         }}>
         {children}
 
-        {buttonHide || noBottomButton ? null : (
-          <TouchableOpacity
+        {noBottomButton ? null : (
+          <AnimatedTouchableOpacity
+            transition={['translateY', 'opacity']}
+            useNativeDriver={true}
+            duration={250}
             onPress={bottomButtonOnPress}
             activeOpacity={opacity}
             style={{
@@ -83,6 +94,12 @@ export const Container = ({
               position: 'absolute',
               zIndex: 10,
               bottom: 10,
+              opacity: buttonHide ? 0 : 1,
+              transform: [
+                {
+                  translateY: buttonHide ? 200 : 0,
+                },
+              ],
             }}>
             <View
               style={{
@@ -104,7 +121,7 @@ export const Container = ({
                 {'  ' + bottomButtonText}
               </Text>
             </View>
-          </TouchableOpacity>
+          </AnimatedTouchableOpacity>
         )}
       </KeyboardAvoidingView>
     </AnimatedSafeAreaView>

apps/mobile/src/components/Menu/index.js

@@ -6,6 +6,7 @@ import {
   Text,
   TouchableOpacity,
   View,
+  DeviceEventEmitter,
 } from 'react-native';
 import FastStorage from 'react-native-fast-storage';
 import Icon from 'react-native-vector-icons/Feather';
@@ -30,6 +31,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
 
   // todo
 
+  let overlayRef;
+
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
     StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
@@ -116,6 +119,19 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
           marginTop: Platform.OS == 'ios' ? 0 : StatusBar.currentHeight - 10,
         }}
       />
+      <View
+        ref={ref => (overlayRef = ref)}
+        onLayout={() => {
+          DeviceEventEmitter.emit('sendOverlayViewRef', {ref: overlayRef});
+        }}
+        style={{
+          height: '100%',
+          width: '100%',
+          position: 'absolute',
+          zIndex: 999,
+          backgroundColor: colors.bg,
+        }}
+      />
 
       <ScrollView
         contentContainerStyle={{minHeight: '80%'}}

apps/mobile/src/components/NotebookItem/index.js

@@ -106,6 +106,7 @@ export const NotebookItem = ({
               {item && item.topics
                 ? item.topics.slice(1, 4).map(topic => (
                     <View
+                      key={topic.dateCreated.toString() + topic.title}
                       style={{
                         borderRadius: 5,
                         backgroundColor: colors.accent,
@@ -167,18 +168,14 @@ export const NotebookItem = ({
                 alignItems: 'center',
                 marginTop: 5,
               }}>
-              <Icon
-                style={{width: 30}}
-                name="lock"
-                size={SIZE.xs}
-                color={colors.icon}
-              />
-              <Icon
-                style={{width: 30}}
-                name="star"
-                size={SIZE.xs}
-                color={colors.icon}
-              />
+              {item.favorite ? (
+                <Icon
+                  style={{width: 30}}
+                  name="star"
+                  size={SIZE.xs}
+                  color={colors.icon}
+                />
+              ) : null}
 
               <Text
                 style={{

apps/mobile/src/views/Editor/index.js

@@ -20,11 +20,9 @@ import {
   TEMPLATE_EXIT,
 } from '../../components/DialogManager';
 import {EditorMenu} from '../../components/EditorMenu';
-import {useTracked} from '../../provider';
+import {useTracked, ACTIONS} from '../../provider';
 import {SideMenuEvent} from '../../utils/utils';
 import {AnimatedSafeAreaView} from '../Home';
-const w = Dimensions.get('window').width;
-const h = Dimensions.get('window').height;
 
 let EditorWebView;
 let note = {};
@@ -37,20 +35,9 @@ const Editor = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
 
-  ///
-  const updateDB = () => {};
-
   // Local State
   const [sidebar, setSidebar] = useState(DDS.isTab ? true : false);
 
-  const [noteProps, setNoteProps] = useState({
-    tags: [],
-    locked: false,
-    pinned: false,
-    favorite: false,
-    colors: [],
-  });
-
   // FUNCTIONS
 
   const post = value => EditorWebView.postMessage(value);
@@ -72,8 +59,7 @@ const Editor = ({navigation}) => {
       timer = null;
       onChange(evt.nativeEvent.data);
       timer = setTimeout(() => {
-        saveNote(noteProps, true);
-        console.log('saved');
+        saveNote(true);
       }, 1000);
     }
   };
@@ -103,8 +89,8 @@ const Editor = ({navigation}) => {
       },
       dateCreated: timestamp,
     });
-    updateDB();
-    if (lockNote && noteProps.locked) {
+
+    if (lockNote && db.getNote(timestamp).locked) {
       db.lockNote(timestamp, 'password');
     }
   };
@@ -118,15 +104,6 @@ const Editor = ({navigation}) => {
   };
 
   const updateEditor = () => {
-    let props = {
-      tags: note.tags,
-      colors: note.colors,
-      pinned: note.pinned,
-      favorite: note.favorite,
-      locked: note.locked,
-    };
-    setNoteProps({...props});
-
     post(JSON.stringify(note.content.delta));
     post(
       JSON.stringify({

apps/mobile/src/views/Tags/index.js

@@ -12,98 +12,92 @@ const h = Dimensions.get('window').height;
 export const Tags = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
-  let isFocused = useIsFocused();
 
-  if (!isFocused) {
-    console.log('block rerender');
-    return <></>;
-  } else {
-    return (
-      <SafeAreaView
-        style={{
-          height: '100%',
-          backgroundColor: colors.bg,
-        }}>
-        <Header canGoBack={false} heading="Tags" menu={true} />
+  return (
+    <SafeAreaView
+      style={{
+        height: '100%',
+        backgroundColor: colors.bg,
+      }}>
+      <Header canGoBack={false} heading="Tags" menu={true} />
 
-        <View style={{width: '90%', alignSelf: 'center', height: '100%'}}>
-          <FlatList
-            style={{
-              height: '100%',
-            }}
-            contentContainerStyle={{
-              height: '100%',
-            }}
-            data={[]}
-            ListEmptyComponent={
-              <View
+      <View style={{width: '90%', alignSelf: 'center', height: '100%'}}>
+        <FlatList
+          style={{
+            height: '100%',
+          }}
+          contentContainerStyle={{
+            height: '100%',
+          }}
+          data={[]}
+          ListEmptyComponent={
+            <View
+              style={{
+                height: '80%',
+                width: '100%',
+                alignItems: 'center',
+                alignSelf: 'center',
+                justifyContent: 'center',
+                opacity: 0.8,
+              }}>
+              <TagsPlaceHolder colors={colors} />
+              <Text
                 style={{
-                  height: '80%',
-                  width: '100%',
-                  alignItems: 'center',
-                  alignSelf: 'center',
-                  justifyContent: 'center',
-                  opacity: 0.8,
+                  fontSize: SIZE.md,
+                  color: colors.icon,
                 }}>
-                <TagsPlaceHolder colors={colors} />
-                <Text
-                  style={{
-                    fontSize: SIZE.md,
-                    color: colors.icon,
-                  }}>
-                  Tags added to notes appear here
-                </Text>
-                <Text
-                  style={{
-                    fontSize: SIZE.sm,
-                    color: colors.icon,
-                    marginTop: 20,
-                  }}>
-                  No tags found
-                </Text>
-              </View>
-            }
-            renderItem={({item, index}) => (
-              <View
+                Tags added to notes appear here
+              </Text>
+              <Text
                 style={{
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
-                  alignItems: 'center',
-                  margin: 5,
-                  paddingVertical: pv,
-                  borderBottomWidth: 1.5,
-                  borderBottomColor: colors.navbg,
+                  fontSize: SIZE.sm,
+                  color: colors.icon,
+                  marginTop: 20,
+                }}>
+                No tags found
+              </Text>
+            </View>
+          }
+          renderItem={({item, index}) => (
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                margin: 5,
+                paddingVertical: pv,
+                borderBottomWidth: 1.5,
+                borderBottomColor: colors.navbg,
+              }}>
+              <Text
+                style={{
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.md,
+                  color: colors.pri,
                 }}>
                 <Text
                   style={{
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.md,
-                    color: colors.pri,
+                    color: colors.accent,
                   }}>
-                  <Text
-                    style={{
-                      color: colors.accent,
-                    }}>
-                    #
-                  </Text>
-                  {item.slice(1)}
-
-                  {'\n'}
-                  <Text
-                    style={{
-                      fontSize: SIZE.xs,
-                      color: colors.icon,
-                    }}>
-                    10 notes
-                  </Text>
+                  #
                 </Text>
-              </View>
-            )}
-          />
-        </View>
-      </SafeAreaView>
-    );
-  }
+                {item.slice(1)}
+
+                {'\n'}
+                <Text
+                  style={{
+                    fontSize: SIZE.xs,
+                    color: colors.icon,
+                  }}>
+                  10 notes
+                </Text>
+              </Text>
+            </View>
+          )}
+        />
+      </View>
+    </SafeAreaView>
+  );
 };
 
 Tags.navigationOptions = {