mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
fix: mobile ui issues (#4074)
* fix: edit field ui issues * fix: set desktop font weight to w500
This commit is contained in:
parent
4d71b42a3d
commit
4ae679128f
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
|
@ -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,
|
||||
|
@ -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(
|
||||
|
Loading…
Reference in New Issue
Block a user