From 1a82f3fff12b7b138ee9b392563a8c83e08f6c3c Mon Sep 17 00:00:00 2001 From: Lucas Date: Sat, 5 Oct 2024 21:11:45 +0800 Subject: [PATCH] fix: title flash when resizing (#6481) --- .../editor_plugins/header/cover_title.dart | 11 ++-- .../header/document_cover_widget.dart | 56 +++++++++++-------- .../document/presentation/editor_style.dart | 10 +++- 3 files changed, 47 insertions(+), 30 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_title.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_title.dart index 0493019623..9fee16cebd 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_title.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_title.dart @@ -1,6 +1,7 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/shared_context/shared_context.dart'; +import 'package:appflowy/plugins/document/presentation/editor_style.dart'; import 'package:appflowy/shared/text_field/text_filed_with_metric_lines.dart'; import 'package:appflowy/workspace/application/appearance_defaults.dart'; import 'package:appflowy/workspace/application/view/view_bloc.dart'; @@ -16,11 +17,9 @@ class CoverTitle extends StatelessWidget { const CoverTitle({ super.key, required this.view, - required this.offset, }); final ViewPB view; - final double offset; @override Widget build(BuildContext context) { @@ -28,7 +27,6 @@ class CoverTitle extends StatelessWidget { create: (context) => ViewBloc(view: view)..add(const ViewEvent.initial()), child: _InnerCoverTitle( view: view, - offset: offset, ), ); } @@ -37,11 +35,9 @@ class CoverTitle extends StatelessWidget { class _InnerCoverTitle extends StatefulWidget { const _InnerCoverTitle({ required this.view, - required this.offset, }); final ViewPB view; - final double offset; @override State<_InnerCoverTitle> createState() => _InnerCoverTitleState(); @@ -50,6 +46,7 @@ class _InnerCoverTitle extends StatefulWidget { class _InnerCoverTitleState extends State<_InnerCoverTitle> { final titleTextController = TextEditingController(); final titleFocusNode = FocusNode(); + late final editorContext = context.read(); late final editorState = context.read(); bool isTitleFocused = false; @@ -99,12 +96,14 @@ class _InnerCoverTitleState extends State<_InnerCoverTitle> { .textTheme .bodyMedium! .copyWith(fontSize: 38.0, fontWeight: FontWeight.w700); + final width = context.read().state.width; return BlocConsumer( listener: _onListen, builder: (context, state) { final appearance = context.read().state; return Container( - padding: EdgeInsets.symmetric(horizontal: widget.offset), + padding: EditorStyleCustomizer.documentPaddingWithOptionMenu, + constraints: BoxConstraints(maxWidth: width), child: Theme( data: Theme.of(context).copyWith( textSelectionTheme: TextSelectionThemeData( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart index 60dce56e99..84e6fb3800 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart @@ -168,38 +168,48 @@ class _DocumentCoverWidgetState extends State { onChangeCover: (type, details) => _saveIconOrCover(cover: (type, details)), ), - // don't render the icon if the offset is 0 - if (hasIcon && offset != 0) - Positioned( - left: offset, - // if hasCover, there shouldn't be icons present so the icon can - // be closer to the bottom. - bottom: hasCover - ? kToolbarHeight - kIconHeight / 2 - : kToolbarHeight, - child: DocumentIcon( - editorState: widget.editorState, - node: widget.node, - icon: viewIcon, - onChangeIcon: (icon) => _saveIconOrCover(icon: icon), - ), - ), + _buildCoverIcon( + context, + constraints, + offset, + ), ], ), - if (offset != 0) - Padding( - padding: const EdgeInsets.only(bottom: 12.0), - child: CoverTitle( - view: widget.view, - offset: offset, - ), + Padding( + padding: const EdgeInsets.only(bottom: 12.0), + child: CoverTitle( + view: widget.view, ), + ), ], ); }, ); } + Widget _buildCoverIcon( + BuildContext context, + BoxConstraints constraints, + double offset, + ) { + if (!hasIcon || offset == 0) { + return const SizedBox.shrink(); + } + + return Positioned( + // if hasCover, there shouldn't be icons present so the icon can + // be closer to the bottom. + left: offset, + bottom: hasCover ? kToolbarHeight - kIconHeight / 2 : kToolbarHeight, + child: DocumentIcon( + editorState: widget.editorState, + node: widget.node, + icon: viewIcon, + onChangeIcon: (icon) => _saveIconOrCover(icon: icon), + ), + ); + } + void _reload() => setState(() {}); double _calculateIconLeft(BuildContext context, BoxConstraints constraints) { diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart index 2a6a02bca7..bcb0a2256e 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart @@ -43,7 +43,15 @@ class EditorStyleCustomizer { static EdgeInsets get documentPadding => UniversalPlatform.isMobile ? const EdgeInsets.symmetric(horizontal: 24) - : const EdgeInsets.only(left: 40, right: 40 + 44); + : EdgeInsets.only( + left: 40, + right: 40 + EditorStyleCustomizer.optionMenuWidth, + ); + + static EdgeInsets get documentPaddingWithOptionMenu => + documentPadding + EdgeInsets.only(left: optionMenuWidth); + + static double get optionMenuWidth => UniversalPlatform.isMobile ? 0 : 44; EditorStyle style() { if (UniversalPlatform.isDesktopOrWeb) {