fix: grid width update (#4101)

* chore: enable checklist on mobile

* fix: width of grid not updating properly

* chore: fix sign-in button color and font
This commit is contained in:
Richard Shiue 2023-12-06 11:39:25 +08:00 committed by GitHub
parent 7ad05feb5b
commit 96af012471
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 120 additions and 133 deletions

View File

@ -16,7 +16,7 @@ const _supportedFieldTypes = [
FieldType.MultiSelect,
FieldType.DateTime,
FieldType.Checkbox,
// FieldType.Checklist,
FieldType.Checklist,
];
class FieldOptions extends StatelessWidget {

View File

@ -57,7 +57,7 @@ class GridBloc extends Bloc<GridEvent, GridState> {
didReceiveFieldUpdate: (fields) {
emit(
state.copyWith(
fields: FieldList(fields),
fields: fields,
),
);
},
@ -176,7 +176,7 @@ class GridState with _$GridState {
const factory GridState({
required String viewId,
required Option<DatabasePB> grid,
required FieldList fields,
required List<FieldInfo> fields,
required List<RowInfo> rowInfos,
required int rowCount,
required RowMetaPB? createdRow,
@ -188,7 +188,7 @@ class GridState with _$GridState {
}) = _GridState;
factory GridState.initial(String viewId) => GridState(
fields: FieldList([]),
fields: [],
rowInfos: [],
rowCount: 0,
createdRow: null,
@ -201,8 +201,3 @@ class GridState with _$GridState {
sorts: [],
);
}
@freezed
class FieldList with _$FieldList {
factory FieldList(List<FieldInfo> fields) = _FieldList;
}

View File

@ -169,24 +169,16 @@ class _GridPageContentState extends State<GridPageContent> {
@override
Widget build(BuildContext context) {
return BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => previous.fields != current.fields,
builder: (context, state) {
final contentWidth = GridLayout.headerWidth(state.fields.fields);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_GridHeader(headerScrollController: headerScrollController),
_GridRows(
viewId: state.viewId,
contentWidth: contentWidth,
scrollController: _scrollController,
),
const _GridFooter(),
],
);
},
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_GridHeader(headerScrollController: headerScrollController),
_GridRows(
viewId: widget.view.id,
scrollController: _scrollController,
),
const _GridFooter(),
],
);
}
}
@ -210,41 +202,44 @@ class _GridHeader extends StatelessWidget {
class _GridRows extends StatelessWidget {
final String viewId;
final double contentWidth;
final GridScrollController scrollController;
const _GridRows({
required this.viewId,
required this.contentWidth,
required this.scrollController,
});
@override
Widget build(BuildContext context) {
return Flexible(
child: _WrapScrollView(
scrollController: scrollController,
contentWidth: contentWidth,
child: BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => current.reason.maybeWhen(
reorderRows: () => true,
reorderSingleRow: (reorderRow, rowInfo) => true,
delete: (item) => true,
insert: (item) => true,
orElse: () => false,
return BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => previous.fields != current.fields,
builder: (context, state) {
return Flexible(
child: _WrapScrollView(
scrollController: scrollController,
contentWidth: GridLayout.headerWidth(state.fields),
child: BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => current.reason.maybeWhen(
reorderRows: () => true,
reorderSingleRow: (reorderRow, rowInfo) => true,
delete: (item) => true,
insert: (item) => true,
orElse: () => false,
),
builder: (context, state) {
final rowInfos = state.rowInfos;
final behavior = ScrollConfiguration.of(context).copyWith(
scrollbars: false,
);
return ScrollConfiguration(
behavior: behavior,
child: _renderList(context, state, rowInfos),
);
},
),
),
builder: (context, state) {
final rowInfos = state.rowInfos;
final behavior = ScrollConfiguration.of(context).copyWith(
scrollbars: false,
);
return ScrollConfiguration(
behavior: behavior,
child: _renderList(context, state, rowInfos),
);
},
),
),
);
},
);
}

View File

@ -1,4 +1,5 @@
import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/field_settings_entities.pbenum.dart';
import 'sizes.dart';
class GridLayout {
@ -6,6 +7,11 @@ class GridLayout {
if (fields.isEmpty) return 0;
final fieldsWidth = fields
.where(
(element) =>
element.visibility != null &&
element.visibility != FieldVisibility.AlwaysHidden,
)
.map((fieldInfo) => fieldInfo.fieldSettings!.width.toDouble())
.reduce((value, element) => value + element);

View File

@ -148,7 +148,7 @@ class _GridPageContentState extends State<GridPageContent> {
@override
Widget build(BuildContext context) {
return BlocConsumer<GridBloc, GridState>(
return BlocListener<GridBloc, GridState>(
listenWhen: (previous, current) =>
previous.createdRow != current.createdRow,
listener: (context, state) {
@ -165,37 +165,30 @@ class _GridPageContentState extends State<GridPageContent> {
);
bloc.add(const GridEvent.resetCreatedRow());
},
buildWhen: (previous, current) => previous.fields != current.fields,
builder: (context, state) {
final contentWidth = GridLayout.headerWidth(state.fields.fields);
return Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
EdgeInsets.only(right: GridSize.leadingHeaderPadding),
child: _GridHeader(
headerScrollController: headerScrollController,
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(right: GridSize.leadingHeaderPadding),
child: _GridHeader(
headerScrollController: headerScrollController,
),
_GridRows(
viewId: state.viewId,
contentWidth: contentWidth,
scrollController: _scrollController,
),
],
),
Positioned(
bottom: 20,
right: 20,
child: getGridFabs(context),
),
],
);
},
),
_GridRows(
viewId: widget.view.id,
scrollController: _scrollController,
),
],
),
Positioned(
bottom: 20,
right: 20,
child: getGridFabs(context),
),
],
),
);
}
}
@ -219,47 +212,52 @@ class _GridHeader extends StatelessWidget {
class _GridRows extends StatelessWidget {
final String viewId;
final double contentWidth;
final GridScrollController scrollController;
const _GridRows({
required this.viewId,
required this.contentWidth,
required this.scrollController,
});
@override
Widget build(BuildContext context) {
return Expanded(
child: _WrapScrollView(
scrollController: scrollController,
contentWidth: contentWidth,
child: BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => current.reason.maybeWhen(
reorderRows: () => true,
reorderSingleRow: (reorderRow, rowInfo) => true,
delete: (item) => true,
insert: (item) => true,
orElse: () => false,
return BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => previous.fields != current.fields,
builder: (context, state) {
final contentWidth = GridLayout.headerWidth(state.fields);
return Expanded(
child: _WrapScrollView(
scrollController: scrollController,
contentWidth: contentWidth,
child: BlocBuilder<GridBloc, GridState>(
buildWhen: (previous, current) => current.reason.maybeWhen(
reorderRows: () => true,
reorderSingleRow: (reorderRow, rowInfo) => true,
delete: (item) => true,
insert: (item) => true,
orElse: () => false,
),
builder: (context, state) {
final rowInfos = state.rowInfos;
final behavior = ScrollConfiguration.of(context).copyWith(
scrollbars: false,
physics: const ClampingScrollPhysics(),
);
return ScrollConfiguration(
behavior: behavior,
child: _renderList(context, contentWidth, state, rowInfos),
);
},
),
),
builder: (context, state) {
final rowInfos = state.rowInfos;
final behavior = ScrollConfiguration.of(context).copyWith(
scrollbars: false,
physics: const ClampingScrollPhysics(),
);
return ScrollConfiguration(
behavior: behavior,
child: _renderList(context, state, rowInfos),
);
},
),
),
);
},
);
}
Widget _renderList(
BuildContext context,
double contentWidth,
GridState state,
List<RowInfo> rowInfos,
) {

View File

@ -46,19 +46,13 @@ class _GridHeaderSliverAdaptorState extends State<GridHeaderSliverAdaptor> {
fieldController: fieldController,
)..add(const GridHeaderEvent.initial());
},
child: BlocBuilder<GridHeaderBloc, GridHeaderState>(
buildWhen: (previous, current) =>
previous.fields.length != current.fields.length,
builder: (context, state) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: widget.anchorScrollController,
child: _GridHeader(
viewId: widget.viewId,
fieldController: fieldController,
),
);
},
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: widget.anchorScrollController,
child: _GridHeader(
viewId: widget.viewId,
fieldController: fieldController,
),
),
);
}

