fix(common): fix colorpicker bug, change some text

erxes · Jul 3, 2020 · a4fd856 · a4fd856
1 parent d2916c8
commit a4fd856
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 17 deletions.
diff --git a/ui/src/modules/knowledgeBase/components/KnowledgeBase.tsx b/ui/src/modules/knowledgeBase/components/KnowledgeBase.tsx
@@ -76,7 +76,7 @@ class KnowledgeBase extends React.Component<Props> {
       <Title>
         {currentCategory.title}
         <span>
-          ({articlesCount} {articlesCount > 1 ? __('articles') : __('artcile')})
+          ({articlesCount} {articlesCount > 1 ? __('articles') : __('article')})
         </span>
       </Title>
     );

diff --git a/ui/src/modules/knowledgeBase/components/knowledge/KnowledgeForm.tsx b/ui/src/modules/knowledgeBase/components/knowledge/KnowledgeForm.tsx
@@ -27,7 +27,7 @@ import {
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import ChromePicker from 'react-color/lib/Chrome';
+import TwitterPicker from 'react-color/lib/Twitter';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import ReactMarkdown from 'react-markdown';
 import { ITopic } from '../../types';
@@ -219,8 +219,13 @@ class KnowledgeForm extends React.Component<Props, State> {
     const brandId = brand != null ? brand._id : '';
 
     const popoverTop = (
-      <Popover id="color-picker">
-        <ChromePicker color={color} onChange={this.onColorChange} />
+      <Popover id="kb-color-picker">
+        <TwitterPicker
+          width="205px"
+          triangle="hide"
+          color={color}
+          onChange={this.onColorChange}
+        />
       </Popover>
     );
 

diff --git a/ui/src/modules/leads/components/step/OptionStep.tsx b/ui/src/modules/leads/components/step/OptionStep.tsx
@@ -12,7 +12,7 @@ import { ColorPick, ColorPicker } from 'modules/settings/styles';
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import ChromePicker from 'react-color/lib/Chrome';
+import TwitterPicker from 'react-color/lib/Twitter';
 import { IBrand } from '../../../settings/brands/types';
 import { FormPreview } from './preview';
 import { BackgroundSelector, ColorList, FlexItem } from './style';
@@ -64,7 +64,13 @@ class OptionStep extends React.Component<Props, {}> {
 
     const popoverTop = (
       <Popover id="color-picker">
-        <ChromePicker color={color} onChange={this.onColorChange} />
+        <TwitterPicker
+          width="266px"
+          triangle="hide"
+          colors={COLORS}
+          color={color}
+          onChange={this.onColorChange}
+        />
       </Popover>
     );
 

diff --git a/ui/src/modules/segments/components/common/Form.tsx b/ui/src/modules/segments/components/common/Form.tsx
@@ -21,7 +21,7 @@ import { ColorPick, ColorPicker, ExpandWrapper } from 'modules/settings/styles';
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import ChromePicker from 'react-color/lib/Chrome';
+import TwitterPicker from 'react-color/lib/Twitter';
 import { Link } from 'react-router-dom';
 import { FilterBox, SegmentTitle, SegmentWrapper } from '../styles';
 import AddConditionButton from './AddConditionButton';
@@ -299,7 +299,7 @@ class Form extends React.Component<Props, State> {
 
     const popoverTop = (
       <Popover id="color-picker">
-        <ChromePicker color={color} onChange={colorOnChange} />
+        <TwitterPicker triangle="hide" color={color} onChange={colorOnChange} />
       </Popover>
     );
 

diff --git a/ui/src/modules/settings/boards/components/PipelineForm.tsx b/ui/src/modules/settings/boards/components/PipelineForm.tsx
@@ -15,7 +15,7 @@ import React from 'react';
 import Modal from 'react-bootstrap/Modal';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import BlockPicker from 'react-color/lib/Block';
+import TwitterPicker from 'react-color/lib/Twitter';
 import { SelectMemberStyled } from '../styles';
 import { IOption } from '../types';
 import Stages from './Stages';
@@ -155,7 +155,9 @@ class PipelineForm extends React.Component<Props, State> {
     return (
       <FormGroup>
         <SelectMemberStyled>
-          <ControlLabel>Users eligible to see all {this.props.type}s</ControlLabel>
+          <ControlLabel>
+            Users eligible to see all {this.props.type}s
+          </ControlLabel>
 
           <SelectTeamMembers
             label="Choose members"
@@ -185,8 +187,9 @@ class PipelineForm extends React.Component<Props, State> {
 
     const popoverBottom = (
       <Popover id="color-picker">
-        <BlockPicker
+        <TwitterPicker
           width="266px"
+          triangle="hide"
           color={this.state.backgroundColor}
           onChange={this.onColorChange}
           colors={COLORS}

diff --git a/ui/src/modules/settings/growthHacks/components/PipelineForm.tsx b/ui/src/modules/settings/growthHacks/components/PipelineForm.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 import Modal from 'react-bootstrap/Modal';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import BlockPicker from 'react-color/lib/Block';
+import TwitterPicker from 'react-color/lib/Twitter';
 import Select from 'react-select-plus';
 import { metricOptions } from '../constants';
 import { queries } from '../graphql';
@@ -251,8 +251,9 @@ class PipelineForm extends React.Component<Props, State> {
 
     const popoverBottom = (
       <Popover id="color-picker">
-        <BlockPicker
+        <TwitterPicker
           width="266px"
+          triangle="hide"
           color={this.state.backgroundColor}
           onChange={this.onColorChange}
           colors={COLORS}

diff --git a/ui/src/modules/settings/integrations/components/mail/Form.tsx b/ui/src/modules/settings/integrations/components/mail/Form.tsx
@@ -95,6 +95,14 @@ class Form extends React.Component<Props, State> {
             <strong>{__('Email add account description question')}</strong>
             <br />
             {__('Email add account description')}
+            <br />
+            <a
+              target="_blank"
+              href="https://www.erxes.org/administrator/system-config/#gmail-imap"
+              rel="noopener noreferrer"
+            >
+              {__('Learn how to connect a Gmail using IMAP')}
+            </a>
           </Info>
         </FormGroup>
 

diff --git a/ui/src/modules/settings/integrations/components/messenger/steps/Appearance.tsx b/ui/src/modules/settings/integrations/components/messenger/steps/Appearance.tsx
@@ -12,7 +12,7 @@ import {
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import ChromePicker from 'react-color/lib/Chrome';
+import TwitterPicker from 'react-color/lib/Twitter';
 
 type Props = {
   onChange: (
@@ -107,7 +107,7 @@ class Appearance extends React.Component<Props, State> {
 
     const popoverContent = (
       <Popover id="color-picker">
-        <ChromePicker color={this.state.color} onChange={onChange} />
+        <TwitterPicker color={this.state.color} onChange={onChange} />
       </Popover>
     );
 

diff --git a/ui/src/modules/tags/components/Form.tsx b/ui/src/modules/tags/components/Form.tsx
@@ -12,7 +12,7 @@ import { ITag } from 'modules/tags/types';
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-import BlockPicker from 'react-color/lib/Block';
+import TwitterPicker from 'react-color/lib/Twitter';
 import styled from 'styled-components';
 
 const ColorPick = styled.div`
@@ -80,7 +80,7 @@ class FormComponent extends React.Component<Props, State> {
 
     const popoverContent = (
       <Popover id="color-picker">
-        <BlockPicker
+        <TwitterPicker
           width="266px"
           color={colorCode}
           onChange={this.onColorChange}