Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/wrap-appflowy-style-popover

Browse Source
This commit is contained in:
appflowy 2022-09-15 21:42:31 +08:00
commit 5294d7700e
32 changed files with 412 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
CHANGELOG.md
View File

@ -1,5 +1,27 @@
# Release Notes
## Version 0.0.5.1 - 09/14/2022
New features
- Enable deleting a field in board
- Fix some bugs
## Version 0.0.5 - 09/08/2022
New Features - Kanban Board like Notion and Trello beta
Boards are the best way to manage projects & tasks. Use them to group your databases by select, multiselect, and checkbox.
<p align="left"><img src="https://user-images.githubusercontent.com/12026239/190055984-6efa2d7a-ee38-4551-859e-ee56388e1859.gif" width="1000px" /></p>
- Set up columns that represent a specific phase of the project cycle and use cards to represent each project / task
- Drag and drop a card from one phase / column to another phase / column
- Update database properties in the Board view by clicking on a property and making edits on the card
### Other Features & Improvements
- Settings allow users to change avatars
- Click and drag the right edge to resize your sidebar
- And many user interface improvements (link)
## Version 0.0.5 - beta.2 - beta.1 - 09/01/2022
New features

2
frontend/Makefile.toml
View File

@ -22,7 +22,7 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
CARGO_MAKE_CRATE_NAME = "dart-ffi"
LIB_NAME = "dart_ffi"
CURRENT_APP_VERSION = "0.0.5"
CURRENT_APP_VERSION = "0.0.5.1"
FEATURES = "flutter"
PRODUCT_NAME = "AppFlowy"
# CRATE_TYPE: https://doc.rust-lang.org/reference/linkage.html

3
frontend/app_flowy/assets/translations/en.json
View File

