Skip to content

Commit cb72ff1

Browse files
PIG208PIG208
committed
msglist: Implement new edited/moved label design.
This replaces the gutter edit state marker design. Since it leads to message displacement, the test "edit state updates do not affect layout" is no longer applicable. We also inline part of what was previously in edit_state_marker.dart, because the new design simplifies the implementation, and remove the now unused icons. The design variables are taken from the Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3038-56393&t=WMT80mwuFaruNbVf-1 Signed-off-by: Zixuan James Li <[email protected]>
1 parent 870d22e commit cb72ff1

File tree

9 files changed

+53
-179
lines changed

9 files changed

+53
-179
lines changed

‎assets/icons/ZulipIcons.ttf

-224 Bytes
Binary file not shown.

‎assets/icons/edited.svg

-3
This file was deleted.

‎assets/icons/message_moved.svg

-3
This file was deleted.

‎assets/l10n/app_en.arb

+8
Original file line numberDiff line numberDiff line change
@@ -533,5 +533,13 @@
533533
"manyPeopleTyping": "Several people are typing…",
534534
"@manyPeopleTyping": {
535535
"description": "Text to display when there are multiple users typing."
536+
},
537+
"messageIsEditedLabel": "EDITED",
538+
"@messageIsEditedLabel": {
539+
"description": "Label for an edited message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
540+
},
541+
"messageIsMovedLabel": "MOVED",
542+
"@messageIsMovedLabel": {
543+
"description": "Label for a moved message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
536544
}
537545
}

‎lib/widgets/edit_state_marker.dart

-74
This file was deleted.

‎lib/widgets/icons.dart

+11-17
Original file line numberDiff line numberDiff line change
@@ -42,44 +42,38 @@ abstract final class ZulipIcons {
4242
/// The Zulip custom icon "clock".
4343
static const IconData clock = IconData(0xf106, fontFamily: "Zulip Icons");
4444

45-
/// The Zulip custom icon "edited".
46-
static const IconData edited = IconData(0xf107, fontFamily: "Zulip Icons");
47-
4845
/// The Zulip custom icon "globe".
49-
static const IconData globe = IconData(0xf108, fontFamily: "Zulip Icons");
46+
static const IconData globe = IconData(0xf107, fontFamily: "Zulip Icons");
5047

5148
/// The Zulip custom icon "group_dm".
52-
static const IconData group_dm = IconData(0xf109, fontFamily: "Zulip Icons");
49+
static const IconData group_dm = IconData(0xf108, fontFamily: "Zulip Icons");
5350

5451
/// The Zulip custom icon "hash_sign".
55-
static const IconData hash_sign = IconData(0xf10a, fontFamily: "Zulip Icons");
52+
static const IconData hash_sign = IconData(0xf109, fontFamily: "Zulip Icons");
5653

5754
/// The Zulip custom icon "language".
58-
static const IconData language = IconData(0xf10b, fontFamily: "Zulip Icons");
55+
static const IconData language = IconData(0xf10a, fontFamily: "Zulip Icons");
5956

6057
/// The Zulip custom icon "lock".
61-
static const IconData lock = IconData(0xf10c, fontFamily: "Zulip Icons");
62-
63-
/// The Zulip custom icon "message_moved".
64-
static const IconData message_moved = IconData(0xf10d, fontFamily: "Zulip Icons");
58+
static const IconData lock = IconData(0xf10b, fontFamily: "Zulip Icons");
6559

6660
/// The Zulip custom icon "mute".
67-
static const IconData mute = IconData(0xf10e, fontFamily: "Zulip Icons");
61+
static const IconData mute = IconData(0xf10c, fontFamily: "Zulip Icons");
6862

6963
/// The Zulip custom icon "read_receipts".
70-
static const IconData read_receipts = IconData(0xf10f, fontFamily: "Zulip Icons");
64+
static const IconData read_receipts = IconData(0xf10d, fontFamily: "Zulip Icons");
7165

7266
/// The Zulip custom icon "star_filled".
73-
static const IconData star_filled = IconData(0xf110, fontFamily: "Zulip Icons");
67+
static const IconData star_filled = IconData(0xf10e, fontFamily: "Zulip Icons");
7468

7569
/// The Zulip custom icon "topic".
76-
static const IconData topic = IconData(0xf111, fontFamily: "Zulip Icons");
70+
static const IconData topic = IconData(0xf10f, fontFamily: "Zulip Icons");
7771

7872
/// The Zulip custom icon "unmute".
79-
static const IconData unmute = IconData(0xf112, fontFamily: "Zulip Icons");
73+
static const IconData unmute = IconData(0xf110, fontFamily: "Zulip Icons");
8074

8175
/// The Zulip custom icon "user".
82-
static const IconData user = IconData(0xf113, fontFamily: "Zulip Icons");
76+
static const IconData user = IconData(0xf111, fontFamily: "Zulip Icons");
8377

8478
// END GENERATED ICON DATA
8579
}

‎lib/widgets/message_list.dart

+24-12
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import 'page.dart';
2222
import 'profile.dart';
2323
import 'sticky_header.dart';
2424
import 'store.dart';
25-
import 'edit_state_marker.dart';
2625
import 'text.dart';
2726
import 'theme.dart';
2827

