fix: bottom sheet color and sort ui imrprovement (#4849)

This commit is contained in:
Richard Shiue 2024-03-08 10:16:03 +08:00 committed by GitHub
parent f9c1cadbe0
commit 574cca0a8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 58 additions and 28 deletions

View File

@ -148,7 +148,7 @@ class _MobileViewPageState extends State<MobileViewPage> {
context,
showDragHandle: true,
showDivider: false,
backgroundColor: Theme.of(context).colorScheme.surface,
backgroundColor: Theme.of(context).colorScheme.background,
builder: (_) => _buildViewPageBottomSheet(context),
);
},

View File

@ -2,7 +2,6 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/widget/separated_flex.dart';
import 'package:flutter/material.dart';
enum MobileViewItemBottomSheetBodyAction {
@ -26,12 +25,8 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SeparatedColumn(
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
separatorBuilder: () => const Divider(
height: 8.5,
thickness: 0.5,
),
children: [
MobileQuickActionButton(
text: LocaleKeys.button_rename.tr(),
@ -40,6 +35,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
MobileViewItemBottomSheetBodyAction.rename,
),
),
_divider(),
MobileQuickActionButton(
text: isFavorite
? LocaleKeys.button_removeFromFavorites.tr()
@ -54,6 +50,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
: MobileViewItemBottomSheetBodyAction.addToFavorites,
),
),
_divider(),
MobileQuickActionButton(
text: LocaleKeys.button_duplicate.tr(),
icon: FlowySvgs.m_duplicate_s,
@ -61,6 +58,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
MobileViewItemBottomSheetBodyAction.duplicate,
),
),
_divider(),
MobileQuickActionButton(
text: LocaleKeys.button_delete.tr(),
textColor: Theme.of(context).colorScheme.error,
@ -70,7 +68,13 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
MobileViewItemBottomSheetBodyAction.delete,
),
),
_divider(),
],
);
}
Widget _divider() => const Divider(
height: 8.5,
thickness: 0.5,
);
}

View File

@ -4,7 +4,6 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
enum MobileViewBottomSheetBodyAction {
@ -85,12 +84,8 @@ class MobileViewBottomSheetBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isFavorite = view.isFavorite;
return SeparatedColumn(
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
separatorBuilder: () => const Divider(
height: 8.5,
thickness: 0.5,
),
children: [
MobileQuickActionButton(
text: LocaleKeys.button_rename.tr(),
@ -99,6 +94,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
MobileViewBottomSheetBodyAction.rename,
),
),
_divider(),
MobileQuickActionButton(
text: isFavorite
? LocaleKeys.button_removeFromFavorites.tr()
@ -113,6 +109,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
: MobileViewBottomSheetBodyAction.addToFavorites,
),
),
_divider(),
MobileQuickActionButton(
text: LocaleKeys.button_duplicate.tr(),
icon: FlowySvgs.m_duplicate_s,
@ -120,6 +117,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
MobileViewBottomSheetBodyAction.duplicate,
),
),
_divider(),
MobileQuickActionButton(
text: LocaleKeys.button_delete.tr(),
textColor: Theme.of(context).colorScheme.error,
@ -129,7 +127,13 @@ class MobileViewBottomSheetBody extends StatelessWidget {
MobileViewBottomSheetBodyAction.delete,
),
),
_divider(),
],
);
}
Widget _divider() => const Divider(
height: 8.5,
thickness: 0.5,
);
}

View File

@ -54,7 +54,7 @@ enum MobilePaneActionType {
context,
showDragHandle: true,
showDivider: false,
backgroundColor: Theme.of(context).colorScheme.surface,
backgroundColor: Theme.of(context).colorScheme.background,
useRootNavigator: true,
builder: (context) {
return MultiBlocProvider(

View File

@ -150,6 +150,7 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
icon: FlowySvgs.m_delete_m,
iconColor: Theme.of(context).colorScheme.error,
),
const Divider(height: 8.5, thickness: 0.5),
],
),
);

View File

