Merge branch 'new-composer-insert-image-action-missing' into 'main'

Added back the Insert image action to the new composer See merge request web/clients!1206
cmolina · Nov 22, 2021 · 994e71b · 994e71b
2 parents 37c5bea + add0732
commit 994e71b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 35 deletions.
diff --git a/applications/mail/src/app/components/composer/addresses/AddressesEditor.tsx b/applications/mail/src/app/components/composer/addresses/AddressesEditor.tsx
@@ -1,6 +1,6 @@
 import { useState, MutableRefObject, MouseEvent } from 'react';
 import { c } from 'ttag';
-import { Label, generateUID, classnames, Button, Icon } from '@proton/components';
+import { Label, generateUID, classnames, Button, Icon, Tooltip } from '@proton/components';
 import { Recipient } from '@proton/shared/lib/interfaces/Address';
 import { MessageExtended } from '../../../models/message';
 import { RecipientType } from '../../../models/address';
@@ -75,17 +75,19 @@ const AddressesEditor = ({
                         >
                             {c('Action').t`CC BCC`}
                         </Button>
-                        <Button
-                            type="button"
-                            onClick={handleContactModal('ToList')}
-                            color="weak"
-                            className="pt0-25 pb0-25 flex-item-noshrink"
-                            shape="ghost"
-                            icon
-                            data-testid="composer:to-button"
-                        >
-                            <Icon name="user-plus" size={16} alt={c('Title').t`To`} />
-                        </Button>
+                        <Tooltip title={c('Action').t`Insert contacts`}>
+                            <Button
+                                type="button"
+                                onClick={handleContactModal('ToList')}
+                                color="weak"
+                                className="pt0-25 pb0-25 flex-item-noshrink"
+                                shape="ghost"
+                                icon
+                                data-testid="composer:to-button"
+                            >
+                                <Icon name="user-plus" size={16} alt={c('Title').t`To`} />
+                            </Button>
+                        </Tooltip>
                     </span>
                 </div>
             </div>

diff --git a/applications/mail/src/app/components/composer/addresses/AddressesInput.tsx b/applications/mail/src/app/components/composer/addresses/AddressesInput.tsx
@@ -9,6 +9,7 @@ import {
     useNotifications,
     Button,
     Icon,
+    Tooltip,
 } from '@proton/components';
 import { noop } from '@proton/shared/lib/helpers/function';
 import { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
@@ -237,16 +238,18 @@ const AddressesInput = ({
                 </div>
                 {addContactButton ? (
                     <span className="flex-item-noshrink flex-align-self-start sticky-top">
-                        <Button
-                            type="button"
-                            onClick={addContactAction}
-                            color="weak"
-                            shape="ghost"
-                            icon
-                            data-testid="composer:to-button"
-                        >
-                            <Icon name="user-plus" size={16} alt={addContactButton} />
-                        </Button>
+                        <Tooltip title={c('Action').t`Insert contacts`}>
+                            <Button
+                                type="button"
+                                onClick={addContactAction}
+                                color="weak"
+                                shape="ghost"
+                                icon
+                                data-testid="composer:to-button"
+                            >
+                                <Icon name="user-plus" size={16} alt={addContactButton} />
+                            </Button>
+                        </Tooltip>
                     </span>
                 ) : null}
             </div>

diff --git a/applications/mail/src/app/components/composer/addresses/AddressesSummary.tsx b/applications/mail/src/app/components/composer/addresses/AddressesSummary.tsx
@@ -2,7 +2,7 @@ import { memo, Fragment, MouseEvent, FocusEvent } from 'react';
 import { Message } from '@proton/shared/lib/interfaces/mail/Message';
 import { getRecipients } from '@proton/shared/lib/mail/messages';
 import { c } from 'ttag';
-import { Label, classnames, Button, Icon } from '@proton/components';
+import { Label, classnames, Button, Icon, Tooltip } from '@proton/components';
 import { Recipient } from '@proton/shared/lib/interfaces/Address';
 import { MapSendInfo, STATUS_ICONS_FILLS } from '../../../models/crypto';
 import { RecipientType, recipientTypes } from '../../../models/address';
@@ -110,18 +110,20 @@ const AddressesSummary = ({ message, disabled, mapSendInfo, toggleExpanded, onFo
                     >
                         {c('Action').t`CC BCC`}
                     </Button>
-                    <Button
-                        type="button"
-                        onClick={handleContactModal('ToList')}
-                        onFocus={handleFocuButton}
-                        color="weak"
-                        className="pt0-25 pb0-25 flex-item-noshrink"
-                        shape="ghost"
-                        icon
-                        data-testid="composer:to-button"
-                    >
-                        <Icon name="user-plus" size={16} alt={c('Title').t`To`} />
-                    </Button>
+                    <Tooltip title={c('Action').t`Insert contacts`}>
+                        <Button
+                            type="button"
+                            onClick={handleContactModal('ToList')}
+                            onFocus={handleFocuButton}
+                            color="weak"
+                            className="pt0-25 pb0-25 flex-item-noshrink"
+                            shape="ghost"
+                            icon
+                            data-testid="composer:to-button"
+                        >
+                            <Icon name="user-plus" size={16} alt={c('Title').t`To`} />
+                        </Button>
+                    </Tooltip>
                 </span>
             </div>
         </div>

diff --git a/packages/components/components/editor/toolbar/SquireToolbar.tsx b/packages/components/components/editor/toolbar/SquireToolbar.tsx
@@ -288,6 +288,15 @@ const SquireToolbar = ({
                         >
                             <Icon name="eraser" className="mauto" alt={c('Action').t`Clear all formatting`} />
                         </SquireToolbarButton>
+                        <SquireToolbarSeparator />
+                        <SquireToolbarButton
+                            onClick={handleImage}
+                            className="flex-item-noshrink"
+                            title={c('Action').t`Insert image`}
+                            tabIndex={-1}
+                        >
+                            <Icon name="file-image" className="mauto" alt={c('Action').t`Insert image`} />
+                        </SquireToolbarButton>
                     </>
                 )}
             </>