diff --git a/images/icons/v2/trash-outline-24.svg b/images/icons/v2/trash-outline-24.svg new file mode 100644 index 0000000000..cf8f68d817 --- /dev/null +++ b/images/icons/v2/trash-outline-24.svg @@ -0,0 +1 @@ +trash-outline-24 \ No newline at end of file diff --git a/images/icons/v2/trash-solid-24.svg b/images/icons/v2/trash-solid-24.svg new file mode 100644 index 0000000000..3d74ebb95e --- /dev/null +++ b/images/icons/v2/trash-solid-24.svg @@ -0,0 +1 @@ +trash-solid-24 \ No newline at end of file diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index a327f62812..fcb0aa6321 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -9638,22 +9638,20 @@ button.module-image__border-overlay:focus { /* Third-party module: react-contextmenu*/ .react-contextmenu { + @include popper-shadow(); + outline: none; border-radius: 4px; - min-width: 160px; - padding: 0px; - padding-top: 8px; - padding-bottom: 8px; + min-width: 220px; + padding: 6px 0; opacity: 0; user-select: none; @include light-theme { - background-color: $color-gray-02; - border: 1px solid $color-gray-02; + background-color: $color-white; } @include dark-theme { - background-color: $color-gray-90; - border: 1px solid $color-gray-60; + background-color: $color-gray-75; } } @@ -9669,10 +9667,7 @@ button.module-image__border-overlay:focus { @include font-body-2; - padding-left: 16px; - padding-top: 3px; - padding-bottom: 2px; - padding-right: 16px; + padding: 7px 12px; @include light-theme { color: $color-gray-90; @@ -9680,6 +9675,19 @@ button.module-image__border-overlay:focus { @include dark-theme { color: $color-gray-02; } + + &--divider { + height: 1px; + margin: 6px 0; + padding: 0; + + @include light-theme { + background-color: $color-gray-15; + } + @include dark-theme { + background-color: $color-gray-60; + } + } } .react-contextmenu-item--checked:before { @@ -9706,15 +9714,25 @@ button.module-image__border-overlay:focus { .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item:after { - content: '\25B6'; + content: ' '; display: inline-block; + height: 18px; position: absolute; right: 7px; + width: 12px; @include light-theme { + @include color-svg( + '../images/icons/v2/chevron-right-16.svg', + $color-gray-75 + ); color: $color-gray-90; } @include dark-theme { + @include color-svg( + '../images/icons/v2/chevron-right-16.svg', + $color-gray-15 + ); color: $color-gray-02; } } @@ -9726,7 +9744,7 @@ button.module-image__border-overlay:focus { background-color: $color-gray-15; } @include dark-theme { - background-color: $color-gray-75; + background-color: $color-gray-60; color: $color-white; } } @@ -9777,6 +9795,123 @@ button.module-image__border-overlay:focus { } } +.module-message__context { + &--icon::before { + content: ' '; + display: inline-block; + height: 14px; + margin-right: 8px; + width: 14px; + vertical-align: middle; + } + + &__download::before { + @include light-theme { + @include color-svg( + '../images/icons/v2/save-outline-24.svg', + $color-black + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/save-solid-24.svg', + $color-gray-15 + ); + } + } + + &__reply::before { + @include light-theme { + @include color-svg( + '../images/icons/v2/reply-outline-24.svg', + $color-black + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/reply-solid-24.svg', + $color-gray-15 + ); + } + } + + &__react::before { + @include light-theme { + @include color-svg( + '../images/icons/v2/add-emoji-outline-24.svg', + $color-black + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/add-emoji-outline-24.svg', + $color-gray-15 + ); + } + } + + &__more-info::before { + @include light-theme { + @include color-svg( + '../images/icons/v2/info-outline-24.svg', + $color-black + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/info-outline-24.svg', + $color-gray-15 + ); + } + } + + &__retry-send::before { + @include light-theme { + @include color-svg('../images/icons/v2/send-24.svg', $color-black); + } + + @include dark-theme { + @include color-svg('../images/icons/v2/send-24.svg', $color-gray-15); + } + } + + &__delete-message::before { + @include light-theme { + @include color-svg( + '../images/icons/v2/trash-outline-24.svg', + $color-black + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/trash-solid-24.svg', + $color-gray-15 + ); + } + } + + &__delete-message-for-everyone::before { + @include light-theme { + @include color-svg( + '../images/icons/v2/trash-outline-24.svg', + $color-black + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/trash-solid-24.svg', + $color-gray-15 + ); + } + } +} + /* Spec: container > 438px and container < 593px */ @media (min-width: 800px) and (max-width: 925px) { .module-message { diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 38835156f1..fbfb41d6f5 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -350,6 +350,28 @@ export class ConversationHeader extends React.Component { return ( + + {muteOptions.map(item => ( + { + onSetMuteNotifications(item.value); + }} + > + {item.name} + + ))} + + {isPinned ? ( + onSetPin(false)}> + {i18n('unpinConversation')} + + ) : ( + onSetPin(true)}> + {i18n('pinConversation')} + + )} {disableTimerChanges ? null : ( {(timerOptions || []).map(item => ( @@ -364,19 +386,6 @@ export class ConversationHeader extends React.Component { ))} )} - - {muteOptions.map(item => ( - { - onSetMuteNotifications(item.value); - }} - > - {item.name} - - ))} - {i18n('viewRecentMedia')} {isGroup ? ( @@ -388,6 +397,7 @@ export class ConversationHeader extends React.Component { {i18n('showSafetyNumber')} ) : null} + {!isGroup && acceptedMessageRequest ? ( {i18n('resetSession')} ) : null} @@ -398,15 +408,6 @@ export class ConversationHeader extends React.Component { ) : ( {i18n('archiveConversation')} )} - {isPinned ? ( - onSetPin(false)}> - {i18n('unpinConversation')} - - ) : ( - onSetPin(true)}> - {i18n('pinConversation')} - - )} {i18n('deleteMessages')} ); diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx index fe015136c6..b7392c22da 100644 --- a/ts/components/conversation/Message.stories.tsx +++ b/ts/components/conversation/Message.stories.tsx @@ -796,3 +796,21 @@ story.add('@Mentions', () => { return renderBothDirections(props); }); + +story.add('All the context menus', () => { + const props = createProps({ + attachments: [ + { + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + fileName: 'tina-rolf-269345-unsplash.jpg', + contentType: IMAGE_JPEG, + width: 128, + height: 128, + }, + ], + status: 'partial-sent', + canDeleteForEveryone: true, + }); + + return ; +}); diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 0a4f39620d..0b4f64fe23 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -1347,7 +1347,9 @@ export class Message extends React.PureComponent { const { canDeleteForEveryone } = this.state; - const showRetry = status === 'error' && direction === 'outgoing'; + const showRetry = + (status === 'error' || status === 'partial-sent') && + direction === 'outgoing'; const multipleAttachments = attachments && attachments.length > 1; const menu = ( @@ -1360,7 +1362,8 @@ export class Message extends React.PureComponent { attachments[0] ? ( @@ -1371,20 +1374,8 @@ export class Message extends React.PureComponent { <> { - event.stopPropagation(); - event.preventDefault(); - - this.toggleReactionPicker(); - }} - > - {i18n('reactToMessage')} - - { event.stopPropagation(); @@ -1395,11 +1386,26 @@ export class Message extends React.PureComponent { > {i18n('replyToMessage')} + { + event.stopPropagation(); + event.preventDefault(); + + this.toggleReactionPicker(); + }} + > + {i18n('reactToMessage')} + ) : null} { event.stopPropagation(); @@ -1413,7 +1419,8 @@ export class Message extends React.PureComponent { {showRetry ? ( { event.stopPropagation(); @@ -1427,7 +1434,8 @@ export class Message extends React.PureComponent { ) : null} { event.stopPropagation(); @@ -1441,7 +1449,8 @@ export class Message extends React.PureComponent { {canDeleteForEveryone ? ( { event.stopPropagation();