From 6a3977d61c3cc37762f2ef4b4c4d4ccbec281b96 Mon Sep 17 00:00:00 2001 From: HuyNguyen Date: Thu, 10 Aug 2023 18:10:43 +0700 Subject: [PATCH] TW-444: Update height for appbar --- lib/pages/chat/chat_app_bar_title.dart | 6 +- lib/pages/chat/chat_view.dart | 9 +- lib/pages/chat/chat_view_style.dart | 11 + lib/pages/chat_list/chat_list_header.dart | 310 +++++++++--------- lib/pages/chat_list/chat_list_view.dart | 9 +- lib/pages/contacts_tab/contacts_appbar.dart | 12 +- lib/pages/contacts_tab/contacts_tab.dart | 7 +- .../contacts_tab/contacts_tab_body_view.dart | 2 +- lib/pages/contacts_tab/contacts_tab_view.dart | 8 +- lib/pages/search/search_view.dart | 3 +- lib/pages/search/search_view_style.dart | 4 +- .../adaptive_scaffold_appbar.dart | 4 +- 12 files changed, 211 insertions(+), 174 deletions(-) diff --git a/lib/pages/chat/chat_app_bar_title.dart b/lib/pages/chat/chat_app_bar_title.dart index f9fa5c2210..0960830fac 100644 --- a/lib/pages/chat/chat_app_bar_title.dart +++ b/lib/pages/chat/chat_app_bar_title.dart @@ -1,5 +1,6 @@ import 'package:connectivity_plus/connectivity_plus.dart'; import 'package:fluffychat/pages/chat/chat_app_bar_title_style.dart'; +import 'package:fluffychat/utils/responsive/responsive_utils.dart'; import 'package:fluffychat/utils/room_status_extension.dart'; import 'package:fluffychat/utils/string_extension.dart'; import 'package:flutter/material.dart'; @@ -46,7 +47,10 @@ class ChatAppBarTitle extends StatelessWidget { ? null : () => context.go('/rooms/${room.id}/details'), child: Padding( - padding: const EdgeInsets.only(left: 8.0), + padding: EdgeInsets.only( + left: 8.0, + top: ResponsiveUtils().isMobile(context) ? 30 : 0, + ), child: Row( children: [ Stack( diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index c6c51a79d2..a5ceec6d23 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -4,6 +4,7 @@ import 'package:fluffychat/pages/chat/chat.dart'; import 'package:fluffychat/pages/chat/chat_app_bar_title.dart'; import 'package:fluffychat/pages/chat/chat_event_list.dart'; import 'package:fluffychat/pages/chat/chat_loading_view.dart'; +import 'package:fluffychat/pages/chat/chat_view_style.dart'; import 'package:fluffychat/pages/chat/pinned_events.dart'; import 'package:fluffychat/pages/chat/reply_display.dart'; import 'package:fluffychat/pages/chat/tombstone_display.dart'; @@ -116,6 +117,7 @@ class ChatView extends StatelessWidget { if (controller.room == null) { return Scaffold( appBar: AppBar( + toolbarHeight: 120, title: Text(L10n.of(context)!.oopsSomethingWentWrong), ), body: Center( @@ -145,10 +147,13 @@ class ChatView extends StatelessWidget { appBar: AppBar( automaticallyImplyLeading: controller.responsive.isMobile(context) ? true : false, - toolbarHeight: 64, + toolbarHeight: ChatViewStyle.toolbarHeight(context), surfaceTintColor: Colors.transparent, leadingWidth: 8 + 24 + 8, - leading: _buildLeading(context), + leading: Padding( + padding: ChatViewStyle.paddingLeading(context), + child: _buildLeading(context), + ), titleSpacing: 0, title: ChatAppBarTitle(controller), actions: _appBarActions(context), diff --git a/lib/pages/chat/chat_view_style.dart b/lib/pages/chat/chat_view_style.dart index 492de47aec..9de9092ff1 100644 --- a/lib/pages/chat/chat_view_style.dart +++ b/lib/pages/chat/chat_view_style.dart @@ -1,3 +1,14 @@ +import 'package:fluffychat/utils/responsive/responsive_utils.dart'; +import 'package:flutter/cupertino.dart'; + class ChatViewStyle { static double get paddingVerticalActionButtons => 8.0; + + static double toolbarHeight(BuildContext context) => + ResponsiveUtils().isMobile(context) ? 104 : 86; + + static EdgeInsetsDirectional paddingLeading(BuildContext context) => + EdgeInsetsDirectional.only( + top: ResponsiveUtils().isMobile(context) ? 30 : 0, + ); } diff --git a/lib/pages/chat_list/chat_list_header.dart b/lib/pages/chat_list/chat_list_header.dart index 9077cb7789..f8336e9743 100644 --- a/lib/pages/chat_list/chat_list_header.dart +++ b/lib/pages/chat_list/chat_list_header.dart @@ -1,13 +1,14 @@ import 'package:fluffychat/pages/chat_list/chat_list.dart'; import 'package:fluffychat/pages/chat_list/chat_list_header_style.dart'; import 'package:fluffychat/pages/chat_list/client_chooser_button.dart'; +import 'package:fluffychat/utils/responsive/responsive_utils.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/twake_components/twake_header.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:go_router/go_router.dart'; -class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { +class ChatListHeader extends StatelessWidget { final ChatListController controller; const ChatListHeader({Key? key, required this.controller}) : super(key: key); @@ -16,167 +17,172 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { Widget build(BuildContext context) { final selectMode = controller.selectMode; - return Column( - children: [ - TwakeHeader(controller: controller), - Container( - height: ChatListHeaderStyle.searchBarContainerHeight, - padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), - child: Row( - children: [ - if (selectMode != SelectMode.normal) - IconButton( - tooltip: L10n.of(context)!.cancel, - icon: const Icon(Icons.close_outlined), - onPressed: controller.cancelAction, - color: Theme.of(context).colorScheme.primary, - ), - Expanded( - child: selectMode == SelectMode.share - ? Text( - L10n.of(context)!.share, - key: const ValueKey(SelectMode.share), - ) - : selectMode == SelectMode.select - ? Text( - controller.selectedRoomIds.length.toString(), - key: const ValueKey(SelectMode.select), - ) - : SizedBox( - height: ChatListHeaderStyle.searchBarHeight, - child: InkWell( - onTap: () { - context.push('/rooms/search'); - }, - child: TextField( - controller: controller.searchChatController, - textInputAction: TextInputAction.search, - onChanged: controller.onSearchEnter, - enabled: false, - decoration: InputDecoration( - filled: true, - contentPadding: const EdgeInsets.all(0), - fillColor: - Theme.of(context).colorScheme.surface, - border: OutlineInputBorder( - borderSide: BorderSide.none, - borderRadius: BorderRadius.circular( - ChatListHeaderStyle.searchRadiusBorder, + return Padding( + padding: EdgeInsetsDirectional.only( + top: ResponsiveUtils().isMobile(context) ? 40 : 0, + ), + child: Column( + children: [ + TwakeHeader(controller: controller), + Container( + height: ChatListHeaderStyle.searchBarContainerHeight, + padding: + const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), + child: Row( + children: [ + if (selectMode != SelectMode.normal) + IconButton( + tooltip: L10n.of(context)!.cancel, + icon: const Icon(Icons.close_outlined), + onPressed: controller.cancelAction, + color: Theme.of(context).colorScheme.primary, + ), + Expanded( + child: selectMode == SelectMode.share + ? Text( + L10n.of(context)!.share, + key: const ValueKey(SelectMode.share), + ) + : selectMode == SelectMode.select + ? Text( + controller.selectedRoomIds.length.toString(), + key: const ValueKey(SelectMode.select), + ) + : SizedBox( + height: ChatListHeaderStyle.searchBarHeight, + child: InkWell( + onTap: () { + context.push('/rooms/search'); + }, + child: TextField( + controller: controller.searchChatController, + textInputAction: TextInputAction.search, + onChanged: controller.onSearchEnter, + enabled: false, + decoration: InputDecoration( + filled: true, + contentPadding: const EdgeInsets.all(0), + fillColor: + Theme.of(context).colorScheme.surface, + border: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.circular( + ChatListHeaderStyle.searchRadiusBorder, + ), ), - ), - hintText: L10n.of(context)!.search, - floatingLabelBehavior: - FloatingLabelBehavior.never, - prefixIcon: controller.isSearchMode - ? IconButton( - tooltip: L10n.of(context)!.cancel, - icon: - const Icon(Icons.close_outlined), - onPressed: controller.cancelSearch, - color: Theme.of(context) - .colorScheme - .onBackground, - ) - : Icon( - Icons.search_outlined, - color: Theme.of(context) - .colorScheme - .onBackground, - ), - suffixIcon: controller.isSearchMode - ? controller.isSearching - ? const Padding( - padding: EdgeInsets.symmetric( - vertical: 9.0, - horizontal: 14.0, - ), - child: SizedBox.square( - dimension: 20, - child: CircularProgressIndicator - .adaptive( - strokeWidth: 2, + hintText: L10n.of(context)!.search, + floatingLabelBehavior: + FloatingLabelBehavior.never, + prefixIcon: controller.isSearchMode + ? IconButton( + tooltip: L10n.of(context)!.cancel, + icon: const Icon( + Icons.close_outlined, + ), + onPressed: controller.cancelSearch, + color: Theme.of(context) + .colorScheme + .onBackground, + ) + : Icon( + Icons.search_outlined, + color: Theme.of(context) + .colorScheme + .onBackground, + ), + suffixIcon: controller.isSearchMode + ? controller.isSearching + ? const Padding( + padding: EdgeInsets.symmetric( + vertical: 9.0, + horizontal: 14.0, + ), + child: SizedBox.square( + dimension: 20, + child: + CircularProgressIndicator + .adaptive( + strokeWidth: 2, + ), ), - ), - ) - : TextButton( - onPressed: controller.setServer, - style: TextButton.styleFrom( - textStyle: const TextStyle( - fontSize: 12, + ) + : TextButton( + onPressed: controller.setServer, + style: TextButton.styleFrom( + textStyle: const TextStyle( + fontSize: 12, + ), ), - ), - child: Text( - controller.searchServer ?? - Matrix.of(context) - .client - .homeserver! - .host, - maxLines: 2, - ), - ) - : const SizedBox.shrink(), + child: Text( + controller.searchServer ?? + Matrix.of(context) + .client + .homeserver! + .host, + maxLines: 2, + ), + ) + : const SizedBox.shrink(), + ), ), ), ), - ), - ), - if (selectMode == SelectMode.share) - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 16.0, - vertical: 8.0, - ), - child: ClientChooserButton(controller), ), - // if (selectMode == SelectMode.select && controller.spaces.isNotEmpty) - // IconButton( - // tooltip: L10n.of(context)!.addToSpace, - // icon: const Icon(Icons.workspaces_outlined), - // onPressed: controller.addToSpace, - // ), - if (selectMode == SelectMode.select) - IconButton( - tooltip: L10n.of(context)!.toggleUnread, - icon: Icon( - controller.anySelectedRoomNotMarkedUnread - ? Icons.mark_chat_read_outlined - : Icons.mark_chat_unread_outlined, + if (selectMode == SelectMode.share) + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 16.0, + vertical: 8.0, + ), + child: ClientChooserButton(controller), ), - onPressed: controller.toggleUnread, - ), - if (selectMode == SelectMode.select) - IconButton( - tooltip: L10n.of(context)!.toggleFavorite, - icon: Icon( - controller.anySelectedRoomNotFavorite - ? Icons.push_pin_outlined - : Icons.push_pin, + // if (selectMode == SelectMode.select && controller.spaces.isNotEmpty) + // IconButton( + // tooltip: L10n.of(context)!.addToSpace, + // icon: const Icon(Icons.workspaces_outlined), + // onPressed: controller.addToSpace, + // ), + if (selectMode == SelectMode.select) + IconButton( + tooltip: L10n.of(context)!.toggleUnread, + icon: Icon( + controller.anySelectedRoomNotMarkedUnread + ? Icons.mark_chat_read_outlined + : Icons.mark_chat_unread_outlined, + ), + onPressed: controller.toggleUnread, ), - onPressed: controller.toggleFavouriteRoom, - ), - if (selectMode == SelectMode.select) - IconButton( - icon: Icon( - controller.anySelectedRoomNotMuted - ? Icons.notifications_off_outlined - : Icons.notifications_outlined, + if (selectMode == SelectMode.select) + IconButton( + tooltip: L10n.of(context)!.toggleFavorite, + icon: Icon( + controller.anySelectedRoomNotFavorite + ? Icons.push_pin_outlined + : Icons.push_pin, + ), + onPressed: controller.toggleFavouriteRoom, ), - tooltip: L10n.of(context)!.toggleMuted, - onPressed: controller.toggleMuted, - ), - if (selectMode == SelectMode.select) - IconButton( - icon: const Icon(Icons.archive_outlined), - tooltip: L10n.of(context)!.archive, - onPressed: controller.archiveAction, - ), - ], - ), - ) - ], + if (selectMode == SelectMode.select) + IconButton( + icon: Icon( + controller.anySelectedRoomNotMuted + ? Icons.notifications_off_outlined + : Icons.notifications_outlined, + ), + tooltip: L10n.of(context)!.toggleMuted, + onPressed: controller.toggleMuted, + ), + if (selectMode == SelectMode.select) + IconButton( + icon: const Icon(Icons.archive_outlined), + tooltip: L10n.of(context)!.archive, + onPressed: controller.archiveAction, + ), + ], + ), + ) + ], + ), ); } - - @override - Size get preferredSize => const Size.fromHeight(120); } diff --git a/lib/pages/chat_list/chat_list_view.dart b/lib/pages/chat_list/chat_list_view.dart index 5eae009994..920746157c 100644 --- a/lib/pages/chat_list/chat_list_view.dart +++ b/lib/pages/chat_list/chat_list_view.dart @@ -1,6 +1,7 @@ import 'package:fluffychat/pages/chat_list/chat_list.dart'; import 'package:fluffychat/pages/chat_list/chat_list_body_stream.dart'; import 'package:fluffychat/pages/chat_list/chat_list_header.dart'; +import 'package:fluffychat/utils/responsive/responsive_utils.dart'; import 'package:fluffychat/widgets/twake_components/twake_fab.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -19,9 +20,13 @@ class ChatListView extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - appBar: ChatListHeader(controller: controller), + appBar: PreferredSize( + preferredSize: Size.fromHeight( + ResponsiveUtils().isMobile(context) ? 160 : 120, + ), + child: ChatListHeader(controller: controller), + ), body: ChatListBodyStream(controller: controller), - extendBody: true, floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, floatingActionButton: controller.selectMode == SelectMode.normal ? KeyBoardShortcuts( diff --git a/lib/pages/contacts_tab/contacts_appbar.dart b/lib/pages/contacts_tab/contacts_appbar.dart index bd970ce351..e04aca8899 100644 --- a/lib/pages/contacts_tab/contacts_appbar.dart +++ b/lib/pages/contacts_tab/contacts_appbar.dart @@ -3,7 +3,9 @@ import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; -class ContactsAppBar extends StatelessWidget implements PreferredSizeWidget { +import '../../utils/responsive/responsive_utils.dart'; + +class ContactsAppBar extends StatelessWidget { final ContactsTabController controller; const ContactsAppBar( @@ -26,7 +28,10 @@ class ContactsAppBar extends StatelessWidget implements PreferredSizeWidget { centerTitle: false, titleSpacing: 0, title: Padding( - padding: const EdgeInsetsDirectional.only(start: 16.0), + padding: EdgeInsetsDirectional.only( + start: 16.0, + top: ResponsiveUtils().isMobile(context) ? 30 : 8, + ), child: Text( L10n.of(context)!.contacts, style: Theme.of(context).textTheme.titleLarge?.copyWith( @@ -84,7 +89,4 @@ class ContactsAppBar extends StatelessWidget implements PreferredSizeWidget { ), ); } - - @override - Size get preferredSize => const Size.fromHeight(120); } diff --git a/lib/pages/contacts_tab/contacts_tab.dart b/lib/pages/contacts_tab/contacts_tab.dart index d03b52f250..6e6fa794ff 100644 --- a/lib/pages/contacts_tab/contacts_tab.dart +++ b/lib/pages/contacts_tab/contacts_tab.dart @@ -23,9 +23,8 @@ class ContactsTab extends StatefulWidget { State createState() => ContactsTabController(); } -class ContactsTabController extends State - with ComparablePresentationContactMixin { - +class ContactsTabController extends State + with ComparablePresentationContactMixin { final searchContactsController = SearchContactsController(); final fetchContactsController = FetchContactsController(); final responsive = getIt.get(); @@ -133,4 +132,4 @@ class ContactsTabController extends State @override Widget build(BuildContext context) => ContactsTabView(contactsController: this); -} \ No newline at end of file +} diff --git a/lib/pages/contacts_tab/contacts_tab_body_view.dart b/lib/pages/contacts_tab/contacts_tab_body_view.dart index 76e532f043..23582fac8d 100644 --- a/lib/pages/contacts_tab/contacts_tab_body_view.dart +++ b/lib/pages/contacts_tab/contacts_tab_body_view.dart @@ -106,4 +106,4 @@ class ContactsTabBodyView extends StatelessWidget { ), ); } -} \ No newline at end of file +} diff --git a/lib/pages/contacts_tab/contacts_tab_view.dart b/lib/pages/contacts_tab/contacts_tab_view.dart index aed27ebf77..8e69570993 100644 --- a/lib/pages/contacts_tab/contacts_tab_view.dart +++ b/lib/pages/contacts_tab/contacts_tab_view.dart @@ -1,6 +1,7 @@ import 'package:fluffychat/pages/contacts_tab/contacts_appbar.dart'; import 'package:fluffychat/pages/contacts_tab/contacts_tab.dart'; import 'package:fluffychat/pages/contacts_tab/contacts_tab_body_view.dart'; +import 'package:fluffychat/utils/responsive/responsive_utils.dart'; import 'package:flutter/material.dart'; class ContactsTabView extends StatelessWidget { @@ -11,7 +12,12 @@ class ContactsTabView extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - appBar: ContactsAppBar(contactsController), + appBar: PreferredSize( + preferredSize: Size.fromHeight( + ResponsiveUtils().isMobile(context) ? 120 : 96, + ), + child: ContactsAppBar(contactsController), + ), body: ContactsTabBodyView(contactsController), ); } diff --git a/lib/pages/search/search_view.dart b/lib/pages/search/search_view.dart index eda6e65f6e..e39c0d7950 100644 --- a/lib/pages/search/search_view.dart +++ b/lib/pages/search/search_view.dart @@ -17,7 +17,7 @@ class SearchView extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: PreferredSize( - preferredSize: const Size.fromHeight(64.0), + preferredSize: Size.fromHeight(SearchViewStyle.toolbarHeightSearch), child: _buildAppBarSearch(context), ), body: WillPopScope( @@ -132,7 +132,6 @@ class SearchView extends StatelessWidget { Widget _buildAppBarSearch(BuildContext context) { return AppBar( toolbarHeight: SearchViewStyle.toolbarHeightSearch, - surfaceTintColor: Colors.transparent, leadingWidth: double.infinity, leading: Padding( padding: SearchViewStyle.paddingLeadingAppBar, diff --git a/lib/pages/search/search_view_style.dart b/lib/pages/search/search_view_style.dart index 0c6a80a1ff..bb400094f4 100644 --- a/lib/pages/search/search_view_style.dart +++ b/lib/pages/search/search_view_style.dart @@ -1,13 +1,13 @@ import 'package:flutter/material.dart'; class SearchViewStyle { - static double get toolbarHeightSearch => 64.0; + static double get toolbarHeightSearch => 104.0; static double get toolbarHeightOfSliverAppBar => 44.0; static EdgeInsetsGeometry get paddingRecentChatsHeaders => const EdgeInsets.symmetric(horizontal: 16); static EdgeInsetsGeometry get paddingLeadingAppBar => - const EdgeInsets.symmetric(horizontal: 8); + const EdgeInsetsDirectional.only(end: 8, start: 8, top: 30); static EdgeInsets get marginIconBack => const EdgeInsets.symmetric(vertical: 12.0); static EdgeInsetsGeometry get contentPaddingAppBar => diff --git a/lib/widgets/layouts/adaptive_layout/adaptive_scaffold_appbar.dart b/lib/widgets/layouts/adaptive_layout/adaptive_scaffold_appbar.dart index 7feba9f511..d9943d1eb7 100644 --- a/lib/widgets/layouts/adaptive_layout/adaptive_scaffold_appbar.dart +++ b/lib/widgets/layouts/adaptive_layout/adaptive_scaffold_appbar.dart @@ -45,10 +45,10 @@ class _LeadingAppBarWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return SvgPicture.asset(ImagePaths.icTwakeImageLogo, + return SvgPicture.asset( + ImagePaths.icTwakeImageLogo, width: AdaptiveScaffoldAppBarStyle.sizeWidthIcTwakeImageLogo, height: AdaptiveScaffoldAppBarStyle.sizeHeightIcTwakeImageLogo, ); } } -