yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-03 19:43:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile ui fixes (#4780)

Browse Source 
* fix: adjust mobile grid padding

* fix: reorder field not working
This commit is contained in:
Richard Shiue 2024-02-29 09:44:48 +08:00 committed by GitHub
parent 01f2b15f70
commit f826d05f03
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 106 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart
View File

@ -7,16 +7,16 @@ class CalendarSize {
static double get headerContainerPadding => 12 * scale;
static EdgeInsets get contentInsets => EdgeInsets.fromLTRB(
GridSize.leadingHeaderPadding,
GridSize.horizontalHeaderPadding,
CalendarSize.headerContainerPadding,
GridSize.leadingHeaderPadding,
GridSize.horizontalHeaderPadding,
CalendarSize.headerContainerPadding,
);
static EdgeInsets get contentInsetsMobile => EdgeInsets.fromLTRB(
GridSize.leadingHeaderPadding / 2,
GridSize.horizontalHeaderPadding / 2,
0,
GridSize.leadingHeaderPadding / 2,
GridSize.horizontalHeaderPadding / 2,
0,
);

2
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
View File

@ -16,7 +16,7 @@ class GridLayout {
.reduce((value, element) => value + element);
return fieldsWidth +
GridSize.leadingHeaderPadding +
GridSize.horizontalHeaderPadding +
GridSize.trailHeaderPadding;
}
}

26
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
View File

@ -7,19 +7,14 @@ class GridSize {
static double get scrollBarSize => 8 * scale;
static double get headerHeight => 40 * scale;
static double get footerHeight => 40 * scale;
static double get leadingHeaderPadding =>
PlatformExtension.isDesktop ? 40 * scale : 20 * scale;
static double get horizontalHeaderPadding =>
PlatformExtension.isDesktop ? 40 * scale : 16 * scale;
static double get trailHeaderPadding => 140 * scale;
static double get headerContainerPadding => 0 * scale;
static double get cellHPadding => 10 * scale;
static double get cellVPadding => 10 * scale;
static double get popoverItemHeight => 26 * scale;
static double get typeOptionSeparatorHeight => 4 * scale;
static EdgeInsets get headerContentInsets => EdgeInsets.symmetric(
horizontal: GridSize.headerContainerPadding,
vertical: GridSize.headerContainerPadding,
);
static EdgeInsets get cellContentInsets => EdgeInsets.symmetric(
horizontal: GridSize.cellHPadding,
vertical: GridSize.cellVPadding,
@ -36,18 +31,13 @@ class GridSize {
const EdgeInsets.symmetric(horizontal: 8, vertical: 2);
static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
GridSize.leadingHeaderPadding,
GridSize.headerContainerPadding,
PlatformExtension.isMobile
? GridSize.leadingHeaderPadding
: GridSize.headerContainerPadding,
PlatformExtension.isMobile ? 100 : GridSize.headerContainerPadding,
GridSize.horizontalHeaderPadding,
0,
PlatformExtension.isMobile ? GridSize.horizontalHeaderPadding : 0,
PlatformExtension.isMobile ? 100 : 0,
);
static EdgeInsets get contentInsets => EdgeInsets.fromLTRB(
GridSize.leadingHeaderPadding,
GridSize.headerContainerPadding,
GridSize.leadingHeaderPadding,
GridSize.headerContainerPadding,
static EdgeInsets get contentInsets => EdgeInsets.symmetric(
horizontal: GridSize.horizontalHeaderPadding,
);
}

42
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart
View File

@ -157,12 +157,14 @@ class _GridPageContentState extends State<GridPageContent> {
final _scrollController = GridScrollController(
scrollGroupController: LinkedScrollControllerGroup(),
);
late final ScrollController headerScrollController;
late final ScrollController contentScrollController;
late final ScrollController reorderableController;
@override
void initState() {
super.initState();
headerScrollController = _scrollController.linkHorizontalController();
contentScrollController = _scrollController.linkHorizontalController();
reorderableController = _scrollController.linkHorizontalController();
}
@override
@ -196,7 +198,8 @@ class _GridPageContentState extends State<GridPageContent> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_GridHeader(
headerScrollController: headerScrollController,
contentScrollController: contentScrollController,
reorderableController: reorderableController,
),
_GridRows(
viewId: widget.view.id,
@ -205,8 +208,8 @@ class _GridPageContentState extends State<GridPageContent> {
],
),
Positioned(
bottom: 20,
right: 20,
bottom: 16,
right: 16,
child: getGridFabs(context),
),
],
@ -216,9 +219,13 @@ class _GridPageContentState extends State<GridPageContent> {
}
class _GridHeader extends StatelessWidget {
const _GridHeader({required this.headerScrollController});
const _GridHeader({
required this.contentScrollController,
required this.reorderableController,
});
final ScrollController headerScrollController;
final ScrollController contentScrollController;
final ScrollController reorderableController;
@override
Widget build(BuildContext context) {
@ -226,7 +233,8 @@ class _GridHeader extends StatelessWidget {
builder: (context, state) {
return MobileGridHeader(
viewId: state.viewId,
anchorScrollController: headerScrollController,
contentScrollController: contentScrollController,
reorderableController: reorderableController,
);
},
);
@ -247,7 +255,7 @@ class _GridRows extends StatelessWidget {
return BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => previous.fields != current.fields,
builder: (context, state) {
final double contentWidth = _getContentWidth(state.fields);
final double contentWidth = getMobileGridContentWidth(state.fields);
return Expanded(
child: _WrapScrollView(
scrollController: scrollController,
@ -277,14 +285,6 @@ class _GridRows extends StatelessWidget {
);
}
double _getContentWidth(List<FieldInfo> fields) {
final visibleFields = fields.where(
(field) =>
field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden,
);
return (visibleFields.length + 1) * 200 + GridSize.leadingHeaderPadding * 2;
}
Widget _renderList(
BuildContext context,
GridState state,
@ -438,3 +438,11 @@ class _AddRowButton extends StatelessWidget {
);
}
}
double getMobileGridContentWidth(List<FieldInfo> fields) {
final visibleFields = fields.where(
(field) => field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden,
);
return (visibleFields.length + 1) * 200 +
GridSize.horizontalHeaderPadding * 2;
}

3
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
View File

@ -139,7 +139,7 @@ class _GridHeaderState extends State<_GridHeader> {
}
Widget _cellLeading() {
return SizedBox(width: GridSize.leadingHeaderPadding);
return SizedBox(width: GridSize.horizontalHeaderPadding);
}
}
@ -158,7 +158,6 @@ class _CellTrailing extends StatelessWidget {
bottom: BorderSide(color: Theme.of(context).dividerColor),
),
),
padding: GridSize.headerContentInsets,
child: CreateFieldButton(
viewId: viewId,
onFieldCreated: (fieldId) => context

74
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
View File

@ -13,17 +13,22 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/sizes.dart';
import '../../mobile_grid_page.dart';
import 'mobile_field_button.dart';
const double _kGridHeaderHeight = 50.0;
class MobileGridHeader extends StatefulWidget {
const MobileGridHeader({
super.key,
required this.viewId,
required this.anchorScrollController,
required this.contentScrollController,
required this.reorderableController,
});
final String viewId;
final ScrollController anchorScrollController;
final ScrollController contentScrollController;
final ScrollController reorderableController;
@override
State<MobileGridHeader> createState() => _MobileGridHeaderState();
@ -41,29 +46,45 @@ class _MobileGridHeaderState extends State<MobileGridHeader> {
fieldController: fieldController,
)..add(const GridHeaderEvent.initial());
},
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: widget.anchorScrollController,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
HSpace(GridSize.leadingHeaderPadding),
Stack(
children: [
Positioned(top: 0, left: 24, right: 24, child: _divider()),
Positioned(bottom: 0, left: 0, right: 0, child: _divider()),
SizedBox(
height: 50,
child: _GridHeader(
viewId: widget.viewId,
fieldController: fieldController,
),
child: Stack(
children: [
BlocBuilder<GridHeaderBloc, GridHeaderState>(
builder: (context, state) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: widget.contentScrollController,
child: Stack(
children: [
Positioned(
top: 0,
left: GridSize.horizontalHeaderPadding + 24,
right: GridSize.horizontalHeaderPadding + 24,
child: _divider(),
),
Positioned(
bottom: 0,
left: GridSize.horizontalHeaderPadding,
right: GridSize.horizontalHeaderPadding,
child: _divider(),
),
SizedBox(
height: _kGridHeaderHeight,
width: getMobileGridContentWidth(state.fields),
),
],
),
],
);
},
),
SizedBox(
height: _kGridHeaderHeight,
child: _GridHeader(
viewId: widget.viewId,
fieldController: fieldController,
scrollController: widget.reorderableController,
),
const HSpace(20),
],
),
),
],
),
);
}
@ -81,10 +102,12 @@ class _GridHeader extends StatefulWidget {
const _GridHeader({
required this.viewId,
required this.fieldController,
required this.scrollController,
});
final String viewId;
final FieldController fieldController;
final ScrollController scrollController;
@override
State<_GridHeader> createState() => _GridHeaderState();
@ -114,13 +137,16 @@ class _GridHeaderState extends State<_GridHeader> {
.toList();
return ReorderableListView.builder(
scrollController: ScrollController(),
scrollController: widget.scrollController,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
proxyDecorator: (child, index, anim) => Material(
color: Colors.transparent,
child: child,
),
padding: EdgeInsets.symmetric(
horizontal: GridSize.horizontalHeaderPadding,
),
header: firstField != null
? MobileFieldButton.first(
viewId: widget.viewId,

3
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart
View File

@ -68,7 +68,7 @@ class _MobileGridRowState extends State<MobileGridRow> {
builder: (context, state) {
return Row(
children: [
SizedBox(width: GridSize.leadingHeaderPadding),
SizedBox(width: GridSize.horizontalHeaderPadding),
Expanded(
child: RowContent(
fieldController: widget.databaseController.fieldController,
@ -163,7 +163,6 @@ class RowContent extends StatelessWidget {
Widget _finalCellDecoration(BuildContext context) {
return Container(
width: 200,
padding: GridSize.headerContentInsets,
constraints: const BoxConstraints(minHeight: 46),
decoration: BoxDecoration(
border: Border(

3
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
View File

@ -115,7 +115,7 @@ class _RowLeadingState extends State<_RowLeading> {
child: Consumer<RegionStateNotifier>(
builder: (context, state, _) {
return SizedBox(
width: GridSize.leadingHeaderPadding,
width: GridSize.horizontalHeaderPadding,
child: state.onEnter ? _activeWidget() : null,
);
},
@ -283,7 +283,6 @@ class RowContent extends StatelessWidget {
cursor: SystemMouseCursors.basic,
child: Container(
width: GridSize.trailHeaderPadding,
padding: GridSize.headerContentInsets,
constraints: const BoxConstraints(minHeight: 46),
decoration: BoxDecoration(
border: Border(

2
frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart
View File

@ -57,7 +57,7 @@ class _DatabaseViewSettingContent extends StatelessWidget {
builder: (context, state) {
return Padding(
padding: EdgeInsets.symmetric(
horizontal: GridSize.leadingHeaderPadding,
horizontal: GridSize.horizontalHeaderPadding,
),
child: DecoratedBox(
decoration: BoxDecoration(

6
frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
View File

@ -1,3 +1,4 @@
import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
import 'package:flutter/material.dart';
import 'package:appflowy/generated/flowy_svgs.g.dart';
@ -21,8 +22,11 @@ class TabBarHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
return Container(
height: 30,
padding: EdgeInsets.symmetric(
horizontal: GridSize.horizontalHeaderPadding,
),
child: Stack(
children: [
Positioned(

8
frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
View File

@ -1,3 +1,4 @@
import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
import 'package:flutter/material.dart';
import 'package:appflowy/generated/flowy_svgs.g.dart';
@ -26,8 +27,11 @@ class _MobileTabBarHeaderState extends State<MobileTabBarHeader> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 14.0) +
const EdgeInsets.symmetric(horizontal: 20),
padding: EdgeInsets.only(
left: GridSize.horizontalHeaderPadding,
top: 14.0,
right: GridSize.horizontalHeaderPadding - 5.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [

14
frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart
View File

@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
import 'package:appflowy/plugins/database/application/database_controller.dart';
import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
import 'package:appflowy/plugins/database/widgets/share_button.dart';
import 'package:appflowy/plugins/util.dart';
import 'package:appflowy/startup/plugin/plugin.dart';
@ -112,16 +111,9 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
return const SizedBox.shrink();
}
if (PlatformExtension.isDesktop) {
return Padding(
padding: EdgeInsets.symmetric(
horizontal: GridSize.leadingHeaderPadding,
),
child: const TabBarHeader(),
);
}
return const MobileTabBarHeader();
return PlatformExtension.isDesktop
? const TabBarHeader()
: const MobileTabBarHeader();
},
);
},