improve note items design

2025-12-22 22:49:45 +01:00 · 2020-09-09 14:55:59 +05:00
parent bf630f4ad8
commit a6238eacc4
8 changed files with 540 additions and 519 deletions
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -54,36 +54,7 @@ export default class NoteItem extends React.Component {
    }
  }

-  render() {
-    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 () => {
+  _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>
-          </>
-        </TouchableOpacity>
+        </View>

        <TouchableOpacity
          style={{
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/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,
-          justifyContent: 'flex-start',
+          height: isTopic ? 80 : 120,
+          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.topics.slice(1, 4).map((topic) => (
+            {item && item.topics ? (
+              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'
-                : '0 notes'}
+              ? item.totalNotes + ' Note'
+              : '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
-              name="dots-horizontal"
-              size={SIZE.lg}
-              color={colors.heading}
-            />
+          <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
        </TouchableOpacity>
      )}

@@ -291,6 +233,5 @@ export const NotebookItem = ({
        />
      ) : null}
    </View>
-    </View>
  );
 };
--- a/apps/mobile/src/components/PressableButton/index.js
+++ b/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:
--- a/apps/mobile/src/components/SelectionHeader/index.js
+++ b/apps/mobile/src/components/SelectionHeader/index.js
@@ -9,8 +9,8 @@ import { ACTIONS } from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {
  eOpenMoveNoteDialog,
-
-  eOpenPremiumDialog, eOpenSimpleDialog
+  eOpenPremiumDialog,
+  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}
              />
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/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
-      style={{
+    <PressableButton
+      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>
  );
 };

--- a/apps/mobile/src/components/SimpleList/NoteItemWrapper.js
+++ b/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 = ({item,index,isTrash = false, pinned = false }) => {
+export const NoteItemWrapper = ({
+  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={pinned? {
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-          paddingTop: 10,
-          paddingRight: 6,
-          marginBottom: 5,
-          marginTop: 15,
-          borderBottomWidth: 0,
-        } :{
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-        }}
+        customStyle={style}
        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>
+  );
 };
--- a/apps/mobile/src/components/SimpleList/NotebookItemWrapper.js
+++ b/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 (
-    <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={() => {
+  const 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}
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/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);