@ -191,7 +191,8 @@
"optionTitle": "Options",
"addOption": "Add option",
"editProperty": "Edit property",
"newColumn": "New column"
"newColumn": "New column",
"deleteFieldPromptMessage": "Are you sure? This property will be deleted"
},
"row": {
"duplicate": "Duplicate",

9
frontend/app_flowy/lib/plugins/board/presentation/board_page.dart
View File

@ -287,8 +287,13 @@ class _BoardContentState extends State<BoardContent> {
);
}
void _openCard(String gridId, GridFieldController fieldController,
RowPB rowPB, GridRowCache rowCache, BuildContext context) {
void _openCard(
String gridId,
GridFieldController fieldController,
RowPB rowPB,
GridRowCache rowCache,
BuildContext context,
) {
final rowInfo = RowInfo(
gridId: gridId,
fields: UnmodifiableListView(fieldController.fieldContexts),

51
frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
View File

@ -2,7 +2,9 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:app_flowy/plugins/board/application/toolbar/board_setting_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_group.dart';
import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_property.dart';
import 'package:appflowy_popover/popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
@ -141,10 +143,12 @@ extension _GridSettingExtension on BoardSettingAction {
}
class BoardSettingListPopover extends StatefulWidget {
final PopoverController popoverController;
final BoardSettingContext settingContext;
const BoardSettingListPopover({
Key? key,
required this.popoverController,
required this.settingContext,
}) : super(key: key);
@ -153,36 +157,33 @@ class BoardSettingListPopover extends StatefulWidget {
}
class _BoardSettingListPopoverState extends State<BoardSettingListPopover> {
bool _showGridPropertyList = false;
BoardSettingAction? _action;
@override
Widget build(BuildContext context) {
if (_showGridPropertyList) {
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(260, 400)),
child: GridPropertyList(
gridId: widget.settingContext.viewId,
fieldController: widget.settingContext.fieldController,
),
);
if (_action != null) {
switch (_action!) {
case BoardSettingAction.groups:
return GridGroupList(
viewId: widget.settingContext.viewId,
fieldController: widget.settingContext.fieldController,
onDismissed: () {
widget.popoverController.close();
},
);
case BoardSettingAction.properties:
return GridPropertyList(
gridId: widget.settingContext.viewId,
fieldController: widget.settingContext.fieldController,
);
}
}
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(140, 400)),
child: BoardSettingList(
settingContext: widget.settingContext,
onAction: (action, settingContext) {
switch (action) {
case BoardSettingAction.groups:
break;
case BoardSettingAction.properties:
setState(() {
_showGridPropertyList = true;
});
break;
}
},
),
return BoardSettingList(
settingContext: widget.settingContext,
onAction: (action, settingContext) {
setState(() => _action = action);
},
);
}
}

23
frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart
View File

@ -2,6 +2,7 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
import 'package:appflowy_popover/popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
@ -40,15 +41,30 @@ class BoardToolbar extends StatelessWidget {
}
}
class _SettingButton extends StatelessWidget {
class _SettingButton extends StatefulWidget {
final BoardSettingContext settingContext;
const _SettingButton({required this.settingContext, Key? key})
: super(key: key);
@override
State<_SettingButton> createState() => _SettingButtonState();
}
class _SettingButtonState extends State<_SettingButton> {
late PopoverController popoverController;
@override
void initState() {
popoverController = PopoverController();
super.initState();
}
@override
Widget build(BuildContext context) {
final theme = context.read<AppTheme>();
return Popover(
return AppFlowyStylePopover(
controller: popoverController,
constraints: BoxConstraints.loose(const Size(260, 400)),
triggerActions: PopoverTriggerActionFlags.click,
child: FlowyIconButton(
hoverColor: theme.hover,
@ -61,7 +77,8 @@ class _SettingButton extends StatelessWidget {
),
popupBuilder: (BuildContext popoverContext) {
return BoardSettingListPopover(
settingContext: settingContext,
settingContext: widget.settingContext,
popoverController: popoverController,
);
},
);

3
frontend/app_flowy/lib/plugins/doc/document.dart
View File

@ -186,7 +186,8 @@ class DocumentShareButton extends StatelessWidget {
'Exported to: ${LocaleKeys.notifications_export_path.tr()}');
break;
case ShareAction.copyLink:
FlowyAlertDialog(title: LocaleKeys.shareAction_workInProgress.tr())
NavigatorAlertDialog(
title: LocaleKeys.shareAction_workInProgress.tr())
.show(context);
break;
}

2
frontend/app_flowy/lib/plugins/doc/presentation/toolbar/link_button.dart
View File

@ -84,7 +84,7 @@ class FlowyLinkStyleButtonState extends State<FlowyLinkStyleButton> {
value = values.first;
}
TextFieldDialog(
NavigatorTextFieldDialog(
title: 'URL',
value: value,
confirm: (newValue) {

28
frontend/app_flowy/lib/plugins/grid/application/field/field_editor_bloc.dart
View File

@ -2,6 +2,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'dart:async';
import 'package:dartz/dartz.dart';
import 'field_service.dart';
import 'type_option/type_option_context.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
@ -15,10 +16,11 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
FieldEditorBloc({
required String gridId,
required String fieldName,
required bool isGroupField,
required IFieldTypeOptionLoader loader,
}) : dataController =
TypeOptionDataController(gridId: gridId, loader: loader),
super(FieldEditorState.initial(gridId, fieldName)) {
super(FieldEditorState.initial(gridId, fieldName, isGroupField)) {
on<FieldEditorEvent>(
(event, emit) async {
await event.when(
@ -35,7 +37,23 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
emit(state.copyWith(name: name));
},
didReceiveFieldChanged: (FieldPB field) {
emit(state.copyWith(field: Some(field), name: field.name));
emit(state.copyWith(
field: Some(field),
name: field.name,
canDelete: field.isPrimary,
));
},
deleteField: () {
state.field.fold(
() => null,
(field) {
final fieldService = FieldService(
gridId: gridId,
fieldId: field.id,
);
fieldService.deleteField();
},
);
},
);
},
@ -52,6 +70,7 @@ class FieldEditorBloc extends Bloc<FieldEditorEvent, FieldEditorState> {
class FieldEditorEvent with _$FieldEditorEvent {
const factory FieldEditorEvent.initial() = _InitialField;
const factory FieldEditorEvent.updateName(String name) = _UpdateName;
const factory FieldEditorEvent.deleteField() = _DeleteField;
const factory FieldEditorEvent.didReceiveFieldChanged(FieldPB field) =
_DidReceiveFieldChanged;
}
@ -63,16 +82,21 @@ class FieldEditorState with _$FieldEditorState {
required String errorText,
required String name,
required Option<FieldPB> field,
required bool canDelete,
required bool isGroupField,
}) = _FieldEditorState;
factory FieldEditorState.initial(
String gridId,
String fieldName,
bool isGroupField,
) =>
FieldEditorState(
gridId: gridId,
errorText: '',
field: none(),
canDelete: false,
name: fieldName,
isGroupField: isGroupField,
);
}

9
frontend/app_flowy/lib/plugins/grid/application/row/row_detail_bloc.dart
View File

@ -1,4 +1,5 @@
import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
import 'package:app_flowy/plugins/grid/application/field/field_service.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'dart:async';
@ -24,6 +25,13 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
didReceiveCellDatas: (_DidReceiveCellDatas value) {
emit(state.copyWith(gridCells: value.gridCells));
},
deleteField: (_DeleteField value) {
final fieldService = FieldService(
gridId: dataController.rowInfo.gridId,
fieldId: value.fieldId,
);
fieldService.deleteField();
},
);
},
);
@ -49,6 +57,7 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
@freezed
class RowDetailEvent with _$RowDetailEvent {
const factory RowDetailEvent.initial() = _Initial;
const factory RowDetailEvent.deleteField(String fieldId) = _DeleteField;
const factory RowDetailEvent.didReceiveCellDatas(
List<GridCellIdentifier> gridCells) = _DidReceiveCellDatas;
}

4
frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
View File

@ -317,9 +317,7 @@ class _GridFooter extends StatelessWidget {
height: GridSize.footerHeight,
child: Padding(
padding: GridSize.footerContentInsets,
child: const Expanded(
child: SizedBox(height: 40, child: GridAddRowButton()),
),
child: const SizedBox(height: 40, child: GridAddRowButton()),
),
),
),

15
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart
View File

@ -2,6 +2,7 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/type_option
import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_editor.dart';
import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/grid/application/prelude.dart';
import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -168,7 +169,7 @@ class FieldActionCell extends StatelessWidget {
}
},
leftIcon: svgWidget(action.iconName(),
color: enable ? theme.iconColor : theme.disableIconColor),
color: enable ? theme.iconColor : theme.disableIconColor),
);
}
}
@ -215,9 +216,15 @@ extension _FieldActionExtension on FieldAction {
.add(const FieldActionSheetEvent.duplicateField());
break;
case FieldAction.delete:
context
.read<FieldActionSheetBloc>()
.add(const FieldActionSheetEvent.deleteField());
NavigatorAlertDialog(
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
confirm: () {
context
.read<FieldActionSheetBloc>()
.add(const FieldActionSheetEvent.deleteField());
},
).show(context);
break;
}
}

