From 22e89fd197d727ebd594758ab96ba1f1c8fec123 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Fri, 3 May 2024 09:13:11 +0800 Subject: [PATCH] fix: minor UI issues (#5253) * fix: the desktop cover didn't sync with the mobile cover * fix: remove unnecessary space when editing the title * fix: recent view border issue * fix: double focus on the title and doc --- .../recent_folder/mobile_recent_view.dart | 102 ++++++++++-------- .../cover/document_immersive_cover.dart | 22 ++++ .../appflowy_mobile_toolbar.dart | 10 +- 3 files changed, 85 insertions(+), 49 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart b/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart index 650d9755b4..53f592f89d 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart @@ -50,56 +50,14 @@ class MobileRecentView extends StatelessWidget { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Expanded( - child: ClipRRect( - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(8), - topRight: Radius.circular(8), - ), - child: _RecentCover( - coverTypeV1: state.coverTypeV1, - coverTypeV2: state.coverTypeV2, - value: state.coverValue, - ), - ), - ), - Expanded( - child: Padding( - padding: const EdgeInsets.fromLTRB(8, 18, 8, 2), - // hack: minLines currently not supported in Text widget. - // https://github.com/flutter/flutter/issues/31134 - child: Stack( - children: [ - FlowyText.medium( - view.name, - maxLines: 2, - overflow: TextOverflow.ellipsis, - ), - const FlowyText( - "\n\n", - maxLines: 2, - ), - ], - ), - ), - ), + Expanded(child: _buildCover(context, state)), + Expanded(child: _buildTitle(context, state)), ], ), ), Align( alignment: Alignment.centerLeft, - child: Padding( - padding: const EdgeInsets.only(left: 8.0), - child: state.icon.isNotEmpty - ? EmojiText( - emoji: state.icon, - fontSize: 30.0, - ) - : SizedBox.square( - dimension: 32.0, - child: view.defaultIcon(), - ), - ), + child: _buildIcon(context, state), ), ], ), @@ -108,6 +66,60 @@ class MobileRecentView extends StatelessWidget { ), ); } + + Widget _buildCover(BuildContext context, RecentViewState state) { + return Padding( + padding: const EdgeInsets.only(top: 1.0, left: 1.0, right: 1.0), + child: ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(8), + topRight: Radius.circular(8), + ), + child: _RecentCover( + coverTypeV1: state.coverTypeV1, + coverTypeV2: state.coverTypeV2, + value: state.coverValue, + ), + ), + ); + } + + Widget _buildTitle(BuildContext context, RecentViewState state) { + return Padding( + padding: const EdgeInsets.fromLTRB(8, 18, 8, 2), + // hack: minLines currently not supported in Text widget. + // https://github.com/flutter/flutter/issues/31134 + child: Stack( + children: [ + FlowyText.medium( + view.name, + fontSize: 16.0, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + const FlowyText( + "\n\n", + maxLines: 2, + ), + ], + ), + ); + } + + Widget _buildIcon(BuildContext context, RecentViewState state) { + return Padding( + padding: const EdgeInsets.only(left: 8.0), + child: state.icon.isNotEmpty + ? EmojiText( + emoji: state.icon, + fontSize: 30.0, + ) + : SizedBox.square( + dimension: 32.0, + child: view.defaultIcon(), + ), + ); + } } class _RecentCover extends StatelessWidget { diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart index 3fe480b2a8..ef7c2a0b6c 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart @@ -3,6 +3,7 @@ import 'dart:io'; import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart'; import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart'; import 'package:appflowy/plugins/base/icon/icon_picker.dart'; +import 'package:appflowy/plugins/document/application/prelude.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/base/build_context_extension.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/document_immersive_cover_bloc.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart'; @@ -12,6 +13,7 @@ import 'package:appflowy/workspace/application/settings/appearance/base_appearan import 'package:appflowy/workspace/application/view/view_bloc.dart'; import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart'; import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart'; +import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart'; @@ -40,11 +42,23 @@ class DocumentImmersiveCover extends StatefulWidget { class _DocumentImmersiveCoverState extends State { final textEditingController = TextEditingController(); final scrollController = ScrollController(); + final focusNode = FocusNode(); + + late PropertyValueNotifier? selectionNotifier = + context.read().state.editorState?.selectionNotifier; + + @override + void initState() { + super.initState(); + selectionNotifier?.addListener(_unfocus); + } @override void dispose() { textEditingController.dispose(); scrollController.dispose(); + selectionNotifier?.removeListener(_unfocus); + focusNode.dispose(); super.dispose(); } @@ -121,6 +135,7 @@ class _DocumentImmersiveCoverState extends State { } return TextField( controller: textEditingController, + focusNode: focusNode, decoration: const InputDecoration( border: InputBorder.none, enabledBorder: InputBorder.none, @@ -225,4 +240,11 @@ class _DocumentImmersiveCoverState extends State { width: double.infinity, ); } + + void _unfocus() { + final selection = selectionNotifier?.value; + if (selection != null) { + focusNode.unfocus(disposition: UnfocusDisposition.previouslyFocusedChild); + } + } } diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart index 7b76767120..f3339de3a8 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart @@ -1,9 +1,6 @@ import 'dart:async'; import 'dart:io'; -import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; - import 'package:appflowy/plugins/document/application/document_bloc.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_close_keyboard_or_menu_button.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart'; @@ -12,6 +9,8 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_too import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:collection/collection.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; @@ -76,7 +75,10 @@ class _AppFlowyMobileToolbarState extends State { builder: (context, isKeyboardShow, __) { return AnimatedContainer( duration: const Duration(milliseconds: 110), - height: isKeyboardShow ? widget.toolbarHeight : 0, + // only adding padding when the keyboard is triggered by editor + height: isKeyboardShow && widget.editorState.selection != null + ? widget.toolbarHeight + : 0, ); }, ),