Skip to content

msglist: Implement new edited/moved label design. #900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 16, 2024
Merged

msglist: Implement new edited/moved label design. #900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd94405
msglist [nfc]: Remove unnecessary fontFamily argument.
PIG208 Aug 26, 2024
6ca5524
msglist: Implement new edited/moved label design.
PIG208 Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified assets/icons/ZulipIcons.ttf
View file
Open in desktop
Binary file not shown.
3 changes: 0 additions & 3 deletions assets/icons/edited.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions assets/icons/message_moved.svg
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions assets/l10n/app_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,5 +533,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. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
},
"messageIsMovedLabel": "MOVED",
"@messageIsMovedLabel": {
"description": "Label for a moved message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
}
}
74 changes: 0 additions & 74 deletions lib/widgets/edit_state_marker.dart
View file
Open in desktop

This file was deleted.

28 changes: 11 additions & 17 deletions lib/widgets/icons.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,44 +42,38 @@ abstract final class ZulipIcons {
/// The Zulip custom icon "clock".
static const IconData clock = IconData(0xf106, fontFamily: "Zulip Icons");

/// The Zulip custom icon "edited".
static const IconData edited = IconData(0xf107, fontFamily: "Zulip Icons");

/// The Zulip custom icon "globe".
static const IconData globe = IconData(0xf108, fontFamily: "Zulip Icons");
static const IconData globe = IconData(0xf107, fontFamily: "Zulip Icons");

/// The Zulip custom icon "group_dm".
static const IconData group_dm = IconData(0xf109, fontFamily: "Zulip Icons");
static const IconData group_dm = IconData(0xf108, fontFamily: "Zulip Icons");

/// The Zulip custom icon "hash_sign".
static const IconData hash_sign = IconData(0xf10a, fontFamily: "Zulip Icons");
static const IconData hash_sign = IconData(0xf109, fontFamily: "Zulip Icons");

/// The Zulip custom icon "language".
static const IconData language = IconData(0xf10b, fontFamily: "Zulip Icons");
static const IconData language = IconData(0xf10a, fontFamily: "Zulip Icons");

/// The Zulip custom icon "lock".
static const IconData lock = IconData(0xf10c, fontFamily: "Zulip Icons");

/// The Zulip custom icon "message_moved".
static const IconData message_moved = IconData(0xf10d, fontFamily: "Zulip Icons");
static const IconData lock = IconData(0xf10b, fontFamily: "Zulip Icons");

/// The Zulip custom icon "mute".
static const IconData mute = IconData(0xf10e, fontFamily: "Zulip Icons");
static const IconData mute = IconData(0xf10c, fontFamily: "Zulip Icons");

/// The Zulip custom icon "read_receipts".
static const IconData read_receipts = IconData(0xf10f, fontFamily: "Zulip Icons");
static const IconData read_receipts = IconData(0xf10d, fontFamily: "Zulip Icons");

/// The Zulip custom icon "star_filled".
static const IconData star_filled = IconData(0xf110, fontFamily: "Zulip Icons");
static const IconData star_filled = IconData(0xf10e, fontFamily: "Zulip Icons");

/// The Zulip custom icon "topic".
static const IconData topic = IconData(0xf111, fontFamily: "Zulip Icons");
static const IconData topic = IconData(0xf10f, fontFamily: "Zulip Icons");

/// The Zulip custom icon "unmute".
static const IconData unmute = IconData(0xf112, fontFamily: "Zulip Icons");
static const IconData unmute = IconData(0xf110, fontFamily: "Zulip Icons");

/// The Zulip custom icon "user".
static const IconData user = IconData(0xf113, fontFamily: "Zulip Icons");
static const IconData user = IconData(0xf111, fontFamily: "Zulip Icons");

// END GENERATED ICON DATA
}
Expand Down
38 changes: 24 additions & 14 deletions lib/widgets/message_list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import 'page.dart';
import 'profile.dart';
import 'sticky_header.dart';
import 'store.dart';
import 'edit_state_marker.dart';
import 'text.dart';
import 'theme.dart';

