mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
chore: adjust mobile grid cell design (#4190)
This commit is contained in:
parent
1401ba5960
commit
8045042e78
@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
@ -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(),
|
||||
),
|
||||
|
@ -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,
|
||||
|
@ -42,6 +42,7 @@ class _TimestampCellState extends GridCellState<MobileTimestampCell> {
|
||||
child: FlowyText(
|
||||
state.dateStr,
|
||||
fontSize: 15,
|
||||
maxLines: 1,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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();
|
||||
|
@ -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(
|
||||
|
@ -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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user