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

chore: grid/kanban toolbar UI improvements (#1634)

Browse Source
This commit is contained in:
Richard Shiue 2023-01-04 10:21:00 +08:00 committed by GitHub
parent c5b15daac4
commit 515cd50ac4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 79 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:styled_widget/styled_widget.dart';
import 'board_toolbar.dart';
@ -181,6 +182,6 @@ class _BoardSettingListPopoverState extends State<BoardSettingListPopover> {
onAction: (action, settingContext) {
setState(() => _action = action);
},
);
).padding(all: 6.0);
}
}

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

@ -1,4 +1,5 @@
import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme_extension.dart';
@ -67,12 +68,12 @@ class _SettingButtonState extends State<_SettingButton> {
direction: PopoverDirection.leftWithTopAligned,
triggerActions: PopoverTriggerFlags.none,
constraints: BoxConstraints.loose(const Size(260, 400)),
margin: EdgeInsets.zero,
child: FlowyTextButton(
LocaleKeys.settings_title.tr(),
fontSize: 14,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,
padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
padding: GridSize.typeOptionContentInsets,
onPressed: () {
popoverController.show();
},

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

@ -8,6 +8,7 @@ import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/sizes.dart';
import '../filter/create_filter_list.dart';
class FilterButton extends StatefulWidget {
@ -28,39 +29,34 @@ class _FilterButtonState extends State<FilterButton> {
? null
: Theme.of(context).colorScheme.primary;
return wrapPopover(
return _wrapPopover(
context,
SizedBox(
height: 26,
child: FlowyTextButton(
LocaleKeys.grid_settings_filter.tr(),
fontSize: 13,
fontColor: textColor,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,
padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
onPressed: () {
final bloc = context.read<GridFilterMenuBloc>();
if (bloc.state.filters.isEmpty) {
_popoverController.show();
} else {
bloc.add(const GridFilterMenuEvent.toggleMenu());
}
},
),
FlowyTextButton(
LocaleKeys.grid_settings_filter.tr(),
fontColor: textColor,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,
padding: GridSize.typeOptionContentInsets,
onPressed: () {
final bloc = context.read<GridFilterMenuBloc>();
if (bloc.state.filters.isEmpty) {
_popoverController.show();
} else {
bloc.add(const GridFilterMenuEvent.toggleMenu());
}
},
),
);
},
);
}
Widget wrapPopover(BuildContext buildContext, Widget child) {
Widget _wrapPopover(BuildContext buildContext, Widget child) {
return AppFlowyPopover(
controller: _popoverController,
direction: PopoverDirection.leftWithTopAligned,
constraints: BoxConstraints.loose(const Size(200, 300)),
offset: const Offset(0, 10),
margin: const EdgeInsets.all(6),
triggerActions: PopoverTriggerFlags.none,
child: child,
popupBuilder: (BuildContext context) {

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

@ -46,12 +46,10 @@ class GridGroupList extends StatelessWidget {
return ListView.separated(
shrinkWrap: true,
itemCount: cells.length,
itemBuilder: (BuildContext context, int index) {
return cells[index];
},
separatorBuilder: (BuildContext context, int index) {
return VSpace(GridSize.typeOptionSeparatorHeight);
},
itemBuilder: (BuildContext context, int index) => cells[index],
separatorBuilder: (BuildContext context, int index) =>
VSpace(GridSize.typeOptionSeparatorHeight),
padding: const EdgeInsets.all(6.0),
);
},
),

79
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart
View File

@ -59,12 +59,10 @@ class _GridPropertyListState extends State<GridPropertyList> {
controller: ScrollController(),
shrinkWrap: true,
itemCount: cells.length,
itemBuilder: (BuildContext context, int index) {
return cells[index];
},
separatorBuilder: (BuildContext context, int index) {
return VSpace(GridSize.typeOptionSeparatorHeight);
},
itemBuilder: (BuildContext context, int index) => cells[index],
separatorBuilder: (BuildContext context, int index) =>
VSpace(GridSize.typeOptionSeparatorHeight),
padding: const EdgeInsets.symmetric(vertical: 6.0),
);
},
),
@ -72,10 +70,11 @@ class _GridPropertyListState extends State<GridPropertyList> {
}
}
class _GridPropertyCell extends StatelessWidget {
class _GridPropertyCell extends StatefulWidget {
final FieldInfo fieldInfo;
final String gridId;
final PopoverMutex popoverMutex;
const _GridPropertyCell({
required this.gridId,
required this.fieldInfo,
@ -83,55 +82,65 @@ class _GridPropertyCell extends StatelessWidget {
Key? key,
}) : super(key: key);
@override
State<_GridPropertyCell> createState() => _GridPropertyCellState();
}
class _GridPropertyCellState extends State<_GridPropertyCell> {
late PopoverController _popoverController;
@override
void initState() {
_popoverController = PopoverController();
super.initState();
}
@override
Widget build(BuildContext context) {
final checkmark = svgWidget(
fieldInfo.visibility ? 'home/show' : 'home/hide',
widget.fieldInfo.visibility ? 'home/show' : 'home/hide',
color: Theme.of(context).colorScheme.onSurface,
);
return Row(
children: [
Expanded(
child: SizedBox(
height: GridSize.typeOptionItemHeight,
child: _editFieldButton(context),
),
),
FlowyIconButton(
width: GridSize.typeOptionItemHeight,
onPressed: () {
context.read<GridPropertyBloc>().add(
GridPropertyEvent.setFieldVisibility(
fieldInfo.id, !fieldInfo.visibility));
},
icon: checkmark.padding(all: 6),
)
],
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: _editFieldButton(context, checkmark),
);
}
Widget _editFieldButton(BuildContext context) {
Widget _editFieldButton(BuildContext context, Widget checkmark) {
return AppFlowyPopover(
mutex: popoverMutex,
mutex: widget.popoverMutex,
controller: _popoverController,
offset: const Offset(20, 0),
direction: PopoverDirection.leftWithTopAligned,
constraints: BoxConstraints.loose(const Size(240, 400)),
triggerActions: PopoverTriggerFlags.none,
margin: EdgeInsets.zero,
child: FlowyButton(
text: FlowyText.medium(fieldInfo.name),
text: FlowyText.medium(widget.fieldInfo.name),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
widget.fieldInfo.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
),
rightIcon: FlowyIconButton(
hoverColor: Colors.transparent,
onPressed: () {
context.read<GridPropertyBloc>().add(
GridPropertyEvent.setFieldVisibility(
widget.fieldInfo.id, !widget.fieldInfo.visibility));
},
icon: checkmark.padding(all: 6.0),
),
onTap: () => _popoverController.show(),
).padding(horizontal: 6.0),
popupBuilder: (BuildContext context) {
return FieldEditor(
gridId: gridId,
fieldName: fieldInfo.name,
gridId: widget.gridId,
fieldName: widget.fieldInfo.name,
typeOptionLoader: FieldTypeOptionLoader(
gridId: gridId,
field: fieldInfo.field,
gridId: widget.gridId,
field: widget.fieldInfo.field,
),
);
},

19
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/setting_button.dart
View File

@ -8,7 +8,9 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:styled_widget/styled_widget.dart';
import '../../layout/sizes.dart';
import 'grid_property.dart';
import 'grid_setting.dart';
@ -20,11 +22,11 @@ class SettingButton extends StatefulWidget {
}
class _SettingButtonState extends State<SettingButton> {
late PopoverController popoverController;
late PopoverController _popoverController;
@override
void initState() {
popoverController = PopoverController();
_popoverController = PopoverController();
super.initState();
}
@ -41,21 +43,18 @@ class _SettingButtonState extends State<SettingButton> {
},
builder: (context, settingContext) {
return AppFlowyPopover(
controller: popoverController,
controller: _popoverController,
constraints: BoxConstraints.loose(const Size(260, 400)),
direction: PopoverDirection.leftWithTopAligned,
offset: const Offset(0, 10),
margin: const EdgeInsets.all(6),
margin: EdgeInsets.zero,
triggerActions: PopoverTriggerFlags.none,
child: FlowyTextButton(
LocaleKeys.settings_title.tr(),
fontSize: 13,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,
padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
onPressed: () {
popoverController.show();
},
padding: GridSize.typeOptionContentInsets,
onPressed: () => _popoverController.show(),
),
popupBuilder: (BuildContext context) {
return _GridSettingListPopover(settingContext: settingContext);
@ -95,6 +94,6 @@ class _GridSettingListPopoverState extends State<_GridSettingListPopover> {
_action = action;
});
},
);
).padding(all: 6.0);
}
}