TW-2088 change chevron icon in appbars

linagora · Nov 20, 2024 · 0753032 · 0753032
1 parent e252537
commit 0753032
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 124 deletions.
diff --git a/lib/pages/chat_details/chat_details_view.dart b/lib/pages/chat_details/chat_details_view.dart
@@ -1,7 +1,9 @@
 import 'package:fluffychat/pages/chat_details/chat_details_view_style.dart';
 import 'package:fluffychat/presentation/extensions/room_summary_extension.dart';
+import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:fluffychat/widgets/avatar/avatar.dart';
 import 'package:fluffychat/widgets/avatar/avatar_style.dart';
+import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:linagora_design_flutter/avatar/round_avatar_style.dart';
@@ -37,9 +39,6 @@ class ChatDetailsView extends StatelessWidget {
           floatingActionButton: _AddMembersButton(controller: controller),
           backgroundColor: LinagoraSysColors.material().onPrimary,
           appBar: TwakeAppBar(
-            backgroundColor: controller.responsive.isMobile(context)
-                ? LinagoraSysColors.material().surface
-                : LinagoraSysColors.material().onPrimary,
             title: L10n.of(context)!.groupInformation,
             leading: TwakeIconButton(
               paddingAll: 8,
@@ -48,7 +47,7 @@ class ChatDetailsView extends StatelessWidget {
               highlightColor: Colors.transparent,
               onTap: controller.widget.closeRightColumn,
               icon: controller.widget.isInStack
-                  ? Icons.arrow_back_ios
+                  ? Icons.chevron_left_outlined
                   : Icons.close,
             ),
             centerTitle: true,

diff --git a/lib/pages/contacts_tab/contacts_appbar_style.dart b/lib/pages/contacts_tab/contacts_appbar_style.dart
@@ -5,27 +5,12 @@ import 'package:flutter/material.dart';
 
 class ContactsAppbarStyle {
   static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
-  static const Size preferredSizeAppBar = Size.fromHeight(120);
   static const double iconSize = 24.0;
 
   static const double textFieldHeight = 56.0;
 
-  static const double toolbarHeight = 56.0;
-
-  static const double leadingWidth = 76.0;
-
   static const double textFieldBorderRadius = 24.0;
 
-  static AlignmentGeometry alignmentTitle(context) =>
-      responsiveUtils.isMobile(context)
-          ? Alignment.center
-          : AlignmentDirectional.centerStart;
-
-  static EdgeInsetsDirectional appbarPadding =
-      const EdgeInsetsDirectional.symmetric(
-    horizontal: 16.0,
-  );
-
   static EdgeInsetsDirectional contentPadding = EdgeInsetsDirectional.zero;
   static const EdgeInsets trailingIconPadding = EdgeInsets.only(right: 16.0);
 

diff --git a/lib/pages/device_settings/device_settings_view.dart b/lib/pages/device_settings/device_settings_view.dart
@@ -1,7 +1,7 @@
 import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
+import 'package:fluffychat/widgets/app_bars/twake_app_bar_style.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -29,12 +29,12 @@ class DevicesSettingsView extends StatelessWidget {
         withDivider: true,
         leading: responsive.isMobile(context)
             ? Padding(
-                padding: const EdgeInsets.only(left: 12, top: 4),
-                child: TwakeIconButton(
+                padding: TwakeAppBarStyle.leadingIconPadding,
+                child: IconButton(
                   tooltip: L10n.of(context)!.back,
-                  icon: Icons.arrow_back_ios,
-                  onTap: () => context.pop(),
-                  paddingAll: 8.0,
+                  icon: const Icon(Icons.chevron_left_outlined),
+                  onPressed: () => context.pop(),
+                  iconSize: TwakeAppBarStyle.leadingIconSize,
                 ),
               )
             : const SizedBox.shrink(),

diff --git a/lib/pages/settings_dashboard/settings/settings_app_bar.dart b/lib/pages/settings_dashboard/settings/settings_app_bar.dart
diff --git a/lib/pages/settings_dashboard/settings/settings_view_style.dart b/lib/pages/settings_dashboard/settings/settings_view_style.dart
@@ -10,10 +10,6 @@ class SettingsViewStyle {
 
   static const AlignmentGeometry alignment = AlignmentDirectional.centerStart;
 
-  static const EdgeInsetsDirectional titlePaddingMobile =
-      EdgeInsetsDirectional.only(top: 12, bottom: 11);
-  static const EdgeInsetsDirectional titlePaddingWeb =
-      EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 8);
   static EdgeInsetsDirectional itemBuilderPadding =
       const EdgeInsetsDirectional.only(top: 16.0, bottom: 16.0, start: 8.0);
 
@@ -48,6 +44,5 @@ class SettingsViewStyle {
       EdgeInsets.only(
         right: responsiveUtils.isMobile(context) ? 0 : 16.0,
       );
-  static const double titleLineHeightMobile = 24 / 17;
   static const double settingsItemHeight = 80;
 }
diff --git a/lib/pages/settings_dashboard/settings_3pid/settings_3pid_view.dart b/lib/pages/settings_dashboard/settings_3pid/settings_3pid_view.dart
@@ -1,5 +1,5 @@
-import 'package:fluffychat/pages/settings_dashboard/settings/settings_app_bar.dart';
 import 'package:fluffychat/pages/settings_dashboard/settings_3pid/settings_3pid.dart';
+import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -19,8 +19,8 @@ class Settings3PidView extends StatelessWidget {
     controller.request ??= Matrix.of(context).client.getAccount3PIDs();
     return Scaffold(
       backgroundColor: LinagoraSysColors.material().onPrimary,
-      appBar: SettingsAppBar(
-        title: Text(L10n.of(context)!.passwordRecovery),
+      appBar: TwakeAppBar(
+        title: L10n.of(context)!.passwordRecovery,
         actions: [
           IconButton(
             icon: const Icon(Icons.add_outlined),

diff --git a/lib/pages/settings_dashboard/settings_app_language/settings_app_language_view.dart b/lib/pages/settings_dashboard/settings_app_language/settings_app_language_view.dart
@@ -6,7 +6,6 @@ import 'package:fluffychat/utils/extension/string_extension.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar_style.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
@@ -31,14 +30,14 @@ class SettingsAppLanguageView extends StatelessWidget {
         leading: responsiveUtils.isMobile(context)
             ? Padding(
                 padding: TwakeAppBarStyle.leadingIconPadding,
-                child: TwakeIconButton(
+                child: IconButton(
                   tooltip: L10n.of(context)!.back,
-                  icon: Icons.arrow_back_ios,
-                  onTap: () => context.pop(),
-                  paddingAll: 8.0,
+                  icon: const Icon(Icons.chevron_left_outlined),
+                  onPressed: () => context.pop(),
+                  iconSize: TwakeAppBarStyle.leadingIconSize,
                 ),
               )
-            : null,
+            : const SizedBox.shrink(),
         centerTitle: true,
         withDivider: true,
       ),

diff --git a/lib/pages/settings_dashboard/settings_chat/settings_chat_view.dart b/lib/pages/settings_dashboard/settings_chat/settings_chat_view.dart
@@ -8,7 +8,6 @@ import 'package:fluffychat/widgets/app_bars/twake_app_bar_style.dart';
 import 'package:fluffychat/widgets/layouts/max_width_body.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:fluffychat/widgets/settings_switch_list_tile.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -35,11 +34,11 @@ class SettingsChatView extends StatelessWidget {
         leading: responsive.isMobile(context)
             ? Padding(
                 padding: TwakeAppBarStyle.leadingIconPadding,
-                child: TwakeIconButton(
+                child: IconButton(
                   tooltip: L10n.of(context)!.back,
-                  icon: Icons.arrow_back_ios,
-                  onTap: () => context.pop(),
-                  paddingAll: 8.0,
+                  icon: const Icon(Icons.chevron_left_outlined),
+                  onPressed: () => context.pop(),
+                  iconSize: TwakeAppBarStyle.leadingIconSize,
                 ),
               )
             : const SizedBox.shrink(),

diff --git a/lib/pages/settings_dashboard/settings_emotes/settings_emotes_view.dart b/lib/pages/settings_dashboard/settings_emotes/settings_emotes_view.dart
@@ -1,4 +1,4 @@
-import 'package:fluffychat/pages/settings_dashboard/settings/settings_app_bar.dart';
+import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:fluffychat/widgets/context_menu_builder_ios_paste_without_permission.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:flutter/material.dart';
@@ -24,8 +24,8 @@ class EmotesSettingsView extends StatelessWidget {
     final imageKeys = controller.pack!.images.keys.toList();
     return Scaffold(
       backgroundColor: LinagoraSysColors.material().onPrimary,
-      appBar: SettingsAppBar(
-        title: Text(L10n.of(context)!.emoteSettings),
+      appBar: TwakeAppBar(
+        title: L10n.of(context)!.emoteSettings,
         context: context,
       ),
       floatingActionButton: controller.showSave

diff --git a/lib/pages/settings_dashboard/settings_ignore_list/settings_ignore_list_view.dart b/lib/pages/settings_dashboard/settings_ignore_list/settings_ignore_list_view.dart
@@ -1,5 +1,5 @@
-import 'package:fluffychat/pages/settings_dashboard/settings/settings_app_bar.dart';
 import 'package:fluffychat/utils/dialog/twake_dialog.dart';
+import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:fluffychat/widgets/context_menu_builder_ios_paste_without_permission.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:flutter/material.dart';
@@ -23,8 +23,8 @@ class SettingsIgnoreListView extends StatelessWidget {
     final client = Matrix.of(context).client;
     return Scaffold(
       backgroundColor: LinagoraSysColors.material().onPrimary,
-      appBar: SettingsAppBar(
-        title: Text(L10n.of(context)!.ignoredUsers),
+      appBar: TwakeAppBar(
+        title: L10n.of(context)!.ignoredUsers,
         context: context,
       ),
       body: MaxWidthBody(

diff --git a/lib/pages/settings_dashboard/settings_multiple_emotes/settings_multiple_emotes_view.dart b/lib/pages/settings_dashboard/settings_multiple_emotes/settings_multiple_emotes_view.dart
@@ -1,4 +1,4 @@
-import 'package:fluffychat/pages/settings_dashboard/settings/settings_app_bar.dart';
+import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -19,8 +19,8 @@ class MultipleEmotesSettingsView extends StatelessWidget {
     final room = Matrix.of(context).client.getRoomById(controller.roomId!)!;
     return Scaffold(
       backgroundColor: LinagoraSysColors.material().onPrimary,
-      appBar: SettingsAppBar(
-        title: Text(L10n.of(context)!.emotePacks),
+      appBar: TwakeAppBar(
+        title: L10n.of(context)!.emotePacks,
         context: context,
       ),
       body: StreamBuilder(

diff --git a/lib/pages/settings_dashboard/settings_notifications/settings_notifications_view.dart b/lib/pages/settings_dashboard/settings_notifications/settings_notifications_view.dart
@@ -5,7 +5,6 @@ import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar_style.dart';
 import 'package:fluffychat/widgets/matrix.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
@@ -33,11 +32,11 @@ class SettingsNotificationsView extends StatelessWidget {
         leading: responsive.isMobile(context)
             ? Padding(
                 padding: TwakeAppBarStyle.leadingIconPadding,
-                child: TwakeIconButton(
+                child: IconButton(
                   tooltip: L10n.of(context)!.back,
-                  icon: Icons.arrow_back_ios,
-                  onTap: () => context.pop(),
-                  paddingAll: 8.0,
+                  icon: const Icon(Icons.chevron_left_outlined),
+                  onPressed: () => context.pop(),
+                  iconSize: TwakeAppBarStyle.leadingIconSize,
                 ),
               )
             : const SizedBox.shrink(),

diff --git a/lib/pages/settings_dashboard/settings_profile/settings_profile_view.dart b/lib/pages/settings_dashboard/settings_profile/settings_profile_view.dart
@@ -7,8 +7,6 @@ import 'package:fluffychat/pages/settings_dashboard/settings_profile/settings_pr
 import 'package:fluffychat/presentation/model/settings/settings_profile_presentation.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
-import 'package:fluffychat/widgets/app_bars/twake_app_bar_style.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';

diff --git a/lib/pages/settings_dashboard/settings_security/settings_security_view.dart b/lib/pages/settings_dashboard/settings_security/settings_security_view.dart
@@ -2,7 +2,6 @@ import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar.dart';
 import 'package:fluffychat/widgets/app_bars/twake_app_bar_style.dart';
-import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:fluffychat/utils/beautify_string_extension.dart';
@@ -31,11 +30,11 @@ class SettingsSecurityView extends StatelessWidget {
         leading: responsive.isMobile(context)
             ? Padding(
                 padding: TwakeAppBarStyle.leadingIconPadding,
-                child: TwakeIconButton(
+                child: IconButton(
                   tooltip: L10n.of(context)!.back,
-                  icon: Icons.arrow_back_ios,
-                  onTap: () => context.pop(),
-                  paddingAll: 8.0,
+                  icon: const Icon(Icons.chevron_left_outlined),
+                  onPressed: () => context.pop(),
+                  iconSize: TwakeAppBarStyle.leadingIconSize,
                 ),
               )
             : const SizedBox.shrink(),

diff --git a/lib/widgets/app_bars/twake_app_bar.dart b/lib/widgets/app_bars/twake_app_bar.dart
@@ -31,19 +31,17 @@ class TwakeAppBar extends StatelessWidget implements PreferredSizeWidget {
     return AppBar(
       backgroundColor:
           backgroundColor ?? TwakeAppBarStyle.appBarBackgroundColor(context),
-      toolbarHeight: TwakeAppBarStyle.toolBarHeight(context),
+      toolbarHeight: AppConfig.toolbarHeight(context),
       centerTitle:
           centerTitle ?? TwakeAppBarStyle.responsiveUtils.isMobile(context),
       automaticallyImplyLeading: false,
       leading: leading,
       title: Column(
         children: [
-          if (withDivider)
-            const SizedBox(
-              height: 12,
-            ),
           Padding(
-            padding: ContactsAppbarStyle.titlePadding(context),
+            padding: centerTitle == true
+                ? EdgeInsets.zero
+                : ContactsAppbarStyle.titlePadding(context),
             child: Text(
               title,
               style: TwakeAppBarStyle.titleTextStyle(context),
@@ -55,15 +53,12 @@ class TwakeAppBar extends StatelessWidget implements PreferredSizeWidget {
       bottom: withDivider
           ? PreferredSize(
               preferredSize: const Size.fromHeight(1),
-              child: Padding(
-                padding: TwakeAppBarStyle.dividerPadding,
-                child: Divider(
-                  height: TwakeAppBarStyle.dividerHeight,
-                  thickness: TwakeAppBarStyle.dividerthickness,
-                  color: LinagoraStateLayer(
-                    LinagoraSysColors.material().surfaceTint,
-                  ).opacityLayer3,
-                ),
+              child: Divider(
+                height: TwakeAppBarStyle.dividerHeight,
+                thickness: TwakeAppBarStyle.dividerthickness,
+                color: LinagoraStateLayer(
+                  LinagoraSysColors.material().surfaceTint,
+                ).opacityLayer3,
               ),
             )
           : null,

diff --git a/lib/widgets/app_bars/twake_app_bar_style.dart b/lib/widgets/app_bars/twake_app_bar_style.dart
@@ -18,16 +18,13 @@ class TwakeAppBarStyle {
                 color: Theme.of(context).colorScheme.onSurface,
                 height: 24 / 17,
               )
-          : Theme.of(context).textTheme.titleLarge?.copyWith(
+          : Theme.of(context).textTheme.headlineSmall?.copyWith(
                 color: Theme.of(context).colorScheme.onSurface,
-                height: 32 / 22,
+                height: 32 / 24,
               );
 
-  static double toolBarHeight(BuildContext context) =>
-      responsiveUtils.isMobile(context) ? 48.0 : 56.0;
-  static EdgeInsets dividerPadding = const EdgeInsets.only(top: 12);
   static const double dividerHeight = 1.0;
   static const double dividerthickness = 1.0;
-  static const EdgeInsets leadingIconPadding =
-      EdgeInsets.only(left: 12, top: 4);
+  static const EdgeInsets leadingIconPadding = EdgeInsets.only(left: 12);
+  static const double leadingIconSize = 24;
 }