From 50e772edff961ad5f07bc81ac2ad5dd85e67de31 Mon Sep 17 00:00:00 2001 From: appflowy Date: Thu, 25 Aug 2022 09:46:26 +0800 Subject: [PATCH] chore: adjust header, card padding ui --- .../board/presentation/board_page.dart | 57 ++++++++++++++++--- .../plugins/board/presentation/card/card.dart | 2 +- .../presentation/card/card_container.dart | 2 +- .../appflowy_board/lib/src/widgets/board.dart | 8 ++- .../lib/src/widgets/styled_widgets/card.dart | 16 +++--- .../src/widgets/styled_widgets/footer.dart | 5 +- .../src/widgets/styled_widgets/header.dart | 20 +++++-- .../flowy_infra_ui/lib/style_widget/text.dart | 21 +++++-- .../flowy-grid/tests/grid/group_test/test.rs | 2 +- 9 files changed, 100 insertions(+), 33 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart index eb47e8c134..26c44e52bf 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart @@ -9,6 +9,9 @@ import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart' import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart'; import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart'; import 'package:appflowy_board/appflowy_board.dart'; +import 'package:flowy_infra/image.dart'; +import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/widget/error_page.dart'; import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart'; @@ -81,21 +84,47 @@ class BoardContent extends StatelessWidget { Widget _buildHeader( BuildContext context, AFBoardColumnHeaderData headerData) { return AppFlowyColumnHeader( - icon: const Icon(Icons.lightbulb_circle), - title: Text(headerData.columnName), - addIcon: const Icon(Icons.add, size: 20), - moreIcon: const Icon(Icons.more_horiz, size: 20), + // icon: const Icon(Icons.lightbulb_circle), + title: Flexible( + fit: FlexFit.tight, + child: FlowyText.medium( + headerData.columnName, + fontSize: 14, + overflow: TextOverflow.clip, + color: context.read().textColor, + ), + ), + // addIcon: const Icon(Icons.add, size: 20), + moreIcon: SizedBox( + width: 20, + height: 20, + child: svgWidget( + 'grid/details', + color: context.read().iconColor, + ), + ), height: 50, - margin: config.columnItemPadding, + margin: config.headerPadding, ); } Widget _buildFooter(BuildContext context, AFBoardColumnData columnData) { return AppFlowyColumnFooter( - icon: const Icon(Icons.add, size: 20), - title: const Text('New'), + icon: SizedBox( + height: 20, + width: 20, + child: svgWidget( + "home/add", + color: context.read().iconColor, + ), + ), + title: FlowyText.medium( + "New", + fontSize: 14, + color: context.read().textColor, + ), height: 50, - margin: config.columnItemPadding, + margin: config.footerPadding, onAddButtonClick: () { context.read().add(BoardEvent.createRow(columnData.id)); }); @@ -124,6 +153,8 @@ class BoardContent extends StatelessWidget { return AppFlowyColumnItemCard( key: ObjectKey(item), + margin: config.cardPadding, + decoration: _makeBoxDecoration(context), child: BoardCard( gridId: gridId, isEditing: isEditing, @@ -143,6 +174,16 @@ class BoardContent extends StatelessWidget { ); } + BoxDecoration _makeBoxDecoration(BuildContext context) { + final theme = context.read(); + final borderSide = BorderSide(color: theme.shader6, width: 1.0); + return BoxDecoration( + color: theme.surface, + border: Border.fromBorderSide(borderSide), + borderRadius: const BorderRadius.all(Radius.circular(6)), + ); + } + void _openCard(String gridId, GridFieldCache fieldCache, RowPB rowPB, GridRowCache rowCache, BuildContext context) { final rowInfo = RowInfo( diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart index ac65d5e5f7..7966f9e212 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart @@ -92,7 +92,7 @@ class _CardMoreOption extends StatelessWidget with CardAccessory { @override Widget build(BuildContext context) { - return svgWidget('home/details', color: context.read().iconColor); + return svgWidget('grid/details', color: context.read().iconColor); } @override diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart index abca27e5c5..4b8c0548d5 100644 --- a/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart +++ b/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart @@ -116,7 +116,7 @@ class _CardEnterRegion extends StatelessWidget { .onEnter = false, child: IntrinsicHeight( child: Stack( - alignment: AlignmentDirectional.center, + alignment: AlignmentDirectional.topEnd, fit: StackFit.expand, children: children, )), diff --git a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart index dbcf62671a..dc7ae1c02f 100644 --- a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart +++ b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board.dart @@ -12,12 +12,18 @@ class AFBoardConfig { final double cornerRadius; final EdgeInsets columnPadding; final EdgeInsets columnItemPadding; + final EdgeInsets footerPadding; + final EdgeInsets headerPadding; + final EdgeInsets cardPadding; final Color columnBackgroundColor; const AFBoardConfig({ this.cornerRadius = 6.0, this.columnPadding = const EdgeInsets.symmetric(horizontal: 8), - this.columnItemPadding = const EdgeInsets.symmetric(horizontal: 10), + this.columnItemPadding = const EdgeInsets.symmetric(horizontal: 12), + this.footerPadding = const EdgeInsets.symmetric(horizontal: 12), + this.headerPadding = const EdgeInsets.symmetric(horizontal: 16), + this.cardPadding = const EdgeInsets.symmetric(horizontal: 3, vertical: 4), this.columnBackgroundColor = Colors.transparent, }); } diff --git a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/card.dart b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/card.dart index 323964c75f..77cfc1cb13 100644 --- a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/card.dart +++ b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/card.dart @@ -2,16 +2,17 @@ import 'package:flutter/material.dart'; class AppFlowyColumnItemCard extends StatefulWidget { final Widget? child; - final Color backgroundColor; - final double cornerRadius; final EdgeInsets margin; final BoxConstraints boxConstraints; + final BoxDecoration decoration; const AppFlowyColumnItemCard({ this.child, - this.cornerRadius = 0.0, this.margin = const EdgeInsets.all(4), - this.backgroundColor = Colors.white, + this.decoration = const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.zero, + ), this.boxConstraints = const BoxConstraints(minHeight: 40), Key? key, }) : super(key: key); @@ -24,14 +25,11 @@ class _AppFlowyColumnItemCardState extends State { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.all(4), + padding: widget.margin, child: Container( clipBehavior: Clip.hardEdge, constraints: widget.boxConstraints, - decoration: BoxDecoration( - color: widget.backgroundColor, - borderRadius: BorderRadius.circular(widget.cornerRadius), - ), + decoration: widget.decoration, child: widget.child, ), ); diff --git a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/footer.dart b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/footer.dart index 7f5655fe60..c877e4fe4d 100644 --- a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/footer.dart +++ b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/footer.dart @@ -12,7 +12,7 @@ class AppFlowyColumnFooter extends StatefulWidget { const AppFlowyColumnFooter({ this.icon, this.title, - this.margin = EdgeInsets.zero, + this.margin = const EdgeInsets.symmetric(horizontal: 12), required this.height, this.onAddButtonClick, Key? key, @@ -30,12 +30,13 @@ class _AppFlowyColumnFooterState extends State { child: SizedBox( height: widget.height, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 10), + padding: widget.margin, child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ if (widget.icon != null) widget.icon!, + const SizedBox(width: 8), if (widget.title != null) widget.title!, ], ), diff --git a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/header.dart b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/header.dart index fdebc7ef21..88f52c9134 100644 --- a/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/header.dart +++ b/frontend/app_flowy/packages/appflowy_board/lib/src/widgets/styled_widgets/header.dart @@ -45,15 +45,25 @@ class _AppFlowyColumnHeaderState extends State { } if (widget.moreIcon != null) { - children.add(const Spacer()); + // children.add(const Spacer()); children.add( - IconButton(onPressed: widget.onMoreButtonClick, icon: widget.moreIcon!), + IconButton( + onPressed: widget.onMoreButtonClick, + icon: widget.moreIcon!, + padding: const EdgeInsets.all(4), + constraints: const BoxConstraints(), + ), ); } if (widget.addIcon != null) { children.add( - IconButton(onPressed: widget.onAddButtonClick, icon: widget.addIcon!), + IconButton( + onPressed: widget.onAddButtonClick, + icon: widget.addIcon!, + padding: const EdgeInsets.all(4), + constraints: const BoxConstraints(), + ), ); } @@ -61,9 +71,7 @@ class _AppFlowyColumnHeaderState extends State { height: widget.height, child: Padding( padding: widget.margin, - child: Row( - children: children, - ), + child: Row(children: children), ), ); } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart index 74cf7e4c31..bad452cbe4 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart @@ -20,18 +20,31 @@ class FlowyText extends StatelessWidget { }) : super(key: key); const FlowyText.semibold(this.title, - {Key? key, this.fontSize = 16, TextOverflow? overflow, this.color, this.textAlign}) + {Key? key, + this.fontSize = 16, + TextOverflow? overflow, + this.color, + this.textAlign}) : fontWeight = FontWeight.w600, overflow = overflow ?? TextOverflow.ellipsis, super(key: key); - const FlowyText.medium(this.title, {Key? key, this.fontSize = 16, TextOverflow? overflow, this.color, this.textAlign}) + const FlowyText.medium(this.title, + {Key? key, + this.fontSize = 16, + TextOverflow? overflow, + this.color, + this.textAlign}) : fontWeight = FontWeight.w500, overflow = overflow ?? TextOverflow.ellipsis, super(key: key); const FlowyText.regular(this.title, - {Key? key, this.fontSize = 16, TextOverflow? overflow, this.color, this.textAlign}) + {Key? key, + this.fontSize = 16, + TextOverflow? overflow, + this.color, + this.textAlign}) : fontWeight = FontWeight.w400, overflow = overflow ?? TextOverflow.ellipsis, super(key: key); @@ -40,9 +53,9 @@ class FlowyText extends StatelessWidget { Widget build(BuildContext context) { final theme = context.watch(); return Text(title, - overflow: overflow, softWrap: false, textAlign: textAlign, + overflow: overflow, style: TextStyle( color: color ?? theme.textColor, fontWeight: fontWeight, diff --git a/frontend/rust-lib/flowy-grid/tests/grid/group_test/test.rs b/frontend/rust-lib/flowy-grid/tests/grid/group_test/test.rs index d6a9839f77..4a4d45f952 100644 --- a/frontend/rust-lib/flowy-grid/tests/grid/group_test/test.rs +++ b/frontend/rust-lib/flowy-grid/tests/grid/group_test/test.rs @@ -319,7 +319,7 @@ async fn group_move_group_test() { #[tokio::test] async fn group_update_field_test() { let mut test = GridGroupTest::new().await; - let mut group = test.group_at_index(0).await; + let group = test.group_at_index(0).await; let changeset = FieldChangesetParams { field_id: group.field_id.clone(), grid_id: test.grid_id.clone(),