From 551e0121473431a1037a6055d7bd64abdaf19b6f Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Tue, 28 Nov 2023 19:38:11 -0700 Subject: [PATCH] feat: improve UI in MobileFieldEditor (#4042) --- .../widgets/mobile_field_name_text_field.dart | 25 +++++-- .../mobile_field_editor.dart | 55 +++++++-------- .../mobile_field_type_option_editor.dart | 38 +++++----- .../type_option_widget_builder/date.dart | 69 ++++++++++--------- .../type_option_widget_builder/number.dart | 32 +++++---- .../type_option_widget_builder/timestamp.dart | 65 +++++++++-------- .../widgets/property_edit_container.dart | 26 +++++++ .../widgets/property_edit_group_title.dart | 20 ++++++ .../widgets/property_title.dart | 5 +- .../card_property_edit/widgets/widgets.dart | 3 + .../widgets/date_format_list_tile.dart | 4 +- .../widgets/include_time_switch.dart | 4 +- .../widgets/time_format_list_tile.dart | 4 +- .../appearance/mobile_appearance.dart | 4 +- frontend/resources/translations/en.json | 3 + 15 files changed, 219 insertions(+), 138 deletions(-) create mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_container.dart create mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_group_title.dart create mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_field_name_text_field.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_field_name_text_field.dart index defb539d63..c150b74612 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_field_name_text_field.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_field_name_text_field.dart @@ -1,4 +1,7 @@ +import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/plugins/database_view/application/field/field_editor_bloc.dart'; +import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -33,13 +36,21 @@ class _MobileFieldNameTextFieldState extends State { @override Widget build(BuildContext context) { - return TextField( - controller: controller, - onChanged: (newName) { - context - .read() - .add(FieldEditorEvent.renameField(newName)); - }, + return PropertyEditContainer( + padding: EdgeInsets.zero, + child: TextField( + controller: controller, + decoration: InputDecoration( + hintText: LocaleKeys.board_propertyName.tr(), + enabledBorder: InputBorder.none, + focusedBorder: InputBorder.none, + ), + onChanged: (newName) { + context + .read() + .add(FieldEditorEvent.renameField(newName)); + }, + ), ); } } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart index b98fd349dc..a8abeb26b2 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_editor.dart @@ -1,14 +1,12 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/database/card/card_property_edit/mobile_field_type_option_editor.dart'; -import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/plugins/database_view/application/field/field_controller.dart'; import 'package:appflowy/plugins/database_view/application/field/field_editor_bloc.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart'; import 'package:appflowy/plugins/database_view/grid/application/row/row_detail_bloc.dart'; import 'package:appflowy/plugins/database_view/widgets/setting/field_visibility_extension.dart'; -import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart'; -import 'package:appflowy/workspace/presentation/widgets/toggle/toggle_style.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; @@ -51,38 +49,42 @@ class MobileFieldEditor extends StatelessWidget { context.read().typeOptionController; final fieldInfoVisibility = fieldController.getField(field.id)?.visibility; - return Padding( + return Container( padding: const EdgeInsets.all(16), + color: Theme.of(context).colorScheme.secondary, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - // TODO(yijing): improve hint text - PropertyTitle(LocaleKeys.settings_user_name.tr()), + PropertyEditGroupTitle(LocaleKeys.settings_user_name.tr()), BlocSelector( selector: (state) => state.field.name, builder: (context, fieldName) => MobileFieldNameTextField(text: fieldName), ), - Row( - children: [ - Expanded( - child: PropertyTitle( - LocaleKeys.grid_field_visibility.tr(), + const VSpace(16), + PropertyEditGroupTitle(LocaleKeys.grid_field_visibility.tr()), + PropertyEditContainer( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + PropertyTitle( + LocaleKeys.board_showOnCard.tr(), ), - ), - VisibilitySwitch( - isFieldHidden: !(fieldInfoVisibility != null - ? fieldInfoVisibility.isVisibleState() - : field.visibility), - onChanged: () => context.read().add( - RowDetailEvent.toggleFieldVisibility( - state.field.id, + VisibilitySwitch( + isFieldHidden: !(fieldInfoVisibility != null + ? fieldInfoVisibility.isVisibleState() + : field.visibility), + onChanged: () => context.read().add( + RowDetailEvent.toggleFieldVisibility( + state.field.id, + ), ), - ), - ), - ], + ), + ], + ), ), - const VSpace(8), + const VSpace(16), + PropertyEditGroupTitle(LocaleKeys.board_setting.tr()), // edit property type and settings if (!typeOptionLoader.field.isPrimary) MobileFieldTypeOptionEditor(dataController: dataController), @@ -114,11 +116,10 @@ class _VisibilitySwitchState extends State { @override Widget build(BuildContext context) { - return Toggle( - padding: EdgeInsets.zero, + return Switch.adaptive( value: !_isFieldHidden, - style: ToggleStyle.mobile, - onChanged: (_) { + activeColor: Theme.of(context).colorScheme.primary, + onChanged: (value) { setState(() { _isFieldHidden = !_isFieldHidden; widget.onChanged?.call(); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_type_option_editor.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_type_option_editor.dart index 26ab104b61..f921b63c76 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_type_option_editor.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/mobile_field_type_option_editor.dart @@ -1,6 +1,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/type_option_widget_builder.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart'; import 'package:appflowy/plugins/database_view/application/field/field_type_option_edit_bloc.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_data_controller.dart'; @@ -59,24 +60,25 @@ class _MobileSwitchFieldButton extends StatelessWidget { (FieldTypeOptionEditBloc bloc) => bloc.state.field.fieldType, ); return GestureDetector( - child: Row( - children: [ - Text( - LocaleKeys.grid_field_propertyType.tr(), - style: Theme.of(context).textTheme.titleMedium, - ), - const Spacer(), - FlowySvg(fieldType.icon()), - const HSpace(4), - Text( - fieldType.title(), - style: Theme.of(context).textTheme.titleMedium, - ), - Icon( - Icons.arrow_forward_ios_sharp, - color: Theme.of(context).hintColor, - ), - ], + child: PropertyEditContainer( + child: Row( + children: [ + PropertyTitle( + LocaleKeys.grid_field_propertyType.tr(), + ), + const Spacer(), + FlowySvg(fieldType.icon()), + const HSpace(4), + Text( + fieldType.title(), + style: Theme.of(context).textTheme.titleMedium, + ), + Icon( + Icons.arrow_forward_ios_sharp, + color: Theme.of(context).hintColor, + ), + ], + ), ), onTap: () => showFlowyMobileBottomSheet( context, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/date.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/date.dart index 809495fc0c..a6444050e8 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/date.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/date.dart @@ -1,3 +1,4 @@ +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/database/card/row/cells/date_cell/widgets/widgets.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/date_bloc.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart'; @@ -38,39 +39,43 @@ class DateTypeOptionMobileWidget extends TypeOptionWidget { typeOptionContext.typeOption = state.typeOption, builder: (context, state) { final List children = [ - DateFormatListTile( - currentFormatStr: state.typeOption.dateFormat.title(), - groupValue: context - .watch() - .state - .typeOption - .dateFormat, - onChanged: (newFormat) { - if (newFormat != null) { - context.read().add( - DateTypeOptionEvent.didSelectDateFormat( - newFormat, - ), - ); - } - }, + PropertyEditContainer( + child: DateFormatListTile( + currentFormatStr: state.typeOption.dateFormat.title(), + groupValue: context + .watch() + .state + .typeOption + .dateFormat, + onChanged: (newFormat) { + if (newFormat != null) { + context.read().add( + DateTypeOptionEvent.didSelectDateFormat( + newFormat, + ), + ); + } + }, + ), ), - TimeFormatListTile( - currentFormatStr: state.typeOption.timeFormat.title(), - groupValue: context - .watch() - .state - .typeOption - .timeFormat, - onChanged: (newFormat) { - if (newFormat != null) { - context.read().add( - DateTypeOptionEvent.didSelectTimeFormat( - newFormat, - ), - ); - } - }, + PropertyEditContainer( + child: TimeFormatListTile( + currentFormatStr: state.typeOption.timeFormat.title(), + groupValue: context + .watch() + .state + .typeOption + .timeFormat, + onChanged: (newFormat) { + if (newFormat != null) { + context.read().add( + DateTypeOptionEvent.didSelectTimeFormat( + newFormat, + ), + ); + } + }, + ), ), ]; diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/number.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/number.dart index 42cc59a6bd..8ecd9f60ef 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/number.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/number.dart @@ -1,4 +1,4 @@ -import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/number_bloc.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/number_format_bloc.dart'; @@ -46,20 +46,22 @@ class NumberTypeOptionMobileWidget extends TypeOptionWidget { typeOptionContext.typeOption = state.typeOption, builder: (context, state) { return GestureDetector( - child: Row( - children: [ - PropertyTitle(LocaleKeys.grid_field_numberFormat.tr()), - const Spacer(), - const HSpace(4), - Text( - state.typeOption.format.title(), - style: Theme.of(context).textTheme.titleMedium, - ), - Icon( - Icons.arrow_forward_ios, - color: Theme.of(context).hintColor, - ), - ], + child: PropertyEditContainer( + child: Row( + children: [ + PropertyTitle(LocaleKeys.grid_field_numberFormat.tr()), + const Spacer(), + const HSpace(4), + Text( + state.typeOption.format.title(), + style: Theme.of(context).textTheme.titleMedium, + ), + Icon( + Icons.arrow_forward_ios, + color: Theme.of(context).hintColor, + ), + ], + ), ), onTap: () => showFlowyMobileBottomSheet( context, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/timestamp.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/timestamp.dart index 95d864934c..8f1b5e1f89 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/timestamp.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/type_option_widget_builder/timestamp.dart @@ -1,3 +1,4 @@ +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/database/card/row/cells/date_cell/widgets/widgets.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/timestamp_bloc.dart'; import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart'; @@ -39,49 +40,53 @@ class TimestampTypeOptionMobileWidget extends TypeOptionWidget { typeOptionContext.typeOption = state.typeOption, builder: (context, state) { final List children = [ - // used to add a separator padding at the top - const SizedBox.shrink(), - DateFormatListTile( - currentFormatStr: state.typeOption.dateFormat.title(), - groupValue: context - .watch() - .state - .typeOption - .dateFormat, - onChanged: (newFormat) { - if (newFormat != null) { - context.read().add( - TimestampTypeOptionEvent.didSelectDateFormat( - newFormat, - ), - ); - } - }, - ), - IncludeTimeSwitch( - switchValue: state.typeOption.includeTime, - onChanged: (value) => context - .read() - .add(TimestampTypeOptionEvent.includeTime(value)), - ), - if (state.typeOption.includeTime) - TimeFormatListTile( - currentFormatStr: state.typeOption.timeFormat.title(), + PropertyEditContainer( + child: DateFormatListTile( + currentFormatStr: state.typeOption.dateFormat.title(), groupValue: context .watch() .state .typeOption - .timeFormat, + .dateFormat, onChanged: (newFormat) { if (newFormat != null) { context.read().add( - TimestampTypeOptionEvent.didSelectTimeFormat( + TimestampTypeOptionEvent.didSelectDateFormat( newFormat, ), ); } }, ), + ), + PropertyEditContainer( + child: IncludeTimeSwitch( + switchValue: state.typeOption.includeTime, + onChanged: (value) => context + .read() + .add(TimestampTypeOptionEvent.includeTime(value)), + ), + ), + if (state.typeOption.includeTime) + PropertyEditContainer( + child: TimeFormatListTile( + currentFormatStr: state.typeOption.timeFormat.title(), + groupValue: context + .watch() + .state + .typeOption + .timeFormat, + onChanged: (newFormat) { + if (newFormat != null) { + context.read().add( + TimestampTypeOptionEvent.didSelectTimeFormat( + newFormat, + ), + ); + } + }, + ), + ), ]; return ListView.separated( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_container.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_container.dart new file mode 100644 index 0000000000..93a35ae760 --- /dev/null +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_container.dart @@ -0,0 +1,26 @@ +import 'package:flutter/material.dart'; + +class PropertyEditContainer extends StatelessWidget { + const PropertyEditContainer({ + super.key, + required this.child, + this.padding, + }); + + final Widget child; + final EdgeInsets? padding; + + @override + Widget build(BuildContext context) { + return Container( + height: 50, + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.surface, + borderRadius: BorderRadius.circular(6), + ), + alignment: Alignment.centerLeft, + padding: padding ?? const EdgeInsets.symmetric(horizontal: 8), + child: child, + ); + } +} diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_group_title.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_group_title.dart new file mode 100644 index 0000000000..ca3cab452d --- /dev/null +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_edit_group_title.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; + +class PropertyEditGroupTitle extends StatelessWidget { + const PropertyEditGroupTitle(this.name, {super.key}); + + final String name; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 8), + child: Text( + name, + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: Theme.of(context).colorScheme.onSurface, + ), + ), + ); + } +} diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart index 8328768820..f82ab17bdf 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart @@ -11,7 +11,10 @@ class PropertyTitle extends StatelessWidget { padding: const EdgeInsets.symmetric(vertical: 8), child: Text( name, - style: Theme.of(context).textTheme.titleMedium, + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: Theme.of(context).colorScheme.onBackground, + fontSize: 16, + ), ), ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart new file mode 100644 index 0000000000..5b30f4348d --- /dev/null +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart @@ -0,0 +1,3 @@ +export 'property_edit_group_title.dart'; +export 'property_title.dart'; +export 'property_edit_container.dart'; diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/date_format_list_tile.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/date_format_list_tile.dart index a2fce67b1f..f9e5bc5189 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/date_format_list_tile.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/date_format_list_tile.dart @@ -1,4 +1,5 @@ import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart'; import 'package:easy_localization/easy_localization.dart'; @@ -27,9 +28,8 @@ class DateFormatListTile extends StatelessWidget { final style = Theme.of(context); return Row( children: [ - Text( + PropertyTitle( LocaleKeys.grid_field_dateFormat.tr(), - style: style.textTheme.titleMedium, ), const Spacer(), GestureDetector( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/include_time_switch.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/include_time_switch.dart index 5ccb0ec378..0346e0ffc2 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/include_time_switch.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/include_time_switch.dart @@ -1,4 +1,5 @@ import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/property_title.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; @@ -16,9 +17,8 @@ class IncludeTimeSwitch extends StatelessWidget { Widget build(BuildContext context) { return Row( children: [ - Text( + PropertyTitle( LocaleKeys.grid_field_includeTime.tr(), - style: Theme.of(context).textTheme.titleMedium, ), const Spacer(), Switch.adaptive( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/time_format_list_tile.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/time_format_list_tile.dart index 296679471d..1b4e7665cb 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/time_format_list_tile.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/row/cells/date_cell/widgets/time_format_list_tile.dart @@ -1,4 +1,5 @@ import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/database/card/card_property_edit/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pbenum.dart'; @@ -28,9 +29,8 @@ class TimeFormatListTile extends StatelessWidget { final style = Theme.of(context); return Row( children: [ - Text( + PropertyTitle( LocaleKeys.grid_field_timeFormat.tr(), - style: style.textTheme.titleMedium, ), const Spacer(), GestureDetector( 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 de1ffc175b..d42f9ccee4 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 @@ -37,8 +37,8 @@ class MobileAppearance extends BaseAppearance { brightness: brightness, primary: _primaryColor, onPrimary: Colors.white, - // TODO(yijing): add color later - secondary: Colors.white, + // group card & property edit background color + secondary: const Color(0xfff7f8fc), // shade 10 onSecondary: _onSecondaryColor, error: const Color(0xffFB006D), onError: const Color(0xffFB006D), diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index 208fc1d37a..957191a442 100644 --- a/frontend/resources/translations/en.json +++ b/frontend/resources/translations/en.json @@ -825,6 +825,9 @@ "cardActions": "Card Actions", "cardDuplicated": "Card has been duplicated", "cardDeleted": "Card has been deleted", + "showOnCard": "Show on card detail", + "setting": "Setting", + "propertyName": "Property name", "menuName": "Board", "showUngrouped": "Show ungrouped items", "ungroupedButtonText": "Ungrouped",