improve note items design

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

@@ -54,36 +54,7 @@ export default class NoteItem extends React.Component {
     }
   }
 
-  render() {
+  _onPress = async () => {
-    let {
-      colors,
-      item,
-      customStyle,
-      onLongPress,
-      isTrash,
-      pinned,
-      index,
-    } = this.props;
-    return (
-      <View
-        style={[
-          {
-            paddingVertical: pv,
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            flexDirection: 'row',
-            maxWidth: '100%',
-            paddingRight: 6,
-            alignSelf: 'center',
-            borderBottomWidth: 1,
-            borderBottomColor: colors.nav,
-          },
-          customStyle ? customStyle : {},
-        ]}>
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onLongPress={() => onLongPress()}
-          onPress={async () => {
     if (item.conflicted) {
       eSendEvent(eShowMergeDialog, item);
 
@@ -105,12 +76,31 @@ export default class NoteItem extends React.Component {
       eSendEvent(eOnLoadNote, item);
       openEditorAnimation();
     }
-          }}
+  };
+
+  render() {
+    let {colors, item, customStyle, isTrash} = this.props;
+    return (
+      <View
+        style={[
+          {
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            flexDirection: 'row',
+            maxWidth: '100%',
+            paddingRight: 6,
+            alignSelf: 'center',
+            borderBottomWidth: 1,
+            height: 100,
+            borderBottomColor: colors.nav,
+          },
+          customStyle ? customStyle : {},
+        ]}>
+        <View
           style={{
             paddingLeft: 0,
             width: '95%',
           }}>
-          <>
           <Text
             numberOfLines={1}
             style={{
@@ -250,8 +240,7 @@ export default class NoteItem extends React.Component {
               ) : null}
             </View>
           </View>
-          </>
+        </View>
-        </TouchableOpacity>
 
         <TouchableOpacity
           style={{

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

@@ -8,112 +8,48 @@ import NavigationService from '../../services/NavigationService';
 import {db, ToastEvent} from '../../utils/utils';
 import {Button} from '../Button';
 import {ActionSheetEvent, moveNoteHideEvent} from '../DialogManager/recievers';
+import Seperator from '../Seperator';
 
 export const NotebookItem = ({
   item,
-  index,
   hideMore = false,
-  topic,
   isTopic = false,
-  isMove = false,
-  noteToMove = null,
   notebookID,
   numColumns,
   isTrash,
   customStyle,
-  onLongPress,
-  navigation,
-  selectionMode,
-  pinned,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectedItemsList} = state;
 
-  const navigate = () => {
-    if (selectionMode) {
-      onLongPress();
-      return;
-    }
-    if (isTopic) {
-      NavigationService.navigate('Notes', {
-        ...item,
-      });
-    } else {
-      dispatch({
-        type: ACTIONS.HEADER_TEXT_STATE,
-        state: {
-          heading: hideMore ? 'Move to topic' : item.title,
-        },
-      });
-      dispatch({
-        type: ACTIONS.HEADER_STATE,
-        state: {
-          canGoBack: true,
-          menu: false,
-        },
-      });
-      dispatch({
-        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
-        state: {
-          bottomButtonText: 'Add new topic',
-        },
-      });
-
-      hideMore
-        ? navigation.navigate('Notebook', {
-            notebook: item,
-            title: hideMore ? 'Move to topic' : item.title,
-            isMove: isMove,
-            hideMore: hideMore,
-            root: false,
-          })
-        : NavigationService.navigate('Notebook', {
-            notebook: item,
-            title: hideMore ? 'Select a topic' : item.title,
-            isMove: isMove,
-            hideMore: hideMore,
-            root: true,
-          });
-    }
-  };
-
   return (
     <View
       style={[
         {
-          paddingVertical: isTopic ? pv / 2 : pv,
+          height: isTopic ? 80 : 120,
-          justifyContent: 'flex-start',
+          justifyContent: 'space-between',
           alignItems: 'center',
           flexDirection: 'row',
           paddingRight: 6,
           alignSelf: 'center',
           borderBottomWidth: 1,
           borderBottomColor: colors.nav,
+          width: '100%',
         },
         customStyle,
       ]}>
       <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          width: '100%',
-        }}>
-        <TouchableOpacity
-          activeOpacity={0.8}
         style={{
           width: hideMore ? '80%' : '90%',
           maxWidth: hideMore ? '80%' : '90%',
           minHeight: 50,
           justifyContent: 'center',
-          }}
+        }}>
-          onLongPress={onLongPress}
-          onPress={navigate}>
         <Text
           numberOfLines={1}
           style={{
             fontFamily: WEIGHT.bold,
-              fontSize: SIZE.sm + 1,
+            fontSize: SIZE.md,
             color: colors.heading,
             maxWidth: '100%',
           }}>
@@ -144,12 +80,12 @@ export const NotebookItem = ({
               maxWidth: '80%',
               flexWrap: 'wrap',
             }}>
-              {item && item.topics
+            {item && item.topics ? (
-                ? item.topics.slice(1, 4).map((topic) => (
+              item.topics.slice(1, 4).map((topic) => (
                 <View
                   key={topic.dateCreated.toString() + topic.title}
                   style={{
-                        borderRadius: 5,
+                    borderRadius: 2.5,
                     backgroundColor: colors.accent,
                     paddingHorizontal: ph / 1.5,
                     paddingVertical: pv / 3,
@@ -168,7 +104,18 @@ export const NotebookItem = ({
                   </Text>
                 </View>
               ))
-                : null}
+            ) : (
+              <Text
+                style={{
+                  color: colors.icon,
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.xxs,
+                  paddingVertical: pv / 3,
+                  maxWidth: '100%',
+                }}>
+                This notebook has no topics.
+              </Text>
+            )}
           </View>
         )}
 
@@ -209,6 +156,18 @@ export const NotebookItem = ({
             alignItems: 'center',
             marginTop: 5,
           }}>
+          {isTrash ? null : (
+            <Text
+              style={{
+                color: colors.icon,
+                fontSize: SIZE.xxs,
+                textAlignVertical: 'center',
+                fontFamily: WEIGHT.regular,
+              }}>
+              {new Date(item.dateCreated).toDateString().substring(4)}
+            </Text>
+          )}
+          <Seperator half />
           <Text
             style={{
               color: colors.icon,
@@ -217,26 +176,13 @@ export const NotebookItem = ({
               fontFamily: WEIGHT.regular,
             }}>
             {item && item.totalNotes && item.totalNotes > 1
-                ? item.totalNotes + ' notes'
+              ? item.totalNotes + ' Notes'
               : item.totalNotes === 1
-                ? item.totalNotes + ' note'
+              ? item.totalNotes + ' Note'
-                : '0 notes'}
+              : '0 Notes'}
           </Text>
-
-            {isTopic || isTrash ? null : (
-              <Text
-                style={{
-                  color: colors.accent,
-                  marginLeft: 10,
-                  fontSize: SIZE.xxs,
-                  textAlignVertical: 'center',
-                  fontFamily: WEIGHT.regular,
-                }}>
-                {new Date(item.dateCreated).toDateString().substring(4)}
-              </Text>
-            )}
         </View>
-        </TouchableOpacity>
+      </View>
       {hideMore ||
       (item.title === 'General' && item.type === 'topic') ? null : (
         <TouchableOpacity
@@ -259,11 +205,7 @@ export const NotebookItem = ({
               notebookID: notebookID,
             });
           }}>
-            <Icon
+          <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
-              name="dots-horizontal"
-              size={SIZE.lg}
-              color={colors.heading}
-            />
         </TouchableOpacity>
       )}
 
@@ -291,6 +233,5 @@ export const NotebookItem = ({
         />
       ) : null}
     </View>
-    </View>
   );
 };

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

@@ -11,7 +11,8 @@ export const PressableButton = ({
   children,
   onPress,
   customStyle,alpha=-0.1,
-  opacity=1
+  opacity=1,
+  onLongPress
 }) => {
 
 
@@ -19,6 +20,7 @@ export const PressableButton = ({
     <Pressable
       activeOpacity={opacity}
       onPress={onPress}
+      onLongPress={onLongPress}
       style={({pressed}) => [
         {
           backgroundColor:

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

@@ -9,8 +9,8 @@ import { ACTIONS } from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {
   eOpenMoveNoteDialog,
-
+  eOpenPremiumDialog,
-  eOpenPremiumDialog, eOpenSimpleDialog
+  eOpenSimpleDialog,
 } from '../../services/events';
 import {db, ToastEvent} from '../../utils/utils';
 import {TEMPLATE_DELETE} from '../DialogManager/templates';
@@ -35,10 +35,9 @@ export const SelectionHeader = () => {
     Animated.timing(translateY, {
       duration: 300,
       toValue: selectionMode ? 0 : -150,
-        easing:Easing.in(Easing.ease)
+      easing: Easing.in(Easing.ease),
     }).start();
-  },[selectionMode])
+  }, [selectionMode]);
-
 
   return containerState.noSelectionHeader ? null : (
     <Animated.View
@@ -127,10 +126,10 @@ export const SelectionHeader = () => {
                 dispatch({type: ACTIONS.CLEAR_SELECTION});
                 eSendEvent(eOpenMoveNoteDialog);
               }}>
-              <Icon color={colors.icon} name={'plus'} size={SIZE.xl} />
+              <Icon color={colors.heading} name={'plus'} size={SIZE.xl} />
             </TouchableOpacity>
           )}
-          {currentScreen === 'trash' || currentScreen === 'notebooks' ? null : (
+        {/*   {currentScreen === 'trash' || currentScreen === 'notebooks' ? null : (
             <TouchableOpacity
               style={{
                 justifyContent: 'center',
@@ -168,9 +167,9 @@ export const SelectionHeader = () => {
                   );
                 }
               }}>
-              <Icon color={colors.icon} name={'star'} size={SIZE.xl - 3} />
+              <Icon color={colors.heading} name={'star'} size={SIZE.xl - 3} />
             </TouchableOpacity>
-          )}
+          )} */}
 
           {currentScreen === 'trash' ? null : (
             <TouchableOpacity
@@ -185,7 +184,7 @@ export const SelectionHeader = () => {
                 eSendEvent(eOpenSimpleDialog, TEMPLATE_DELETE('item'));
                 return;
               }}>
-              <Icon color={colors.icon} name={'delete'} size={SIZE.xl - 3} />
+              <Icon color={colors.heading} name={'delete'} size={SIZE.xl - 3} />
             </TouchableOpacity>
           )}
 
@@ -214,7 +213,7 @@ export const SelectionHeader = () => {
                 }
               }}>
               <Icon
-                color={colors.icon}
+                color={colors.heading}
                 name="delete-restore"
                 size={SIZE.xl - 3}
               />

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import {TouchableWithoutFeedback, View} from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { SIZE } from '../../common/common';
 import { useTracked } from '../../provider';
 import { ACTIONS } from '../../provider/actions';
 import { getElevation } from '../../utils/utils';
+import { PressableButton } from '../PressableButton';
 
 const SelectionWrapper = ({
   children,
@@ -13,13 +14,15 @@ const SelectionWrapper = ({
   index,
   background,
   pinned,
+  onLongPress,
+  onPress
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
   const [selected, setSelected] = useState(false);
   useEffect(() => {
     let exists = selectedItemsList.filter(
-      o => o.dateCreated === item.dateCreated,
+      (o) => o.dateCreated === item.dateCreated,
     );
 
     if (exists[0]) {
@@ -33,9 +36,25 @@ const SelectionWrapper = ({
     }
   }, [selectedItemsList]);
 
+
+
+
+
+
   return (
-    <View
+    <PressableButton
-      style={{
+      color={currentEditingNote === item.dateCreated || pinned
+        ? colors.shade
+        : background
+        ? background
+        : 'transparent'
+      }
+      onLongPress={onLongPress}
+      onPress={onPress}
+      selectedColor={currentEditingNote === item.dateCreated || pinned? colors.accent :  colors.nav}
+      alpha={!colors.night ? -0.02 : 0.02}
+      opacity={ currentEditingNote === item.dateCreated || pinned? 0.12 : 1}
+      customStyle={{
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
@@ -47,12 +66,6 @@ const SelectionWrapper = ({
             : index === 0 && pinned && selectionMode
             ? 30
             : 0,
-        backgroundColor:
-          currentEditingNote === item.dateCreated || pinned
-            ? colors.shade
-            : background
-            ? background
-            : 'transparent',
       }}>
       {pinned ? (
         <View
@@ -63,7 +76,7 @@ const SelectionWrapper = ({
             backgroundColor: colors.accent,
             borderRadius: 100,
             position: 'absolute',
-            left: 20,
+            right: 20,
             top: -15,
             justifyContent: 'center',
             alignItems: 'center',
@@ -89,28 +102,30 @@ const SelectionWrapper = ({
           alignItems: 'center',
           paddingRight: 8,
         }}>
-        <TouchableWithoutFeedback
+        <TouchableOpacity
+          activeOpacity={1}
           onPress={() => {
             dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
           }}
           style={{
             justifyContent: 'center',
             alignItems: 'center',
+            height: 70,
           }}>
           <Icon
             size={SIZE.lg}
-            color={colors.accent}
+            color={selected ? colors.accent : colors.icon}
             name={
               selected
                 ? 'check-circle-outline'
                 : 'checkbox-blank-circle-outline'
             }
           />
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
       </View>
 
       {children}
-    </View>
+    </PressableButton>
   );
 };
 

apps/mobile/src/components/SimpleList/NoteItemWrapper.js

@@ -1,52 +1,77 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import NoteItem from '../../components/NoteItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import {eSendEvent, openVault} from '../../services/eventManager';
+import {eShowMergeDialog, eOnLoadNote} from '../../services/events';
+import {simpleDialogEvent} from '../DialogManager/recievers';
+import {TEMPLATE_TRASH} from '../DialogManager/templates';
+import {openEditorAnimation} from '../../utils/animations';
 
-
+export const NoteItemWrapper = ({
-export const NoteItemWrapper = ({item,index,isTrash = false, pinned = false }) => {
+  item,
+  index,
+  isTrash = false,
+  pinned = false,
+}) => {
   const [state, dispatch] = useTracked();
   const {colors, currentEditingNote, selectionMode} = state;
 
-  return  <SelectionWrapper
+  const style = useMemo(() => {
+    return {width: selectionMode ? '90%' : '100%', marginHorizontal: 0};
+  }, [selectionMode]);
+
+  const onLongPress = () => {
+    if (!selectionMode) {
+      dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
+    }
+    dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
+  };
+
+  const onPress = async () => {
+    if (item.conflicted) {
+      eSendEvent(eShowMergeDialog, item);
+
+      return;
+    }
+    if (selectionMode) {
+      onLongPress();
+      return;
+    } else if (item.locked) {
+      openVault(item, true, true, false, true, false);
+      return;
+    }
+    if (DDS.isTab) {
+      eSendEvent(eOnLoadNote, item);
+    } else if (isTrash) {
+      simpleDialogEvent(TEMPLATE_TRASH(item.type));
+    } else {
+      eSendEvent(eOnLoadNote, item);
+      openEditorAnimation();
+    }
+  };
+
+  return (
+    <SelectionWrapper
       index={index}
       pinned={pinned}
+      onLongPress={onLongPress}
+      onPress={onPress}
       currentEditingNote={
         currentEditingNote === item.id ? currentEditingNote : null
       }
       item={item}>
       <NoteItem
         colors={colors}
-        pinned={pinned}
+        customStyle={style}
-        customStyle={pinned? {
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-          paddingTop: 10,
-          paddingRight: 6,
-          marginBottom: 5,
-          marginTop: 15,
-          borderBottomWidth: 0,
-        } :{
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-        }}
         currentEditingNote={
           currentEditingNote === item.id ? currentEditingNote : null
         }
         selectionMode={selectionMode}
-        onLongPress={() => {
-          if (!selectionMode) {
-            dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
-          }
-          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-        }}
-        update={() => {
-          dispatch({type: ACTIONS.NOTES});
-        }}
         item={item}
-        index={index}
         isTrash={isTrash}
       />
     </SelectionWrapper>
+  );
 };

apps/mobile/src/components/SimpleList/NotebookItemWrapper.js

@@ -1,38 +1,28 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {NotebookItem} from '../../components/NotebookItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import NavigationService from '../../services/NavigationService';
 
-export const NotebookItemWrapper = ({item, index,isTrash = false, pinned = false}) => {
+export const NotebookItemWrapper = ({
+  item,
+  index,
+  isTrash = false,
+  pinned = false,
+}) => {
   const [state, dispatch] = useTracked();
   const {selectionMode, preventDefaultMargins} = state;
-  let headerState = preventDefaultMargins? state.indHeaderState : state.headerState;
+  let headerState = preventDefaultMargins
+    ? state.indHeaderState
+    : state.headerState;
   let params = headerState.route.params ? headerState.route.params : {};
 
+  const style = useMemo(() => {
+    return {width: selectionMode ? '90%' : '100%', marginHorizontal: 0};
+  }, [selectionMode]);
 
-  return (
+  const onLongPress = () => {
-    <SelectionWrapper pinned={pinned} index={index} item={item}>
-      <NotebookItem
-        hideMore={preventDefaultMargins}
-        navigation={headerState.navigation}
-        route={headerState.route}
-        pinned={pinned}
-        customStyle={pinned? {
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-          paddingTop: 10,
-          paddingRight: 6,
-          marginBottom: 5,
-          marginTop: 15,
-          borderBottomWidth: 0,
-        } :{
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-        }}
-        isMove={preventDefaultMargins}
-        selectionMode={selectionMode}
-        onLongPress={() => {
     if (!selectionMode) {
       dispatch({
         type: ACTIONS.SELECTION_MODE,
@@ -44,7 +34,69 @@ export const NotebookItemWrapper = ({item, index,isTrash = false, pinned = false
       type: ACTIONS.SELECTED_ITEMS,
       item: item,
     });
-        }}
+  };
+
+  const onPress = () => {
+    if (selectionMode) {
+      onLongPress();
+      return;
+    }
+    if (item.type === 'topic') {
+      NavigationService.navigate('Notes', {
+        ...item,
+      });
+    } else {
+      dispatch({
+        type: ACTIONS.HEADER_TEXT_STATE,
+        state: {
+          heading: preventDefaultMargins ? 'Move to topic' : item.title,
+        },
+      });
+      dispatch({
+        type: ACTIONS.HEADER_STATE,
+        state: {
+          canGoBack: true,
+          menu: false,
+        },
+      });
+      dispatch({
+        type: ACTIONS.CONTAINER_BOTTOM_BUTTON,
+        state: {
+          bottomButtonText: 'Add new topic',
+        },
+      });
+
+      preventDefaultMargins
+        ? navigation.navigate('Notebook', {
+            notebook: item,
+            title: preventDefaultMargins ? 'Move to topic' : item.title,
+            isMove: preventDefaultMargins,
+            hideMore: preventDefaultMargins,
+            root: preventDefaultMargins ? false : true,
+          })
+        : NavigationService.navigate('Notebook', {
+            notebook: item,
+            title: preventDefaultMargins ? 'Select a topic' : item.title,
+            isMove: preventDefaultMargins,
+            hideMore: preventDefaultMargins,
+            root: true,
+          });
+    }
+  };
+
+  return (
+    <SelectionWrapper
+      onLongPress={onLongPress}
+      pinned={pinned}
+      index={index}
+      onPress={onPress}
+      item={item}>
+      <NotebookItem
+        hideMore={preventDefaultMargins}
+        navigation={headerState.navigation}
+        route={headerState.route}
+        isTopic={item.type === "topic"}
+        customStyle={style}
         noteToMove={params.note}
         item={item}
         index={index}

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

@@ -6,25 +6,23 @@ import {
   SectionList,
   Text,
   View,
-  TouchableOpacity,
 } from 'react-native';
+import * as Animatable from 'react-native-animatable';
 import {useSafeArea} from 'react-native-safe-area-context';
-import {SIZE, WEIGHT, opacity, pv} from '../../common/common';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {
   eClearSearch,
-  eScrollEvent,
   eOpenLoginDialog,
+  eScrollEvent,
 } from '../../services/events';
-import {db, ToastEvent, DDS} from '../../utils/utils';
-import * as Animatable from 'react-native-animatable';
-import {PinnedItemList} from './PinnedItemList';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import NavigationService from '../../services/NavigationService';
-import {Placeholder} from '../ListPlaceholders';
+import {db, DDS, ToastEvent} from '../../utils/utils';
 import {PressableButton} from '../PressableButton';
+import {PinnedItemList} from './PinnedItemList';
 const sectionListRef = createRef();
 
 const AnimatedFlatlist = Animatable.createAnimatableComponent(FlatList);