mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
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:
parent
7ad05feb5b
commit
96af012471
@ -16,7 +16,7 @@ const _supportedFieldTypes = [
|
||||
FieldType.MultiSelect,
|
||||
FieldType.DateTime,
|
||||
FieldType.Checkbox,
|
||||
// FieldType.Checklist,
|
||||
FieldType.Checklist,
|
||||
];
|
||||
|
||||
class FieldOptions extends StatelessWidget {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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,
|
||||
) {
|
||||
|
@ -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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user