feat: adjust code block, outline block on mobile (#3940)

* fix: missing delete cover button on mobile

* fix: ensure last node is an empty paragraph

* feat: adjust code block

* feat: adjust code block on mobile

* feat: adjust outline on mobile

* fix: appimage builder issues

* fix: view title issues

* fix: integration tests
This commit is contained in:
Lucas.Xu 2023-11-15 16:04:18 +08:00 committed by GitHub
parent 6a9866b9d2
commit 31e9a0b4ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 381 additions and 183 deletions

View File

@ -21,7 +21,7 @@ void main() {
// create a new document // create a new document
await tester.createNewPageWithName( await tester.createNewPageWithName(
name: LocaleKeys.document_plugins_createInlineMathEquation.tr(), name: 'math equation',
layout: ViewLayoutPB.Document, layout: ViewLayoutPB.Document,
); );
@ -67,7 +67,7 @@ void main() {
// create a new document // create a new document
await tester.createNewPageWithName( await tester.createNewPageWithName(
name: LocaleKeys.document_plugins_createInlineMathEquation.tr(), name: 'math equation',
layout: ViewLayoutPB.Document, layout: ViewLayoutPB.Document,
); );

View File

@ -1,5 +1,7 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart'; import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
import 'package:appflowy/plugins/base/icon/icon_picker.dart'; import 'package:appflowy/plugins/base/icon/icon_picker.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
@ -22,8 +24,8 @@ class _IconPickerPageState extends State<IconPickerPage> {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
titleSpacing: 0, titleSpacing: 0,
title: const FlowyText.semibold( title: FlowyText.semibold(
'Page icon', LocaleKeys.titleBar_pageIcon.tr(),
fontSize: 14.0, fontSize: 14.0,
), ),
leading: AppBarBackButton( leading: AppBarBackButton(

View File

@ -155,6 +155,10 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
configuration: configuration.copyWith( configuration: configuration.copyWith(
placeholderTextStyle: (_) => placeholderTextStyle: (_) =>
styleCustomizer.outlineBlockPlaceholderStyleBuilder(), styleCustomizer.outlineBlockPlaceholderStyleBuilder(),
padding: (_) => const EdgeInsets.only(
top: 12.0,
bottom: 4.0,
),
), ),
), ),
errorBlockComponentBuilderKey: ErrorBlockComponentBuilder( errorBlockComponentBuilderKey: ErrorBlockComponentBuilder(

View File

@ -251,7 +251,14 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
contextMenuItems: customContextMenuItems, contextMenuItems: customContextMenuItems,
// customize the header and footer. // customize the header and footer.
header: widget.header, header: widget.header,
footer: VSpace(PlatformExtension.isDesktopOrWeb ? 200 : 400), footer: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () async {
// if the last one isn't a empty node, insert a new empty node.
await _ensureLastNodeIsEmptyParagraph();
},
child: VSpace(PlatformExtension.isDesktopOrWeb ? 200 : 400),
),
), ),
); );
@ -474,4 +481,20 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
void _initEditorL10n() { void _initEditorL10n() {
AppFlowyEditorL10n.current = EditorI18n(); AppFlowyEditorL10n.current = EditorI18n();
} }
Future<void> _ensureLastNodeIsEmptyParagraph() async {
final editorState = widget.editorState;
final root = editorState.document.root;
final lastNode = root.children.lastOrNull;
if (lastNode == null ||
lastNode.delta?.isEmpty == false ||
lastNode.type != ParagraphBlockKeys.type) {
final transaction = editorState.transaction;
transaction.insertNode([root.children.length], paragraphNode());
transaction.afterSelection = Selection.collapsed(
Position(path: [root.children.length]),
);
await editorState.apply(transaction);
}
}
} }

View File

