From 0bfe071cafa8c9df1fb1d8140f0950faa35b55e0 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Wed, 29 May 2024 22:05:20 +0800 Subject: [PATCH] fix: sidebar issues on Windows and Linux (#5431) * fix: workspace icon overflow * fix: notification button doesn't have same effect as settings button * fix: open-sidebar button wasn't replaced in the Windows title bar * fix: workspace name overflow on Linux * fix: appflowy logo align issue --- .../lib/core/frameless_window.dart | 27 +++++++--- .../menu/sidebar/header/sidebar_top_menu.dart | 18 ++++--- .../menu/sidebar/header/sidebar_user.dart | 1 - .../home/menu/sidebar/sidebar.dart | 2 +- .../workspace/_sidebar_workspace_icon.dart | 2 +- .../workspace/_sidebar_workspace_menu.dart | 3 +- .../sidebar/workspace/sidebar_workspace.dart | 48 ++++++++--------- .../home/menu/view/view_item.dart | 4 ++ .../presentation/home/navigation.dart | 54 ++++++++++++------- .../widgets/notification_button.dart | 25 +++++---- .../presentation/widgets/view_title_bar.dart | 1 + .../flowy_infra_ui/lib/style_widget/text.dart | 10 +++- .../lib/widget/flowy_tooltip.dart | 5 ++ .../resources/flowy_icons/16x/show_menu.svg | 8 ++- 14 files changed, 127 insertions(+), 81 deletions(-) diff --git a/frontend/appflowy_flutter/lib/core/frameless_window.dart b/frontend/appflowy_flutter/lib/core/frameless_window.dart index 7877615a98..fcd955fc93 100644 --- a/frontend/appflowy_flutter/lib/core/frameless_window.dart +++ b/frontend/appflowy_flutter/lib/core/frameless_window.dart @@ -3,12 +3,13 @@ import 'dart:io'; import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/shared/window_title_bar.dart'; +import 'package:appflowy/util/theme_extension.dart'; import 'package:appflowy/workspace/application/home/home_setting_bloc.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart'; import 'package:flowy_infra_ui/widget/flowy_tooltip.dart'; -import 'package:flutter/services.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; class CocoaWindowChannel { @@ -102,13 +103,25 @@ class MoveWindowDetectorState extends State { return const SizedBox.shrink(); } + final color = Theme.of(context).isLightMode ? Colors.white : Colors.black; + final textSpan = TextSpan( + children: [ + TextSpan( + text: '${LocaleKeys.sideBar_openSidebar.tr()}\n', + style: Theme.of(context).textTheme.bodyMedium!.copyWith(color: color), + ), + TextSpan( + text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\', + style: Theme.of(context) + .textTheme + .bodyMedium! + .copyWith(color: Theme.of(context).hintColor), + ), + ], + ); + return FlowyTooltip( - richMessage: TextSpan( - children: [ - TextSpan(text: '${LocaleKeys.sideBar_closeSidebar.tr()}\n'), - const TextSpan(text: 'Ctrl+\\'), - ], - ), + richMessage: textSpan, child: FlowyIconButton( hoverColor: Colors.transparent, onPressed: () => context diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart index 051386b7b2..c7dc54126e 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart @@ -3,6 +3,7 @@ import 'dart:io' show Platform; import 'package:appflowy/core/frameless_window.dart'; import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/util/theme_extension.dart'; import 'package:appflowy/workspace/application/home/home_setting_bloc.dart'; import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart'; import 'package:appflowy/workspace/presentation/home/home_sizes.dart'; @@ -51,22 +52,23 @@ class SidebarTopMenu extends StatelessWidget { ? FlowySvgs.flowy_logo_dark_mode_xl : FlowySvgs.flowy_logo_text_xl; - return FlowySvg( - svgData, - size: const Size(92, 17), - blendMode: null, + return Padding( + padding: const EdgeInsets.only(top: 12.0, left: 4), + child: FlowySvg( + svgData, + size: const Size(92, 17), + blendMode: null, + ), ); } Widget _buildCollapseMenuButton(BuildContext context) { + final color = Theme.of(context).isLightMode ? Colors.white : Colors.black; final textSpan = TextSpan( children: [ TextSpan( text: '${LocaleKeys.sideBar_closeSidebar.tr()}\n', - style: Theme.of(context) - .textTheme - .bodyMedium! - .copyWith(color: Colors.white), + style: Theme.of(context).textTheme.bodyMedium!.copyWith(color: color), ), TextSpan( text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\', diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_user.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_user.dart index 8d7b0efd50..20465d0faa 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_user.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_user.dart @@ -38,7 +38,6 @@ class SidebarUser extends StatelessWidget { const HSpace(10), Expanded(child: _buildUserName(context, state)), UserSettingButton(userProfile: state.userProfile), - const HSpace(4), const NotificationButton(), ], ), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart index 323ec1428c..31cdf73685 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart @@ -224,7 +224,7 @@ class _SidebarState extends State<_Sidebar> { // user or workspace, setting Container( height: HomeSizes.workspaceSectionHeight, - padding: menuHorizontalInset, + padding: menuHorizontalInset - const EdgeInsets.only(right: 6), child: // if the workspaces are empty, show the user profile instead userState.isCollabWorkspaceOn && userState.workspaces.isNotEmpty diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart index ea0826e82a..d179c4ce0f 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart @@ -44,7 +44,7 @@ class _WorkspaceIconState extends State { : Container( alignment: Alignment.center, width: widget.iconSize, - height: max(widget.iconSize, 26), + height: min(widget.iconSize, 26), decoration: BoxDecoration( color: ColorGenerator(widget.workspace.name).toColor(), borderRadius: BorderRadius.circular(4), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart index 0572ae107c..9764e11cba 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart @@ -128,7 +128,7 @@ class _WorkspaceMenuItemState extends State { // cause the popover dismiss intermediately when click the right icon. // so using the stack to put the right icon on the flowy button. return SizedBox( - height: 40, + height: 44, child: MouseRegion( onEnter: (_) => isHovered.value = true, onExit: (_) => isHovered.value = false, @@ -250,7 +250,6 @@ class _WorkspaceInfo extends StatelessWidget { overflow: TextOverflow.ellipsis, withTooltip: true, ), - const VSpace(2.0), // workspace members count FlowyText.regular( state.isLoading diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart index bb4d18ab46..d1a09afc28 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart @@ -49,9 +49,7 @@ class _SidebarWorkspaceState extends State { ), ), UserSettingButton(userProfile: widget.userProfile), - const HSpace(8), const NotificationButton(), - const HSpace(4), ], ); }, @@ -201,12 +199,12 @@ class _SidebarSwitchWorkspaceButtonState }, child: FlowyButton( margin: EdgeInsets.zero, - text: Row( - children: [ - const HSpace(6.0), - SizedBox( - width: 16.0, - child: WorkspaceIcon( + text: SizedBox( + height: 30, + child: Row( + children: [ + const HSpace(6.0), + WorkspaceIcon( workspace: widget.currentWorkspace, iconSize: 16, fontSize: 10, @@ -218,25 +216,25 @@ class _SidebarSwitchWorkspaceButtonState ), ), ), - ), - const HSpace(10), - Flexible( - child: FlowyText.medium( - widget.currentWorkspace.name, - overflow: TextOverflow.ellipsis, - withTooltip: true, + const HSpace(10), + Flexible( + child: FlowyText.medium( + widget.currentWorkspace.name, + overflow: TextOverflow.ellipsis, + withTooltip: true, + ), ), - ), - const HSpace(4), - ValueListenableBuilder( - valueListenable: _isWorkSpaceMenuExpanded, - builder: (context, value, _) => FlowySvg( - value - ? FlowySvgs.workspace_drop_down_menu_hide_s - : FlowySvgs.workspace_drop_down_menu_show_s, + const HSpace(4), + ValueListenableBuilder( + valueListenable: _isWorkSpaceMenuExpanded, + builder: (context, value, _) => FlowySvg( + value + ? FlowySvgs.workspace_drop_down_menu_hide_s + : FlowySvgs.workspace_drop_down_menu_show_s, + ), ), - ), - ], + ], + ), ), ), ); diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart index 0ebb919318..896896bfcc 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart @@ -422,6 +422,10 @@ class _SingleInnerViewItemState extends State { // icon _buildViewIconButton(), const HSpace(6), + // const SizedBox( + // width: 6.0, + // height: 1, + // ), // title Expanded( child: FlowyText.regular( diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart index c046c8379f..4201ec5396 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart @@ -1,17 +1,17 @@ import 'dart:io'; -import 'package:appflowy_editor/appflowy_editor.dart'; -import 'package:flutter/material.dart'; - import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/util/theme_extension.dart'; import 'package:appflowy/workspace/application/home/home_setting_bloc.dart'; import 'package:appflowy/workspace/presentation/home/home_stack.dart'; +import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/size.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/flowy_tooltip.dart'; +import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:provider/provider.dart'; import 'package:styled_widget/styled_widget.dart'; @@ -65,23 +65,39 @@ class FlowyNavigation extends StatelessWidget { buildWhen: (p, c) => p.isMenuCollapsed != c.isMenuCollapsed, builder: (context, state) { if (!PlatformExtension.isWindows && state.isMenuCollapsed) { - return RotationTransition( - turns: const AlwaysStoppedAnimation(180 / 360), - child: FlowyTooltip( - richMessage: sidebarTooltipTextSpan( - context, - LocaleKeys.sideBar_openSidebar.tr(), + final color = + Theme.of(context).isLightMode ? Colors.white : Colors.black; + final textSpan = TextSpan( + children: [ + TextSpan( + text: '${LocaleKeys.sideBar_openSidebar.tr()}\n', + style: Theme.of(context) + .textTheme + .bodyMedium! + .copyWith(color: color), ), - child: FlowyIconButton( - width: 24, - hoverColor: Colors.transparent, - onPressed: () => context - .read() - .add(const HomeSettingEvent.collapseMenu()), - iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2), - icon: FlowySvg( - FlowySvgs.hide_menu_m, - color: Theme.of(context).iconTheme.color, + TextSpan( + text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\', + style: Theme.of(context) + .textTheme + .bodyMedium! + .copyWith(color: Theme.of(context).hintColor), + ), + ], + ); + return Padding( + padding: const EdgeInsets.only(right: 8.0), + child: RotationTransition( + turns: const AlwaysStoppedAnimation(180 / 360), + child: FlowyTooltip( + richMessage: textSpan, + child: FlowyIconButton( + width: 24, + onPressed: () => context + .read() + .add(const HomeSettingEvent.collapseMenu()), + iconPadding: const EdgeInsets.all(2), + icon: const FlowySvg(FlowySvgs.hide_menu_s), ), ), ), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart b/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart index 049ee6481b..61fba3bd65 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart @@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/startup/startup.dart'; import 'package:appflowy/user/application/reminder/reminder_bloc.dart'; import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart'; +import 'package:appflowy/workspace/presentation/home/home_sizes.dart'; import 'package:appflowy/workspace/presentation/notifications/notification_dialog.dart'; import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:easy_localization/easy_localization.dart'; @@ -27,17 +28,19 @@ class NotificationButton extends StatelessWidget { child: BlocBuilder( builder: (context, state) => FlowyTooltip( message: LocaleKeys.notificationHub_title.tr(), - child: MouseRegion( - cursor: SystemMouseCursors.click, - child: AppFlowyPopover( - mutex: mutex, - direction: PopoverDirection.bottomWithLeftAligned, - constraints: const BoxConstraints(maxHeight: 500, maxWidth: 425), - windowPadding: EdgeInsets.zero, - margin: EdgeInsets.zero, - popupBuilder: (_) => - NotificationDialog(views: views, mutex: mutex), - child: _buildNotificationIcon(context, state.hasUnreads), + child: AppFlowyPopover( + mutex: mutex, + direction: PopoverDirection.bottomWithLeftAligned, + constraints: const BoxConstraints(maxHeight: 500, maxWidth: 425), + windowPadding: EdgeInsets.zero, + margin: EdgeInsets.zero, + popupBuilder: (_) => NotificationDialog(views: views, mutex: mutex), + child: SizedBox.square( + dimension: HomeSizes.workspaceSectionHeight, + child: FlowyButton( + useIntrinsicWidth: true, + text: _buildNotificationIcon(context, state.hasUnreads), + ), ), ), ), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart index 18b206bd9e..b3eddfb52b 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart @@ -167,6 +167,7 @@ class _ViewTitleState extends State<_ViewTitle> { onPointerDown: (_) => context.read().openPlugin(widget.view), child: FlowyButton( useIntrinsicWidth: true, + margin: const EdgeInsets.symmetric(horizontal: 6.0), onTap: () {}, text: _buildIconAndName(state), ), diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart index 88ebc735b7..bcb4e13025 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart @@ -2,6 +2,8 @@ import 'dart:io'; import 'package:flutter/material.dart'; +const String _emojiFontFamily = 'noto color emoji'; + class FlowyText extends StatelessWidget { final String text; final TextOverflow? overflow; @@ -119,13 +121,19 @@ class FlowyText extends StatelessWidget { this.withTooltip = false, this.strutStyle = const StrutStyle(forceStrutHeight: true), }) : fontWeight = FontWeight.w400, - fontFamily = 'noto color emoji', + fontFamily = _emojiFontFamily, fallbackFontFamily = null; @override Widget build(BuildContext context) { Widget child; + double fontSize = + this.fontSize ?? Theme.of(context).textTheme.bodyMedium!.fontSize!; + if (Platform.isLinux && fontFamily == _emojiFontFamily) { + fontSize = fontSize * 0.8; + } + final textStyle = Theme.of(context).textTheme.bodyMedium!.copyWith( fontSize: fontSize, fontWeight: fontWeight, diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart index 47a684cf01..57874fad64 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart @@ -22,8 +22,13 @@ class FlowyTooltip extends StatelessWidget { @override Widget build(BuildContext context) { + final isLightMode = Theme.of(context).brightness == Brightness.light; return Tooltip( margin: margin, + decoration: BoxDecoration( + color: isLightMode ? const Color(0xE5171717) : const Color(0xE5E5E5E5), + borderRadius: BorderRadius.circular(8.0), + ), waitDuration: _tooltipWaitDuration, message: message, richMessage: richMessage, diff --git a/frontend/resources/flowy_icons/16x/show_menu.svg b/frontend/resources/flowy_icons/16x/show_menu.svg index 8baf55bffd..67edfc4d17 100644 --- a/frontend/resources/flowy_icons/16x/show_menu.svg +++ b/frontend/resources/flowy_icons/16x/show_menu.svg @@ -1,6 +1,4 @@ - - - - - + + +