chore: adjust mobile grid cell design (#4190)

This commit is contained in:
Richard Shiue 2023-12-21 20:41:58 +08:00 committed by GitHub
parent 1401ba5960
commit 8045042e78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 66 additions and 74 deletions

View File

@ -77,32 +77,17 @@ class _MobileChecklistCellState extends GridCellState<MobileChecklistCell> {
padding: widget.cellStyle.cellPadding ?? EdgeInsets.zero,
child: Align(
alignment: AlignmentDirectional.centerStart,
child: Row(
children: [
Expanded(
child: state.tasks.isEmpty
? FlowyText(
widget.cellStyle.placeholder,
fontSize: 15,
color: Theme.of(context).hintColor,
)
: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
fontSize: 15,
),
),
const HSpace(6),
RotatedBox(
quarterTurns: 3,
child: Icon(
Icons.chevron_left,
child: state.tasks.isEmpty
? FlowyText(
widget.cellStyle.placeholder,
fontSize: 15,
color: Theme.of(context).hintColor,
)
: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
fontSize: 15,
),
),
const HSpace(2),
],
),
),
),
),

View File

@ -51,6 +51,7 @@ class _NumberCellState extends GridEditableTextCell<MobileNumberCell> {
controller: _controller,
focusNode: focusNode,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: 15),
maxLines: 1,
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
@ -59,7 +60,6 @@ class _NumberCellState extends GridEditableTextCell<MobileNumberCell> {
const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
isCollapsed: true,
),
// close keyboard when tapping outside of the text field
onTapOutside: (event) =>
FocusManager.instance.primaryFocus?.unfocus(),
),

View File

@ -57,6 +57,7 @@ class _MobileTextCellState extends GridEditableTextCell<MobileTextCell> {
controller: _controller,
focusNode: focusNode,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: 15),
maxLines: 1,
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,

View File

@ -42,6 +42,7 @@ class _TimestampCellState extends GridCellState<MobileTimestampCell> {
child: FlowyText(
state.dateStr,
fontSize: 15,
maxLines: 1,
),
),
);

View File

@ -55,6 +55,7 @@ class _GridURLCellState extends GridCellState<MobileURLCell> {
return TextField(
focusNode: _focusNode,
keyboardType: TextInputType.url,
maxLines: 1,
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
@ -63,7 +64,6 @@ class _GridURLCellState extends GridCellState<MobileURLCell> {
const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
isCollapsed: true,
),
// close keyboard when tapping outside of the text field
onTapOutside: (event) =>
FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: (value) =>
@ -99,12 +99,18 @@ class _GridURLCellState extends GridCellState<MobileURLCell> {
);
},
),
child: Text(
content,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
decoration: TextDecoration.underline,
color: Theme.of(context).colorScheme.primary,
),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Text(
content,
maxLines: 1,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
decoration: TextDecoration.underline,
color: Theme.of(context).colorScheme.primary,
),
),
),
),
);

View File

@ -33,6 +33,7 @@ class TextCardCell<CustomCardData>
@override
final EditableCardNotifier? editableNotifier;
final CellControllerBuilder cellControllerBuilder;
final CellRenderHook<String, CustomCardData>? renderHook;
final bool showNotes;
@ -88,7 +89,7 @@ class _TextCellState extends State<TextCardCell> {
}
@override
void didUpdateWidget(covariant TextCardCell oldWidget) {
void didUpdateWidget(covariant oldWidget) {
_bindEditableNotifier();
super.didUpdateWidget(oldWidget);
}

View File

@ -370,16 +370,6 @@ abstract class GridEditableTextCell<T extends GridCellWidget>
_listenOnFocusNodeChanged();
}
@override
void didUpdateWidget(covariant T oldWidget) {
// if (!focusNode.hasFocus && widget.cellContainerNotifier.isFocus) {
// focusNode.requestFocus();
// } else if (focusNode.hasFocus && !widget.cellContainerNotifier.isFocus) {
// focusNode.unfocus();
// }
super.didUpdateWidget(oldWidget);
}
@override
void dispose() {
widget.shortcutHandlers.clear();

View File

@ -127,26 +127,11 @@ class _DateCellState extends GridCellState<GridDateCell> {
borderRadius: const BorderRadius.all(Radius.circular(14)),
),
padding: padding,
child: Row(
children: [
Expanded(
child: FlowyText.regular(
text,
fontSize: 16,
color: color,
maxLines: null,
),
),
const HSpace(6),
RotatedBox(
quarterTurns: 3,
child: Icon(
Icons.chevron_left,
color: Theme.of(context).hintColor,
),
),
const HSpace(2),
],
child: FlowyText.regular(
text,
fontSize: 16,
color: color,
maxLines: null,
),
),
);
@ -154,10 +139,20 @@ class _DateCellState extends GridCellState<GridDateCell> {
return FlowyButton(
radius: BorderRadius.zero,
hoverColor: Colors.transparent,
text: Container(
margin: EdgeInsets.zero,
text: Align(
alignment: alignment,
padding: padding,
child: FlowyText(text, color: color, fontSize: 15),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: FlowyText(
text,
color: color,
fontSize: 15,
maxLines: 1,
),
),
),
onTap: () {
showMobileBottomSheet(

View File

@ -248,8 +248,9 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
return FlowyButton(
hoverColor: Colors.transparent,
radius: BorderRadius.zero,
margin: EdgeInsets.zero,
text: Padding(
padding: widget.cellStyle.cellPadding ?? GridSize.cellContentInsets,
padding: widget.cellStyle.cellPadding ?? EdgeInsets.zero,
child: _buildMobileOptions(isInRowDetail: false),
),
onTap: () {
@ -324,13 +325,25 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
},
).toList();
return Align(
alignment: Alignment.centerLeft,
child: Wrap(
runSpacing: 4,
children: children,
),
);
return isInRowDetail
? Align(
alignment: Alignment.centerLeft,
child: Wrap(
runSpacing: 4,
children: children,
),
)
: Align(
alignment: Alignment.centerLeft,
child: ListView.separated(
separatorBuilder: (context, index) => const HSpace(4),
itemCount: children.length,
itemBuilder: (context, index) => children[index],
scrollDirection: Axis.horizontal,
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
),
);
}
}
}