diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart index 5c837fff8f..a4b387639f 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart @@ -1,13 +1,11 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; -import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart'; - -import 'package:flowy_infra/theme_extension.dart'; -import 'package:flowy_infra/size.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; -import 'package:flowy_infra_ui/style_widget/hover.dart'; -import 'package:flutter/material.dart'; -import 'package:easy_localization/easy_localization.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart'; +import 'package:easy_localization/easy_localization.dart'; +import 'package:flowy_infra/size.dart'; +import 'package:flowy_infra/theme_extension.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:flutter/material.dart'; extension SelectOptionColorExtension on SelectOptionColorPB { Color toColor(BuildContext context) { @@ -131,33 +129,28 @@ class SelectOptionTagCell extends StatelessWidget { @override Widget build(BuildContext context) { - return FlowyHover( - style: HoverStyle( - hoverColor: AFThemeExtension.of(context).lightGreyHover, - ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Expanded( - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: onSelected, - child: Align( - alignment: AlignmentDirectional.centerStart, - child: Padding( - padding: const EdgeInsets.all(5.0), - child: SelectOptionTag( - option: option, - padding: - const EdgeInsets.symmetric(horizontal: 8, vertical: 1), - ), + return Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Expanded( + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: onSelected, + child: Align( + alignment: AlignmentDirectional.centerStart, + child: Padding( + padding: const EdgeInsets.all(5.0), + child: SelectOptionTag( + option: option, + padding: + const EdgeInsets.symmetric(horizontal: 8, vertical: 1), ), ), ), ), - ...children, - ], - ), + ), + ...children, + ], ); } } diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart index bbe902bcbd..6160895ba0 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart @@ -6,9 +6,9 @@ import 'package:appflowy/plugins/database_view/application/cell/cell_controller_ import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart'; import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; - import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:textfield_tags/textfield_tags.dart'; @@ -340,9 +340,16 @@ class _SelectOptionCellState extends State<_SelectOptionCell> { asBarrier: true, constraints: BoxConstraints.loose(const Size(200, 470)), mutex: widget.popoverMutex, + clickHandler: PopoverClickHandler.gestureDetector, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0), - child: child, + child: FlowyHover( + resetHoverOnRebuild: false, + style: HoverStyle( + hoverColor: AFThemeExtension.of(context).lightGreyHover, + ), + child: child, + ), ), popupBuilder: (BuildContext popoverContext) { return SelectOptionTypeOptionEditor( diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor_bloc.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor_bloc.dart index 71231a31d7..eb71eaee37 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor_bloc.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor_bloc.dart @@ -1,10 +1,12 @@ import 'dart:async'; + import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart'; +import 'package:appflowy_backend/log.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart'; import 'package:dartz/dartz.dart'; -import 'package:appflowy_backend/log.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:freezed_annotation/freezed_annotation.dart'; + import '../../../../application/cell/select_option_cell_service.dart'; part 'select_option_editor_bloc.freezed.dart'; @@ -61,9 +63,27 @@ class SelectOptionCellEditorBloc }, selectOption: (_SelectOption value) async { await _selectOptionService.select(optionIds: [value.optionId]); + final selectedOption = [ + ...state.selectedOptions, + state.options.firstWhere( + (element) => element.id == value.optionId, + ), + ]; + emit( + state.copyWith( + selectedOptions: selectedOption, + ), + ); }, unSelectOption: (_UnSelectOption value) async { await _selectOptionService.unSelect(optionIds: [value.optionId]); + final selectedOptions = [...state.selectedOptions] + ..removeWhere((e) => e.id == value.optionId); + emit( + state.copyWith( + selectedOptions: selectedOptions, + ), + ); }, trySelectOption: (_TrySelectOption value) { _trySelectOption(value.optionName, emit); diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart index 9303b76b27..5f83d0a7a8 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart @@ -138,7 +138,7 @@ class _PropertyCellState extends State<_PropertyCell> { final PopoverController _popoverController = PopoverController(); final PopoverController _fieldPopoverController = PopoverController(); - bool _isFieldHover = false; + final ValueNotifier _isFieldHover = ValueNotifier(false); @override Widget build(BuildContext context) { @@ -159,15 +159,19 @@ class _PropertyCellState extends State<_PropertyCell> { triggerActions: PopoverTriggerFlags.none, direction: PopoverDirection.bottomWithLeftAligned, popupBuilder: (popoverContext) => buildFieldEditor(), - child: _isFieldHover - ? BlockActionButton( - onTap: () => _fieldPopoverController.show(), - svg: FlowySvgs.drag_element_s, - richMessage: TextSpan( - text: LocaleKeys.grid_rowPage_fieldDragElementTooltip.tr(), - ), - ) - : const SizedBox.shrink(), + child: ValueListenableBuilder( + valueListenable: _isFieldHover, + builder: ((context, value, child) { + return value ? child! : const SizedBox.shrink(); + }), + child: BlockActionButton( + onTap: () => _fieldPopoverController.show(), + svg: FlowySvgs.drag_element_s, + richMessage: TextSpan( + text: LocaleKeys.grid_rowPage_fieldDragElementTooltip.tr(), + ), + ), + ), ), ), ); @@ -185,16 +189,21 @@ class _PropertyCellState extends State<_PropertyCell> { margin: const EdgeInsets.only(bottom: 8), constraints: const BoxConstraints(minHeight: 30), child: MouseRegion( - onEnter: (event) => setState(() => _isFieldHover = true), - onExit: (event) => setState(() => _isFieldHover = false), + onEnter: (event) => _isFieldHover.value = true, + onExit: (event) => _isFieldHover.value = false, child: Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ - ReorderableDragStartListener( - index: widget.index, - enabled: _isFieldHover, - child: dragThumb, + ValueListenableBuilder( + valueListenable: _isFieldHover, + builder: (context, value, _) { + return ReorderableDragStartListener( + index: widget.index, + enabled: value, + child: dragThumb, + ); + }, ), const HSpace(4), AppFlowyPopover(