@ -1,18 +1,78 @@
import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/mobile_block_action_buttons.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_item_list_menu.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_item_list_menu.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart';
import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart' hide TextDirection; import 'package:easy_localization/easy_localization.dart' hide TextDirection;
import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:highlight/highlight.dart' as highlight; import 'package:highlight/highlight.dart' as highlight;
import 'package:highlight/languages/all.dart'; import 'package:highlight/languages/all.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'code_block_themes.dart'; import 'code_block_themes.dart';
final supportedLanguages = [
'Assembly',
'Bash',
'BASIC',
'C',
'C#',
'CPP',
'Clojure',
'CS',
'CSS',
'Dart',
'Docker',
'Elixir',
'Elm',
'Erlang',
'Fortran',
'Go',
'GraphQL',
'Haskell',
'HTML',
'Java',
'JavaScript',
'JSON',
'Kotlin',
'LaTeX',
'Lisp',
'Lua',
'Markdown',
'MATLAB',
'Objective-C',
'OCaml',
'Perl',
'PHP',
'PowerShell',
'Python',
'R',
'Ruby',
'Rust',
'Scala',
'Shell',
'SQL',
'Swift',
'TypeScript',
'Visual Basic',
'XML',
'YAML',
];
final codeBlockSupportedLanguages = supportedLanguages
.map((e) => e.toLowerCase())
.toSet()
.intersection(allLanguages.keys.toSet())
.toList()
..add('auto')
..add('c')
..sort();
class CodeBlockKeys { class CodeBlockKeys {
const CodeBlockKeys._(); const CodeBlockKeys._();
@ -123,62 +183,6 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
final popoverController = PopoverController(); final popoverController = PopoverController();
final supportedLanguages = [
'Assembly',
'Bash',
'BASIC',
'C',
'C#',
'CPP',
'Clojure',
'CS',
'CSS',
'Dart',
'Docker',
'Elixir',
'Elm',
'Erlang',
'Fortran',
'Go',
'GraphQL',
'Haskell',
'HTML',
'Java',
'JavaScript',
'JSON',
'Kotlin',
'LaTeX',
'Lisp',
'Lua',
'Markdown',
'MATLAB',
'Objective-C',
'OCaml',
'Perl',
'PHP',
'PowerShell',
'Python',
'R',
'Ruby',
'Rust',
'Scala',
'Shell',
'SQL',
'Swift',
'TypeScript',
'Visual Basic',
'XML',
'YAML',
];
late final languages = supportedLanguages
.map((e) => e.toLowerCase())
.toSet()
.intersection(allLanguages.keys.toSet())
.toList()
..add('auto')
..add('c')
..sort();
@override @override
late final editorState = context.read<EditorState>(); late final editorState = context.read<EditorState>();
@ -224,10 +228,19 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
child: child, child: child,
); );
if (widget.showActions && widget.actionBuilder != null) { if (PlatformExtension.isDesktopOrWeb) {
child = BlockComponentActionWrapper( if (widget.showActions && widget.actionBuilder != null) {
node: widget.node, child = BlockComponentActionWrapper(
actionBuilder: widget.actionBuilder!, node: widget.node,
actionBuilder: widget.actionBuilder!,
child: child,
);
}
} else {
// show a fixed menu on mobile
child = MobileBlockActionButtons(
node: node,
editorState: editorState,
child: child, child: child,
); );
} }
@ -277,36 +290,57 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
Widget _buildSwitchLanguageButton(BuildContext context) { Widget _buildSwitchLanguageButton(BuildContext context) {
const maxWidth = 100.0; const maxWidth = 100.0;
return AppFlowyPopover(
controller: popoverController, Widget child = Container(
child: Container( width: maxWidth,
width: maxWidth, alignment: Alignment.centerLeft,
alignment: Alignment.centerLeft, padding: const EdgeInsets.only(
padding: const EdgeInsets.symmetric(horizontal: 4), top: 4.0,
child: FlowyTextButton( left: 4.0,
'${language?.capitalize() ?? 'Auto'} ', bottom: 12.0,
padding: const EdgeInsets.symmetric( ),
horizontal: 12.0, child: FlowyTextButton(
vertical: 4.0, '${language?.capitalize() ?? 'Auto'} ',
), padding: const EdgeInsets.symmetric(
constraints: const BoxConstraints(maxWidth: maxWidth), horizontal: 8.0,
fontColor: Theme.of(context).colorScheme.onBackground, vertical: 6.0,
fillColor: Colors.transparent, ),
mainAxisAlignment: MainAxisAlignment.start, constraints: const BoxConstraints(maxWidth: maxWidth),
onPressed: () {}, fontColor: Theme.of(context).colorScheme.onBackground,
), fillColor: Colors.transparent,
mainAxisAlignment: MainAxisAlignment.start,
onPressed: () async {
if (PlatformExtension.isMobile) {
final language = await context.push<String>(
MobileCodeLanguagePickerScreen.routeName,
);
if (language != null) {
updateLanguage(language);
}
}
},
), ),
popupBuilder: (BuildContext context) {
return SelectableItemListMenu(
items: languages.map((e) => e.capitalize()).toList(),
selectedIndex: languages.indexOf(language ?? ''),
onSelected: (index) {
updateLanguage(languages[index]);
popoverController.close();
},
);
},
); );
if (PlatformExtension.isDesktopOrWeb) {
child = AppFlowyPopover(
controller: popoverController,
child: child,
popupBuilder: (BuildContext context) {
return SelectableItemListMenu(
items:
codeBlockSupportedLanguages.map((e) => e.capitalize()).toList(),
selectedIndex: codeBlockSupportedLanguages.indexOf(language ?? ''),
onSelected: (index) {
updateLanguage(codeBlockSupportedLanguages[index]);
popoverController.close();
},
);
},
);
}
return child;
} }
Future<void> updateLanguage(String language) async { Future<void> updateLanguage(String language) async {

View File

@ -0,0 +1,49 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
class MobileCodeLanguagePickerScreen extends StatelessWidget {
static const routeName = '/code_language_picker';
const MobileCodeLanguagePickerScreen({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0,
title: FlowyText.semibold(
LocaleKeys.titleBar_language.tr(),
fontSize: 14.0,
),
leading: AppBarBackButton(
onTap: () => context.pop(),
),
),
body: SafeArea(
child: ListView.separated(
itemBuilder: (context, index) {
final language = codeBlockSupportedLanguages[index];
return FlowyTextButton(
language.capitalize(),
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 4.0,
),
onPressed: () => context.pop(language),
);
},
separatorBuilder: (_, __) => const Divider(),
itemCount: codeBlockSupportedLanguages.length,
),
),
);
}
}

