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

fix: sidebar issues on Windows and Linux (#5431)

Browse Source 
* 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
This commit is contained in:
Lucas.Xu 2024-05-29 22:05:20 +08:00 committed by GitHub
parent b8b7a10b33
commit 0bfe071caf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 127 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/appflowy_flutter/lib/core/frameless_window.dart
View File

@ -3,12 +3,13 @@ import 'dart:io';
import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/shared/window_title_bar.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:appflowy/workspace/application/home/home_setting_bloc.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart'; import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
class CocoaWindowChannel { class CocoaWindowChannel {
@ -102,13 +103,25 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
return const SizedBox.shrink(); 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( return FlowyTooltip(
richMessage: TextSpan( richMessage: textSpan,
children: [
TextSpan(text: '${LocaleKeys.sideBar_closeSidebar.tr()}\n'),
const TextSpan(text: 'Ctrl+\\'),
],
),
child: FlowyIconButton( child: FlowyIconButton(
hoverColor: Colors.transparent, hoverColor: Colors.transparent,
onPressed: () => context onPressed: () => context

18
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart
View File

@ -3,6 +3,7 @@ import 'dart:io' show Platform;
import 'package:appflowy/core/frameless_window.dart'; import 'package:appflowy/core/frameless_window.dart';
import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.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/home/home_setting_bloc.dart';
import 'package:appflowy/workspace/application/menu/sidebar_sections_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/home/home_sizes.dart';
@ -51,22 +52,23 @@ class SidebarTopMenu extends StatelessWidget {
? FlowySvgs.flowy_logo_dark_mode_xl ? FlowySvgs.flowy_logo_dark_mode_xl
: FlowySvgs.flowy_logo_text_xl; : FlowySvgs.flowy_logo_text_xl;
return FlowySvg( return Padding(
svgData, padding: const EdgeInsets.only(top: 12.0, left: 4),
size: const Size(92, 17), child: FlowySvg(
blendMode: null, svgData,
size: const Size(92, 17),
blendMode: null,
),
); );
} }
Widget _buildCollapseMenuButton(BuildContext context) { Widget _buildCollapseMenuButton(BuildContext context) {
final color = Theme.of(context).isLightMode ? Colors.white : Colors.black;
final textSpan = TextSpan( final textSpan = TextSpan(
children: [ children: [
TextSpan( TextSpan(
text: '${LocaleKeys.sideBar_closeSidebar.tr()}\n', text: '${LocaleKeys.sideBar_closeSidebar.tr()}\n',
style: Theme.of(context) style: Theme.of(context).textTheme.bodyMedium!.copyWith(color: color),
.textTheme
.bodyMedium!
.copyWith(color: Colors.white),
), ),
TextSpan( TextSpan(
text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\', text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\',

1
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_user.dart
View File

@ -38,7 +38,6 @@ class SidebarUser extends StatelessWidget {
const HSpace(10), const HSpace(10),
Expanded(child: _buildUserName(context, state)), Expanded(child: _buildUserName(context, state)),
UserSettingButton(userProfile: state.userProfile), UserSettingButton(userProfile: state.userProfile),
const HSpace(4),
const NotificationButton(), const NotificationButton(),
], ],
), ),

2
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart
View File

@ -224,7 +224,7 @@ class _SidebarState extends State<_Sidebar> {
// user or workspace, setting // user or workspace, setting
Container( Container(
height: HomeSizes.workspaceSectionHeight, height: HomeSizes.workspaceSectionHeight,
padding: menuHorizontalInset, padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
child: child:
// if the workspaces are empty, show the user profile instead // if the workspaces are empty, show the user profile instead
userState.isCollabWorkspaceOn && userState.workspaces.isNotEmpty userState.isCollabWorkspaceOn && userState.workspaces.isNotEmpty

2
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart
View File

@ -44,7 +44,7 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
: Container( : Container(
alignment: Alignment.center, alignment: Alignment.center,
width: widget.iconSize, width: widget.iconSize,
height: max(widget.iconSize, 26), height: min(widget.iconSize, 26),
decoration: BoxDecoration( decoration: BoxDecoration(
color: ColorGenerator(widget.workspace.name).toColor(), color: ColorGenerator(widget.workspace.name).toColor(),
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),

3
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_menu.dart
View File

@ -128,7 +128,7 @@ class _WorkspaceMenuItemState extends State<WorkspaceMenuItem> {
// cause the popover dismiss intermediately when click the right icon. // cause the popover dismiss intermediately when click the right icon.
// so using the stack to put the right icon on the flowy button. // so using the stack to put the right icon on the flowy button.
return SizedBox( return SizedBox(
height: 40, height: 44,
child: MouseRegion( child: MouseRegion(
onEnter: (_) => isHovered.value = true, onEnter: (_) => isHovered.value = true,
onExit: (_) => isHovered.value = false, onExit: (_) => isHovered.value = false,
@ -250,7 +250,6 @@ class _WorkspaceInfo extends StatelessWidget {
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
withTooltip: true, withTooltip: true,
), ),
const VSpace(2.0),
// workspace members count // workspace members count
FlowyText.regular( FlowyText.regular(
state.isLoading state.isLoading

48
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart
View File

@ -49,9 +49,7 @@ class _SidebarWorkspaceState extends State<SidebarWorkspace> {
), ),
), ),
UserSettingButton(userProfile: widget.userProfile), UserSettingButton(userProfile: widget.userProfile),
const HSpace(8),
const NotificationButton(), const NotificationButton(),
const HSpace(4),
], ],
); );
}, },
@ -201,12 +199,12 @@ class _SidebarSwitchWorkspaceButtonState
}, },
child: FlowyButton( child: FlowyButton(
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
text: Row( text: SizedBox(
children: [ height: 30,
const HSpace(6.0), child: Row(
SizedBox( children: [
width: 16.0, const HSpace(6.0),
child: WorkspaceIcon( WorkspaceIcon(
workspace: widget.currentWorkspace, workspace: widget.currentWorkspace,
iconSize: 16, iconSize: 16,
fontSize: 10, fontSize: 10,
@ -218,25 +216,25 @@ class _SidebarSwitchWorkspaceButtonState
), ),
), ),
), ),
), const HSpace(10),
const HSpace(10), Flexible(
Flexible( child: FlowyText.medium(
child: FlowyText.medium( widget.currentWorkspace.name,
widget.currentWorkspace.name, overflow: TextOverflow.ellipsis,
overflow: TextOverflow.ellipsis, withTooltip: true,
withTooltip: true, ),
), ),
), const HSpace(4),
const HSpace(4), ValueListenableBuilder(
ValueListenableBuilder( valueListenable: _isWorkSpaceMenuExpanded,
valueListenable: _isWorkSpaceMenuExpanded, builder: (context, value, _) => FlowySvg(
builder: (context, value, _) => FlowySvg( value
value ? FlowySvgs.workspace_drop_down_menu_hide_s
? FlowySvgs.workspace_drop_down_menu_hide_s : FlowySvgs.workspace_drop_down_menu_show_s,
: FlowySvgs.workspace_drop_down_menu_show_s, ),
), ),
), ],
], ),
), ),
), ),
); );

4
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart
View File

@ -422,6 +422,10 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
// icon // icon
_buildViewIconButton(), _buildViewIconButton(),
const HSpace(6), const HSpace(6),
// const SizedBox(
// width: 6.0,
// height: 1,
// ),
// title // title
Expanded( Expanded(
child: FlowyText.regular( child: FlowyText.regular(

54
frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
View File

@ -1,17 +1,17 @@
import 'dart:io'; 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/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.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/home/home_setting_bloc.dart';
import 'package:appflowy/workspace/presentation/home/home_stack.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:easy_localization/easy_localization.dart';
import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.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/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart'; import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart'; import 'package:styled_widget/styled_widget.dart';
@ -65,23 +65,39 @@ class FlowyNavigation extends StatelessWidget {
buildWhen: (p, c) => p.isMenuCollapsed != c.isMenuCollapsed, buildWhen: (p, c) => p.isMenuCollapsed != c.isMenuCollapsed,
builder: (context, state) { builder: (context, state) {
if (!PlatformExtension.isWindows && state.isMenuCollapsed) { if (!PlatformExtension.isWindows && state.isMenuCollapsed) {
return RotationTransition( final color =
turns: const AlwaysStoppedAnimation(180 / 360), Theme.of(context).isLightMode ? Colors.white : Colors.black;
child: FlowyTooltip( final textSpan = TextSpan(
richMessage: sidebarTooltipTextSpan( children: [
context, TextSpan(
LocaleKeys.sideBar_openSidebar.tr(), text: '${LocaleKeys.sideBar_openSidebar.tr()}\n',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(color: color),
), ),
child: FlowyIconButton( TextSpan(
width: 24, text: Platform.isMacOS ? '⌘+.' : 'Ctrl+\\',
hoverColor: Colors.transparent, style: Theme.of(context)
onPressed: () => context .textTheme
.read<HomeSettingBloc>() .bodyMedium!
.add(const HomeSettingEvent.collapseMenu()), .copyWith(color: Theme.of(context).hintColor),
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2), ),
icon: FlowySvg( ],
FlowySvgs.hide_menu_m, );
color: Theme.of(context).iconTheme.color, 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<HomeSettingBloc>()
.add(const HomeSettingEvent.collapseMenu()),
iconPadding: const EdgeInsets.all(2),
icon: const FlowySvg(FlowySvgs.hide_menu_s),
), ),
), ),
), ),

25
frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart
View File

@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/startup/startup.dart'; import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/user/application/reminder/reminder_bloc.dart'; import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
import 'package:appflowy/workspace/application/menu/sidebar_sections_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/workspace/presentation/notifications/notification_dialog.dart';
import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
@ -27,17 +28,19 @@ class NotificationButton extends StatelessWidget {
child: BlocBuilder<ReminderBloc, ReminderState>( child: BlocBuilder<ReminderBloc, ReminderState>(
builder: (context, state) => FlowyTooltip( builder: (context, state) => FlowyTooltip(
message: LocaleKeys.notificationHub_title.tr(), message: LocaleKeys.notificationHub_title.tr(),
child: MouseRegion( child: AppFlowyPopover(
cursor: SystemMouseCursors.click, mutex: mutex,
child: AppFlowyPopover( direction: PopoverDirection.bottomWithLeftAligned,
mutex: mutex, constraints: const BoxConstraints(maxHeight: 500, maxWidth: 425),
direction: PopoverDirection.bottomWithLeftAligned, windowPadding: EdgeInsets.zero,
constraints: const BoxConstraints(maxHeight: 500, maxWidth: 425), margin: EdgeInsets.zero,
windowPadding: EdgeInsets.zero, popupBuilder: (_) => NotificationDialog(views: views, mutex: mutex),
margin: EdgeInsets.zero, child: SizedBox.square(
popupBuilder: (_) => dimension: HomeSizes.workspaceSectionHeight,
NotificationDialog(views: views, mutex: mutex), child: FlowyButton(
child: _buildNotificationIcon(context, state.hasUnreads), useIntrinsicWidth: true,
text: _buildNotificationIcon(context, state.hasUnreads),
),
), ),
), ),
), ),

1
frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart
View File

@ -167,6 +167,7 @@ class _ViewTitleState extends State<_ViewTitle> {
onPointerDown: (_) => context.read<TabsBloc>().openPlugin(widget.view), onPointerDown: (_) => context.read<TabsBloc>().openPlugin(widget.view),
child: FlowyButton( child: FlowyButton(
useIntrinsicWidth: true, useIntrinsicWidth: true,
margin: const EdgeInsets.symmetric(horizontal: 6.0),
onTap: () {}, onTap: () {},
text: _buildIconAndName(state), text: _buildIconAndName(state),
), ),

10
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart
View File

@ -2,6 +2,8 @@ import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
const String _emojiFontFamily = 'noto color emoji';
class FlowyText extends StatelessWidget { class FlowyText extends StatelessWidget {
final String text; final String text;
final TextOverflow? overflow; final TextOverflow? overflow;
@ -119,13 +121,19 @@ class FlowyText extends StatelessWidget {
this.withTooltip = false, this.withTooltip = false,
this.strutStyle = const StrutStyle(forceStrutHeight: true), this.strutStyle = const StrutStyle(forceStrutHeight: true),
}) : fontWeight = FontWeight.w400, }) : fontWeight = FontWeight.w400,
fontFamily = 'noto color emoji', fontFamily = _emojiFontFamily,
fallbackFontFamily = null; fallbackFontFamily = null;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Widget child; 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( final textStyle = Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: fontSize, fontSize: fontSize,
fontWeight: fontWeight, fontWeight: fontWeight,

5
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart
View File

@ -22,8 +22,13 @@ class FlowyTooltip extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isLightMode = Theme.of(context).brightness == Brightness.light;
return Tooltip( return Tooltip(
margin: margin, margin: margin,
decoration: BoxDecoration(
color: isLightMode ? const Color(0xE5171717) : const Color(0xE5E5E5E5),
borderRadius: BorderRadius.circular(8.0),
),
waitDuration: _tooltipWaitDuration, waitDuration: _tooltipWaitDuration,
message: message, message: message,
richMessage: richMessage, richMessage: richMessage,

8
frontend/resources/flowy_icons/16x/show_menu.svg
View File

@ -1,6 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 5L13 8L10 11" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.75 14.25L15 9L9.75 3.75" stroke="#171717" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="3" y="5" width="4" height="1" rx="0.5" fill="#333333"/> <path d="M3.5625 14.25L8.8125 9L3.5625 3.75" stroke="#171717" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="3" y="7.5" width="6" height="1" rx="0.5" fill="#333333"/>
<rect x="3" y="10" width="4" height="1" rx="0.5" fill="#333333"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 394 B

After

Width:  |  Height:  |  Size: 401 B