Chat.Editing: contextmenu integration (#29672)

Co-authored-by: ksercs <ksercs0@gmail.com>

Author: EugeniyKiyashko

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with editing context menu (fluent-blue-light).png

@@ -268,6 +268,43 @@ test('Messagelist options showDayHeaders, showUserName and showMessageTimestamp
   });
 });
 
+test('Message list with editing context menu', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
+
+  await t
+    .rightClick(chat.getMessage(2))
+    .pressKey('down')
+    .pressKey('down');
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist with editing context menu.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+
+  const items = [
+    { author: userFirst, text: 'AAA' },
+    { author: userFirst, text: 'BBB' },
+    { author: userSecond, text: 'CCC' },
+  ];
+
+  return createWidget('dxChat', {
+    items,
+    editing: {
+      allowUpdating: true,
+      allowDeleting: true,
+    },
+    user: userSecond,
+    width: 400,
+    height: 600,
+    showDayHeaders: false,
+  });
+});
+
 fixture`ChatMessageList: dayHeaders`
   .page(url(__dirname, '../container.html'));
 

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with editing context menu (generic-light).png

@@ -8,8 +8,14 @@
   $day-header-font-size,
 ) {
   .dx-chat-messagelist {
-    .dx-scrollable-content {
-      padding-inline: $padding;
+    > .dx-scrollable {
+      > .dx-scrollable-wrapper {
+        > .dx-scrollable-container {
+          > .dx-scrollable-content {
+            padding-inline: $padding;
+          }
+        }
+      }
     }
   }
 
@@ -63,3 +69,20 @@
     color: $messagelist-empty-prompt-color;
   }
 }
+
+@mixin chat-messagelist-contextmenu(
+  $delete-button-color,
+  $delete-button-focused-color,
+  $delete-button-focused-bg,
+) {
+  .dx-messagelist-context-menu-content {
+    .dx-menu-item:has(.dx-icon-trash) {
+      color: $delete-button-color;
+
+      &.dx-state-focused {
+        color: $delete-button-focused-color;
+        background-color: $delete-button-focused-bg;
+      }
+    }
+  }
+}

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with editing context menu (material-blue-light).png

@@ -166,3 +166,7 @@ $chat-typingindicator-circle-bg-color: null !default;
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;

e2e/testcafe-devextreme/tests/chat/messageList.ts

@@ -69,6 +69,11 @@
   $chat-messagelist-day-header-first-padding-top,
   $chat-messagelist-day-header-font-size,
 );
+@include chat-messagelist-contextmenu(
+  $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
+);
 @include chat-typingindicator(
   $chat-typingindicator-template,
   $chat-typingindicator-padding,

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss

@@ -284,3 +284,7 @@ $chat-typingindicator-circle-bg-color: null !default;
 * $type color
 */
 $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-inverted-text-color !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-danger !default;

packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss

@@ -71,6 +71,11 @@
   $chat-messagelist-day-header-first-padding-top,
   $chat-messagelist-day-header-font-size,
 );
+@include chat-messagelist-contextmenu(
+  $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
+);
 @include chat-typingindicator(
   $chat-typingindicator-template,
   $chat-typingindicator-padding,

packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss

@@ -131,3 +131,7 @@ $chat-typingindicator-circle-bg-color: rgba($base-inverted-bg, 0.4) !default;
 @else if $mode == "dark" {
   $chat-bubble-background-color-primary: rgba(lighten($base-accent, 19.22), 0.08) !default;
 }
+
+$chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;