View File

@ -47,12 +47,7 @@ class _MobileChecklistCellEditScreenState
child: _buildHeader(context),
),
const Divider(),
const Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 0.0),
child: _TaskList(),
),
),
const Expanded(child: _TaskList()),
],
);
},
@ -169,7 +164,7 @@ class _ChecklistItemState extends State<_ChecklistItem> {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(left: 5, right: 16),
padding: const EdgeInsets.symmetric(horizontal: 5),
height: 44,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,

View File

@ -55,7 +55,11 @@ class SignInAnonymousButton extends StatelessWidget {
minimumSize: const Size(double.infinity, 56),
),
onPressed: onTap,
child: Text(LocaleKeys.signIn_loginStartWithAnonymous.tr()),
child: FlowyText(
LocaleKeys.signIn_loginStartWithAnonymous.tr(),
fontSize: 14,
color: Theme.of(context).colorScheme.onPrimary,
),
);
}
// SignInAnonymousButton in desktop

View File

@ -62,7 +62,7 @@ class MobileAppearance extends BaseAppearance {
: ColorScheme(
brightness: brightness,
primary: _primaryColor,
onPrimary: Colors.white,
onPrimary: Colors.black,
// TODO(yijing): add color later
secondary: const Color(0xff2d2d2d), //temp
onSecondary: Colors.white,
@ -125,7 +125,7 @@ class MobileAppearance extends BaseAppearance {
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return const Color(0xFF57B5F8);
return _primaryColor;
}
return colorTheme.primary;
},
@ -176,7 +176,7 @@ class MobileAppearance extends BaseAppearance {
fontFamily: fontStyle.fontFamily,
textTheme: TextTheme(
displayLarge: const TextStyle(
color: Color(0xFF57B5F8),
color: _primaryColor,
fontSize: 32,
fontWeight: FontWeight.w700,
height: 1.20,