mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-09-11 19:17:43 +03:00
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
This commit is contained in:
parent
554c821db9
commit
22e89fd197
@ -50,56 +50,14 @@ class MobileRecentView extends StatelessWidget {
|
|||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
Expanded(child: _buildCover(context, state)),
|
||||||
child: ClipRRect(
|
Expanded(child: _buildTitle(context, state)),
|
||||||
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,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Align(
|
Align(
|
||||||
alignment: Alignment.centerLeft,
|
alignment: Alignment.centerLeft,
|
||||||
child: Padding(
|
child: _buildIcon(context, state),
|
||||||
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(),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
@ -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 {
|
class _RecentCover extends StatelessWidget {
|
||||||
|
@ -3,6 +3,7 @@ import 'dart:io';
|
|||||||
import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
|
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/emoji/emoji_picker_screen.dart';
|
||||||
import 'package:appflowy/plugins/base/icon/icon_picker.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/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/cover/document_immersive_cover_bloc.dart';
|
||||||
import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.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/workspace/application/view/view_bloc.dart';
|
||||||
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
|
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
|
||||||
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.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/theme_extension.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/ignore_parent_gesture.dart';
|
import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
|
||||||
@ -40,11 +42,23 @@ class DocumentImmersiveCover extends StatefulWidget {
|
|||||||
class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
|
class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
|
||||||
final textEditingController = TextEditingController();
|
final textEditingController = TextEditingController();
|
||||||
final scrollController = ScrollController();
|
final scrollController = ScrollController();
|
||||||
|
final focusNode = FocusNode();
|
||||||
|
|
||||||
|
late PropertyValueNotifier<Selection?>? selectionNotifier =
|
||||||
|
context.read<DocumentBloc>().state.editorState?.selectionNotifier;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
selectionNotifier?.addListener(_unfocus);
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void dispose() {
|
void dispose() {
|
||||||
textEditingController.dispose();
|
textEditingController.dispose();
|
||||||
scrollController.dispose();
|
scrollController.dispose();
|
||||||
|
selectionNotifier?.removeListener(_unfocus);
|
||||||
|
focusNode.dispose();
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -121,6 +135,7 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
|
|||||||
}
|
}
|
||||||
return TextField(
|
return TextField(
|
||||||
controller: textEditingController,
|
controller: textEditingController,
|
||||||
|
focusNode: focusNode,
|
||||||
decoration: const InputDecoration(
|
decoration: const InputDecoration(
|
||||||
border: InputBorder.none,
|
border: InputBorder.none,
|
||||||
enabledBorder: InputBorder.none,
|
enabledBorder: InputBorder.none,
|
||||||
@ -225,4 +240,11 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
|
|||||||
width: double.infinity,
|
width: double.infinity,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void _unfocus() {
|
||||||
|
final selection = selectionNotifier?.value;
|
||||||
|
if (selection != null) {
|
||||||
|
focusNode.unfocus(disposition: UnfocusDisposition.previouslyFocusedChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,6 @@
|
|||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
import 'dart:io';
|
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/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/_close_keyboard_or_menu_button.dart';
|
||||||
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.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:appflowy_editor/appflowy_editor.dart';
|
||||||
import 'package:collection/collection.dart';
|
import 'package:collection/collection.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/services.dart';
|
||||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
@ -76,7 +75,10 @@ class _AppFlowyMobileToolbarState extends State<AppFlowyMobileToolbar> {
|
|||||||
builder: (context, isKeyboardShow, __) {
|
builder: (context, isKeyboardShow, __) {
|
||||||
return AnimatedContainer(
|
return AnimatedContainer(
|
||||||
duration: const Duration(milliseconds: 110),
|
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,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
Loading…
Reference in New Issue
Block a user