feat(growth-hack): add feature growth hack

close #1113, close #1113
erxes · Sep 13, 2019 · c905f0e · c905f0e
1 parent 3c83b20
commit c905f0e
Show file tree

Hide file tree

Showing 177 changed files with 6,090 additions and 1,736 deletions.
diff --git a/public/ckeditor/config.js b/public/ckeditor/config.js
@@ -3,9 +3,12 @@
  * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+
 CKEDITOR.editorConfig = function( config ) {
 	// Define changes to default configuration here. For example:
 	// config.language = 'fr';
 	config.font_names = 'Helvetica Neue;Helvetica;Arial;Verdana;Georgia;Times New Roman;Monospace;Comic Sans MS;Courier New;Tahoma';
 	// config.uiColor = '#AADC6E';
 };
+
+CKEDITOR.disableAutoInline = true;
diff --git a/src/__tests__/forms/FormFieldPreview.test.tsx b/src/__tests__/forms/FormFieldPreview.test.tsx
diff --git a/src/__tests__/forms/CalloutPreview.test.tsx → src/__tests__/leads/CalloutPreview.test.tsx b/src/__tests__/forms/CalloutPreview.test.tsx → src/__tests__/leads/CalloutPreview.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import CalloutPreview from 'modules/forms/components/step/preview/CalloutPreview';
+import CalloutPreview from 'modules/leads/components/step/preview/CalloutPreview';
 import React from 'react';
 
 describe('CalloutPreview component', () => {

diff --git a/src/__tests__/forms/ChooseType.test.tsx → src/__tests__/leads/ChooseType.test.tsx b/src/__tests__/forms/ChooseType.test.tsx → src/__tests__/leads/ChooseType.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import ChooseType from 'modules/forms/components/step/ChooseType';
+import ChooseType from 'modules/leads/components/step/ChooseType';
 import React from 'react';
 
 describe('ChooseType component', () => {

diff --git a/src/__tests__/forms/CommonPreview.test.tsx → src/__tests__/leads/CommonPreview.test.tsx b/src/__tests__/forms/CommonPreview.test.tsx → src/__tests__/leads/CommonPreview.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import CommonPreview from 'modules/forms/components/step/preview/CommonPreview';
+import CommonPreview from 'modules/leads/components/step/preview/CommonPreview';
 import React from 'react';
 
 describe('CommonPreview component', () => {

diff --git a/src/__tests__/forms/FormPreview.test.tsx → src/__tests__/leads/FormPreview.test.tsx b/src/__tests__/forms/FormPreview.test.tsx → src/__tests__/leads/FormPreview.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import FormPreview from 'modules/forms/components/step/preview/FormPreview';
+import FormPreview from 'modules/leads/components/step/preview/FormPreview';
 import React from 'react';
 
 describe('FormPreview component', () => {
@@ -8,7 +8,8 @@ describe('FormPreview component', () => {
     color: 'red',
     theme: 'default',
     onChange: (name: any, fields: string) => null,
-    type: 'string'
+    type: 'string',
+    previewRenderer: () => <div />
   };
 
   test('renders shallow successfully', () => {

diff --git a/src/__tests__/forms/FullPreviewStep.test.tsx → src/__tests__/leads/FullPreviewStep.test.tsx b/src/__tests__/forms/FullPreviewStep.test.tsx → src/__tests__/leads/FullPreviewStep.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import FullPreviewStep from 'modules/forms/components/step/FullPreviewStep';
+import FullPreviewStep from 'modules/leads/components/step/FullPreviewStep';
 import React from 'react';
 
 describe('FullPreviewStep component', () => {
@@ -8,7 +8,12 @@ describe('FullPreviewStep component', () => {
     color: 'red',
     theme: 'default',
     onChange: (name: 'carousel', value: string) => null,
-    carousel: 'carousel'
+    carousel: 'carousel',
+    formData: {
+      title: 'Title',
+      btnText: 'Save',
+      desc: 'desc'
+    }
   };
 
   test('renders shallow successfully', () => {

diff --git a/src/__tests__/forms/SuccessPreview.test.tsx → src/__tests__/leads/SuccessPreview.test.tsx b/src/__tests__/forms/SuccessPreview.test.tsx → src/__tests__/leads/SuccessPreview.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import SuccessPreview from 'modules/forms/components/step/preview/SuccessPreview';
+import SuccessPreview from 'modules/leads/components/step/preview/SuccessPreview';
 import React from 'react';
 
 describe('SuccessPreview component', () => {

diff --git a/src/__tests__/forms/SuccessStep.test.tsx → src/__tests__/leads/SuccessStep.test.tsx b/src/__tests__/forms/SuccessStep.test.tsx → src/__tests__/leads/SuccessStep.test.tsx
@@ -1,5 +1,5 @@
 import { shallow } from 'enzyme';
-import SuccessStep from 'modules/forms/components/step/SuccessStep';
+import SuccessStep from 'modules/leads/components/step/SuccessStep';
 import React from 'react';
 
 describe('SuccessStep component', () => {

diff --git a/src/modules/activityLogs/components/ActivityList.tsx b/src/modules/activityLogs/components/ActivityList.tsx
@@ -23,7 +23,7 @@ class ActivityList extends React.Component<Props> {
 
     return (
       <div key={index}>
-        <ActivityTitle> {data} </ActivityTitle>
+        <ActivityTitle>{data}</ActivityTitle>
         {data.map(key => this.renderItem(activity[key]))}
       </div>
     );

diff --git a/src/modules/activityLogs/components/ActivityRow.tsx b/src/modules/activityLogs/components/ActivityRow.tsx
@@ -10,6 +10,7 @@ import {
 import Icon from 'modules/common/components/Icon';
 import NameCard from 'modules/common/components/nameCard/NameCard';
 import Tip from 'modules/common/components/Tip';
+import { colors } from 'modules/common/styles';
 import React from 'react';
 
 type Props = {
@@ -23,8 +24,8 @@ const ActivityRowComponent = (props: Props) => {
 
   return (
     <ActivityRow key={Math.random()}>
-      <ActivityIcon color={data.color}>
-        <Icon icon={data.icon || ''} />
+      <ActivityIcon color={data.color || colors.colorCoreGray}>
+        <Icon icon={data.icon || 'clipboard-notes'} />
       </ActivityIcon>
       <React.Fragment>
         <FlexContent>
@@ -34,7 +35,7 @@ const ActivityRowComponent = (props: Props) => {
           <FlexBody>{body}</FlexBody>
           <Tip text={dayjs(data.createdAt).format('llll')}>
             <ActivityDate>
-              {dayjs(data.createdAt).format('MMM Do, h:mm A')}
+              {dayjs(data.createdAt).format('MMM D, h:mm A')}
             </ActivityDate>
           </Tip>
         </FlexContent>

diff --git a/src/modules/activityLogs/styles.ts b/src/modules/activityLogs/styles.ts
@@ -20,9 +20,10 @@ const Timeline = styled.div`
   }
 `;
 
-const ActivityTitle = styled.h3`
-  padding: ${dimensions.unitSpacing}px 0;
-  font-weight: 300;
+const ActivityTitle = styled.h4`
+  margin: 0;
+  padding: ${dimensions.coreSpacing * 1.5}px 0 ${dimensions.coreSpacing}px;
+  font-weight: 400;
   color: ${colors.textPrimary};
 `;
 
@@ -31,7 +32,7 @@ const ActivityRow = styled(WhiteBox)`
   position: relative;
   overflow: visible;
   margin-bottom: ${dimensions.coreSpacing}px;
-  border-radius: 3px;
+  border-radius: 2px;
 
   &:last-of-type {
     margin-bottom: 0;
@@ -41,6 +42,7 @@ const ActivityRow = styled(WhiteBox)`
 const FlexContent = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
 `;
 
 const FlexBody = styled.div`
@@ -63,7 +65,7 @@ const FlexBody = styled.div`
 `;
 
 const AvatarWrapper = styledTS<{ isUser?: boolean }>(styled.div)`
-  margin-right: ${dimensions.coreSpacing}px;
+  margin-right: ${dimensions.unitSpacing}px;
   position: relative;
 
   a {
@@ -114,7 +116,7 @@ const ActivityIcon = styledTS<{ color?: string }>(styled.span)`
 const ActivityDate = styled.div`
   color: ${colors.colorCoreGray};
   font-weight: ${typography.fontWeightLight};
-  font-size: 12px;
+  font-size: 11px;
   margin-left: 5px;
   cursor: help;
 `;

diff --git a/src/modules/boards/components/DueDateChanger.tsx b/src/modules/boards/components/DueDateChanger.tsx
@@ -0,0 +1,78 @@
+import Datetime from '@nateradebaugh/react-datetime';
+import Icon from 'modules/common/components/Icon';
+import { rgba } from 'modules/common/styles/color';
+import colors from 'modules/common/styles/colors';
+import * as React from 'react';
+import styled from 'styled-components';
+import styledTS from 'styled-components-ts';
+
+export const DateWrapper = styledTS<{ color: string }>(styled.div)`
+	position: relative;
+
+	input {
+		background-color: ${props => rgba(props.color, 0.1)};
+		color: ${props => props.color};
+		border: none;
+		box-shadow: none;
+		outline: 0;
+		padding: 0 10px 0 25px;
+		height: 25px;
+		border-radius: 2px;
+		font-weight: 500;
+		line-height: 25px;
+		width: 110px;
+		font-size: 12px;
+
+		&:hover {
+			background: ${props => rgba(props.color, 0.15)};
+			cursor: pointer;
+		}
+
+		&:focus {
+			box-shadow: none;
+		}
+
+		::placeholder { 
+			color: ${props => props.color};
+			font-weight: 500;
+			opacity: 1;
+		}
+	}
+
+	> i {
+		color: ${props => props.color};
+		line-height: 25px;
+		position: absolute;
+		left: 7px;
+	}
+`;
+
+type IProps = {
+  onChange: ((value?: string | Date) => void);
+  value: Date;
+  isWarned?: boolean;
+};
+
+class DueDateChanger extends React.Component<IProps> {
+  render() {
+    const { onChange, value, isWarned } = this.props;
+    const color = isWarned ? colors.colorCoreRed : colors.colorPrimaryDark;
+
+    return (
+      <DateWrapper color={color}>
+        <Icon icon="clock-eight" />
+        <Datetime
+          inputProps={{ placeholder: 'Due date' }}
+          dateFormat="MMM,DD YYYY"
+          timeFormat={false}
+          value={value}
+          closeOnSelect={true}
+          onChange={onChange}
+          utc={true}
+        />
+      </DateWrapper>
+    );
+  }
+}
+
+export default DueDateChanger;
diff --git a/src/modules/boards/components/MainActionBar.tsx b/src/modules/boards/components/MainActionBar.tsx
@@ -15,8 +15,6 @@ import FormControl from 'modules/common/components/form/Control';
 import Icon from 'modules/common/components/Icon';
 import Tip from 'modules/common/components/Tip';
 import { __ } from 'modules/common/utils';
-import SelectCompanies from 'modules/companies/containers/SelectCompanies';
-import SelectCustomers from 'modules/customers/containers/common/SelectCustomers';
 import Participators from 'modules/inbox/components/conversationDetail/workarea/Participators';
 import { PopoverHeader } from 'modules/notifications/components/styles';
 import SelectTeamMembers from 'modules/settings/team/containers/SelectTeamMembers';
@@ -89,10 +87,6 @@ class MainActionBar extends React.Component<Props, State> {
     }
   };
 
-  toggleFilter = () => {
-    this.setState({ show: !this.state.show });
-  };
-
   hideFilter = () => {
     this.setState({ show: false });
   };
@@ -219,18 +213,6 @@ class MainActionBar extends React.Component<Props, State> {
           <PopoverHeader>{__('Filter')}</PopoverHeader>
           <FilterBox>
             {extraFilter}
-            <SelectCompanies
-              label="Choose companies"
-              name="companyIds"
-              queryParams={queryParams}
-              onSelect={onSelect}
-            />
-            <SelectCustomers
-              label="Choose customers"
-              name="customerIds"
-              queryParams={queryParams}
-              onSelect={onSelect}
-            />
             <SelectTeamMembers
               label="Choose team members"
               name="assignedUserIds"
@@ -266,7 +248,7 @@ class MainActionBar extends React.Component<Props, State> {
             <Button
               btnStyle={hasFilter ? 'success' : 'link'}
               className={hasFilter ? 'filter-success' : 'filter-link'}
-              icon="filter"
+              icon="filter-1"
               onClick={this.showFilter}
             >
               {hasFilter && __('Filtering is on')}
@@ -307,7 +289,7 @@ class MainActionBar extends React.Component<Props, State> {
     return (
       <>
         <HeaderButton>
-          <Icon icon="user" /> {__('Private')}
+          <Icon icon="users-alt" /> {__('Private')}
         </HeaderButton>
         <Participators participatedUsers={members} limit={3} />
       </>
@@ -327,7 +309,7 @@ class MainActionBar extends React.Component<Props, State> {
     const actionBarLeft = (
       <HeaderItems>
         <HeaderLabel>
-          <Icon icon="layout" /> {__('Board')}:{' '}
+          <Icon icon="web-grid-alt" /> {__('Board')}:{' '}
         </HeaderLabel>
         <Dropdown id="dropdown-board">
           <DropdownToggle bsRole="toggle">
@@ -339,7 +321,7 @@ class MainActionBar extends React.Component<Props, State> {
           <Dropdown.Menu>{this.renderBoards()}</Dropdown.Menu>
         </Dropdown>
         <HeaderLabel>
-          <Icon icon="verticalalignment" /> {__('Pipeline')}:{' '}
+          <Icon icon="web-section-alt" /> {__('Pipeline')}:{' '}
         </HeaderLabel>
         <Dropdown id="dropdown-pipeline">
           <DropdownToggle bsRole="toggle">
@@ -353,8 +335,12 @@ class MainActionBar extends React.Component<Props, State> {
         </Dropdown>
         <HeaderLink>
           <Tip text={__('Manage Board & Pipeline')}>
-            <Link to={`/settings/boards/${type}`}>
-              <Icon icon="settings" />
+            <Link
+              to={`/settings/boards/${type}?boardId=${
+                currentBoard ? currentBoard._id : ''
+              }`}
+            >
+              <Icon icon="bright" />
             </Link>
           </Tip>
         </HeaderLink>

diff --git a/src/modules/boards/components/PipelineWatch.tsx b/src/modules/boards/components/PipelineWatch.tsx
@@ -20,7 +20,7 @@ class Watch extends React.Component<IProps> {
 
     return (
       <HeaderButton onClick={onClick} hasBackground={true} isActive={isWatched}>
-        <Icon icon="eye" />
+        <Icon icon="eye-2" />
         {isWatched ? __('Watching') : __('Watch')}
       </HeaderButton>
     );