replace icons with Pressable

2025-12-23 06:59:31 +01:00 · 2020-09-21 15:40:19 +05:00
parent 753a7154d1
commit 6558aefe58
8 changed files with 128 additions and 86 deletions
--- a/apps/mobile/src/components/ActionIcon/index.js
+++ b/apps/mobile/src/components/ActionIcon/index.js
@@ -1,24 +1,37 @@
 import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {SIZE} from '../../common/common';
+import {useTracked} from '../../provider';
+import {PressableButton} from '../PressableButton';
+
+export const ActionIcon = ({
+  onPress,
+  name,
+  color,
+  customStyle,
+  size = SIZE.xxxl,
+  iconStyle={}
+}) => {
+  const [state, dispatch] = useTracked();
+  const {colors} = state;

-export const ActionIcon = ({onPress, name, color, customStyle}) => {
  return (
-    <TouchableOpacity
+    <PressableButton
      onPress={onPress}
-      style={[
-        {
-          width: 50,
+      hitSlop={{top: 30, left: 30, right: 30, bottom: 30}}
+      color="transparent"
+      selectedColor={colors.nav}
+      alpha={!colors.night ? -0.02 : 0.02}
+      opacity={1}
+      customStyle={{
+        width: 40,
        height: 40,
        justifyContent: 'center',
-          alignItems: 'flex-end',
-          paddingRight: 12,
-          zIndex: 800,
-        },
-        customStyle,
-      ]}>
-      <Icon name={name} color={color} size={SIZE.xxxl} />
-    </TouchableOpacity>
+        alignItems: 'center',
+        borderRadius:100,
+        ...customStyle,
+      }}>
+      <Icon name={name} style={iconStyle} color={color} size={size} />
+    </PressableButton>
  );
 };
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
+import {Dimensions, Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { ph, SIZE, WEIGHT } from '../../common/common';
-import { timeSince } from '../../utils/utils';
-import { ActionSheetEvent } from '../DialogManager/recievers';
+import {ph, SIZE, WEIGHT} from '../../common/common';
+import {timeSince} from '../../utils/utils';
+import {ActionIcon} from '../ActionIcon';
+import {ActionSheetEvent} from '../DialogManager/recievers';
+import {PressableButton} from '../PressableButton';

 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -59,19 +61,19 @@ export default class NoteItem extends React.Component {
            justifyContent: 'flex-start',
            alignItems: 'center',
            flexDirection: 'row',
-            maxWidth: '100%',
+            width: '100%',
            paddingRight: 6,
            alignSelf: 'center',
            borderBottomWidth: 1,
            height: 100,
-            borderBottomColor:item.pinned? 'transparent': colors.nav,
+            borderBottomColor: item.pinned ? 'transparent' : colors.nav,
          },
          customStyle ? customStyle : {},
        ]}>
        <View
          style={{
            paddingLeft: 0,
-            width: '95%',
+            width: '92%',
          }}>
          <Text
            numberOfLines={1}
@@ -214,12 +216,10 @@ export default class NoteItem extends React.Component {
          </View>
        </View>

-        <TouchableOpacity
-          style={{
-            justifyContent: 'center',
-            minHeight: 70,
-            alignItems: 'center',
-          }}
+        <ActionIcon
+          color={colors.heading}
+          name="dots-horizontal"
+          size={SIZE.xl}
          onPress={() => {
            ActionSheetEvent(
              item,
@@ -230,9 +230,15 @@ export default class NoteItem extends React.Component {
                : ['Add to', 'Share', 'Export', 'Delete', 'Copy'],
              isTrash ? [] : ['Pin', 'Favorite', 'Add to Vault'],
            );
-          }}>
-          <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
-        </TouchableOpacity>
+          }}
+          customStyle={{
+            justifyContent: 'center',
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: 'center',
+          }}
+        />
      </View>
    );
  }
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { ph, pv, SIZE, WEIGHT } from '../../common/common';
-import { useTracked } from '../../provider';
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
+import {useTracked} from '../../provider';
 import NavigationService from '../../services/NavigationService';
