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: update _OptionList cell UI

Browse Source
This commit is contained in:
appflowy 2022-05-18 16:14:11 +08:00
parent 4840d23fff
commit 5f5177355f
3 changed files with 57 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/extension.dart
View File

@ -1,5 +1,8 @@
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
@ -106,3 +109,39 @@ class SelectOptionTag extends StatelessWidget {
// );
}
}
class SelectOptionTagCell extends StatelessWidget {
final List<Widget> children;
final void Function(SelectOption) onSelected;
final SelectOption option;
const SelectOptionTagCell({
required this.option,
required this.onSelected,
this.children = const [],
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return Stack(
fit: StackFit.expand,
children: [
FlowyHover(
style: HoverStyle(hoverColor: theme.hover),
child: InkWell(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: Row(children: [
SelectOptionTag.fromSelectOption(context: context, option: option),
const Spacer(),
...children,
]),
),
onTap: () => onSelected(option),
),
),
],
);
}
}

29
frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/select_option_editor.dart
View File

@ -239,30 +239,13 @@ class _SelectOptionCell extends StatelessWidget {
}
Widget _body(AppTheme theme, BuildContext context) {
return Stack(
fit: StackFit.expand,
return SelectOptionTagCell(
option: option,
onSelected: (option) {
context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
},
children: [
FlowyHover(
style: HoverStyle(hoverColor: theme.hover),
builder: (_, onHover) {
return InkWell(
child: Row(children: [
const HSpace(6),
SelectOptionTag(
name: option.name,
color: option.color.make(context),
isSelected: isSelected,
),
const Spacer(),
if (isSelected) svgWidget("grid/checkmark"),
const HSpace(6),
]),
onTap: () {
context.read<SelectOptionCellEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
},
);
},
),
if (isSelected) svgWidget("grid/checkmark"),
],
);
}

17
frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/select_option.dart
View File

@ -1,10 +1,12 @@
import 'package:app_flowy/workspace/application/grid/field/type_option/select_option_type_option_bloc.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/select_option_cell/extension.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/common/text_field.dart';
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor_pannel.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
@ -183,13 +185,18 @@ class _OptionCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(option.name, fontSize: 12),
hoverColor: theme.hover,
onTap: () => onSelected(option),
rightIcon: svgWidget("grid/details", color: theme.iconColor),
child: SelectOptionTagCell(
option: option,
onSelected: onSelected,
children: [
svgWidget(
"grid/details",
color: theme.iconColor,
),
],
),
);
}