From ff8eb0d4790ebe99981eed7c8b44591ddeaf230c Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Tue, 5 Mar 2024 15:44:16 +0800 Subject: [PATCH] chore: mobile grid dark mode improvements (#4821) * chore: field type grid * chore: don't allow hiding primary field * chore: bottom sheets * chore: checklist bottom sheet --- .../presentation/base/option_color_list.dart | 1 + .../show_mobile_bottom_sheet.dart | 2 +- .../show_transition_bottom_sheet.dart | 2 +- .../mobile_date_picker_screen.dart | 2 +- .../field/mobile_field_bottom_sheets.dart | 5 ++-- .../field/mobile_full_field_editor.dart | 7 ++++-- .../tab_bar/mobile/mobile_tab_bar_header.dart | 6 ++++- .../mobile_grid_checklist_cell.dart | 1 - .../mobile_grid/mobile_grid_date_cell.dart | 1 - .../mobile_checklist_cell_editor.dart | 2 +- .../mobile_select_option_editor.dart | 19 ++++++--------- .../setting/mobile_database_controls.dart | 1 - .../lib/util/field_type_extension.dart | 24 +++++++++++++++---- .../appearance/mobile_appearance.dart | 3 +-- 14 files changed, 46 insertions(+), 30 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart index 1d5fce1466..d27085b394 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart @@ -20,6 +20,7 @@ class OptionColorList extends StatelessWidget { crossAxisCount: 6, shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), + padding: EdgeInsets.zero, children: SelectOptionColorPB.values.map( (colorPB) { final color = colorPB.toColor(context); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart index bf94d766f2..a240f32178 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart @@ -65,7 +65,7 @@ Future showMobileBottomSheet( backgroundColor ??= Theme.of(context).brightness == Brightness.light ? const Color(0xFFF7F8FB) - : const Color(0xFF626364); + : const Color(0xFF23262B); return showModalBottomSheet( context: context, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart index ed1130de1d..d9b9127468 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart @@ -39,7 +39,7 @@ Future showTransitionMobileBottomSheet( backgroundColor ??= Theme.of(context).brightness == Brightness.light ? const Color(0xFFF7F8FB) - : const Color(0xFF626364); + : const Color(0xFF23262B); return Navigator.of( context, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart index eab036aabc..301c375c4b 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart @@ -55,7 +55,7 @@ class _MobileDateCellEditScreenState extends State { minChildSize: 0.4, snapSizes: const [0.4, 0.7, 1.0], builder: (_, controller) => Material( - color: Theme.of(context).colorScheme.secondaryContainer, + color: Colors.transparent, child: ListView( controller: controller, children: [ diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart index 6c1a1b758a..bd539f4821 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart @@ -47,7 +47,9 @@ Future showFieldTypeGridBottomSheet( .map( (fieldType) => TypeOptionMenuItemValue( value: fieldType, - backgroundColor: fieldType.mobileIconBackgroundColor, + backgroundColor: Theme.of(context).brightness == Brightness.light + ? fieldType.mobileIconBackgroundColor + : fieldType.mobileIconBackgroundColorDark, text: fieldType.i18n, icon: fieldType.svgData, onTap: (context, fieldType) => @@ -121,7 +123,6 @@ void showQuickEditField( ) { showMobileBottomSheet( context, - backgroundColor: Theme.of(context).colorScheme.secondaryContainer, showDragHandle: true, builder: (context) { return SingleChildScrollView( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart index 469dc07a1c..95c9fd0ee0 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart @@ -208,7 +208,9 @@ class _MobileFieldEditorState extends State { Widget build(BuildContext context) { final option = _buildOption(); return Container( - color: Theme.of(context).colorScheme.secondaryContainer, + color: Theme.of(context).brightness == Brightness.light + ? const Color(0xFFF7F8FB) + : const Color(0xFF23262B), height: MediaQuery.of(context).size.height, child: SingleChildScrollView( child: Column( @@ -259,6 +261,7 @@ class _MobileFieldEditorState extends State { ], ..._buildOptionActions(), const _Divider(), + VSpace(MediaQuery.viewPaddingOf(context).bottom == 0 ? 28.0 : 16.0), ], ), ), @@ -351,7 +354,7 @@ class _MobileFieldEditorState extends State { } return [ - if (widget.actions.contains(FieldOptionAction.hide)) + if (widget.actions.contains(FieldOptionAction.hide) && !widget.isPrimary) FlowyOptionTile.text( text: LocaleKeys.grid_field_hide.tr(), leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s), diff --git a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart index 2665c4da1d..55394ec33c 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart @@ -87,7 +87,11 @@ class _DatabaseViewSelectorButton extends StatelessWidget { borderRadius: BorderRadius.all(Radius.circular(12)), ), ), - backgroundColor: const MaterialStatePropertyAll(Color(0x0F212729)), + backgroundColor: MaterialStatePropertyAll( + Theme.of(context).brightness == Brightness.light + ? const Color(0x0F212729) + : const Color(0x0FFFFFFF), + ), overlayColor: MaterialStatePropertyAll( Theme.of(context).colorScheme.secondary, ), diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_checklist_cell.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_checklist_cell.dart index 49fbf2639b..aa55dd9e36 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_checklist_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_checklist_cell.dart @@ -39,7 +39,6 @@ class MobileGridChecklistCellSkin extends IEditableChecklistCellSkin { ), onTap: () => showMobileBottomSheet( context, - backgroundColor: Theme.of(context).colorScheme.background, builder: (context) { return BlocProvider.value( value: bloc, diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_date_cell.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_date_cell.dart index fba6937a58..7984322328 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_date_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_date_cell.dart @@ -44,7 +44,6 @@ class MobileGridDateCellSkin extends IEditableDateCellSkin { onTap: () { showMobileBottomSheet( context, - backgroundColor: Theme.of(context).colorScheme.secondaryContainer, builder: (context) { return MobileDateCellEditScreen( controller: bloc.cellController, diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_checklist_cell_editor.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_checklist_cell_editor.dart index f775896aec..fb8b11474c 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_checklist_cell_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_checklist_cell_editor.dart @@ -230,7 +230,7 @@ class _ChecklistItemState extends State<_ChecklistItem> { void _showDeleteTaskBottomSheet() { showMobileBottomSheet( context, - padding: const EdgeInsets.only(top: 8, bottom: 32), + showDragHandle: true, builder: (_) => Column( mainAxisSize: MainAxisSize.min, children: [ diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart index 2bded1e077..f7c1c6d67d 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart @@ -421,7 +421,6 @@ class _MoreOptionsState extends State<_MoreOptions> { @override Widget build(BuildContext context) { - final color = Theme.of(context).colorScheme.secondaryContainer; return SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -432,22 +431,18 @@ class _MoreOptionsState extends State<_MoreOptions> { const VSpace(16.0), Padding( padding: const EdgeInsets.only(left: 12.0), - child: ColoredBox( - color: color, - child: FlowyText( - LocaleKeys.grid_selectOption_colorPanelTitle.tr().toUpperCase(), - color: Theme.of(context).hintColor, - fontSize: 13, - ), + child: FlowyText( + LocaleKeys.grid_selectOption_colorPanelTitle.tr().toUpperCase(), + color: Theme.of(context).hintColor, + fontSize: 13, ), ), const VSpace(4.0), FlowyOptionDecorateBox( child: Padding( - padding: const EdgeInsets.only( - top: 12.0, - left: 6.0, - right: 6.0, + padding: const EdgeInsets.symmetric( + vertical: 12.0, + horizontal: 6.0, ), child: OptionColorList( selectedColor: option.color, diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart index fc1c1140ef..7e6c9de9cc 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart @@ -147,7 +147,6 @@ void _showEditSortPanelFromToolbar( ) { showMobileBottomSheet( context, - backgroundColor: Theme.of(context).colorScheme.surface, showDragHandle: true, showDivider: false, useSafeArea: false, diff --git a/frontend/appflowy_flutter/lib/util/field_type_extension.dart b/frontend/appflowy_flutter/lib/util/field_type_extension.dart index 67093f401e..517520408a 100644 --- a/frontend/appflowy_flutter/lib/util/field_type_extension.dart +++ b/frontend/appflowy_flutter/lib/util/field_type_extension.dart @@ -42,14 +42,30 @@ extension FieldTypeExtension on FieldType { Color get mobileIconBackgroundColor => switch (this) { FieldType.RichText => const Color(0xFFBECCFF), FieldType.Number => const Color(0xFFCABDFF), - FieldType.DateTime => const Color(0xFFFDEDA7), + FieldType.URL => const Color(0xFFFFB9EF), FieldType.SingleSelect => const Color(0xFFBECCFF), FieldType.MultiSelect => const Color(0xFFBECCFF), - FieldType.URL => const Color(0xFFFFB9EF), - FieldType.Checkbox => const Color(0xFF98F4CD), - FieldType.Checklist => const Color(0xFF98F4CD), + FieldType.DateTime => const Color(0xFFFDEDA7), FieldType.LastEditedTime => const Color(0xFFFDEDA7), FieldType.CreatedTime => const Color(0xFFFDEDA7), + FieldType.Checkbox => const Color(0xFF98F4CD), + FieldType.Checklist => const Color(0xFF98F4CD), + FieldType.Relation => const Color(0xFFFDEDA7), + _ => throw UnimplementedError(), + }; + + // TODO(RS): inner icon color isn't always white + Color get mobileIconBackgroundColorDark => switch (this) { + FieldType.RichText => const Color(0xFF6859A7), + FieldType.Number => const Color(0xFF6859A7), + FieldType.URL => const Color(0xFFA75C96), + FieldType.SingleSelect => const Color(0xFF5366AB), + FieldType.MultiSelect => const Color(0xFF5366AB), + FieldType.DateTime => const Color(0xFFB0A26D), + FieldType.LastEditedTime => const Color(0xFFB0A26D), + FieldType.CreatedTime => const Color(0xFFB0A26D), + FieldType.Checkbox => const Color(0xFF42AD93), + FieldType.Checklist => const Color(0xFF42AD93), FieldType.Relation => const Color(0xFFFDEDA7), _ => throw UnimplementedError(), }; 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 8900ae2256..6057ddc8d2 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 @@ -74,10 +74,9 @@ class MobileAppearance extends BaseAppearance { outline: _hintColorInDarkMode, outlineVariant: Colors.black, //Snack bar - surface: const Color(0xff2F3030), + surface: const Color(0xFF171A1F), onSurface: const Color(0xffC5C6C7), // text/body color ); - final hintColor = brightness == Brightness.light ? const Color(0x991F2329) : _hintColorInDarkMode;