-import { ActionSheetEvent } from '../DialogManager/recievers';
+import {ActionSheetEvent} from '../DialogManager/recievers';
 import Seperator from '../Seperator';

 export const NotebookItem = ({
@@ -30,7 +30,7 @@ export const NotebookItem = ({
          paddingRight: 6,
          alignSelf: 'center',
          borderBottomWidth: 1,
-          borderBottomColor:item.pinned? 'transparent': colors.nav,
+          borderBottomColor: item.pinned ? 'transparent' : colors.nav,
          width: '100%',
        },
        customStyle,
@@ -185,12 +185,10 @@ export const NotebookItem = ({
        </View>
      </View>
      {item.title === 'General' && item.type === 'topic' ? null : (
-        <TouchableOpacity
-          style={{
-            justifyContent: 'center',
-            minHeight: 70,
-            alignItems: 'center',
-          }}
+        <ActionIcon
+          color={colors.heading}
+          name="dots-horizontal"
+          size={SIZE.xl}
          onPress={() => {
            let rowItems = isTrash
              ? ['Restore', 'Remove']
@@ -204,9 +202,15 @@ export const NotebookItem = ({
            ActionSheetEvent(item, false, false, rowItems, columnItems, {
              notebookID: notebookID,
            });
-          }}>
-          <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
-        </TouchableOpacity>
+          }}
+          customStyle={{
+            justifyContent: 'center',
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: 'center',
+          }}
+        />
      )}
    </View>
  );
--- a/apps/mobile/src/components/PressableButton/index.js
+++ b/apps/mobile/src/components/PressableButton/index.js
@@ -14,9 +14,11 @@ export const PressableButton = ({
  alpha = -0.1,
  opacity = 1,
  onLongPress,
+  hitSlop
 }) => {
  return (
    <Pressable
+      hitSlop={hitSlop}
      activeOpacity={opacity}
      onPress={onPress}
      onLongPress={onLongPress}
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -1,12 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {
-  Dimensions,
-  LayoutAnimation,
-  Platform,
-  RefreshControl,
-  Text,
-  View,
-} from 'react-native';
+import {Dimensions, Platform, RefreshControl, Text, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
@@ -19,7 +12,7 @@ import {
  eOpenLoginDialog,
  eScrollEvent,
 } from '../../services/events';
-import {db, hexToRGBA, RGB_Linear_Shade, ToastEvent} from '../../utils/utils';
+import {db, ToastEvent} from '../../utils/utils';
 import {PressableButton} from '../PressableButton';
 let {width, height} = Dimensions.get('window');

--- a/apps/mobile/src/components/header/HeaderMenu.js
+++ b/apps/mobile/src/components/header/HeaderMenu.js
@@ -1,10 +1,11 @@
-import React, { createRef } from 'react';
-import { TouchableOpacity } from 'react-native';
-import Menu, { MenuDivider, MenuItem } from 'react-native-material-menu';
+import React, {createRef} from 'react';
+import {TouchableOpacity} from 'react-native';
+import Menu, {MenuDivider, MenuItem} from 'react-native-material-menu';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { SIZE, WEIGHT } from '../../common/common';
-import { useTracked } from '../../provider';
-import { ACTIONS } from '../../provider/actions';
+import {SIZE, WEIGHT} from '../../common/common';
+import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
+import {ActionIcon} from '../ActionIcon';
 const menuRef = createRef();
 export const HeaderMenu = () => {
  const [state, dispatch] = useTracked();
@@ -19,18 +20,23 @@ export const HeaderMenu = () => {
        backgroundColor: colors.bg,
      }}
      button={
-        <TouchableOpacity
+        <ActionIcon
          onPress={() => {
            menuRef.current?.show();
          }}
-          style={{
+          name="dots-vertical"
+          size={SIZE.xl}
+          color={colors.pri}
+          customStyle={{
            justifyContent: 'center',
            alignItems: 'flex-end',
            height: 40,
-            width: 50,
-          }}>
-          <Icon name="dots-vertical" size={SIZE.xl} color={colors.heading} />
-        </TouchableOpacity>
+            width: 40,
+            marginLeft: 10,
+            borderRadius: 100,
+            backgroundColor: 'white',
+          }}
+        />
      }>
      <MenuItem
        textStyle={{
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -16,6 +16,7 @@ import NavigationService from '../../services/NavigationService';
 import {useHideHeader} from '../../utils/hooks';
 import {sideMenuRef} from '../../utils/refs';
 import {DDS, w} from '../../utils/utils';
+import {ActionIcon} from '../ActionIcon';
 import {HeaderMenu} from './HeaderMenu';
 import {HeaderTitle} from './HeaderTitle';

@@ -68,19 +69,16 @@ export const Header = ({showSearch, root}) => {

      <View style={styles.leftBtnContainer}>
        {!DDS.isTab ? (
-          <TouchableOpacity
-            hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
+          <ActionIcon
+            customStyle={styles.leftBtn}
            onPress={onLeftButtonPress}
-            style={styles.leftBtn}>
-            <Icon
-              style={{
-                marginLeft: headerState.canGoBack ? -5 : 0,
-              }}
-              color={colors.heading}
            name={headerState.canGoBack ? 'arrow-left' : 'menu'}
            size={SIZE.xxxl}
+            color={colors.pri}
+            iconStyle={{
+              marginLeft: headerState.canGoBack ? -5 : 0,
+            }}
          />
-          </TouchableOpacity>
        ) : undefined}

        {Platform.OS === 'android' ? <HeaderTitle root={root} /> : null}
@@ -95,15 +93,17 @@ export const Header = ({showSearch, root}) => {
          style={{
            opacity: hideHeader ? 1 : 0,
          }}>
-          <TouchableOpacity
+          <ActionIcon
            onPress={() => {
              if (!hideHeader) return;
              setHideHeader(false);
              eSendEvent('showSearch');
            }}
-            style={styles.rightBtn}>
-            <Icon name={'magnify'} size={SIZE.xl} color={colors.pri} />
-          </TouchableOpacity>
+            name="magnify"
+            size={SIZE.xl}
+            color={colors.pri}
+            style={styles.rightBtn}
+          />
        </Animatable.View>

        <HeaderMenu />
@@ -150,9 +150,12 @@ const styles = StyleSheet.create({
  },
  leftBtn: {
    justifyContent: 'center',
-    alignItems: 'flex-start',
+    alignItems: 'center',
    height: 40,
-    width: 60,
+    width: 40,
+    borderRadius: 100,
+    marginLeft: -5,
+    marginRight: 25,
  },
  rightBtnContainer: {
    flexDirection: 'row',
--- a/apps/mobile/src/views/Editor/index.js
+++ b/apps/mobile/src/views/Editor/index.js
@@ -174,6 +174,7 @@ const Editor = ({noMenu}) => {
            height: 50,
            justifyContent: 'space-between',
            alignItems: 'center',
+            paddingHorizontal: 12,
          }}>
          {noMenu ? null : (
            <ActionIcon
@@ -182,7 +183,6 @@ const Editor = ({noMenu}) => {
              onPress={_onBackPress}
              customStyle={{
                marginLeft: -5,
-                paddingLeft: 12,
              }}
            />
          )}
@@ -194,6 +194,9 @@ const Editor = ({noMenu}) => {
            <ActionIcon
              name="plus"
              color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
              onPress={() => {
                simpleDialogEvent(TEMPLATE_NEW_NOTE);
              }}
@@ -202,6 +205,9 @@ const Editor = ({noMenu}) => {
              <ActionIcon
                name="fullscreen"
                color={colors.heading}
+                customStyle={{
+                  marginLeft: 10,
+                }}
                onPress={() => {
                  eSendEvent(eOpenFullscreenEditor);
                  setFullscreen(true);
@@ -219,6 +225,9 @@ const Editor = ({noMenu}) => {
            <ActionIcon
              name="undo-variant"
              color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
              onPress={() => {
                post('undo');
              }}
@@ -226,6 +235,9 @@ const Editor = ({noMenu}) => {
            <ActionIcon
              name="redo-variant"
              color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
              onPress={() => {
                post('redo');
              }}
@@ -234,6 +246,9 @@ const Editor = ({noMenu}) => {
            <ActionIcon
              name="dots-horizontal"
              color={colors.heading}
+              customStyle={{
+                marginLeft: 10,
+              }}
              onPress={() => {
                ActionSheetEvent(
                  getNote(),