From 4d71b42a3d8e3217131eab91c64c7f15002de8dc Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Sun, 3 Dec 2023 12:19:43 +0800 Subject: [PATCH] chore: misc mobile UI improvements (#4072) * chore: adjust colors * chore: adjust card detail padding and text weight * fix: recent view horizontal padding * chore: entire row opens row detail page --- .../mobile_card_detail_screen.dart | 16 ++++++---- .../widgets/mobile_row_property_list.dart | 1 + .../presentation/home/mobile_home_page.dart | 6 ++-- .../mobile_home_recent_views.dart | 4 +-- .../presentation/widgets/row/mobile_row.dart | 32 ++++++------------- .../row/cells/date_cell/date_cell.dart | 7 ++-- .../select_option_cell.dart | 9 ++++-- .../appearance/mobile_appearance.dart | 4 +-- 8 files changed, 37 insertions(+), 42 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart index 87aa8536ee..5d9b37b06b 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart @@ -354,10 +354,11 @@ class MobileRowDetailPageContentState if (state.primaryField != null) { final cellStyle = GridTextCellStyle( placeholder: LocaleKeys.grid_row_titlePlaceholder.tr(), - textStyle: Theme.of(context) - .textTheme - .bodyMedium - ?.copyWith(fontSize: 22), + textStyle: + Theme.of(context).textTheme.bodyMedium?.copyWith( + fontSize: 22, + fontWeight: FontWeight.w500, + ), cellPadding: const EdgeInsets.symmetric(vertical: 8), useRoundedBorder: false, ); @@ -382,7 +383,7 @@ class MobileRowDetailPageContentState ), Expanded( child: ListView( - padding: const EdgeInsets.symmetric(vertical: 8), + padding: const EdgeInsets.only(top: 8, bottom: 100), children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 18), @@ -397,9 +398,10 @@ class MobileRowDetailPageContentState child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - if (rowDetailState.numHiddenFields != 0) + if (rowDetailState.numHiddenFields != 0) ...[ const ToggleHiddenFieldsVisibilityButton(), - const VSpace(12), + const VSpace(12), + ], MobileRowDetailCreateFieldButton( viewId: viewId, fieldController: fieldController, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart index 4f93b7d876..5437242f2d 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_row_property_list.dart @@ -36,6 +36,7 @@ class MobileRowPropertyList extends StatelessWidget { shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), itemCount: visibleCells.length, + padding: EdgeInsets.zero, itemBuilder: (context, index) => _PropertyCell( key: ValueKey('row_detail_${visibleCells[index].fieldId}'), cellContext: visibleCells[index], diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart index 3cc2e6d62e..d31e2e04ba 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart @@ -91,7 +91,7 @@ class MobileHomePage extends StatelessWidget { child: Scrollbar( child: SingleChildScrollView( child: Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.symmetric(vertical: 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -101,7 +101,7 @@ class MobileHomePage extends StatelessWidget { // Folders Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), + padding: const EdgeInsets.symmetric(horizontal: 24), child: MobileFolders( user: userProfile, workspaceSetting: workspaceSetting, @@ -110,7 +110,7 @@ class MobileHomePage extends StatelessWidget { ), const SizedBox(height: 8), const Padding( - padding: EdgeInsets.symmetric(horizontal: 16), + padding: EdgeInsets.symmetric(horizontal: 24), child: _TrashButton(), ), ], diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_home_recent_views.dart b/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_home_recent_views.dart index 1066eba755..08dee5ef34 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_home_recent_views.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_home_recent_views.dart @@ -66,7 +66,7 @@ class _RecentViews extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), + padding: const EdgeInsets.symmetric(horizontal: 24), child: FlowyText.semibold( LocaleKeys.sideBar_recent.tr(), fontSize: 20.0, @@ -74,7 +74,7 @@ class _RecentViews extends StatelessWidget { ), SingleChildScrollView( scrollDirection: Axis.horizontal, - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8), child: IntrinsicHeight( child: SeparatedRow( separatorBuilder: () => const HSpace(8), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/mobile_row.dart b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/mobile_row.dart index a49fa4b140..640964fbd5 100755 --- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/mobile_row.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/mobile_row.dart @@ -5,7 +5,6 @@ import 'package:appflowy/plugins/database_view/application/row/row_cache.dart'; import 'package:appflowy/plugins/database_view/application/row/row_controller.dart'; import 'package:appflowy/plugins/database_view/application/row/row_service.dart'; import 'package:appflowy/plugins/database_view/grid/application/row/row_bloc.dart'; -import 'package:appflowy/plugins/database_view/widgets/row/accessory/cell_accessory.dart'; import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart'; import 'package:appflowy/plugins/database_view/widgets/row/cells/mobile_cell_container.dart'; import 'package:flowy_infra/theme_extension.dart'; @@ -72,9 +71,14 @@ class _MobileGridRowState extends State { children: [ SizedBox(width: GridSize.leadingHeaderPadding), Expanded( - child: RowContent( - builder: _cellBuilder, - onExpand: () => widget.openDetailPage(context), + child: InkWell( + onTap: () => widget.openDetailPage(context), + child: IgnorePointer( + child: RowContent( + builder: _cellBuilder, + onExpand: () => widget.openDetailPage(context), + ), + ), ), ), ], @@ -152,25 +156,7 @@ class RowContent extends StatelessWidget { width: cellId.fieldInfo.fieldSettings?.width.toDouble() ?? 140, isPrimary: cellId.fieldInfo.field.isPrimary, accessoryBuilder: (buildContext) { - final builder = child.accessoryBuilder; - final List accessories = []; - if (cellId.fieldInfo.field.isPrimary) { - accessories.add( - GridCellAccessoryBuilder( - builder: (key) => PrimaryCellAccessory( - key: key, - onTapCallback: onExpand, - isCellEditing: buildContext.isCellEditing, - ), - ), - ); - } - - if (builder != null) { - accessories.addAll(builder(buildContext)); - } - - return accessories; + return []; }, child: child, ); diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_cell.dart index 3a3ecaa65e..984b66e586 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_cell.dart @@ -136,9 +136,12 @@ class _DateCellState extends GridCellState { ), ), const HSpace(6), - const RotatedBox( + RotatedBox( quarterTurns: 3, - child: Icon(Icons.chevron_left), + child: Icon( + Icons.chevron_left, + color: Theme.of(context).hintColor, + ), ), const HSpace(2), ], diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_cell.dart index 7a536f7562..41ce4058fb 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_cell.dart @@ -232,9 +232,12 @@ class _SelectOptionWrapState extends State { children: [ Expanded(child: _buildMobileOptions(isInRowDetail: true)), const HSpace(6), - const RotatedBox( + RotatedBox( quarterTurns: 3, - child: Icon(Icons.chevron_left), + child: Icon( + Icons.chevron_left, + color: Theme.of(context).hintColor, + ), ), const HSpace(2), ], @@ -298,7 +301,7 @@ class _SelectOptionWrapState extends State { return Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.symmetric(vertical: 1), - child: FlowyText.medium( + child: FlowyText( widget.cellStyle.placeholder, color: Theme.of(context).hintColor, ), diff --git a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart index 4b8e90fdb0..3c5ac24600 100644 --- a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart +++ b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart @@ -6,7 +6,7 @@ import 'package:flowy_infra/theme_extension.dart'; import 'package:flutter/material.dart'; class MobileAppearance extends BaseAppearance { - static const _primaryColor = Color(0xFF2DA2F6); //primary 100 + static const _primaryColor = Color(0xFF00BCF0); //primary 100 static const _onBackgroundColor = Color(0xff2F3030); // text/title color static const _onSurfaceColor = Color(0xff676666); // text/body color static const _onSecondaryColor = Color(0xFFC5C7CB); // text/body2 color @@ -79,7 +79,7 @@ class MobileAppearance extends BaseAppearance { ); final hintColor = brightness == Brightness.light - ? const Color(0xff89909B) + ? const Color(0x991F2329) : _hintColorInDarkMode; return ThemeData(