compose: Support redesigned button feedback

This disables the splash effect for all the compose buttons and the send button, and implements a rounded rectangular background that appears on hover/pressed. Different from the style that all the compose buttons share, this feedback also applies to the send button, and will apply to more buttons in the app. In the future we should migrate more buttons to use this style, so it doesn't belong to a shared base class. See also: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3707-41711&node-type=frame&t=sSYomsJzGCt34D8N-0 Fixes: #915 Signed-off-by: Zixuan James Li <[email protected]>
zulip · Nov 15, 2024 · 94cf40e · 94cf40e
1 parent 3adb395
commit 94cf40e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
@@ -1002,7 +1002,8 @@ class _SendButtonState extends State<_SendButton> {
         icon: Icon(ZulipIcons.send,
           // We set [Icon.color] instead of [IconButton.color] because the
           // latter implicitly uses colors derived from it to override the
-          // ambient [ButtonStyle.overlayColor].
+          // ambient [ButtonStyle.overlayColor], where we set the color for
+          // the highlight state to match the Figma design.
           color: iconColor),
         onPressed: _send));
   }
@@ -1047,6 +1048,7 @@ class _ComposeBoxLayout extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final themeData = Theme.of(context);
+    final designVariables = DesignVariables.of(context);
 
     final inputThemeData = themeData.copyWith(
       inputDecorationTheme: const InputDecorationTheme(
@@ -1055,6 +1057,18 @@ class _ComposeBoxLayout extends StatelessWidget {
         contentPadding: EdgeInsets.zero,
         border: InputBorder.none));
 
+    // TODO(#417): Disable splash effects for all buttons globally.
+    final iconButtonThemeData = IconButtonThemeData(
+      style: IconButton.styleFrom(
+        splashFactory: NoSplash.splashFactory,
+        // TODO(#417): The Figma design specifies a different icon color on
+        //   pressed, but `IconButton` currently does not have support for
+        //   that.  See also:
+        //     https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3707-41711&node-type=frame&t=sSYomsJzGCt34D8N-0
+        highlightColor: designVariables.editorButtonPressedBg,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(4)))));
+
     final composeButtons = [
       _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
       _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
@@ -1073,12 +1087,14 @@ class _ComposeBoxLayout extends StatelessWidget {
             ]))),
         SizedBox(
           height: _composeButtonSize,
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Row(children: composeButtons),
-              sendButton,
-            ])),
+          child: IconButtonTheme(
+            data: iconButtonThemeData,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Row(children: composeButtons),
+                sendButton,
+              ]))),
       ]));
   }
 }

diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
@@ -122,6 +122,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
       contextMenuItemText: const Color(0xff381da7),
+      editorButtonPressedBg: Colors.black.withValues(alpha: 0.06),
       foreground: const Color(0xff000000),
       icon: const Color(0xff6159e1),
       labelCounterUnread: const Color(0xff222222),
@@ -161,6 +162,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
       contextMenuItemBg: const Color(0xff7977fe),
       contextMenuItemText: const Color(0xff9398fd),
+      editorButtonPressedBg: Colors.white.withValues(alpha: 0.06),
       foreground: const Color(0xffffffff),
       icon: const Color(0xff7977fe),
       labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
@@ -207,6 +209,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
     required this.contextMenuItemText,
+    required this.editorButtonPressedBg,
     required this.foreground,
     required this.icon,
     required this.labelCounterUnread,
@@ -254,6 +257,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
   final Color contextMenuItemText;
+  final Color editorButtonPressedBg;
   final Color foreground;
   final Color icon;
   final Color labelCounterUnread;
@@ -296,6 +300,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
     Color? contextMenuItemText,
+    Color? editorButtonPressedBg,
     Color? foreground,
     Color? icon,
     Color? labelCounterUnread,
@@ -333,6 +338,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
       contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
+      editorButtonPressedBg: editorButtonPressedBg ?? this.editorButtonPressedBg,
       foreground: foreground ?? this.foreground,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
@@ -377,6 +383,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
       contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
       contextMenuItemText: Color.lerp(contextMenuItemText, other.contextMenuItemBg, t)!,
+      editorButtonPressedBg: Color.lerp(editorButtonPressedBg, other.editorButtonPressedBg, t)!,
       foreground: Color.lerp(foreground, other.foreground, t)!,
       icon: Color.lerp(icon, other.icon, t)!,
       labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,