diff --git a/frontend/app_flowy/assets/images/editor/Icons 16/Yen.svg b/frontend/app_flowy/assets/images/editor/Icons 16/Yen.svg deleted file mode 100644 index b7cf1d361d..0000000000 --- a/frontend/app_flowy/assets/images/editor/Icons 16/Yen.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/app_flowy/assets/images/editor/Icons 16/Sort/Ascending.svg b/frontend/app_flowy/assets/images/grid/setting/ascending.svg similarity index 100% rename from frontend/app_flowy/assets/images/editor/Icons 16/Sort/Ascending.svg rename to frontend/app_flowy/assets/images/grid/setting/ascending.svg diff --git a/frontend/app_flowy/assets/images/editor/Icons 16/Sort/Descending.svg b/frontend/app_flowy/assets/images/grid/setting/descending.svg similarity index 100% rename from frontend/app_flowy/assets/images/editor/Icons 16/Sort/Descending.svg rename to frontend/app_flowy/assets/images/grid/setting/descending.svg diff --git a/frontend/app_flowy/assets/images/editor/Icons 16/Filter.svg b/frontend/app_flowy/assets/images/grid/setting/filter.svg similarity index 100% rename from frontend/app_flowy/assets/images/editor/Icons 16/Filter.svg rename to frontend/app_flowy/assets/images/grid/setting/filter.svg diff --git a/frontend/app_flowy/assets/images/editor/Icons 16/Properties.svg b/frontend/app_flowy/assets/images/grid/setting/properties.svg similarity index 100% rename from frontend/app_flowy/assets/images/editor/Icons 16/Properties.svg rename to frontend/app_flowy/assets/images/grid/setting/properties.svg diff --git a/frontend/app_flowy/assets/images/grid/setting/setting.svg b/frontend/app_flowy/assets/images/grid/setting/setting.svg new file mode 100644 index 0000000000..3d632703ab --- /dev/null +++ b/frontend/app_flowy/assets/images/grid/setting/setting.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/app_flowy/assets/images/grid/setting/sort.svg b/frontend/app_flowy/assets/images/grid/setting/sort.svg new file mode 100644 index 0000000000..06e17d62a9 --- /dev/null +++ b/frontend/app_flowy/assets/images/grid/setting/sort.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/app_flowy/assets/translations/en.json b/frontend/app_flowy/assets/translations/en.json index b9ab426fbd..9d73711cc7 100644 --- a/frontend/app_flowy/assets/translations/en.json +++ b/frontend/app_flowy/assets/translations/en.json @@ -143,6 +143,11 @@ } }, "grid": { + "settings": { + "filter": "Filter", + "sortBy": "Sort by", + "Properties": "Properties" + }, "field": { "hide": "Hide", "insertLeft": "Insert Left", diff --git a/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart b/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart index 8124241cf4..9a02863345 100644 --- a/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart +++ b/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart @@ -170,8 +170,8 @@ class PasswordTextField extends StatelessWidget { return RoundedInputField( obscureText: true, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500), - obscureIcon: svg("home/hide"), - obscureHideIcon: svg("home/show"), + obscureIcon: svgWidget("home/hide"), + obscureHideIcon: svgWidget("home/show"), hintText: LocaleKeys.signIn_passwordHint.tr(), normalBorderColor: theme.shader4, errorBorderColor: theme.red, diff --git a/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart b/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart index 06d4db6da2..9f95a1db75 100644 --- a/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart +++ b/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart @@ -134,8 +134,8 @@ class PasswordTextField extends StatelessWidget { builder: (context, state) { return RoundedInputField( obscureText: true, - obscureIcon: svg("home/hide"), - obscureHideIcon: svg("home/show"), + obscureIcon: svgWidget("home/hide"), + obscureHideIcon: svgWidget("home/show"), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500), hintText: LocaleKeys.signUp_passwordHint.tr(), normalBorderColor: theme.shader4, @@ -162,8 +162,8 @@ class RepeatPasswordTextField extends StatelessWidget { builder: (context, state) { return RoundedInputField( obscureText: true, - obscureIcon: svg("home/hide"), - obscureHideIcon: svg("home/show"), + obscureIcon: svgWidget("home/hide"), + obscureHideIcon: svgWidget("home/show"), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500), hintText: LocaleKeys.signUp_repeatPasswordHint.tr(), normalBorderColor: theme.shader4, diff --git a/frontend/app_flowy/lib/user/presentation/widgets/background.dart b/frontend/app_flowy/lib/user/presentation/widgets/background.dart index 86dfab7ffe..225f7f0080 100644 --- a/frontend/app_flowy/lib/user/presentation/widgets/background.dart +++ b/frontend/app_flowy/lib/user/presentation/widgets/background.dart @@ -44,7 +44,7 @@ class FlowyLogoTitle extends StatelessWidget { children: [ SizedBox.fromSize( size: logoSize, - child: svg("flowy_logo"), + child: svgWidget("flowy_logo"), ), const VSpace(30), Text( diff --git a/frontend/app_flowy/lib/workspace/application/grid/prelude.dart b/frontend/app_flowy/lib/workspace/application/grid/prelude.dart index 8b13a4f34d..6c766ee218 100644 --- a/frontend/app_flowy/lib/workspace/application/grid/prelude.dart +++ b/frontend/app_flowy/lib/workspace/application/grid/prelude.dart @@ -23,3 +23,6 @@ export 'cell_bloc/selection_cell_bloc.dart'; export 'cell_bloc/date_cell_bloc.dart'; export 'cell_bloc/checkbox_cell_bloc.dart'; export 'cell_bloc/cell_service.dart'; + +// Setting +export 'setting/setting_bloc.dart'; diff --git a/frontend/app_flowy/lib/workspace/application/grid/setting/setting_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/setting/setting_bloc.dart new file mode 100644 index 0000000000..38071155af --- /dev/null +++ b/frontend/app_flowy/lib/workspace/application/grid/setting/setting_bloc.dart @@ -0,0 +1,47 @@ +import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:freezed_annotation/freezed_annotation.dart'; +import 'dart:async'; +import 'package:dartz/dartz.dart'; + +part 'setting_bloc.freezed.dart'; + +class GridSettingBloc extends Bloc { + final String gridId; + GridSettingBloc({required this.gridId}) : super(GridSettingState.initial()) { + on( + (event, emit) async { + event.map(performAction: (_PerformAction value) { + emit(state.copyWith(selectedAction: Some(value.action))); + }); + }, + ); + } + + @override + Future close() async { + return super.close(); + } +} + +@freezed +class GridSettingEvent with _$GridSettingEvent { + const factory GridSettingEvent.performAction(GridSettingAction action) = _PerformAction; +} + +@freezed +class GridSettingState with _$GridSettingState { + const factory GridSettingState({ + required Option selectedAction, + }) = _GridSettingState; + + factory GridSettingState.initial() => GridSettingState( + selectedAction: none(), + ); +} + +enum GridSettingAction { + filter, + sortBy, + properties, +} diff --git a/frontend/app_flowy/lib/workspace/application/view/view_ext.dart b/frontend/app_flowy/lib/workspace/application/view/view_ext.dart index cf80a820a0..78230e1311 100644 --- a/frontend/app_flowy/lib/workspace/application/view/view_ext.dart +++ b/frontend/app_flowy/lib/workspace/application/view/view_ext.dart @@ -39,7 +39,7 @@ extension ViewExtension on View { thumbnail = "file_icon"; } - final Widget widget = svg(thumbnail, color: iconColor); + final Widget widget = svgWidget(thumbnail, color: iconColor); return widget; } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart index 9e696e8a73..6df78a67cc 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart @@ -28,7 +28,7 @@ class AddButton extends StatelessWidget { onSelected: onSelected, ).show(context); }, - icon: svg("home/add").padding(horizontal: 3, vertical: 3), + icon: svgWidget("home/add").padding(horizontal: 3, vertical: 3), ); } } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart index b773814f2d..ff1d6e6822 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart @@ -153,9 +153,9 @@ extension AppDisclosureExtension on AppDisclosureAction { Widget get icon { switch (this) { case AppDisclosureAction.rename: - return svg('editor/edit', color: const Color(0xffe5e5e5)); + return svgWidget('editor/edit', color: const Color(0xffe5e5e5)); case AppDisclosureAction.delete: - return svg('editor/delete', color: const Color(0xffe5e5e5)); + return svgWidget('editor/delete', color: const Color(0xffe5e5e5)); } } } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart index a706ae5019..c9a02a9de7 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart @@ -32,7 +32,7 @@ class ViewDisclosureButton extends StatelessWidget with ActionList _render(context, onHover, state, theme.iconColor), - isOnSelected: () => state.isEditing || isSelected, + setSelected: () => state.isEditing || isSelected, ), ); }, @@ -126,11 +126,11 @@ extension ViewDisclosureExtension on ViewDisclosureAction { Widget get icon { switch (this) { case ViewDisclosureAction.rename: - return svg('editor/edit', color: const Color(0xff999999)); + return svgWidget('editor/edit', color: const Color(0xff999999)); case ViewDisclosureAction.delete: - return svg('editor/delete', color: const Color(0xff999999)); + return svgWidget('editor/delete', color: const Color(0xff999999)); case ViewDisclosureAction.duplicate: - return svg('editor/copy', color: const Color(0xff999999)); + return svgWidget('editor/copy', color: const Color(0xff999999)); } } } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart index 73771596cb..395a85bf45 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart @@ -186,7 +186,7 @@ class MenuTopBar extends StatelessWidget { width: 28, onPressed: () => context.read().add(const MenuEvent.collapse()), iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4), - icon: svg("home/hide_menu", color: theme.iconColor), + icon: svgWidget("home/hide_menu", color: theme.iconColor), ) ], ), diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart index fb0a4284d8..3a1674e486 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart @@ -80,7 +80,7 @@ class MenuUser extends StatelessWidget { }, icon: SizedBox.square( dimension: 20, - child: svg("home/settings", color: theme.iconColor), + child: svgWidget("home/settings", color: theme.iconColor), ), ), ); diff --git a/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart b/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart index 511b94db90..b6947c79fe 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart @@ -97,7 +97,7 @@ class FlowyNavigation extends StatelessWidget { notifier.value = false; }, iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2), - icon: svg("home/hide_menu", color: theme.iconColor), + icon: svgWidget("home/hide_menu", color: theme.iconColor), ), ); } else { diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/style_widgets.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/style_widgets.dart index 9d307b3ace..4f09b64053 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/style_widgets.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/style_widgets.dart @@ -51,7 +51,7 @@ class _FlowyEditorCheckboxState extends State { @override Widget build(BuildContext context) { - final icon = isChecked ? svg('editor/editor_check') : svg('editor/editor_uncheck'); + final icon = isChecked ? svgWidget('editor/editor_check') : svgWidget('editor/editor_uncheck'); return Align( alignment: Alignment.centerLeft, child: FlowyIconButton( diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/link_button.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/link_button.dart index 3daa9f0679..60b654302f 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/link_button.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/link_button.dart @@ -54,11 +54,11 @@ class _FlowyLinkStyleButtonState extends State { final isEnabled = !widget.controller.selection.isCollapsed; final pressedHandler = isEnabled ? () => _openLinkDialog(context) : null; final icon = isEnabled - ? svg( + ? svgWidget( 'editor/share', color: theme.iconColor, ) - : svg( + : svgWidget( 'editor/share', color: theme.disableIconColor, ); diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/toolbar_icon_button.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/toolbar_icon_button.dart index 500f683355..b6dddefbb3 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/toolbar_icon_button.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/widget/toolbar/toolbar_icon_button.dart @@ -29,7 +29,7 @@ class ToolbarIconButton extends StatelessWidget { iconPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4), onPressed: onPressed, width: width, - icon: isToggled == true ? svg(iconName, color: Colors.white) : svg(iconName), + icon: isToggled == true ? svgWidget(iconName, color: Colors.white) : svgWidget(iconName), fillColor: isToggled == true ? theme.main1 : theme.shader6, hoverColor: isToggled == true ? theme.main1 : theme.shader5, tooltipText: tooltipText, diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart index 984ed147a1..1a8b5f4036 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart @@ -13,6 +13,7 @@ import 'layout/sizes.dart'; import 'widgets/content/grid_row.dart'; import 'widgets/footer/grid_footer.dart'; import 'widgets/header/grid_header.dart'; +import 'widgets/toolbar/grid_toolbar.dart'; class GridPage extends StatefulWidget { final View view; @@ -99,6 +100,7 @@ class _FlowyGridState extends State { physics: StyledScrollPhysics(), controller: _scrollController.verticalController, slivers: [ + SliverToBoxAdapter(child: GridToolbar(gridId: gridId)), _buildHeader(gridId), _buildRows(context), const GridFooter(), diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/grid_row.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/grid_row.dart index 23918401c4..53c27d62b4 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/grid_row.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/grid_row.dart @@ -110,7 +110,7 @@ class AppendRowButton extends StatelessWidget { width: 22, onPressed: () => context.read().add(const RowEvent.createRow()), iconPadding: const EdgeInsets.all(3), - icon: svg("home/add"), + icon: svgWidget("home/add"), ); } } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/footer/grid_footer.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/footer/grid_footer.dart index 7528c3c00a..8d9719ae75 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/footer/grid_footer.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/footer/grid_footer.dart @@ -39,7 +39,7 @@ class _AddRowButton extends StatelessWidget { text: const FlowyText.medium('New row', fontSize: 12), hoverColor: theme.hover, onTap: () => context.read().add(const GridEvent.createRow()), - leftIcon: svg("home/add"), + leftIcon: svgWidget("home/add"), ); } } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_list.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_list.dart index 4511a84a1f..b83ad267f9 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_list.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_list.dart @@ -1,3 +1,4 @@ +import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -13,14 +14,10 @@ import 'package:flutter_bloc/flutter_bloc.dart'; typedef SelectFieldCallback = void Function(FieldType); -class FieldTypeList extends StatelessWidget { +class FieldTypeList extends StatelessWidget with FlowyOverlayDelegate { final SelectFieldCallback onSelectField; const FieldTypeList({required this.onSelectField, Key? key}) : super(key: key); - static void hide(BuildContext context) { - FlowyOverlay.of(context).remove(FieldTypeList.identifier()); - } - @override Widget build(BuildContext context) { final cells = FieldType.values.map((fieldType) { @@ -40,7 +37,7 @@ class FieldTypeList extends StatelessWidget { controller: ScrollController(), itemCount: cells.length, separatorBuilder: (context, index) { - return const VSpace(10); + return VSpace(GridSize.typeOptionSeparatorHeight); }, physics: StyledScrollPhysics(), itemBuilder: (BuildContext context, int index) { @@ -69,12 +66,12 @@ class FieldTypeCell extends StatelessWidget { final theme = context.watch(); return SizedBox( - height: 26, + height: GridSize.typeOptionItemHeight, child: FlowyButton( text: FlowyText.medium(fieldType.title(), fontSize: 12), hoverColor: theme.hover, onTap: () => onSelectField(fieldType), - leftIcon: svg(fieldType.iconName(), color: theme.iconColor), + leftIcon: svgWidget(fieldType.iconName(), color: theme.iconColor), ), ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_operation_list.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_operation_list.dart index 956060039d..789b4f98bd 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_operation_list.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_operation_list.dart @@ -9,7 +9,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; class FieldOperationList extends StatelessWidget { - final List actions; + final List actions; const FieldOperationList({required this.actions, Key? key}) : super(key: key); @override @@ -27,12 +27,12 @@ class FieldOperationList extends StatelessWidget { } } -class FieldActionItem extends StatelessWidget { +class FieldActionCell extends StatelessWidget { final String fieldId; final VoidCallback onTap; final FieldAction action; - const FieldActionItem({ + const FieldActionCell({ required this.fieldId, required this.action, required this.onTap, @@ -49,7 +49,7 @@ class FieldActionItem extends StatelessWidget { action.run(context); onTap(); }, - leftIcon: svg(action.iconName(), color: theme.iconColor), + leftIcon: svgWidget(action.iconName(), color: theme.iconColor), ); } } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_switcher.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_switcher.dart index 5f11d750d8..7c52c29a7e 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_switcher.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_switcher.dart @@ -83,8 +83,8 @@ class _FieldSwitcherState extends State { }); _showOverlay(context, list); }, - leftIcon: svg(field.fieldType.iconName(), color: theme.iconColor), - rightIcon: svg("grid/more", color: theme.iconColor), + leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor), + rightIcon: svgWidget("grid/more", color: theme.iconColor), ), ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_action_sheet.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_action_sheet.dart index 13f9fbaba5..79dd083fab 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_action_sheet.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_action_sheet.dart @@ -17,16 +17,16 @@ class GridFieldActionSheet extends StatelessWidget with FlowyOverlayDelegate { final VoidCallback onEdited; const GridFieldActionSheet({required this.fieldData, required this.onEdited, Key? key}) : super(key: key); - static void show(BuildContext overlayContext, GridFieldData fieldData, final VoidCallback onEdited) { - final editor = GridFieldActionSheet(fieldData: fieldData, onEdited: onEdited); + void show(BuildContext overlayContext) { FlowyOverlay.of(overlayContext).insertWithAnchor( widget: OverlayContainer( - child: editor, + child: this, constraints: BoxConstraints.loose(const Size(240, 200)), ), - identifier: editor.identifier(), + identifier: identifier(), anchorContext: overlayContext, anchorDirection: AnchorDirection.bottomWithLeftAligned, + delegate: this, ); } @@ -56,7 +56,9 @@ class GridFieldActionSheet extends StatelessWidget with FlowyOverlayDelegate { } @override - bool asBarrier() => true; + bool asBarrier() { + return true; + } } class _EditFieldButton extends StatelessWidget { @@ -90,7 +92,7 @@ class _FieldOperationList extends StatelessWidget { Widget build(BuildContext context) { final actions = FieldAction.values .map( - (action) => FieldActionItem( + (action) => FieldActionCell( fieldId: fieldData.field.id, action: action, onTap: onDismissed, diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_editor.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_editor.dart index 085f051699..4f349b9347 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_editor.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_field_editor.dart @@ -25,7 +25,7 @@ class FieldEditor extends FlowyOverlayDelegate { void show(BuildContext context) { FlowyOverlay.of(context).insertWithAnchor( widget: OverlayContainer( - child: _EditFieldPannelWidget(_fieldEditorBloc), + child: _FieldEditorWidget(_fieldEditorBloc), constraints: BoxConstraints.loose(const Size(220, 400)), ), identifier: identifier(), @@ -49,9 +49,9 @@ class FieldEditor extends FlowyOverlayDelegate { bool asBarrier() => true; } -class _EditFieldPannelWidget extends StatelessWidget { +class _FieldEditorWidget extends StatelessWidget { final FieldEditorBloc editorBloc; - const _EditFieldPannelWidget(this.editorBloc, {Key? key}) : super(key: key); + const _FieldEditorWidget(this.editorBloc, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart index 6125cf4526..faf17e8c13 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart @@ -121,7 +121,7 @@ class CreateFieldButton extends StatelessWidget { gridId: gridId, fieldContextLoader: NewFieldContextLoader(gridId: gridId), ).show(context), - leftIcon: svg("home/add"), + leftIcon: svgWidget("home/add"), ); } } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header_cell.dart index 4efedbfe6d..253f935bbd 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header_cell.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header_cell.dart @@ -19,13 +19,16 @@ class GridHeaderCell extends StatelessWidget { final theme = context.watch(); final button = FlowyButton( hoverColor: theme.hover, - onTap: () => GridFieldActionSheet.show(context, fieldData, () { - FieldEditor( - gridId: fieldData.gridId, - fieldContextLoader: FieldContextLoaderAdaptor(fieldData), - ).show(context); - }), - rightIcon: svg("editor/details", color: theme.iconColor), + onTap: () => GridFieldActionSheet( + fieldData: fieldData, + onEdited: () { + FieldEditor( + gridId: fieldData.gridId, + fieldContextLoader: FieldContextLoaderAdaptor(fieldData), + ).show(context); + }, + ).show(context), + rightIcon: svgWidget("editor/details", color: theme.iconColor), text: Padding(padding: GridSize.cellContentInsets, child: FlowyText.medium(fieldData.field.name, fontSize: 12)), ); diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_setting.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_setting.dart deleted file mode 100644 index dff1058c52..0000000000 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_setting.dart +++ /dev/null @@ -1,35 +0,0 @@ -enum GridSetting { - filter, - sortBy, - properties, -} - -extension _GridSettingExtension on GridSetting { - String iconName() { - switch (this) { - case GridSetting.filter: - // TODO: Handle this case. - break; - case GridSetting.sortBy: - // TODO: Handle this case. - break; - case GridSetting.properties: - // TODO: Handle this case. - break; - } - } - - String title() { - switch (this) { - case GridSetting.filter: - // TODO: Handle this case. - break; - case GridSetting.sortBy: - // TODO: Handle this case. - break; - case GridSetting.properties: - // TODO: Handle this case. - break; - } - } -} diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/date.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/date.dart index 5057d5caee..bae78c02f8 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/date.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/date.dart @@ -75,7 +75,7 @@ class DateTypeOptionWidget extends TypeOptionWidget { ); overlayDelegate.showOverlay(context, list); }, - rightIcon: svg("grid/more", color: theme.iconColor), + rightIcon: svgWidget("grid/more", color: theme.iconColor), ), ); } @@ -96,7 +96,7 @@ class DateTypeOptionWidget extends TypeOptionWidget { }); overlayDelegate.showOverlay(context, list); }, - rightIcon: svg("grid/more", color: theme.iconColor), + rightIcon: svgWidget("grid/more", color: theme.iconColor), ), ); } @@ -156,7 +156,7 @@ class DateFormatItem extends StatelessWidget { final theme = context.watch(); Widget? checkmark; if (isSelected) { - checkmark = svg("grid/checkmark"); + checkmark = svgWidget("grid/checkmark"); } return SizedBox( @@ -246,7 +246,7 @@ class TimeFormatItem extends StatelessWidget { final theme = context.watch(); Widget? checkmark; if (isSelected) { - checkmark = svg("grid/checkmark"); + checkmark = svgWidget("grid/checkmark"); } return SizedBox( diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart index e7999b7e4c..4f133090de 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart @@ -79,7 +79,7 @@ class _DeleteTag extends StatelessWidget { child: FlowyButton( text: FlowyText.medium(LocaleKeys.grid_selectOption_deleteTag.tr(), fontSize: 12), hoverColor: theme.hover, - leftIcon: svg("grid/delete", color: theme.iconColor), + leftIcon: svgWidget("grid/delete", color: theme.iconColor), onTap: () { context.read().add(const EditOptionEvent.delete()); }, @@ -110,8 +110,8 @@ class SelectOptionColorList extends StatelessWidget { @override Widget build(BuildContext context) { - final optionItems = SelectOptionColor.values.map((color) { - return _SelectOptionColorItem(color: color, isSelected: selectedColor == color); + final cells = SelectOptionColor.values.map((color) { + return _SelectOptionColorCell(color: color, isSelected: selectedColor == color); }).toList(); return Column( @@ -135,10 +135,10 @@ class SelectOptionColorList extends StatelessWidget { separatorBuilder: (context, index) { return VSpace(GridSize.typeOptionSeparatorHeight); }, - itemCount: optionItems.length, + itemCount: cells.length, physics: StyledScrollPhysics(), itemBuilder: (BuildContext context, int index) { - return optionItems[index]; + return cells[index]; }, ), ], @@ -146,17 +146,17 @@ class SelectOptionColorList extends StatelessWidget { } } -class _SelectOptionColorItem extends StatelessWidget { +class _SelectOptionColorCell extends StatelessWidget { final SelectOptionColor color; final bool isSelected; - const _SelectOptionColorItem({required this.color, required this.isSelected, Key? key}) : super(key: key); + const _SelectOptionColorCell({required this.color, required this.isSelected, Key? key}) : super(key: key); @override Widget build(BuildContext context) { final theme = context.watch(); Widget? checkmark; if (isSelected) { - checkmark = svg("grid/checkmark"); + checkmark = svgWidget("grid/checkmark"); } final colorIcon = SizedBox.square( diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/number.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/number.dart index bbff9dd5ad..a12b7e2be9 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/number.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/number.dart @@ -59,7 +59,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget { }); overlayDelegate.showOverlay(context, list); }, - rightIcon: svg("grid/more", color: theme.iconColor), + rightIcon: svgWidget("grid/more", color: theme.iconColor), ); }, ), @@ -76,8 +76,8 @@ class NumberFormatList extends StatelessWidget { @override Widget build(BuildContext context) { - final formatItems = NumberFormat.values.map((format) { - return NumberFormatItem( + final cells = NumberFormat.values.map((format) { + return NumberFormatCell( format: format, onSelected: (format) { onSelected(format); @@ -93,9 +93,9 @@ class NumberFormatList extends StatelessWidget { separatorBuilder: (context, index) { return VSpace(GridSize.typeOptionSeparatorHeight); }, - itemCount: formatItems.length, + itemCount: cells.length, itemBuilder: (BuildContext context, int index) { - return formatItems[index]; + return cells[index]; }, ), ); @@ -106,10 +106,10 @@ class NumberFormatList extends StatelessWidget { } } -class NumberFormatItem extends StatelessWidget { +class NumberFormatCell extends StatelessWidget { final NumberFormat format; final Function(NumberFormat format) onSelected; - const NumberFormatItem({required this.format, required this.onSelected, Key? key}) : super(key: key); + const NumberFormatCell({required this.format, required this.onSelected, Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -120,7 +120,7 @@ class NumberFormatItem extends StatelessWidget { text: FlowyText.medium(format.title(), fontSize: 12), hoverColor: theme.hover, onTap: () => onSelected(format), - leftIcon: svg(format.iconName(), color: theme.iconColor), + leftIcon: svgWidget(format.iconName(), color: theme.iconColor), ), ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/option_pannel.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/option_pannel.dart index b4039bbce1..7c93f63ee7 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/option_pannel.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/option_pannel.dart @@ -132,8 +132,8 @@ class _OptionList extends StatelessWidget { return previous.options != current.options; }, builder: (context, state) { - final optionItems = state.options.map((option) { - return _makeOptionItem(context, option); + final cells = state.options.map((option) { + return _makeOptionCell(context, option); }).toList(); return ListView.separated( @@ -142,17 +142,17 @@ class _OptionList extends StatelessWidget { separatorBuilder: (context, index) { return VSpace(GridSize.typeOptionSeparatorHeight); }, - itemCount: optionItems.length, + itemCount: cells.length, itemBuilder: (BuildContext context, int index) { - return optionItems[index]; + return cells[index]; }, ); }, ); } - _OptionItem _makeOptionItem(BuildContext context, SelectOption option) { - return _OptionItem( + _OptionCell _makeOptionCell(BuildContext context, SelectOption option) { + return _OptionCell( option: option, onEdited: (option) { final pannel = EditSelectOptionPannel( @@ -173,10 +173,10 @@ class _OptionList extends StatelessWidget { } } -class _OptionItem extends StatelessWidget { +class _OptionCell extends StatelessWidget { final SelectOption option; final Function(SelectOption) onEdited; - const _OptionItem({ + const _OptionCell({ required this.option, required this.onEdited, Key? key, @@ -191,7 +191,7 @@ class _OptionItem extends StatelessWidget { text: FlowyText.medium(option.name, fontSize: 12), hoverColor: theme.hover, onTap: () => onEdited(option), - rightIcon: svg("grid/details", color: theme.iconColor), + rightIcon: svgWidget("grid/details", color: theme.iconColor), ), ); } @@ -211,7 +211,7 @@ class _AddOptionButton extends StatelessWidget { onTap: () { context.read().add(const OptionPannelEvent.beginAddingOption()); }, - leftIcon: svg("home/add", color: theme.iconColor), + leftIcon: svgWidget("home/add", color: theme.iconColor), ), ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_property.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_property.dart new file mode 100644 index 0000000000..756b7cdf17 --- /dev/null +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_property.dart @@ -0,0 +1,19 @@ +import 'package:flutter/material.dart'; + +class GridPropertyList extends StatelessWidget { + const GridPropertyList({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container(); + } +} + +class _GridPropertyCell extends StatelessWidget { + const _GridPropertyCell({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container(); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_setting.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_setting.dart new file mode 100644 index 0000000000..784fd62bcf --- /dev/null +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_setting.dart @@ -0,0 +1,152 @@ +import 'package:app_flowy/workspace/application/grid/setting/setting_bloc.dart'; +import 'package:easy_localization/easy_localization.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/scrolling/styled_list.dart'; +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:app_flowy/generated/locale_keys.g.dart'; +import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart'; + +class GridSettingContext { + final String gridId; + GridSettingContext({ + required this.gridId, + }); +} + +class GridSettingList extends StatelessWidget with FlowyOverlayDelegate { + final GridSettingContext settingContext; + const GridSettingList({required this.settingContext, Key? key}) : super(key: key); + + void show(BuildContext context) { + FlowyOverlay.of(context).insertWithAnchor( + widget: OverlayContainer( + child: this, + constraints: BoxConstraints.loose(const Size(140, 400)), + ), + identifier: identifier(), + anchorContext: context, + anchorDirection: AnchorDirection.bottomRight, + style: FlowyOverlayStyle(blur: false), + delegate: this, + ); + } + + @override + Widget build(BuildContext context) { + return BlocProvider( + create: (context) => GridSettingBloc(gridId: settingContext.gridId), + child: BlocListener( + listenWhen: (previous, current) => previous.selectedAction != current.selectedAction, + listener: (context, state) { + state.selectedAction.foldLeft(null, (_, action) { + switch (action) { + case GridSettingAction.filter: + // TODO: Handle this case. + break; + case GridSettingAction.sortBy: + // TODO: Handle this case. + break; + case GridSettingAction.properties: + // TODO: Handle this case. + break; + } + }); + }, + child: BlocBuilder( + builder: (context, state) { + return _renderList(); + }, + ), + ), + ); + } + + String identifier() { + return toString(); + } + + Widget _renderList() { + final cells = GridSettingAction.values.map((action) { + return _SettingItem(action: action); + }).toList(); + + return SizedBox( + width: 140, + child: ListView.separated( + shrinkWrap: true, + controller: ScrollController(), + itemCount: cells.length, + separatorBuilder: (context, index) { + return VSpace(GridSize.typeOptionSeparatorHeight); + }, + physics: StyledScrollPhysics(), + itemBuilder: (BuildContext context, int index) { + return cells[index]; + }, + ), + ); + } +} + +class _SettingItem extends StatelessWidget { + final GridSettingAction action; + + const _SettingItem({ + required this.action, + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + final theme = context.watch(); + final isSelected = context + .read() + .state + .selectedAction + .foldLeft(false, (_, selectedAction) => selectedAction == action); + + return SizedBox( + height: GridSize.typeOptionItemHeight, + child: FlowyButton( + isSelected: isSelected, + text: FlowyText.medium(action.title(), fontSize: 12), + hoverColor: theme.hover, + onTap: () { + context.read().add(GridSettingEvent.performAction(action)); + }, + leftIcon: svgWidget(action.iconName(), color: theme.iconColor), + ), + ); + } +} + +extension _GridSettingExtension on GridSettingAction { + String iconName() { + switch (this) { + case GridSettingAction.filter: + return 'grid/setting/filter'; + case GridSettingAction.sortBy: + return 'grid/setting/sort'; + case GridSettingAction.properties: + return 'grid/setting/properties'; + } + } + + String title() { + switch (this) { + case GridSettingAction.filter: + return LocaleKeys.grid_settings_filter.tr(); + case GridSettingAction.sortBy: + return LocaleKeys.grid_settings_sortBy.tr(); + case GridSettingAction.properties: + return LocaleKeys.grid_settings_Properties.tr(); + } + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_toolbar.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_toolbar.dart new file mode 100644 index 0000000000..dd586d9d2f --- /dev/null +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_toolbar.dart @@ -0,0 +1,44 @@ +import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart'; +import 'package:flowy_infra_ui/style_widget/extension.dart'; +import 'package:flutter/material.dart'; +import 'package:flowy_infra/image.dart'; +import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/style_widget/icon_button.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; + +import 'grid_setting.dart'; + +class GridToolbar extends StatelessWidget { + final String gridId; + const GridToolbar({required this.gridId, Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return SizedBox( + height: 40, + child: Row( + children: [ + SizedBox(width: GridSize.leadingHeaderPadding), + _SettingButton(settingContext: GridSettingContext(gridId: gridId)), + const Spacer(), + ], + ), + ); + } +} + +class _SettingButton extends StatelessWidget { + final GridSettingContext settingContext; + const _SettingButton({required this.settingContext, Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final theme = context.watch(); + return FlowyIconButton( + hoverColor: theme.hover, + width: 22, + onPressed: () => GridSettingList(settingContext: settingContext).show(context), + icon: svgWidget("grid/setting/setting").padding(horizontal: 3, vertical: 3), + ); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/trash/menu.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/trash/menu.dart index ccd1c85188..770889c610 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/trash/menu.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/trash/menu.dart @@ -36,7 +36,7 @@ class MenuTrash extends StatelessWidget { child: Selector( selector: (ctx, notifier) => notifier.theme, builder: (ctx, theme, child) => - SizedBox(width: 16, height: 16, child: svg("home/trash", color: theme.iconColor)), + SizedBox(width: 16, height: 16, child: svgWidget("home/trash", color: theme.iconColor)), ), ), const HSpace(6), diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/trash/src/trash_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/trash/src/trash_cell.dart index 4ba52edfe1..2c9679d97d 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/trash/src/trash_cell.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/trash/src/trash_cell.dart @@ -29,13 +29,13 @@ class TrashCell extends StatelessWidget { FlowyIconButton( width: 16, onPressed: onRestore, - icon: svg("editor/restore", color: theme.iconColor), + icon: svgWidget("editor/restore", color: theme.iconColor), ), const HSpace(20), FlowyIconButton( width: 16, onPressed: onDelete, - icon: svg("editor/delete", color: theme.iconColor), + icon: svgWidget("editor/delete", color: theme.iconColor), ), ], ); diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/trash/trash.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/trash/trash.dart index 14b12d77bf..324b676fc3 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/trash/trash.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/trash/trash.dart @@ -146,7 +146,7 @@ class _TrashPageState extends State { size: const Size(102, 30), child: FlowyButton( text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr(), fontSize: 12), - leftIcon: svg('editor/restore', color: theme.iconColor), + leftIcon: svgWidget('editor/restore', color: theme.iconColor), hoverColor: theme.hover, onTap: () => context.read().add(const TrashEvent.restoreAll()), ), @@ -156,7 +156,7 @@ class _TrashPageState extends State { size: const Size(102, 30), child: FlowyButton( text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr(), fontSize: 12), - leftIcon: svg('editor/delete', color: theme.iconColor), + leftIcon: svgWidget('editor/delete', color: theme.iconColor), hoverColor: theme.hover, onTap: () => context.read().add(const TrashEvent.deleteAll()), ), diff --git a/frontend/app_flowy/packages/flowy_infra/lib/image.dart b/frontend/app_flowy/packages/flowy_infra/lib/image.dart index 68bea3cd6d..e70c8b4bff 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/image.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/image.dart @@ -1,7 +1,7 @@ import 'package:flutter/widgets.dart'; import 'package:flutter_svg/flutter_svg.dart'; -Widget svg(String name, {Color? color}) { +Widget svgWidget(String name, {Color? color}) { final Widget svg = SvgPicture.asset('assets/images/$name.svg', color: color); return svg; @@ -10,6 +10,6 @@ Widget svg(String name, {Color? color}) { Widget svgWithSize(String name, Size size) { return SizedBox.fromSize( size: size, - child: svg(name), + child: svgWidget(name), ); } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart index 13d02a0ea8..69cddbf2fb 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart @@ -11,6 +11,7 @@ class FlowyButton extends StatelessWidget { final Widget? leftIcon; final Widget? rightIcon; final Color hoverColor; + final bool isSelected; const FlowyButton({ Key? key, required this.text, @@ -19,6 +20,7 @@ class FlowyButton extends StatelessWidget { this.leftIcon, this.rightIcon, this.hoverColor = Colors.transparent, + this.isSelected = false, }) : super(key: key); @override @@ -27,6 +29,7 @@ class FlowyButton extends StatelessWidget { onTap: onTap, child: FlowyHover( config: HoverDisplayConfig(borderRadius: Corners.s6Border, hoverColor: hoverColor), + setSelected: () => isSelected, builder: (context, onHover) => _render(), ), ); diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart index b19578fe54..48a702c2e4 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart @@ -3,18 +3,17 @@ import 'package:flutter/material.dart'; import 'package:flowy_infra/time/duration.dart'; typedef HoverBuilder = Widget Function(BuildContext context, bool onHover); -typedef IsOnSelected = bool Function(); class FlowyHover extends StatefulWidget { final HoverDisplayConfig config; final HoverBuilder builder; - final IsOnSelected? isOnSelected; + final bool Function()? setSelected; const FlowyHover({ Key? key, required this.builder, required this.config, - this.isOnSelected, + this.setSelected, }) : super(key: key); @override @@ -36,8 +35,8 @@ class _FlowyHoverState extends State { Widget render() { var showHover = _onHover; - if (!showHover && widget.isOnSelected != null) { - showHover = widget.isOnSelected!(); + if (!showHover && widget.setSelected != null) { + showHover = widget.setSelected!(); } if (showHover) { diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart index 79e9c648ea..f3ecd23005 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart @@ -77,7 +77,7 @@ class FlowyDropdownButton extends StatelessWidget { return FlowyIconButton( width: 16, onPressed: onPressed, - icon: svg("home/drop_down_show"), + icon: svgWidget("home/drop_down_show"), ); } } diff --git a/frontend/app_flowy/pubspec.yaml b/frontend/app_flowy/pubspec.yaml index 2cc96e75d6..ad1f6cd0e2 100644 --- a/frontend/app_flowy/pubspec.yaml +++ b/frontend/app_flowy/pubspec.yaml @@ -113,6 +113,7 @@ flutter: - assets/images/editor/ - assets/images/grid/ - assets/images/grid/field/ + - assets/images/grid/setting/ - assets/translations/ # - images/a_dot_ham.jpeg