From dd5e9c48b8bb3e0759c9714accfd54275f6b8777 Mon Sep 17 00:00:00 2001 From: Zixuan James Li Date: Tue, 3 Dec 2024 20:09:11 -0500 Subject: [PATCH] inbox [nfc]: Generalize _AtMentionMarker to take different icons This is helpful for adding marker of topic visibility. Signed-off-by: Zixuan James Li --- lib/widgets/inbox.dart | 18 +++++++++++------- lib/widgets/theme.dart | 12 ++++++------ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart index dcbd1acdb2..0f84a4373d 100644 --- a/lib/widgets/inbox.dart +++ b/lib/widgets/inbox.dart @@ -291,7 +291,7 @@ abstract class _HeaderItem extends StatelessWidget { overflow: TextOverflow.ellipsis, title))), const SizedBox(width: 12), - if (hasMention) const _AtMentionMarker(), + if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign), Padding(padding: const EdgeInsetsDirectional.only(end: 16), child: UnreadCountBadge( backgroundColor: unreadCountBadgeBackgroundColor(context), @@ -414,7 +414,7 @@ class _DmItem extends StatelessWidget { overflow: TextOverflow.ellipsis, title))), const SizedBox(width: 12), - if (hasMention) const _AtMentionMarker(), + if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign), Padding(padding: const EdgeInsetsDirectional.only(end: 16), child: UnreadCountBadge(backgroundColor: null, count: count)), @@ -539,7 +539,7 @@ class _TopicItem extends StatelessWidget { overflow: TextOverflow.ellipsis, topic))), const SizedBox(width: 12), - if (hasMention) const _AtMentionMarker(), + if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign), Padding(padding: const EdgeInsetsDirectional.only(end: 16), child: UnreadCountBadge( backgroundColor: colorSwatchFor(context, subscription), @@ -548,16 +548,20 @@ class _TopicItem extends StatelessWidget { } } -class _AtMentionMarker extends StatelessWidget { - const _AtMentionMarker(); +class _IconMarker extends StatelessWidget { + const _IconMarker({required this.icon}); + + final IconData icon; @override Widget build(BuildContext context) { final designVariables = DesignVariables.of(context); - // Design for at-mention marker based on Figma screen: + // Design for icon markers based on Figma screen: // https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=224-16386&mode=design&t=JsNndFQ8fKFH0SjS-0 return Padding( padding: const EdgeInsetsDirectional.only(end: 4), - child: Icon(ZulipIcons.at_sign, size: 14, color: designVariables.atMentionMarker)); + // This color comes from the Figma screen for the "@" marker, but not + // the topic visibility markers. + child: Icon(icon, size: 14, color: designVariables.inboxItemIconMarker)); } } diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index 9dbb340d56..c7d3a5c26a 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -135,7 +135,7 @@ class DesignVariables extends ThemeExtension { textInput: const Color(0xff000000), title: const Color(0xff1a1a1a), channelColorSwatches: ChannelColorSwatches.light, - atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(), + inboxItemIconMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(), colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2), contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15), contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), @@ -180,7 +180,7 @@ class DesignVariables extends ThemeExtension { contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15), // the same as the light mode in Figma contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), // the same as the light mode in Figma // TODO(design-dark) need proper dark-theme color (this is ad hoc) - atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(), + inboxItemIconMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(), colorMessageHeaderIconInteractive: Colors.white.withValues(alpha: 0.2), dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(), // TODO(design-dark) need proper dark-theme color (this is ad hoc) @@ -226,7 +226,7 @@ class DesignVariables extends ThemeExtension { required this.textInput, required this.title, required this.channelColorSwatches, - required this.atMentionMarker, + required this.inboxItemIconMarker, required this.colorMessageHeaderIconInteractive, required this.contextMenuCancelBg, required this.contextMenuCancelPressedBg, @@ -280,7 +280,7 @@ class DesignVariables extends ThemeExtension { final ChannelColorSwatches channelColorSwatches; // Not named variables in Figma; taken from older Figma drafts, or elsewhere. - final Color atMentionMarker; + final Color inboxItemIconMarker; final Color colorMessageHeaderIconInteractive; final Color contextMenuCancelBg; // In Figma, but unnamed. final Color contextMenuCancelPressedBg; // In Figma, but unnamed. @@ -361,7 +361,7 @@ class DesignVariables extends ThemeExtension { textInput: textInput ?? this.textInput, title: title ?? this.title, channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches, - atMentionMarker: atMentionMarker ?? this.atMentionMarker, + inboxItemIconMarker: atMentionMarker ?? this.inboxItemIconMarker, colorMessageHeaderIconInteractive: colorMessageHeaderIconInteractive ?? this.colorMessageHeaderIconInteractive, contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg, contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg, @@ -408,7 +408,7 @@ class DesignVariables extends ThemeExtension { textInput: Color.lerp(textInput, other.textInput, t)!, title: Color.lerp(title, other.title, t)!, channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t), - atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!, + inboxItemIconMarker: Color.lerp(inboxItemIconMarker, other.inboxItemIconMarker, t)!, colorMessageHeaderIconInteractive: Color.lerp(colorMessageHeaderIconInteractive, other.colorMessageHeaderIconInteractive, t)!, contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!, contextMenuCancelPressedBg: Color.lerp(contextMenuCancelPressedBg, other.contextMenuCancelPressedBg, t)!,