diff --git a/frontend/appflowy_flutter/lib/plugins/trash/src/sizes.dart b/frontend/appflowy_flutter/lib/plugins/trash/src/sizes.dart index 20c7757d3e..830444ba11 100644 --- a/frontend/appflowy_flutter/lib/plugins/trash/src/sizes.dart +++ b/frontend/appflowy_flutter/lib/plugins/trash/src/sizes.dart @@ -4,10 +4,14 @@ class TrashSizes { static double get fileNameWidth => 320 * scale; static double get lashModifyWidth => 230 * scale; static double get createTimeWidth => 230 * scale; - static double get padding => 100 * scale; + // padding between createTime and action icon + static double get padding => 40 * scale; + static double get actionIconWidth => 40 * scale; static double get totalWidth => TrashSizes.fileNameWidth + TrashSizes.lashModifyWidth + TrashSizes.createTimeWidth + - TrashSizes.padding; + TrashSizes.padding + + // restore and delete icon + 2 * TrashSizes.actionIconWidth; } diff --git a/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart b/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart index 9ed764dba6..bd418ca4fd 100644 --- a/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart @@ -1,7 +1,5 @@ import 'package:flowy_infra/image.dart'; -import 'package:flowy_infra_ui/style_widget/icon_button.dart'; -import 'package:flowy_infra_ui/style_widget/text.dart'; -import 'package:flowy_infra_ui/widget/spacing.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:appflowy_backend/protobuf/flowy-folder/trash.pb.dart'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; @@ -38,23 +36,19 @@ class TrashCell extends StatelessWidget { ), const Spacer(), FlowyIconButton( - width: 26, + iconColorOnHover: Theme.of(context).colorScheme.onSurface, + width: TrashSizes.actionIconWidth, onPressed: onRestore, iconPadding: const EdgeInsets.all(5), - icon: svgWidget( - "editor/restore", - color: Theme.of(context).iconTheme.color, - ), + icon: const FlowySvg(name: 'editor/restore'), ), const HSpace(20), FlowyIconButton( - width: 26, + iconColorOnHover: Theme.of(context).colorScheme.onSurface, + width: TrashSizes.actionIconWidth, onPressed: onDelete, iconPadding: const EdgeInsets.all(5), - icon: svgWidget( - "editor/delete", - color: Theme.of(context).iconTheme.color, - ), + icon: const FlowySvg(name: 'editor/delete'), ), ], ); diff --git a/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart b/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart index 28460e9c59..4ade561baa 100644 --- a/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart @@ -96,10 +96,7 @@ class _TrashPageState extends State { IntrinsicWidth( child: FlowyButton( text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr()), - leftIcon: svgWidget( - 'editor/restore', - color: Theme.of(context).iconTheme.color, - ), + leftIcon: const FlowySvg(name: 'editor/restore'), onTap: () => context.read().add( const TrashEvent.restoreAll(), ), @@ -109,10 +106,7 @@ class _TrashPageState extends State { IntrinsicWidth( child: FlowyButton( text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr()), - leftIcon: svgWidget( - 'editor/delete', - color: Theme.of(context).iconTheme.color, - ), + leftIcon: const FlowySvg(name: 'editor/delete'), onTap: () => context.read().add(const TrashEvent.deleteAll()), ), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart index f956df50d4..db58ba3e28 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart @@ -74,7 +74,11 @@ class SettingsFileLocationCustomzierState Tooltip( message: LocaleKeys.settings_files_restoreLocation.tr(), child: FlowyIconButton( + height: 40, + width: 40, icon: const Icon(Icons.restore_outlined), + hoverColor: + Theme.of(context).colorScheme.secondaryContainer, onPressed: () async { final result = await appFlowyDocumentDirectory(); await _setCustomLocation(result.path); @@ -96,7 +100,11 @@ class SettingsFileLocationCustomzierState Tooltip( message: LocaleKeys.settings_files_customizeLocation.tr(), child: FlowyIconButton( + height: 40, + width: 40, icon: const Icon(Icons.folder_open_outlined), + hoverColor: + Theme.of(context).colorScheme.secondaryContainer, onPressed: () async { final result = await getIt().getDirectoryPath(); diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart index 687c62a4d9..e4d0bc6d00 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart @@ -99,6 +99,7 @@ class HoverStyle { final Color borderColor; final double borderWidth; final Color? hoverColor; + final Color? foregroundColorOnHover; final BorderRadius borderRadius; final EdgeInsets contentMargin; final Color backgroundColor; @@ -110,6 +111,7 @@ class HoverStyle { this.contentMargin = EdgeInsets.zero, this.backgroundColor = Colors.transparent, this.hoverColor, + this.foregroundColorOnHover, }); } @@ -138,18 +140,17 @@ class FlowyHoverContainer extends StatelessWidget { borderRadius: style.borderRadius, ), child: - //override text's theme with new color when it is hovered + //override text's theme with foregroundColorOnHover when it is hovered Theme( data: Theme.of(context).copyWith( textTheme: Theme.of(context).textTheme.copyWith( - bodyMedium: Theme.of(context) - .textTheme - .bodyMedium - ?.copyWith(color: Theme.of(context).colorScheme.onSurface), + bodyMedium: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: style.foregroundColorOnHover ?? + Theme.of(context).colorScheme.onSurface), ), - iconTheme: Theme.of(context) - .iconTheme - .copyWith(color: Theme.of(context).colorScheme.onSurface), + iconTheme: Theme.of(context).iconTheme.copyWith( + color: style.foregroundColorOnHover ?? + Theme.of(context).colorScheme.onSurface), ), child: child, ), diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart index 8e878cb24e..0e124e06c1 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart @@ -2,6 +2,7 @@ import 'dart:math'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/size.dart'; +import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flutter/material.dart'; class FlowyIconButton extends StatelessWidget { @@ -11,6 +12,7 @@ class FlowyIconButton extends StatelessWidget { final VoidCallback? onPressed; final Color? fillColor; final Color? hoverColor; + final Color? iconColorOnHover; final EdgeInsets iconPadding; final BorderRadius? radius; final String? tooltipText; @@ -23,6 +25,7 @@ class FlowyIconButton extends StatelessWidget { this.onPressed, this.fillColor = Colors.transparent, this.hoverColor, + this.iconColorOnHover, this.iconPadding = EdgeInsets.zero, this.radius, this.tooltipText, @@ -62,9 +65,17 @@ class FlowyIconButton extends StatelessWidget { highlightColor: Colors.transparent, elevation: 0, onPressed: onPressed, - child: Padding( - padding: iconPadding, - child: SizedBox.fromSize(size: childSize, child: child), + child: FlowyHover( + style: HoverStyle( + hoverColor: hoverColor, + foregroundColorOnHover: + iconColorOnHover ?? Theme.of(context).iconTheme.color, + backgroundColor: fillColor ?? Colors.transparent, + ), + child: Padding( + padding: iconPadding, + child: SizedBox.fromSize(size: childSize, child: child), + ), ), ), ),