75
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
View File

@ -2,8 +2,13 @@ import 'package:app_flowy/plugins/grid/application/field/field_editor_bloc.dart'
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
import 'package:appflowy_popover/popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/log.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
@ -13,14 +18,16 @@ import 'field_type_option_editor.dart';
class FieldEditor extends StatefulWidget {
final String gridId;
final String fieldName;
final VoidCallback? onRemoved;
final bool isGroupField;
final Function(String)? onDeleted;
final IFieldTypeOptionLoader typeOptionLoader;
const FieldEditor({
required this.gridId,
this.fieldName = "",
required this.typeOptionLoader,
this.onRemoved,
this.isGroupField = false,
this.onDeleted,
Key? key,
}) : super(key: key);
@ -43,10 +50,10 @@ class _FieldEditorState extends State<FieldEditor> {
create: (context) => FieldEditorBloc(
gridId: widget.gridId,
fieldName: widget.fieldName,
isGroupField: widget.isGroupField,
loader: widget.typeOptionLoader,
)..add(const FieldEditorEvent.initial()),
child: BlocBuilder<FieldEditorBloc, FieldEditorState>(
buildWhen: (p, c) => false,
builder: (context, state) {
return ListView(
shrinkWrap: true,
@ -56,6 +63,16 @@ class _FieldEditorState extends State<FieldEditor> {
const VSpace(10),
const _FieldNameCell(),
const VSpace(10),
_DeleteFieldButton(
popoverMutex: popoverMutex,
onDeleted: () {
state.field.fold(
() => Log.error('Can not delete the field'),
(field) => widget.onDeleted?.call(field.id),
);
},
),
const VSpace(10),
_FieldTypeOptionCell(popoverMutex: popoverMutex),
],
);
@ -114,3 +131,55 @@ class _FieldNameCell extends StatelessWidget {
);
}
}
class _DeleteFieldButton extends StatelessWidget {
final PopoverMutex popoverMutex;
final VoidCallback? onDeleted;
const _DeleteFieldButton({
required this.popoverMutex,
required this.onDeleted,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocBuilder<FieldEditorBloc, FieldEditorState>(
buildWhen: (previous, current) => previous != current,
builder: (context, state) {
final enable = !state.canDelete && !state.isGroupField;
Widget button = FlowyButton(
text: FlowyText.medium(
LocaleKeys.grid_field_delete.tr(),
fontSize: 12,
color: enable ? null : theme.shader4,
),
);
if (enable) button = _wrapPopover(button);
return button;
},
);
}
Widget _wrapPopover(Widget widget) {
return AppFlowyStylePopover(
triggerActions: PopoverTriggerActionFlags.click,
constraints: BoxConstraints.loose(const Size(400, 240)),
mutex: popoverMutex,
direction: PopoverDirection.center,
popupBuilder: (popupContext) {
return PopoverAlertView(
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
cancel: () => popoverMutex.state?.close(),
confirm: () {
onDeleted?.call();
popoverMutex.state?.close();
},
popoverMutex: popoverMutex,
);
},
child: widget,
);
}
}

3
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart
View File

@ -66,8 +66,7 @@ class FieldTypeOptionEditor extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: AppFlowyStylePopover(
constraints: BoxConstraints.loose(const Size(460, 440)),
triggerActions:
PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
triggerActions: PopoverTriggerActionFlags.click,
mutex: popoverMutex,
offset: const Offset(20, 0),
popupBuilder: (context) {

5
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart
View File

@ -187,7 +187,10 @@ class CreateFieldButton extends StatelessWidget {
),
hoverColor: theme.shader6,
onTap: () {},
leftIcon: svgWidget("home/add"),
leftIcon: svgWidget(
"home/add",
color: theme.iconColor,
),
),
popupBuilder: (BuildContext popover) {
return FieldEditor(

7
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/builder.dart
View File

@ -54,9 +54,10 @@ Widget? makeTypeOptionWidget({
return builder.build(context);
}
TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder(
{required TypeOptionDataController dataController,
required PopoverMutex popoverMutex}) {
TypeOptionWidgetBuilder makeTypeOptionWidgetBuilder({
required TypeOptionDataController dataController,
required PopoverMutex popoverMutex,
}) {
final gridId = dataController.gridId;
final fieldType = dataController.field.fieldType;

1
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart
View File

@ -114,6 +114,7 @@ class NumberFormatList extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const _FilterTextField(),
const VSpace(10),
BlocBuilder<NumberFormatBloc, NumberFormatState>(
builder: (context, state) {
final cells = state.formats.map((format) {

13
frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_action_sheet.dart
View File

@ -1,4 +1,5 @@
import 'package:app_flowy/plugins/grid/application/row/row_action_sheet_bloc.dart';
import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flowy_infra/image.dart';
@ -150,9 +151,15 @@ extension _RowActionExtension on _RowAction {
.add(const RowActionSheetEvent.duplicateRow());
break;
case _RowAction.delete:
context
.read<RowActionSheetBloc>()
.add(const RowActionSheetEvent.deleteRow());
NavigatorAlertDialog(
title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
confirm: () {
context
.read<RowActionSheetBloc>()
.add(const RowActionSheetEvent.deleteRow());
},
).show(context);
break;
}
}

41
frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart
View File

@ -133,6 +133,7 @@ class _PropertyList extends StatelessWidget {
),
),
),
const VSpace(10),
_CreateFieldButton(
viewId: viewId,
onClosed: () {
@ -144,12 +145,18 @@ class _PropertyList extends StatelessWidget {
);
});
},
onOpened: () {
onOpened: (controller) {
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: FieldEditor(
gridId: viewId,
typeOptionLoader: NewFieldTypeOptionLoader(gridId: viewId),
onDeleted: (fieldId) {
controller.close();
context
.read<RowDetailBloc>()
.add(RowDetailEvent.deleteField(fieldId));
},
),
);
},
@ -163,9 +170,11 @@ class _PropertyList extends StatelessWidget {
class _CreateFieldButton extends StatelessWidget {
final String viewId;
final Widget Function() onOpened;
final Widget Function(PopoverController) onOpened;
final VoidCallback onClosed;
const _CreateFieldButton({
final PopoverController popoverController = PopoverController();
_CreateFieldButton({
required this.viewId,
required this.onOpened,
required this.onClosed,
@ -177,11 +186,13 @@ class _CreateFieldButton extends StatelessWidget {
final theme = context.read<AppTheme>();
return Popover(
controller: popoverController,
triggerActions: PopoverTriggerActionFlags.click,
direction: PopoverDirection.bottomWithLeftAligned,
direction: PopoverDirection.topWithLeftAligned,
onClose: onClosed,
child: SizedBox(
child: Container(
height: 40,
decoration: _makeBoxDecoration(context),
child: FlowyButton(
text: FlowyText.medium(
LocaleKeys.grid_field_newColumn.tr(),
@ -192,7 +203,16 @@ class _CreateFieldButton extends StatelessWidget {
leftIcon: svgWidget("home/add"),
),
),
popupBuilder: (BuildContext context) => onOpened(),
popupBuilder: (BuildContext context) => onOpened(popoverController),
);
}
BoxDecoration _makeBoxDecoration(BuildContext context) {
final theme = context.read<AppTheme>();
final borderSide = BorderSide(color: theme.shader6, width: 1.0);
return BoxDecoration(
color: theme.surface,
border: Border(top: borderSide),
);
}
}
@ -241,16 +261,23 @@ class _RowDetailCellState extends State<_RowDetailCell> {
child: Popover(
controller: popover,
offset: const Offset(20, 0),
popupBuilder: (context) {
popupBuilder: (popoverContext) {
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(240, 200)),
child: FieldEditor(
gridId: widget.cellId.gridId,
fieldName: widget.cellId.fieldContext.field.name,
isGroupField: widget.cellId.fieldContext.isGroupField,
typeOptionLoader: FieldTypeOptionLoader(
gridId: widget.cellId.gridId,
field: widget.cellId.fieldContext.field,
),
onDeleted: (fieldId) {
popover.close();
context
.read<RowDetailBloc>()
.add(RowDetailEvent.deleteField(fieldId));
},
),
);
},

38
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_group.dart
View File

@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_type_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
@ -15,9 +14,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
class GridGroupList extends StatelessWidget {
final String viewId;
final GridFieldController fieldController;
final VoidCallback onDismissed;
const GridGroupList({
required this.viewId,
required this.fieldController,
required this.onDismissed,
Key? key,
}) : super(key: key);
@ -33,6 +34,7 @@ class GridGroupList extends StatelessWidget {
final cells = state.fieldContexts.map((fieldContext) {
Widget cell = _GridGroupCell(
fieldContext: fieldContext,
onSelected: () => onDismissed(),
key: ValueKey(fieldContext.id),
);
@ -56,29 +58,16 @@ class GridGroupList extends StatelessWidget {
),
);
}
void show(BuildContext context) {
FlowyOverlay.of(context).insertWithAnchor(
widget: OverlayContainer(
constraints: BoxConstraints.loose(const Size(260, 400)),
child: this,
),
identifier: identifier(),
anchorContext: context,
anchorDirection: AnchorDirection.bottomRight,
style: FlowyOverlayStyle(blur: false),
);
}
static String identifier() {
return (GridGroupList).toString();
}
}
class _GridGroupCell extends StatelessWidget {
final VoidCallback onSelected;
final GridFieldContext fieldContext;
const _GridGroupCell({required this.fieldContext, Key? key})
: super(key: key);
const _GridGroupCell({
required this.fieldContext,
required this.onSelected,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
@ -97,8 +86,10 @@ class _GridGroupCell extends StatelessWidget {
child: FlowyButton(
text: FlowyText.medium(fieldContext.name, fontSize: 12),
hoverColor: theme.hover,
leftIcon: svgWidget(fieldContext.fieldType.iconName(),
color: theme.iconColor),
leftIcon: svgWidget(
fieldContext.fieldType.iconName(),
color: theme.iconColor,
),
rightIcon: rightIcon,
onTap: () {
context.read<GridGroupBloc>().add(
@ -107,7 +98,8 @@ class _GridGroupCell extends StatelessWidget {
fieldContext.fieldType,
),
);
FlowyOverlay.of(context).remove(GridGroupList.identifier());
onSelected();
// FlowyOverlay.of(context).remove(GridGroupList.identifier());
},
),
);

35
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart
View File

@ -53,14 +53,17 @@ class _SettingButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return Popover(
return AppFlowyStylePopover(
constraints: BoxConstraints.loose(const Size(260, 400)),
triggerActions: PopoverTriggerActionFlags.click,
offset: const Offset(0, 10),
child: FlowyIconButton(
width: 22,
hoverColor: theme.hover,
icon: svgWidget("grid/setting/setting")
.padding(horizontal: 3, vertical: 3),
icon: svgWidget(
"grid/setting/setting",
color: theme.iconColor,
).padding(horizontal: 3, vertical: 3),
),
popupBuilder: (BuildContext context) {
return _GridSettingListPopover(settingContext: settingContext);
@ -85,25 +88,19 @@ class _GridSettingListPopoverState extends State<_GridSettingListPopover> {
@override
Widget build(BuildContext context) {
if (_action == GridSettingAction.properties) {
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(260, 400)),
child: GridPropertyList(
gridId: widget.settingContext.gridId,
fieldController: widget.settingContext.fieldController,
),
return GridPropertyList(
gridId: widget.settingContext.gridId,
fieldController: widget.settingContext.fieldController,
);
}
return OverlayContainer(
constraints: BoxConstraints.loose(const Size(140, 400)),
child: GridSettingList(
settingContext: widget.settingContext,
onAction: (action, settingContext) {
setState(() {
_action = action;
});
},
),
return GridSettingList(
settingContext: widget.settingContext,
onAction: (action, settingContext) {
setState(() {
_action = action;
});
},
);
}
}

2
frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
View File

@ -30,7 +30,7 @@ class NewAppButton extends StatelessWidget {
}
Future<void> _showCreateAppDialog(BuildContext context) async {
return TextFieldDialog(
return NavigatorTextFieldDialog(
title: LocaleKeys.newPageText.tr(),
value: "",
confirm: (newValue) {

2
frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart
View File

@ -126,7 +126,7 @@ class MenuAppHeader extends StatelessWidget {
action.fold(() {}, (action) {
switch (action) {
case AppDisclosureAction.rename:
TextFieldDialog(
NavigatorTextFieldDialog(
title: LocaleKeys.menuAppHeader_renameDialog.tr(),
value: context.read<AppBloc>().state.app.name,
confirm: (newValue) {

2
frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart
View File

@ -109,7 +109,7 @@ class ViewSectionItem extends StatelessWidget {
action.foldRight({}, (action, previous) {
switch (action) {
case ViewDisclosureAction.rename:
TextFieldDialog(
NavigatorTextFieldDialog(
title: LocaleKeys.disclosureAction_rename.tr(),
value: context.read<ViewBloc>().state.view.name,
confirm: (newValue) {

104
frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
View File

@ -1,3 +1,4 @@
import 'package:appflowy_popover/popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
@ -15,13 +16,13 @@ import 'package:textstyle_extensions/textstyle_extensions.dart';
export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
class TextFieldDialog extends StatefulWidget {
class NavigatorTextFieldDialog extends StatefulWidget {
final String value;
final String title;
final void Function()? cancel;
final void Function(String) confirm;
const TextFieldDialog({
const NavigatorTextFieldDialog({
required this.title,
required this.value,
required this.confirm,
@ -30,10 +31,10 @@ class TextFieldDialog extends StatefulWidget {
}) : super(key: key);
@override
State<TextFieldDialog> createState() => _CreateTextFieldDialog();
State<NavigatorTextFieldDialog> createState() => _CreateTextFieldDialog();
}
class _CreateTextFieldDialog extends State<TextFieldDialog> {
class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
String newValue = "";
@override
@ -56,7 +57,8 @@ class _CreateTextFieldDialog extends State<TextFieldDialog> {
FlowyFormTextInput(
hintText: LocaleKeys.dialogCreatePageNameHint.tr(),
initialValue: widget.value,
textStyle: const TextStyle(fontSize: 24, fontWeight: FontWeight.w400),
textStyle:
const TextStyle(fontSize: 24, fontWeight: FontWeight.w400),
autoFocus: true,
onChanged: (text) {
newValue = text;
@ -70,11 +72,13 @@ class _CreateTextFieldDialog extends State<TextFieldDialog> {
OkCancelButton(
onOkPressed: () {
widget.confirm(newValue);
Navigator.of(context).pop();
},
onCancelPressed: () {
if (widget.cancel != null) {
widget.cancel!();
}
Navigator.of(context).pop();
},
)
],
@ -83,12 +87,14 @@ class _CreateTextFieldDialog extends State<TextFieldDialog> {
}
}
class FlowyAlertDialog extends StatefulWidget {
class PopoverAlertView extends StatelessWidget {
final PopoverMutex popoverMutex;
final String title;
final void Function()? cancel;
final void Function()? confirm;
const FlowyAlertDialog({
const PopoverAlertView({
required this.popoverMutex,
required this.title,
this.confirm,
this.cancel,
@ -96,10 +102,46 @@ class FlowyAlertDialog extends StatefulWidget {
}) : super(key: key);
@override
State<FlowyAlertDialog> createState() => _CreateFlowyAlertDialog();
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return StyledDialog(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
...[
FlowyText.medium(title, color: theme.shader4),
],
if (confirm != null) ...[
const VSpace(20),
OkCancelButton(
onOkPressed: confirm,
onCancelPressed: cancel,
)
]
],
),
);
}
}
class _CreateFlowyAlertDialog extends State<FlowyAlertDialog> {
class NavigatorAlertDialog extends StatefulWidget {
final String title;
final void Function()? cancel;
final void Function()? confirm;
const NavigatorAlertDialog({
required this.title,
this.confirm,
this.cancel,
Key? key,
}) : super(key: key);
@override
State<NavigatorAlertDialog> createState() => _CreateFlowyAlertDialog();
}
class _CreateFlowyAlertDialog extends State<NavigatorAlertDialog> {
@override
void initState() {
super.initState();
@ -118,10 +160,13 @@ class _CreateFlowyAlertDialog extends State<FlowyAlertDialog> {
],
if (widget.confirm != null) ...[
const VSpace(20),
OkCancelButton(
onOkPressed: widget.confirm!,
onCancelPressed: widget.confirm,
)
OkCancelButton(onOkPressed: () {
widget.confirm?.call();
Navigator.of(context).pop();
}, onCancelPressed: () {
widget.cancel?.call();
Navigator.of(context).pop();
})
]
],
),
@ -129,7 +174,7 @@ class _CreateFlowyAlertDialog extends State<FlowyAlertDialog> {
}
}
class OkCancelDialog extends StatelessWidget {
class NavigatorOkCancelDialog extends StatelessWidget {
final VoidCallback? onOkPressed;
final VoidCallback? onCancelPressed;
final String? okTitle;
@ -138,7 +183,7 @@ class OkCancelDialog extends StatelessWidget {
final String message;
final double? maxWidth;
const OkCancelDialog(
const NavigatorOkCancelDialog(
{Key? key,
this.onOkPressed,
this.onCancelPressed,
@ -158,7 +203,7 @@ class OkCancelDialog extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
if (title != null) ...[
Text(title!.toUpperCase(), style: TextStyles.T1.textColor(theme.shader1)),
FlowyText.medium(title!.toUpperCase(), color: theme.shader1),
VSpace(Insets.sm * 1.5),
Container(color: theme.bg1, height: 1),
VSpace(Insets.m * 1.5),
@ -166,8 +211,14 @@ class OkCancelDialog extends StatelessWidget {
Text(message, style: TextStyles.Body1.textHeight(1.5)),
SizedBox(height: Insets.l),
OkCancelButton(
onOkPressed: onOkPressed,
onCancelPressed: onCancelPressed,
onOkPressed: () {
onOkPressed?.call();
Navigator.of(context).pop();
},
onCancelPressed: () {
onCancelPressed?.call();
Navigator.of(context).pop();
},
okTitle: okTitle?.toUpperCase(),
cancelTitle: cancelTitle?.toUpperCase(),
)
@ -185,7 +236,12 @@ class OkCancelButton extends StatelessWidget {
final double? minHeight;
const OkCancelButton(
{Key? key, this.onOkPressed, this.onCancelPressed, this.okTitle, this.cancelTitle, this.minHeight})
{Key? key,
this.onOkPressed,
this.onCancelPressed,
this.okTitle,
this.cancelTitle,
this.minHeight})
: super(key: key);
@override
@ -198,20 +254,14 @@ class OkCancelButton extends StatelessWidget {
if (onCancelPressed != null)
SecondaryTextButton(
cancelTitle ?? LocaleKeys.button_Cancel.tr(),
onPressed: () {
onCancelPressed!();
AppGlobals.nav.pop();
},
onPressed: onCancelPressed,
bigMode: true,
),
HSpace(Insets.m),
if (onOkPressed != null)
PrimaryTextButton(
okTitle ?? LocaleKeys.button_OK.tr(),
onPressed: () {
onOkPressed!();
AppGlobals.nav.pop();
},
onPressed: onOkPressed,
bigMode: true,
),
],

3
frontend/app_flowy/macos/Runner.xcodeproj/project.pbxproj
View File

@ -416,6 +416,7 @@
isa = XCBuildConfiguration;
baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */;
buildSettings = {
ARCHS = arm64;
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements;
@ -549,6 +550,7 @@
isa = XCBuildConfiguration;
baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */;
buildSettings = {
ARCHS = arm64;
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements;
@ -573,6 +575,7 @@
isa = XCBuildConfiguration;
baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */;
buildSettings = {
ARCHS = arm64;
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = Runner/Release.entitlements;

4
frontend/app_flowy/packages/appflowy_popover/lib/popover.dart
View File

@ -59,7 +59,7 @@ class Popover extends StatefulWidget {
final Decoration? maskDecoration;
/// The function used to build the popover.
final Widget Function(BuildContext context) popupBuilder;
final Widget? Function(BuildContext context) popupBuilder;
final int triggerActions;
@ -265,7 +265,7 @@ class _PopoverMaskState extends State<_PopoverMask> {
}
class PopoverContainer extends StatefulWidget {
final Widget Function(BuildContext context) popupBuilder;
final Widget? Function(BuildContext context) popupBuilder;
final PopoverDirection direction;
final PopoverLink popoverLink;
final Offset offset;

2
frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart
View File

@ -35,6 +35,8 @@ class AppFlowyStylePopover extends StatelessWidget {
mutex: mutex,
triggerActions: triggerActions,
popupBuilder: (context) {
final child = popupBuilder(context);
debugPrint('$child popover');
return OverlayContainer(
constraints: constraints,
child: popupBuilder(context),

26
frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
View File

@ -1,22 +1,30 @@
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
import 'base_styled_button.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
class PrimaryTextButton extends StatelessWidget {
final String label;
final VoidCallback? onPressed;
final bool bigMode;
const PrimaryTextButton(this.label, {Key? key, this.onPressed, this.bigMode = false}) : super(key: key);
const PrimaryTextButton(this.label,
{Key? key, this.onPressed, this.bigMode = false})
: super(key: key);
@override
Widget build(BuildContext context) {
TextStyle txtStyle = TextStyles.Btn.textColor(Colors.white);
return PrimaryButton(bigMode: bigMode, onPressed: onPressed, child: Text(label, style: txtStyle));
final theme = context.watch<AppTheme>();
return PrimaryButton(
bigMode: bigMode,
onPressed: onPressed,
child: FlowyText.regular(
label,
color: theme.surface,
),
);
}
}
@ -25,14 +33,16 @@ class PrimaryButton extends StatelessWidget {
final VoidCallback? onPressed;
final bool bigMode;
const PrimaryButton({Key? key, required this.child, this.onPressed, this.bigMode = false}) : super(key: key);
const PrimaryButton(
{Key? key, required this.child, this.onPressed, this.bigMode = false})
: super(key: key);
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BaseStyledButton(
minWidth: bigMode ? 170 : 78,
minHeight: bigMode ? 48 : 28,
minWidth: bigMode ? 100 : 80,
minHeight: bigMode ? 40 : 38,
contentPadding: EdgeInsets.zero,
bgColor: theme.main1,
hoverColor: theme.main1,

25
frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
View File

@ -1,9 +1,8 @@
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// ignore: import_of_legacy_library_into_null_safe
import 'package:textstyle_extensions/textstyle_extensions.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
import 'base_styled_button.dart';
@ -12,13 +11,21 @@ class SecondaryTextButton extends StatelessWidget {
final VoidCallback? onPressed;
final bool bigMode;
const SecondaryTextButton(this.label, {Key? key, this.onPressed, this.bigMode = false}) : super(key: key);
const SecondaryTextButton(this.label,
{Key? key, this.onPressed, this.bigMode = false})
: super(key: key);
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
TextStyle txtStyle = TextStyles.Btn.textColor(theme.main1);
return SecondaryButton(bigMode: bigMode, onPressed: onPressed, child: Text(label, style: txtStyle));
return SecondaryButton(
bigMode: bigMode,
onPressed: onPressed,
child: FlowyText.regular(
label,
color: theme.main1,
),
);
}
}
@ -27,14 +34,16 @@ class SecondaryButton extends StatelessWidget {
final VoidCallback? onPressed;
final bool bigMode;
const SecondaryButton({Key? key, required this.child, this.onPressed, this.bigMode = false}) : super(key: key);
const SecondaryButton(
{Key? key, required this.child, this.onPressed, this.bigMode = false})
: super(key: key);
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BaseStyledButton(
minWidth: bigMode ? 170 : 78,
minHeight: bigMode ? 48 : 28,
minWidth: bigMode ? 100 : 80,
minHeight: bigMode ? 40 : 38,
contentPadding: EdgeInsets.zero,
bgColor: theme.shader7,
hoverColor: theme.hover,

2
frontend/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/dialog_size.dart
View File

@ -1,3 +1,3 @@
class DialogSize {
static double get minDialogWidth => 480;
static double get minDialogWidth => 400;
}

6
frontend/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart
View File

@ -65,7 +65,7 @@ class StyledDialog extends StatelessWidget {
return FocusTraversalGroup(
child: Container(
margin: margin ?? EdgeInsets.all(Insets.lGutter * 2),
margin: margin ?? EdgeInsets.all(Insets.sm * 2),
alignment: Alignment.center,
child: Container(
constraints: BoxConstraints(
@ -133,7 +133,9 @@ class StyledDialogRoute<T> extends PopupRoute<T> {
super(settings: settings, filter: barrier.filter);
@override
bool get barrierDismissible => barrier.dismissible;
bool get barrierDismissible {
return barrier.dismissible;
}
@override
String get barrierLabel => barrier.label;