View File

@ -418,48 +418,59 @@ class DocumentCoverState extends State<DocumentCover> {
Positioned( Positioned(
bottom: 8, bottom: 8,
right: 12, right: 12,
child: RoundedTextButton( child: Row(
onPressed: () { children: [
showFlowyMobileBottomSheet( RoundedTextButton(
context, onPressed: () {
title: LocaleKeys.document_plugins_cover_changeCover.tr(), showFlowyMobileBottomSheet(
builder: (context) { context,
return ConstrainedBox( title: LocaleKeys.document_plugins_cover_changeCover.tr(),
constraints: const BoxConstraints( builder: (context) {
maxHeight: 340, return ConstrainedBox(
minHeight: 80, constraints: const BoxConstraints(
), maxHeight: 340,
child: UploadImageMenu( minHeight: 80,
supportTypes: const [ ),
UploadImageType.color, child: UploadImageMenu(
UploadImageType.local, supportTypes: const [
UploadImageType.url, UploadImageType.color,
UploadImageType.unsplash, UploadImageType.local,
], UploadImageType.url,
onSelectedLocalImage: (path) async { UploadImageType.unsplash,
context.pop(); ],
widget.onCoverChanged(CoverType.file, path); onSelectedLocalImage: (path) async {
}, context.pop();
onSelectedAIImage: (_) { widget.onCoverChanged(CoverType.file, path);
throw UnimplementedError(); },
}, onSelectedAIImage: (_) {
onSelectedNetworkImage: (url) async { throw UnimplementedError();
context.pop(); },
widget.onCoverChanged(CoverType.file, url); onSelectedNetworkImage: (url) async {
}, context.pop();
onSelectedColor: (color) { widget.onCoverChanged(CoverType.file, url);
context.pop(); },
widget.onCoverChanged(CoverType.color, color); onSelectedColor: (color) {
}, context.pop();
), widget.onCoverChanged(CoverType.color, color);
},
),
);
},
); );
}, },
); fillColor: Theme.of(context).colorScheme.onSurfaceVariant,
}, width: 120,
fillColor: Theme.of(context).colorScheme.onSurfaceVariant, height: 32,
width: 120, title: LocaleKeys.document_plugins_cover_changeCover.tr(),
height: 32, ),
title: LocaleKeys.document_plugins_cover_changeCover.tr(), const HSpace(8.0),
SizedBox.square(
dimension: 32.0,
child: DeleteCoverButton(
onTap: () => widget.onCoverChanged(CoverType.none, null),
),
),
],
), ),
), ),
], ],
@ -564,7 +575,7 @@ class DeleteCoverButton extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return FlowyIconButton( return FlowyIconButton(
hoverColor: Theme.of(context).colorScheme.surface, hoverColor: Theme.of(context).colorScheme.surface,
fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.5), fillColor: Theme.of(context).colorScheme.onSurfaceVariant,
iconPadding: const EdgeInsets.all(5), iconPadding: const EdgeInsets.all(5),
width: 28, width: 28,
icon: FlowySvg( icon: FlowySvg(

View File

@ -79,6 +79,26 @@ class _MobileListMenu extends StatelessWidget {
const Icon(Icons.note_rounded), const Icon(Icons.note_rounded),
LocaleKeys.document_plugins_callout.tr(), LocaleKeys.document_plugins_callout.tr(),
), ),
_buildListButton(
context,
CodeBlockKeys.type,
const Icon(Icons.abc),
LocaleKeys.document_selectionMenu_codeBlock.tr(),
),
// code block
_buildListButton(
context,
CodeBlockKeys.type,
const Icon(Icons.abc),
LocaleKeys.document_selectionMenu_codeBlock.tr(),
),
// outline
_buildListButton(
context,
OutlineBlockKeys.type,
const Icon(Icons.list_alt),
LocaleKeys.document_selectionMenu_outline.tr(),
),
], ],
); );
} }