@ -40,7 +40,7 @@ Future<FieldType?> showFieldTypeGridBottomSheet(
showCloseButton: true,
elevation: 20,
title: title,
backgroundColor: Theme.of(context).colorScheme.surface,
backgroundColor: Theme.of(context).colorScheme.background,
enableDraggableScrollable: true,
builder: (context) {
final typeOptionMenuItemValue = mobileSupportedFieldTypes

View File

@ -405,6 +405,8 @@ class _SortDetailContent extends StatelessWidget {
final SortInfo? sortInfo;
bool get isCreatingNewSort => sortInfo == null;
@override
Widget build(BuildContext context) {
return Column(
@ -415,7 +417,7 @@ class _SortDetailContent extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 16),
child: DefaultTabController(
length: 2,
initialIndex: sortInfo == null
initialIndex: isCreatingNewSort
? 0
: sortInfo!.sortPB.condition == SortConditionPB.Ascending
? 0
@ -487,30 +489,40 @@ class _SortDetailContent extends StatelessWidget {
child: BlocBuilder<SortEditorBloc, SortEditorState>(
builder: (context, state) {
final fields = state.allFields
.where(
(field) =>
field.canCreateSort ||
sortInfo != null && sortInfo!.fieldId == field.id,
)
.where((field) => field.canCreateSort || field.hasSort)
.toList();
return ListView.builder(
itemCount: fields.length,
itemBuilder: (context, index) {
final fieldInfo = fields[index];
final isSelected = sortInfo == null
final isSelected = isCreatingNewSort
? context
.watch<MobileSortEditorCubit>()
.state
.newSortFieldId ==
fieldInfo.id
: sortInfo!.fieldId == fieldInfo.id;
final enabled = fieldInfo.canCreateSort ||
isCreatingNewSort && !fieldInfo.hasSort ||
!isCreatingNewSort && sortInfo!.fieldId == fieldInfo.id;
return FlowyOptionTile.checkbox(
text: fieldInfo.field.name,
isSelected: isSelected,
textColor: enabled ? null : Theme.of(context).disabledColor,
showTopBorder: false,
onTap: () {
if (!isSelected) {
if (isSelected) {
return;
}
if (enabled) {
_changeFieldId(context, fieldInfo.id);
} else {
Fluttertoast.showToast(
msg: LocaleKeys.grid_sort_fieldInUse.tr(),
gravity: ToastGravity.BOTTOM,
);
}
},
);
@ -524,7 +536,7 @@ class _SortDetailContent extends StatelessWidget {
}
void _changeCondition(BuildContext context, SortConditionPB newCondition) {
if (sortInfo == null) {
if (isCreatingNewSort) {
context.read<MobileSortEditorCubit>().changeSortCondition(newCondition);
} else {
context.read<SortEditorBloc>().add(
@ -537,7 +549,7 @@ class _SortDetailContent extends StatelessWidget {
}
void _changeFieldId(BuildContext context, String newFieldId) {
if (sortInfo == null) {
if (isCreatingNewSort) {
context.read<MobileSortEditorCubit>().changeFieldId(newFieldId);
} else {
context.read<SortEditorBloc>().add(

View File

@ -183,6 +183,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
showMobileBottomSheet(
context,
showDragHandle: true,
backgroundColor: Theme.of(context).colorScheme.background,
builder: (_) {
return BlocProvider<ViewBloc>(
create: (_) =>

View File

@ -13,6 +13,7 @@ enum FlowyOptionTileType {
class FlowyOptionTile extends StatelessWidget {
const FlowyOptionTile._({
super.key,
required this.type,
this.showTopBorder = true,
this.showBottomBorder = true,
@ -88,9 +89,11 @@ class FlowyOptionTile extends StatelessWidget {
}
factory FlowyOptionTile.checkbox({
Key? key,
required String text,
required bool isSelected,
required VoidCallback? onTap,
Color? textColor,
Widget? leftIcon,
Widget? content,
bool showTopBorder = true,
@ -99,9 +102,11 @@ class FlowyOptionTile extends StatelessWidget {
Color? backgroundColor,
}) {
return FlowyOptionTile._(
key: key,
type: FlowyOptionTileType.checkbox,
isSelected: isSelected,
text: text,
textColor: textColor,
content: content,
onTap: onTap,
fontFamily: fontFamily,

View File

@ -337,6 +337,7 @@ class FieldController {
...changeset.insertSorts.map((sort) => sort.sort.fieldId),
...changeset.updateSorts.map((sort) => sort.fieldId),
...changeset.deleteSorts.map((sort) => sort.fieldId),
...?_sortNotifier?.sorts.map((sort) => sort.fieldId),
]);
final newFieldInfos = [...fieldInfos];
@ -367,8 +368,8 @@ class FieldController {
insertSortFromChangeset(newSortInfos, changeset);
updateSortFromChangeset(newSortInfos, changeset);
_sortNotifier?.sorts = newSortInfos;
updateFieldInfos(newSortInfos, changeset);
_sortNotifier?.sorts = newSortInfos;
},
(err) => Log.error(err),
);

View File

@ -150,6 +150,7 @@ void _showEditSortPanelFromToolbar(
showDragHandle: true,
showDivider: false,
useSafeArea: false,
backgroundColor: Theme.of(context).colorScheme.background,
builder: (_) {
return BlocProvider.value(
value: context.read<SortEditorBloc>(),

View File

@ -679,7 +679,8 @@
"cannotFindCreatableField": "Cannot find a suitable field to sort by",
"deleteAllSorts": "Delete all sorts",
"addSort": "Add new sort",
"removeSorting": "Would you like to remove sorting?"
"removeSorting": "Would you like to remove sorting?",
"fieldInUse": "You are already sorting by this field"
},
"row": {
"duplicate": "Duplicate",