perf(customer): show actions in editform of task and deal

close#2247
erxes · Aug 24, 2020 · 852e707 · 852e707
1 parent f585a9a
commit 852e707
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/ui/src/modules/customers/components/common/CustomerSection.tsx b/ui/src/modules/customers/components/common/CustomerSection.tsx
@@ -9,6 +9,7 @@ import GetConformity from 'modules/conformity/containers/GetConformity';
 import { SectionBody, SectionBodyItem } from 'modules/layout/styles';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import ActionSection from '../../containers/common/ActionSection';
 import CustomerChooser from '../../containers/CustomerChooser';
 import { queries } from '../../graphql';
 import { ICustomer } from '../../types';
@@ -28,17 +29,6 @@ function Component({
   mainTypeId = '',
   onSelect
 }: Props) {
-  const mailTo = email => {
-    if (email) {
-      return (
-        <a target="_parent" href={`mailto:${email}`} rel="noopener noreferrer">
-          {email}
-        </a>
-      );
-    }
-    return null;
-  };
-
   const renderRelatedCustomerChooser = props => {
     return (
       <CustomerChooser
@@ -77,8 +67,10 @@ function Component({
               <Icon icon="arrow-to-right" />
             </Link>
             <span>{renderFullName(customer)}</span>
-            {mailTo(customer.primaryEmail)}
-            <span>{customer.primaryPhone}</span>
+            <ActionSection
+              customer={customer}
+              isSmall={true}
+            />
           </SectionBodyItem>
         ))}
         {customersObj.length === 0 && (

diff --git a/ui/src/modules/layout/styles.ts b/ui/src/modules/layout/styles.ts
@@ -534,23 +534,26 @@ const SectionBody = styled.div`
 
 const SectionBodyItem = styled.div`
   border-top: 1px solid ${colors.borderPrimary};
-  padding: 10px 20px;
   word-break: break-word;
 
   span {
+    padding: 10px 20px;
     display: inline-block;
     width: 100%;
     padding-right: ${dimensions.coreSpacing}px;
   }
 
-  i {
-    color: ${colors.colorCoreGray};
-    position: absolute;
-    font-size: 13px;
-    right: ${dimensions.coreSpacing}px;
+  a {
+    i {
+      padding: 10px 10px;
+      color: ${colors.colorCoreGray};
+      position: absolute;
+      font-size: 13px;
+      right: ${dimensions.coreSpacing}px;
 
-    &:hover {
-      cursor: pointer;
+      &:hover {
+        cursor: pointer;
+      }
     }
   }