Expand All @@ -33,7 +32,6 @@ 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),
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(),
Expand All @@ -60,8 +58,6 @@ 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),
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(),
Expand All @@ -86,7 +82,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
required this.dateSeparator,
required this.dateSeparatorText,
required this.dmRecipientHeaderBg,
required this.editedMovedMarkerCollapsed,
required this.messageTimestamp,
required this.recipientHeaderText,
required this.senderBotIcon,
Expand All @@ -111,7 +106,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
final Color dateSeparator;
final Color dateSeparatorText;
final Color dmRecipientHeaderBg;
final Color editedMovedMarkerCollapsed;
final Color messageTimestamp;
final Color recipientHeaderText;
final Color senderBotIcon;
Expand All @@ -127,7 +121,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
Color? dateSeparator,
Color? dateSeparatorText,
Color? dmRecipientHeaderBg,
Color? editedMovedMarkerCollapsed,
Color? messageTimestamp,
Color? recipientHeaderText,
Color? senderBotIcon,
Expand All @@ -142,7 +135,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
dateSeparator: dateSeparator ?? this.dateSeparator,
dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
messageTimestamp: messageTimestamp ?? this.messageTimestamp,
recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
senderBotIcon: senderBotIcon ?? this.senderBotIcon,
Expand All @@ -164,7 +156,6 @@ 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)!,
messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
Expand Down Expand Up @@ -1232,7 +1223,6 @@ class MessageWithPossibleSender extends StatelessWidget {
Flexible(
child: Text(message.senderFullName, // TODO get from user data
style: TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 18,
height: (22 / 18),
color: messageListTheme.senderName,
Expand All @@ -1251,14 +1241,23 @@ class MessageWithPossibleSender extends StatelessWidget {
Text(time,
style: TextStyle(
color: messageListTheme.messageTimestamp,
fontFamily: 'Source Sans 3',
fontSize: 16,
height: (18 / 16),
fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
).merge(weightVariableTextStyle(context))),
]);
}

final localizations = ZulipLocalizations.of(context);
String? editStateText;
switch (message.editState) {
case MessageEditState.edited:
editStateText = localizations.messageIsEditedLabel;
case MessageEditState.moved:
editStateText = localizations.messageIsMovedLabel;
case MessageEditState.none:
}

return GestureDetector(
behavior: HitTestBehavior.translucent,
onLongPress: () => showMessageActionSheet(context: context, message: message),
Expand All @@ -1268,15 +1267,26 @@ 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: [
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!)
ReactionChipsList(messageId: message.id, reactions: message.reactions!),
if (editStateText != null)
Text(editStateText,
textAlign: TextAlign.end,
style: TextStyle(
color: designVariables.labelEdited,
fontSize: 12,
height: (12 / 12),
letterSpacing: proportionalLetterSpacing(
context, 0.05, baseFontSize: 12))),
])),
SizedBox(width: 16,
child: message.flags.contains(MessageFlag.starred)
Expand Down
7 changes: 7 additions & 0 deletions lib/widgets/theme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
borderBar: const Color(0x33000000),
icon: const Color(0xff666699),
labelCounterUnread: const Color(0xff222222),
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
labelMenuButton: const Color(0xff222222),
mainBackground: const Color(0xfff0f0f0),
title: const Color(0xff1a1a1a),
Expand Down Expand Up @@ -140,6 +141,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
borderBar: Colors.black.withValues(alpha: 0.41),
icon: const Color(0xff7070c2),
labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
mainBackground: const Color(0xff1d1d1d),
title: const Color(0xffffffff),
Expand Down Expand Up @@ -174,6 +176,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
required this.borderBar,
required this.icon,
required this.labelCounterUnread,
required this.labelEdited,
required this.labelMenuButton,
required this.mainBackground,
required this.title,
Expand Down Expand Up @@ -210,6 +213,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
final Color borderBar;
final Color icon;
final Color labelCounterUnread;
final Color labelEdited;
final Color labelMenuButton;
final Color mainBackground;
final Color title;
Expand Down Expand Up @@ -241,6 +245,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
Color? borderBar,
Color? icon,
Color? labelCounterUnread,
Color? labelEdited,
Color? labelMenuButton,
Color? mainBackground,
Color? title,
Expand All @@ -267,6 +272,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
borderBar: borderBar ?? this.borderBar,
icon: icon ?? this.icon,
labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
labelEdited: labelEdited ?? this.labelEdited,
labelMenuButton: labelMenuButton ?? this.labelMenuButton,
mainBackground: mainBackground ?? this.mainBackground,
title: title ?? this.title,
Expand Down Expand Up @@ -300,6 +306,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
borderBar: Color.lerp(borderBar, other.borderBar, t)!,
icon: Color.lerp(icon, other.icon, t)!,
labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
title: Color.lerp(title, other.title, t)!,
Expand Down
Loading