View File

@ -1,6 +1,7 @@
import 'dart:async'; import 'dart:async';
import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/mobile_block_action_buttons.dart';
import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart' hide TextDirection; import 'package:easy_localization/easy_localization.dart' hide TextDirection;
import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -88,14 +89,25 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
return StreamBuilder( return StreamBuilder(
stream: stream, stream: stream,
builder: (context, snapshot) { builder: (context, snapshot) {
if (widget.showActions && widget.actionBuilder != null) { Widget child = _buildOutlineBlock();
return BlockComponentActionWrapper(
node: widget.node, if (PlatformExtension.isDesktopOrWeb) {
actionBuilder: widget.actionBuilder!, if (widget.showActions && widget.actionBuilder != null) {
child: _buildOutlineBlock(), child = BlockComponentActionWrapper(
node: widget.node,
actionBuilder: widget.actionBuilder!,
child: child,
);
}
} else {
child = MobileBlockActionButtons(
node: node,
editorState: editorState,
child: child,
); );
} }
return _buildOutlineBlock();
return child;
}, },
); );
} }
@ -119,33 +131,47 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
), ),
) )
.toList(); .toList();
if (children.isEmpty) {
return Align( final child = children.isEmpty
alignment: Alignment.centerLeft, ? Align(
child: Text( alignment: Alignment.centerLeft,
LocaleKeys.document_plugins_outline_addHeadingToCreateOutline.tr(), child: Text(
style: configuration.placeholderTextStyle(node), LocaleKeys.document_plugins_outline_addHeadingToCreateOutline
), .tr(),
); style: configuration.placeholderTextStyle(node),
} ),
return DecoratedBox( )
decoration: BoxDecoration( : DecoratedBox(
borderRadius: const BorderRadius.all(Radius.circular(8.0)), decoration: BoxDecoration(
color: backgroundColor, borderRadius: const BorderRadius.all(Radius.circular(8.0)),
), color: backgroundColor,
child: Column( ),
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
mainAxisAlignment: MainAxisAlignment.start, key: ValueKey(children.hashCode),
mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start,
textDirection: textDirection, mainAxisAlignment: MainAxisAlignment.start,
children: children, mainAxisSize: MainAxisSize.min,
textDirection: textDirection,
children: children,
),
);
return Container(
constraints: const BoxConstraints(
minHeight: 40.0,
), ),
padding: padding,
child: child,
); );
} }
Iterable<Node> getHeadingNodes() { Iterable<Node> getHeadingNodes() {
final children = editorState.document.root.children; final children = editorState.document.root.children;
return children.where((element) => element.type == HeadingBlockKeys.type); return children.where(
(element) =>
element.type == HeadingBlockKeys.type &&
element.delta?.isNotEmpty == true,
);
} }
} }
@ -172,6 +198,7 @@ class OutlineItemWidget extends StatelessWidget {
), ),
builder: (context, onHover) { builder: (context, onHover) {
return GestureDetector( return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => scrollToBlock(context), onTap: () => scrollToBlock(context),
child: Row( child: Row(
textDirection: textDirection, textDirection: textDirection,
@ -196,12 +223,13 @@ class OutlineItemWidget extends StatelessWidget {
void scrollToBlock(BuildContext context) { void scrollToBlock(BuildContext context) {
final editorState = context.read<EditorState>(); final editorState = context.read<EditorState>();
final editorScrollController = context.read<EditorScrollController>(); final editorScrollController = context.read<EditorScrollController>();
editorScrollController.itemScrollController.jumpTo(index: node.path.first); editorScrollController.itemScrollController.jumpTo(
WidgetsBinding.instance.addPostFrameCallback((timeStamp) { index: node.path.first,
editorState.selection = Selection.collapsed( alignment: 0.5,
Position(path: node.path, offset: node.delta?.length ?? 0), );
); editorState.selection = Selection.collapsed(
}); Position(path: node.path, offset: node.delta?.length ?? 0),
);
} }
} }

View File

@ -4,6 +4,7 @@ import 'package:appflowy/mobile/presentation/database/mobile_grid_screen.dart';
import 'package:appflowy/mobile/presentation/favorite/mobile_favorite_page.dart'; import 'package:appflowy/mobile/presentation/favorite/mobile_favorite_page.dart';
import 'package:appflowy/mobile/presentation/presentation.dart'; import 'package:appflowy/mobile/presentation/presentation.dart';
import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart'; import 'package:appflowy/plugins/base/emoji/emoji_picker_screen.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_picker_screen.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_picker_screen.dart';
import 'package:appflowy/startup/startup.dart'; import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/startup/tasks/app_widget.dart'; import 'package:appflowy/startup/tasks/app_widget.dart';
@ -53,6 +54,9 @@ GoRouter generateRouter(Widget child) {
// emoji picker // emoji picker
_mobileEmojiPickerPageRoute(), _mobileEmojiPickerPageRoute(),
_mobileImagePickerPageRoute(), _mobileImagePickerPageRoute(),
// code language picker
_mobileCodeLanguagePickerPageRoute(),
], ],
// Desktop and Mobile // Desktop and Mobile
@ -230,6 +234,18 @@ GoRoute _mobileImagePickerPageRoute() {
); );
} }
GoRoute _mobileCodeLanguagePickerPageRoute() {
return GoRoute(
parentNavigatorKey: AppGlobals.rootNavKey,
path: MobileCodeLanguagePickerScreen.routeName,
pageBuilder: (context, state) {
return const MaterialPage(
child: MobileCodeLanguagePickerScreen(),
);
},
);
}
GoRoute _desktopHomeScreenRoute() { GoRoute _desktopHomeScreenRoute() {
return GoRoute( return GoRoute(
path: DesktopHomeScreen.routeName, path: DesktopHomeScreen.routeName,

View File

@ -7,6 +7,7 @@ import 'package:appflowy/workspace/application/view/view_service.dart';
import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart'; import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
@ -51,7 +52,7 @@ class _ViewTitleBarState extends State<ViewTitleBar> {
if (ancestors == null) { if (ancestors == null) {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
const maxWidth = WindowSizeManager.minWindowWidth - 100; const maxWidth = WindowSizeManager.minWindowWidth - 200;
final replacement = Row( final replacement = Row(
// refresh the view title bar when the ancestors changed // refresh the view title bar when the ancestors changed
key: ValueKey(ancestors.hashCode), key: ValueKey(ancestors.hashCode),
@ -64,6 +65,7 @@ class _ViewTitleBarState extends State<ViewTitleBar> {
replacement: replacement, replacement: replacement,
// if the width is too small, only show one view title bar without the ancestors // if the width is too small, only show one view title bar without the ancestors
child: _ViewTitle( child: _ViewTitle(
key: ValueKey(ancestors.last),
view: ancestors.last, view: ancestors.last,
behavior: _ViewTitleBehavior.editable, behavior: _ViewTitleBehavior.editable,
maxTitleWidth: constraints.maxWidth - 50.0, maxTitleWidth: constraints.maxWidth - 50.0,
@ -123,6 +125,7 @@ enum _ViewTitleBehavior {
class _ViewTitle extends StatefulWidget { class _ViewTitle extends StatefulWidget {
const _ViewTitle({ const _ViewTitle({
super.key,
required this.view, required this.view,
this.behavior = _ViewTitleBehavior.editable, this.behavior = _ViewTitleBehavior.editable,
this.maxTitleWidth = 180, this.maxTitleWidth = 180,
@ -187,23 +190,26 @@ class _ViewTitleState extends State<_ViewTitle> {
); );
} }
final child = Row( final child = FlowyTooltip(
children: [ message: name,
FlowyText.regular( child: Row(
icon, children: [
fontSize: 18.0, FlowyText.regular(
), icon,
const HSpace(2.0), fontSize: 18.0,
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: widget.maxTitleWidth,
), ),
child: FlowyText.regular( const HSpace(2.0),
name, ConstrainedBox(
overflow: TextOverflow.ellipsis, constraints: BoxConstraints(
maxWidth: widget.maxTitleWidth,
),
child: FlowyText.regular(
name,
overflow: TextOverflow.ellipsis,
),
), ),
), ],
], ),
); );
if (widget.behavior == _ViewTitleBehavior.uneditable) { if (widget.behavior == _ViewTitleBehavior.uneditable) {

View File

@ -1061,5 +1061,9 @@
}, },
"cardDetails": { "cardDetails": {
"notesPlaceholder": "Enter a / to insert a block, or start typing" "notesPlaceholder": "Enter a / to insert a block, or start typing"
},
"titleBar": {
"pageIcon": "Page icon",
"language": "Language"
} }
} }

View File

@ -48,6 +48,7 @@ AppDir:
include: include:
- libc6:amd64 - libc6:amd64
- libnotify4:amd64 - libnotify4:amd64
- libkeybinder-3.0-0:amd64
files: files:
include: [] include: []
exclude: exclude: