mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
fix: bottom sheet color and sort ui imrprovement (#4849)
This commit is contained in:
parent
f9c1cadbe0
commit
574cca0a8b
@ -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),
|
||||
);
|
||||
},
|
||||
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
@ -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(
|
||||
|
@ -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),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
@ -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
|
||||
|
@ -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(
|
||||
|
@ -183,6 +183,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
|
||||
showMobileBottomSheet(
|
||||
context,
|
||||
showDragHandle: true,
|
||||
backgroundColor: Theme.of(context).colorScheme.background,
|
||||
builder: (_) {
|
||||
return BlocProvider<ViewBloc>(
|
||||
create: (_) =>
|
||||
|
@ -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,
|
||||
|
@ -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),
|
||||
);
|
||||
|
@ -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>(),
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user