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 @@
+
\ 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 @@
+
\ 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 => (
+
+ ))}
+
+ {isPinned ? (
+
+ ) : (
+
+ )}
{disableTimerChanges ? null : (
{(timerOptions || []).map(item => (
@@ -364,19 +386,6 @@ export class ConversationHeader extends React.Component {
))}
)}
-
- {muteOptions.map(item => (
-
- ))}
-
{isGroup ? (
) : null}
+
{!isGroup && acceptedMessageRequest ? (
) : null}
@@ -398,15 +408,6 @@ export class ConversationHeader extends React.Component {
) : (
)}
- {isPinned ? (
-
- ) : (
-
- )}
);
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] ? (