@@ -33,7 +32,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
3332
dateSeparator: Colors.black,
3433
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
3534
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
36-
editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
3735
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
3836
recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
3937
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
@@ -60,8 +58,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
6058
dateSeparator: Colors.white,
6159
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
6260
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
63-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
64-
editedMovedMarkerCollapsed: const Color.fromARGB(128, 214, 202, 194),
6561
messageTimestamp: const HSLColor.fromAHSL(0.6, 0, 0, 1).toColor(),
6662
recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
6763
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
@@ -86,7 +82,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
8682
required this.dateSeparator,
8783
required this.dateSeparatorText,
8884
required this.dmRecipientHeaderBg,
89-
required this.editedMovedMarkerCollapsed,
9085
required this.messageTimestamp,
9186
required this.recipientHeaderText,
9287
required this.senderBotIcon,
@@ -111,7 +106,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
111106
final Color dateSeparator;
112107
final Color dateSeparatorText;
113108
final Color dmRecipientHeaderBg;
114-
final Color editedMovedMarkerCollapsed;
115109
final Color messageTimestamp;
116110
final Color recipientHeaderText;
117111
final Color senderBotIcon;
@@ -127,7 +121,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
127121
Color? dateSeparator,
128122
Color? dateSeparatorText,
129123
Color? dmRecipientHeaderBg,
130-
Color? editedMovedMarkerCollapsed,
131124
Color? messageTimestamp,
132125
Color? recipientHeaderText,
133126
Color? senderBotIcon,
@@ -142,7 +135,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
142135
dateSeparator: dateSeparator ?? this.dateSeparator,
143136
dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
144137
dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
145-
editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
146138
messageTimestamp: messageTimestamp ?? this.messageTimestamp,
147139
recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
148140
senderBotIcon: senderBotIcon ?? this.senderBotIcon,
@@ -164,7 +156,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
164156
dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
165157
dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
166158
dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
167-
editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
168159
messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
169160
recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
170161
senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
@@ -1257,6 +1248,16 @@ class MessageWithPossibleSender extends StatelessWidget {
12571248
]);
12581249
}
12591250

1251+
final localizations = ZulipLocalizations.of(context);
1252+
String? editStateText;
1253+
switch (message.editState) {
1254+
case MessageEditState.edited:
1255+
editStateText = localizations.messageIsEditedLabel;
1256+
case MessageEditState.moved:
1257+
editStateText = localizations.messageIsMovedLabel;
1258+
case MessageEditState.none:
1259+
}
1260+
12601261
return GestureDetector(
12611262
behavior: HitTestBehavior.translucent,
12621263
onLongPress: () => showMessageActionSheet(context: context, message: message),
@@ -1266,15 +1267,26 @@ class MessageWithPossibleSender extends StatelessWidget {
12661267
if (senderRow != null)
12671268
Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
12681269
child: senderRow),
1269-
EditStateMarker(
1270-
editState: message.editState,
1270+
Row(
1271+
crossAxisAlignment: CrossAxisAlignment.baseline,
1272+
textBaseline: localizedTextBaseline(context),
12711273
children: [
1274+
const SizedBox(width: 16),
12721275
Expanded(child: Column(
12731276
crossAxisAlignment: CrossAxisAlignment.stretch,
12741277
children: [
12751278
MessageContent(message: message, content: item.content),
12761279
if ((message.reactions?.total ?? 0) > 0)
1277-
ReactionChipsList(messageId: message.id, reactions: message.reactions!)
1280+
ReactionChipsList(messageId: message.id, reactions: message.reactions!),
1281+
if (editStateText != null)
1282+
Text(editStateText,
1283+
textAlign: TextAlign.end,
1284+
style: TextStyle(
1285+
color: designVariables.labelEdited,
1286+
fontSize: 12,
1287+
height: (12 / 12),
1288+
letterSpacing: proportionalLetterSpacing(
1289+
context, 0.05, baseFontSize: 12))),
12781290
])),
12791291
SizedBox(width: 16,
12801292
child: message.flags.contains(MessageFlag.starred)

‎lib/widgets/theme.dart

+7
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
112112
borderBar: const Color(0x33000000),
113113
icon: const Color(0xff666699),
114114
labelCounterUnread: const Color(0xff222222),
115+
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
115116
labelMenuButton: const Color(0xff222222),
116117
mainBackground: const Color(0xfff0f0f0),
117118
title: const Color(0xff1a1a1a),
@@ -140,6 +141,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
140141
borderBar: Colors.black.withValues(alpha: 0.41),
141142
icon: const Color(0xff7070c2),
142143
labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
144+
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
143145
labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
144146
mainBackground: const Color(0xff1d1d1d),
145147
title: const Color(0xffffffff),
@@ -174,6 +176,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
174176
required this.borderBar,
175177
required this.icon,
176178
required this.labelCounterUnread,
179+
required this.labelEdited,
177180
required this.labelMenuButton,
178181
required this.mainBackground,
179182
required this.title,
@@ -210,6 +213,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
210213
final Color borderBar;
211214
final Color icon;
212215
final Color labelCounterUnread;
216+
final Color labelEdited;
213217
final Color labelMenuButton;
214218
final Color mainBackground;
215219
final Color title;
@@ -241,6 +245,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
241245
Color? borderBar,
242246
Color? icon,
243247
Color? labelCounterUnread,
248+
Color? labelEdited,
244249
Color? labelMenuButton,
245250
Color? mainBackground,
246251
Color? title,
@@ -267,6 +272,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
267272
borderBar: borderBar ?? this.borderBar,
268273
icon: icon ?? this.icon,
269274
labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
275+
labelEdited: labelEdited ?? this.labelEdited,
270276
labelMenuButton: labelMenuButton ?? this.labelMenuButton,
271277
mainBackground: mainBackground ?? this.mainBackground,
272278
title: title ?? this.title,
@@ -300,6 +306,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
300306
borderBar: Color.lerp(borderBar, other.borderBar, t)!,
301307
icon: Color.lerp(icon, other.icon, t)!,
302308
labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
309+
labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
303310
labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
304311
mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
305312
title: Color.lerp(title, other.title, t)!,

0 commit comments

Comments
 (0)