wip.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -529,5 +529,13 @@
   "manyPeopleTyping": "Several people are typing…",
   "@manyPeopleTyping": {
     "description": "Text to display when there are multiple users typing."
+  },
+  "messageIsEditedLabel": "EDITED",
+  "@messageIsEditedLabel": {
+    "description": "Label for an edited message."
+  },
+  "messageIsMovedLabel": "MOVED",
+  "@messageIsMovedLabel": {
+    "description": "Label for a moved message."
   }
 }

lib/widgets/edit_state_marker.dart

@@ -69,6 +69,6 @@ class _EditStateMarkerPill extends StatelessWidget {
       child: Transform.translate(
         offset: offset,
         child: Icon(
-          icon, size: 16, color: messageListTheme.editedMovedMarkerCollapsed)));
+          icon, size: 16, color: messageListTheme.editedMovedMarker)));
   }
 }

lib/widgets/message_list.dart

@@ -33,7 +33,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.black,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
-      editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
+      editedMovedMarker: Colors.black.withOpacity(0.35),
       messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
@@ -60,8 +60,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.white,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
-      // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-      editedMovedMarkerCollapsed: const Color.fromARGB(128, 214, 202, 194),
+      editedMovedMarker: Colors.white.withOpacity(0.35),
       messageTimestamp: const HSLColor.fromAHSL(0.6, 0, 0, 1).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
       senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
@@ -86,7 +85,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.dateSeparator,
     required this.dateSeparatorText,
     required this.dmRecipientHeaderBg,
-    required this.editedMovedMarkerCollapsed,
+    required this.editedMovedMarker,
     required this.messageTimestamp,
     required this.recipientHeaderText,
     required this.senderBotIcon,
@@ -111,7 +110,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color dateSeparator;
   final Color dateSeparatorText;
   final Color dmRecipientHeaderBg;
-  final Color editedMovedMarkerCollapsed;
+  final Color editedMovedMarker;
   final Color messageTimestamp;
   final Color recipientHeaderText;
   final Color senderBotIcon;
@@ -127,7 +126,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     Color? dateSeparator,
     Color? dateSeparatorText,
     Color? dmRecipientHeaderBg,
-    Color? editedMovedMarkerCollapsed,
+    Color? editedMovedMarker,
     Color? messageTimestamp,
     Color? recipientHeaderText,
     Color? senderBotIcon,
@@ -142,7 +141,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: dateSeparator ?? this.dateSeparator,
       dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
-      editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
+      editedMovedMarker: editedMovedMarker ?? this.editedMovedMarker,
       messageTimestamp: messageTimestamp ?? this.messageTimestamp,
       recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
       senderBotIcon: senderBotIcon ?? this.senderBotIcon,
@@ -164,7 +163,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
       dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
-      editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
+      editedMovedMarker: Color.lerp(editedMovedMarker, other.editedMovedMarker, t)!,
       messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
       senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
@@ -1253,6 +1252,29 @@ class MessageWithPossibleSender extends StatelessWidget {
         ]);
     }
 
+    Widget? editStateRow;
+    if (message.editState != MessageEditState.none) {
+      final localizations = ZulipLocalizations.of(context);
+      final String editStateText;
+      switch (message.editState) {
+        case MessageEditState.edited:
+          editStateText = localizations.messageIsEditedLabel;
+        case MessageEditState.moved:
+          editStateText = localizations.messageIsMovedLabel;
+        case MessageEditState.none:
+          editStateText = '';
+          assert(false);
+      }
+      editStateRow = Text(editStateText,
+        textAlign: TextAlign.end,
+        style: TextStyle(
+          color: messageListTheme.editedMovedMarker,
+          fontFamily: 'Source Sans 3',
+          fontSize: 12,
+          height: (12 / 12),
+      ));
+    }
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
@@ -1262,21 +1284,27 @@ class MessageWithPossibleSender extends StatelessWidget {
           if (senderRow != null)
             Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
               child: senderRow),
-          EditStateMarker(
-            editState: message.editState,
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.baseline,
+            textBaseline: localizedTextBaseline(context),
             children: [
-              Expanded(child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  MessageContent(message: message, content: item.content),
-                  if ((message.reactions?.total ?? 0) > 0)
-                    ReactionChipsList(messageId: message.id, reactions: message.reactions!)
-                ])),
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    MessageContent(message: message, content: item.content),
+                    if ((message.reactions?.total ?? 0) > 0)
+                      ReactionChipsList(messageId: message.id, reactions: message.reactions!),
+                    if (editStateRow != null)
+                      editStateRow,
+                  ]),
+              ),
               SizedBox(width: 16,
                 child: message.flags.contains(MessageFlag.starred)
                   ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)
                   : null),
-            ]),
+          ]),
         ])));
   }
 }