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

chore: optimize recent page views section UI (#4067)

Browse Source 
* chore: adjust text sizing in recent views section
This commit is contained in:
Richard Shiue 2023-12-02 18:07:07 +08:00 committed by GitHub
parent a4e0c5754f
commit 5ff6405f7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_home_recent_views.dart
View File

@ -3,8 +3,7 @@ import 'package:appflowy/mobile/presentation/home/recent_folder/mobile_recent_vi
import 'package:appflowy/workspace/application/recent/prelude.dart';
import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
@ -62,37 +61,35 @@ class _RecentViews extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 168,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: FlowyText.semibold(
LocaleKeys.sideBar_recent.tr(),
fontSize: 20.0,
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: FlowyText.semibold(
LocaleKeys.sideBar_recent.tr(),
fontSize: 20.0,
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: IntrinsicHeight(
child: SeparatedRow(
separatorBuilder: () => const HSpace(8),
children: recentViews
.map(
(view) => SizedBox(
width: 150,
child: MobileRecentView(view: view),
),
)
.toList(),
),
),
Expanded(
child: ListView.separated(
separatorBuilder: (context, index) => const HSpace(8),
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
scrollDirection: Axis.horizontal,
itemCount: recentViews.length,
itemBuilder: (context, index) {
return MobileRecentView(
view: recentViews[index],
height: 120,
);
},
),
),
],
),
),
],
);
}
}

110
frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart
View File

@ -12,7 +12,7 @@ import 'package:appflowy_backend/protobuf/flowy-document2/protobuf.dart';
import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:string_validator/string_validator.dart';
@ -20,11 +20,9 @@ class MobileRecentView extends StatefulWidget {
const MobileRecentView({
super.key,
required this.view,
required this.height,
});
final ViewPB view;
final double height;
@override
State<MobileRecentView> createState() => _MobileRecentViewState();
@ -76,71 +74,55 @@ class _MobileRecentViewState extends State<MobileRecentView> {
return GestureDetector(
onTap: () => context.pushView(view),
child: Container(
height: widget.height,
width: widget.height,
decoration: BoxDecoration(
color: theme.colorScheme.background,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: theme.colorScheme.outline,
),
),
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: SizedBox(
height: widget.height / 2.0,
width: double.infinity,
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: theme.colorScheme.outline),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
child: _buildCoverWidget(),
),
child: _buildCoverWidget(),
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 4),
child: icon.isNotEmpty
? EmojiText(
emoji: icon,
fontSize: 30.0,
)
: SizedBox.square(
dimension: 32.0,
child: view.defaultIcon(),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: widget.height / 2.0,
width: double.infinity,
padding: const EdgeInsets.only(
left: 8.0,
top: 14.0,
right: 8.0,
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 16, 8, 2),
child: FlowyText(
view.name,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
child: FlowyText(
view.name,
maxLines: 2,
fontSize: 14.0,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
),
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 4),
child: icon.isNotEmpty
? EmojiText(
emoji: icon,
fontSize: 30.0,
)
: SizedBox.square(
dimension: 32.0,
child: view.defaultIcon(),
),
),
),
],
),
);
}

1
frontend/appflowy_flutter/lib/startup/deps_resolver.dart
View File

@ -29,7 +29,6 @@ import 'package:appflowy/workspace/application/user/prelude.dart';
import 'package:appflowy/workspace/application/view/prelude.dart';
import 'package:appflowy/workspace/application/workspace/prelude.dart';
import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart';
import 'package:appflowy_backend/log.dart';
import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
import 'package:flowy_infra/file_picker/file_picker_impl.dart';