fix: mobile ui issues (#4074)

* fix: edit field ui issues

* fix: set desktop font weight to w500
This commit is contained in:
Lucas.Xu 2023-12-03 22:12:07 +08:00 committed by GitHub
parent 4d71b42a3d
commit 4ae679128f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 119 additions and 86 deletions

View File

@ -216,78 +216,74 @@ class RowDetailFab extends StatelessWidget {
final previousDisabled = rowIndex == 0;
final nextDisabled = rowIndex == rowCount - 1;
return Positioned(
bottom: 0,
right: 0,
child: IntrinsicWidth(
child: Container(
height: 48,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(26),
boxShadow: const [
BoxShadow(
offset: Offset(0, 8),
blurRadius: 20,
spreadRadius: 0,
color: Color(0x191F2329),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox.square(
dimension: 48,
child: Material(
color: Theme.of(context).colorScheme.surface,
return IntrinsicWidth(
child: Container(
height: 48,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(26),
boxShadow: const [
BoxShadow(
offset: Offset(0, 8),
blurRadius: 20,
spreadRadius: 0,
color: Color(0x191F2329),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox.square(
dimension: 48,
child: Material(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(26),
borderOnForeground: false,
child: InkWell(
borderRadius: BorderRadius.circular(26),
borderOnForeground: false,
child: InkWell(
borderRadius: BorderRadius.circular(26),
onTap: () {
if (!previousDisabled) {
onTapPrevious();
}
},
child: Icon(
Icons.chevron_left_outlined,
color: previousDisabled
? Theme.of(context).disabledColor
: null,
),
onTap: () {
if (!previousDisabled) {
onTapPrevious();
}
},
child: Icon(
Icons.chevron_left_outlined,
color: previousDisabled
? Theme.of(context).disabledColor
: null,
),
),
),
FlowyText.medium(
"${rowIndex + 1} / $rowCount",
fontSize: 14,
),
SizedBox.square(
dimension: 48,
child: Material(
color: Theme.of(context).colorScheme.surface,
),
FlowyText.medium(
"${rowIndex + 1} / $rowCount",
fontSize: 14,
),
SizedBox.square(
dimension: 48,
child: Material(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(26),
borderOnForeground: false,
child: InkWell(
borderRadius: BorderRadius.circular(26),
borderOnForeground: false,
child: InkWell(
borderRadius: BorderRadius.circular(26),
onTap: () {
if (!nextDisabled) {
onTapNext();
}
},
child: Icon(
Icons.chevron_right_outlined,
color: nextDisabled
? Theme.of(context).disabledColor
: null,
),
onTap: () {
if (!nextDisabled) {
onTapNext();
}
},
child: Icon(
Icons.chevron_right_outlined,
color: nextDisabled
? Theme.of(context).disabledColor
: null,
),
),
),
],
),
),
],
),
),
);

View File

@ -36,19 +36,21 @@ class FieldOptions extends StatelessWidget {
const _FieldHeader(),
const VSpace(12.0),
Expanded(
child: GridView.count(
child: SingleChildScrollView(
controller: scrollController,
crossAxisCount: 3,
childAspectRatio: 0.9,
mainAxisSpacing: 12.0,
children: _supportedFieldTypes
.map(
(e) => _Field(
type: e,
onTap: () => onAddField(e),
),
)
.toList(),
child: _GridView(
crossAxisCount: 3,
mainAxisSpacing: 28,
itemWidth: 82,
children: _supportedFieldTypes
.map(
(e) => _Field(
type: e,
onTap: () => onAddField(e),
),
)
.toList(),
),
),
),
],
@ -95,22 +97,56 @@ class _Field extends StatelessWidget {
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return GestureDetector(
onTap: onTap,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
FlowySvg(
type.svgData,
blendMode: null,
size: Size.square(width / 4.0),
size: const Size.square(82),
),
const VSpace(6.0),
FlowyText(
type.i18n,
fontSize: 15.0,
),
],
),
);
}
}
class _GridView extends StatelessWidget {
const _GridView({
required this.children,
required this.crossAxisCount,
required this.mainAxisSpacing,
required this.itemWidth,
});
final List<Widget> children;
final int crossAxisCount;
final double mainAxisSpacing;
final double itemWidth;
@override
Widget build(BuildContext context) {
return Column(
children: [
for (var i = 0; i < children.length; i += crossAxisCount)
Padding(
padding: EdgeInsets.only(bottom: mainAxisSpacing),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
for (var j = 0; j < crossAxisCount; j++)
i + j < children.length ? children[i + j] : HSpace(itemWidth),
],
),
),
],
);
}
}

View File

@ -24,12 +24,11 @@ class _MobileRecentFolderState extends State<MobileRecentFolder> {
),
child: BlocBuilder<RecentViewsBloc, RecentViewsState>(
builder: (context, state) {
final recentViews = state
.views
// only keep the first 10 items.
.reversed
.take(10)
.toList();
final ids = <String>{};
List<ViewPB> recentViews = state.views.reversed.toList();
recentViews.retainWhere((element) => ids.add(element.id));
// only keep the first 10 items.
recentViews = recentViews.take(10).toList();
if (recentViews.isEmpty) {
return const SizedBox.shrink();

View File

@ -101,7 +101,7 @@ class _MobileRecentViewState extends State<MobileRecentView> {
// https://github.com/flutter/flutter/issues/31134
child: Stack(
children: [
FlowyText(
FlowyText.medium(
view.name,
maxLines: 2,
overflow: TextOverflow.ellipsis,

View File

@ -1,3 +1,4 @@
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flutter/material.dart';
@ -23,7 +24,8 @@ abstract class BaseAppearance {
double? lineHeight,
}) {
fontSize = fontSize ?? FontSizes.s12;
fontWeight = fontWeight ?? FontWeight.w400;
fontWeight = fontWeight ??
(PlatformExtension.isDesktopOrWeb ? FontWeight.w500 : FontWeight.w400);
letterSpacing = fontSize * (letterSpacing ?? 0.005);
final textStyle = TextStyle(