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,
|
context,
|
||||||
showDragHandle: true,
|
showDragHandle: true,
|
||||||
showDivider: false,
|
showDivider: false,
|
||||||
backgroundColor: Theme.of(context).colorScheme.surface,
|
backgroundColor: Theme.of(context).colorScheme.background,
|
||||||
builder: (_) => _buildViewPageBottomSheet(context),
|
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/generated/locale_keys.g.dart';
|
||||||
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
|
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
|
||||||
import 'package:easy_localization/easy_localization.dart';
|
import 'package:easy_localization/easy_localization.dart';
|
||||||
import 'package:flowy_infra_ui/widget/separated_flex.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
enum MobileViewItemBottomSheetBodyAction {
|
enum MobileViewItemBottomSheetBodyAction {
|
||||||
@ -26,12 +25,8 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return SeparatedColumn(
|
return Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
separatorBuilder: () => const Divider(
|
|
||||||
height: 8.5,
|
|
||||||
thickness: 0.5,
|
|
||||||
),
|
|
||||||
children: [
|
children: [
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: LocaleKeys.button_rename.tr(),
|
text: LocaleKeys.button_rename.tr(),
|
||||||
@ -40,6 +35,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
|
|||||||
MobileViewItemBottomSheetBodyAction.rename,
|
MobileViewItemBottomSheetBodyAction.rename,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: isFavorite
|
text: isFavorite
|
||||||
? LocaleKeys.button_removeFromFavorites.tr()
|
? LocaleKeys.button_removeFromFavorites.tr()
|
||||||
@ -54,6 +50,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
|
|||||||
: MobileViewItemBottomSheetBodyAction.addToFavorites,
|
: MobileViewItemBottomSheetBodyAction.addToFavorites,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: LocaleKeys.button_duplicate.tr(),
|
text: LocaleKeys.button_duplicate.tr(),
|
||||||
icon: FlowySvgs.m_duplicate_s,
|
icon: FlowySvgs.m_duplicate_s,
|
||||||
@ -61,6 +58,7 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
|
|||||||
MobileViewItemBottomSheetBodyAction.duplicate,
|
MobileViewItemBottomSheetBodyAction.duplicate,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: LocaleKeys.button_delete.tr(),
|
text: LocaleKeys.button_delete.tr(),
|
||||||
textColor: Theme.of(context).colorScheme.error,
|
textColor: Theme.of(context).colorScheme.error,
|
||||||
@ -70,7 +68,13 @@ class MobileViewItemBottomSheetBody extends StatelessWidget {
|
|||||||
MobileViewItemBottomSheetBodyAction.delete,
|
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/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
|
||||||
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
|
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
|
||||||
import 'package:easy_localization/easy_localization.dart';
|
import 'package:easy_localization/easy_localization.dart';
|
||||||
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
enum MobileViewBottomSheetBodyAction {
|
enum MobileViewBottomSheetBodyAction {
|
||||||
@ -85,12 +84,8 @@ class MobileViewBottomSheetBody extends StatelessWidget {
|
|||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final isFavorite = view.isFavorite;
|
final isFavorite = view.isFavorite;
|
||||||
return SeparatedColumn(
|
return Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
separatorBuilder: () => const Divider(
|
|
||||||
height: 8.5,
|
|
||||||
thickness: 0.5,
|
|
||||||
),
|
|
||||||
children: [
|
children: [
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: LocaleKeys.button_rename.tr(),
|
text: LocaleKeys.button_rename.tr(),
|
||||||
@ -99,6 +94,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
|
|||||||
MobileViewBottomSheetBodyAction.rename,
|
MobileViewBottomSheetBodyAction.rename,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: isFavorite
|
text: isFavorite
|
||||||
? LocaleKeys.button_removeFromFavorites.tr()
|
? LocaleKeys.button_removeFromFavorites.tr()
|
||||||
@ -113,6 +109,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
|
|||||||
: MobileViewBottomSheetBodyAction.addToFavorites,
|
: MobileViewBottomSheetBodyAction.addToFavorites,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: LocaleKeys.button_duplicate.tr(),
|
text: LocaleKeys.button_duplicate.tr(),
|
||||||
icon: FlowySvgs.m_duplicate_s,
|
icon: FlowySvgs.m_duplicate_s,
|
||||||
@ -120,6 +117,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
|
|||||||
MobileViewBottomSheetBodyAction.duplicate,
|
MobileViewBottomSheetBodyAction.duplicate,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
MobileQuickActionButton(
|
MobileQuickActionButton(
|
||||||
text: LocaleKeys.button_delete.tr(),
|
text: LocaleKeys.button_delete.tr(),
|
||||||
textColor: Theme.of(context).colorScheme.error,
|
textColor: Theme.of(context).colorScheme.error,
|
||||||
@ -129,7 +127,13 @@ class MobileViewBottomSheetBody extends StatelessWidget {
|
|||||||
MobileViewBottomSheetBodyAction.delete,
|
MobileViewBottomSheetBodyAction.delete,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
_divider(),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _divider() => const Divider(
|
||||||
|
height: 8.5,
|
||||||
|
thickness: 0.5,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -54,7 +54,7 @@ enum MobilePaneActionType {
|
|||||||
context,
|
context,
|
||||||
showDragHandle: true,
|
showDragHandle: true,
|
||||||
showDivider: false,
|
showDivider: false,
|
||||||
backgroundColor: Theme.of(context).colorScheme.surface,
|
backgroundColor: Theme.of(context).colorScheme.background,
|
||||||
useRootNavigator: true,
|
useRootNavigator: true,
|
||||||
builder: (context) {
|
builder: (context) {
|
||||||
return MultiBlocProvider(
|
return MultiBlocProvider(
|
||||||
|
@ -150,6 +150,7 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
|
|||||||
icon: FlowySvgs.m_delete_m,
|
icon: FlowySvgs.m_delete_m,
|
||||||
iconColor: Theme.of(context).colorScheme.error,
|
iconColor: Theme.of(context).colorScheme.error,
|
||||||
),
|
),
|
||||||
|
const Divider(height: 8.5, thickness: 0.5),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -40,7 +40,7 @@ Future<FieldType?> showFieldTypeGridBottomSheet(
|
|||||||
showCloseButton: true,
|
showCloseButton: true,
|
||||||
elevation: 20,
|
elevation: 20,
|
||||||
title: title,
|
title: title,
|
||||||
backgroundColor: Theme.of(context).colorScheme.surface,
|
backgroundColor: Theme.of(context).colorScheme.background,
|
||||||
enableDraggableScrollable: true,
|
enableDraggableScrollable: true,
|
||||||
builder: (context) {
|
builder: (context) {
|
||||||
final typeOptionMenuItemValue = mobileSupportedFieldTypes
|
final typeOptionMenuItemValue = mobileSupportedFieldTypes
|
||||||
|
@ -405,6 +405,8 @@ class _SortDetailContent extends StatelessWidget {
|
|||||||
|
|
||||||
final SortInfo? sortInfo;
|
final SortInfo? sortInfo;
|
||||||
|
|
||||||
|
bool get isCreatingNewSort => sortInfo == null;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Column(
|
return Column(
|
||||||
@ -415,7 +417,7 @@ class _SortDetailContent extends StatelessWidget {
|
|||||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
child: DefaultTabController(
|
child: DefaultTabController(
|
||||||
length: 2,
|
length: 2,
|
||||||
initialIndex: sortInfo == null
|
initialIndex: isCreatingNewSort
|
||||||
? 0
|
? 0
|
||||||
: sortInfo!.sortPB.condition == SortConditionPB.Ascending
|
: sortInfo!.sortPB.condition == SortConditionPB.Ascending
|
||||||
? 0
|
? 0
|
||||||
@ -487,30 +489,40 @@ class _SortDetailContent extends StatelessWidget {
|
|||||||
child: BlocBuilder<SortEditorBloc, SortEditorState>(
|
child: BlocBuilder<SortEditorBloc, SortEditorState>(
|
||||||
builder: (context, state) {
|
builder: (context, state) {
|
||||||
final fields = state.allFields
|
final fields = state.allFields
|
||||||
.where(
|
.where((field) => field.canCreateSort || field.hasSort)
|
||||||
(field) =>
|
|
||||||
field.canCreateSort ||
|
|
||||||
sortInfo != null && sortInfo!.fieldId == field.id,
|
|
||||||
)
|
|
||||||
.toList();
|
.toList();
|
||||||
return ListView.builder(
|
return ListView.builder(
|
||||||
itemCount: fields.length,
|
itemCount: fields.length,
|
||||||
itemBuilder: (context, index) {
|
itemBuilder: (context, index) {
|
||||||
final fieldInfo = fields[index];
|
final fieldInfo = fields[index];
|
||||||
final isSelected = sortInfo == null
|
final isSelected = isCreatingNewSort
|
||||||
? context
|
? context
|
||||||
.watch<MobileSortEditorCubit>()
|
.watch<MobileSortEditorCubit>()
|
||||||
.state
|
.state
|
||||||
.newSortFieldId ==
|
.newSortFieldId ==
|
||||||
fieldInfo.id
|
fieldInfo.id
|
||||||
: sortInfo!.fieldId == fieldInfo.id;
|
: sortInfo!.fieldId == fieldInfo.id;
|
||||||
|
|
||||||
|
final enabled = fieldInfo.canCreateSort ||
|
||||||
|
isCreatingNewSort && !fieldInfo.hasSort ||
|
||||||
|
!isCreatingNewSort && sortInfo!.fieldId == fieldInfo.id;
|
||||||
|
|
||||||
return FlowyOptionTile.checkbox(
|
return FlowyOptionTile.checkbox(
|
||||||
text: fieldInfo.field.name,
|
text: fieldInfo.field.name,
|
||||||
isSelected: isSelected,
|
isSelected: isSelected,
|
||||||
|
textColor: enabled ? null : Theme.of(context).disabledColor,
|
||||||
showTopBorder: false,
|
showTopBorder: false,
|
||||||
onTap: () {
|
onTap: () {
|
||||||
if (!isSelected) {
|
if (isSelected) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (enabled) {
|
||||||
_changeFieldId(context, fieldInfo.id);
|
_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) {
|
void _changeCondition(BuildContext context, SortConditionPB newCondition) {
|
||||||
if (sortInfo == null) {
|
if (isCreatingNewSort) {
|
||||||
context.read<MobileSortEditorCubit>().changeSortCondition(newCondition);
|
context.read<MobileSortEditorCubit>().changeSortCondition(newCondition);
|
||||||
} else {
|
} else {
|
||||||
context.read<SortEditorBloc>().add(
|
context.read<SortEditorBloc>().add(
|
||||||
@ -537,7 +549,7 @@ class _SortDetailContent extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void _changeFieldId(BuildContext context, String newFieldId) {
|
void _changeFieldId(BuildContext context, String newFieldId) {
|
||||||
if (sortInfo == null) {
|
if (isCreatingNewSort) {
|
||||||
context.read<MobileSortEditorCubit>().changeFieldId(newFieldId);
|
context.read<MobileSortEditorCubit>().changeFieldId(newFieldId);
|
||||||
} else {
|
} else {
|
||||||
context.read<SortEditorBloc>().add(
|
context.read<SortEditorBloc>().add(
|
||||||
|
@ -183,6 +183,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
|
|||||||
showMobileBottomSheet(
|
showMobileBottomSheet(
|
||||||
context,
|
context,
|
||||||
showDragHandle: true,
|
showDragHandle: true,
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.background,
|
||||||
builder: (_) {
|
builder: (_) {
|
||||||
return BlocProvider<ViewBloc>(
|
return BlocProvider<ViewBloc>(
|
||||||
create: (_) =>
|
create: (_) =>
|
||||||
|
@ -13,6 +13,7 @@ enum FlowyOptionTileType {
|
|||||||
|
|
||||||
class FlowyOptionTile extends StatelessWidget {
|
class FlowyOptionTile extends StatelessWidget {
|
||||||
const FlowyOptionTile._({
|
const FlowyOptionTile._({
|
||||||
|
super.key,
|
||||||
required this.type,
|
required this.type,
|
||||||
this.showTopBorder = true,
|
this.showTopBorder = true,
|
||||||
this.showBottomBorder = true,
|
this.showBottomBorder = true,
|
||||||
@ -88,9 +89,11 @@ class FlowyOptionTile extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
factory FlowyOptionTile.checkbox({
|
factory FlowyOptionTile.checkbox({
|
||||||
|
Key? key,
|
||||||
required String text,
|
required String text,
|
||||||
required bool isSelected,
|
required bool isSelected,
|
||||||
required VoidCallback? onTap,
|
required VoidCallback? onTap,
|
||||||
|
Color? textColor,
|
||||||
Widget? leftIcon,
|
Widget? leftIcon,
|
||||||
Widget? content,
|
Widget? content,
|
||||||
bool showTopBorder = true,
|
bool showTopBorder = true,
|
||||||
@ -99,9 +102,11 @@ class FlowyOptionTile extends StatelessWidget {
|
|||||||
Color? backgroundColor,
|
Color? backgroundColor,
|
||||||
}) {
|
}) {
|
||||||
return FlowyOptionTile._(
|
return FlowyOptionTile._(
|
||||||
|
key: key,
|
||||||
type: FlowyOptionTileType.checkbox,
|
type: FlowyOptionTileType.checkbox,
|
||||||
isSelected: isSelected,
|
isSelected: isSelected,
|
||||||
text: text,
|
text: text,
|
||||||
|
textColor: textColor,
|
||||||
content: content,
|
content: content,
|
||||||
onTap: onTap,
|
onTap: onTap,
|
||||||
fontFamily: fontFamily,
|
fontFamily: fontFamily,
|
||||||
|
@ -337,6 +337,7 @@ class FieldController {
|
|||||||
...changeset.insertSorts.map((sort) => sort.sort.fieldId),
|
...changeset.insertSorts.map((sort) => sort.sort.fieldId),
|
||||||
...changeset.updateSorts.map((sort) => sort.fieldId),
|
...changeset.updateSorts.map((sort) => sort.fieldId),
|
||||||
...changeset.deleteSorts.map((sort) => sort.fieldId),
|
...changeset.deleteSorts.map((sort) => sort.fieldId),
|
||||||
|
...?_sortNotifier?.sorts.map((sort) => sort.fieldId),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
final newFieldInfos = [...fieldInfos];
|
final newFieldInfos = [...fieldInfos];
|
||||||
@ -367,8 +368,8 @@ class FieldController {
|
|||||||
insertSortFromChangeset(newSortInfos, changeset);
|
insertSortFromChangeset(newSortInfos, changeset);
|
||||||
updateSortFromChangeset(newSortInfos, changeset);
|
updateSortFromChangeset(newSortInfos, changeset);
|
||||||
|
|
||||||
_sortNotifier?.sorts = newSortInfos;
|
|
||||||
updateFieldInfos(newSortInfos, changeset);
|
updateFieldInfos(newSortInfos, changeset);
|
||||||
|
_sortNotifier?.sorts = newSortInfos;
|
||||||
},
|
},
|
||||||
(err) => Log.error(err),
|
(err) => Log.error(err),
|
||||||
);
|
);
|
||||||
|
@ -150,6 +150,7 @@ void _showEditSortPanelFromToolbar(
|
|||||||
showDragHandle: true,
|
showDragHandle: true,
|
||||||
showDivider: false,
|
showDivider: false,
|
||||||
useSafeArea: false,
|
useSafeArea: false,
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.background,
|
||||||
builder: (_) {
|
builder: (_) {
|
||||||
return BlocProvider.value(
|
return BlocProvider.value(
|
||||||
value: context.read<SortEditorBloc>(),
|
value: context.read<SortEditorBloc>(),
|
||||||
|
@ -679,7 +679,8 @@
|
|||||||
"cannotFindCreatableField": "Cannot find a suitable field to sort by",
|
"cannotFindCreatableField": "Cannot find a suitable field to sort by",
|
||||||
"deleteAllSorts": "Delete all sorts",
|
"deleteAllSorts": "Delete all sorts",
|
||||||
"addSort": "Add new sort",
|
"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": {
|
"row": {
|
||||||
"duplicate": "Duplicate",
|
"duplicate": "Duplicate",
|
||||||
@ -1355,4 +1356,4 @@
|
|||||||
"userIcon": "User icon"
|
"userIcon": "User icon"
|
||||||
},
|
},
|
||||||
"noLogFiles": "There're no log files"
|
"noLogFiles": "There're no log files"
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user