Skip to content

Commit a9f5f8d

Browse files
appflowyappflowy
committed
chore: support create new field when editing the row
1 parent 942e966 commit a9f5f8d

File tree

6 files changed

+112
-65
lines changed

6 files changed

+112
-65
lines changed

‎frontend/app_flowy/assets/translations/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,8 @@
189189
"addSelectOption": "Add an option",
190190
"optionTitle": "Options",
191191
"addOption": "Add option",
192-
"editProperty": "Edit property"
192+
"editProperty": "Edit property",
193+
"newColumn": "New column"
193194
},
194195
"row": {
195196
"duplicate": "Duplicate",

‎frontend/app_flowy/lib/plugins/board/presentation/card/board_select_option_cell.dart‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,10 @@ class _BoardSelectOptionCellState extends State<BoardSelectOptionCell> {
6565
alignment: AlignmentDirectional.center,
6666
fit: StackFit.expand,
6767
children: [
68-
Wrap(spacing: 4, runSpacing: 2, children: children),
68+
Padding(
69+
padding: const EdgeInsets.symmetric(vertical: 6),
70+
child: Wrap(spacing: 4, runSpacing: 2, children: children),
71+
),
6972
_SelectOptionDialog(
7073
controller: widget.cellControllerBuilder.build(),
7174
),

‎frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -78,36 +78,38 @@ class _BoardTextCellState extends State<BoardTextCell> {
7878
child: BlocBuilder<BoardTextCellBloc, BoardTextCellState>(
7979
builder: (context, state) {
8080
Widget child;
81-
if (state.enableEdit) {
82-
child = TextField(
83-
controller: _controller,
84-
focusNode: focusNode,
85-
onChanged: (value) => focusChanged(),
86-
onEditingComplete: () => focusNode.unfocus(),
87-
maxLines: 1,
88-
style: const TextStyle(
89-
fontSize: 14,
90-
fontWeight: FontWeight.w500,
91-
fontFamily: 'Mulish',
92-
),
93-
decoration: const InputDecoration(
94-
// Magic number 4 makes the textField take up the same space as FlowyText
95-
contentPadding: EdgeInsets.symmetric(vertical: 4),
96-
border: InputBorder.none,
97-
isDense: true,
98-
),
99-
);
81+
if (state.content.isEmpty) {
82+
child = const SizedBox();
10083
} else {
101-
child = FlowyText.medium(state.content, fontSize: 14);
84+
if (state.enableEdit) {
85+
child = TextField(
86+
controller: _controller,
87+
focusNode: focusNode,
88+
onChanged: (value) => focusChanged(),
89+
onEditingComplete: () => focusNode.unfocus(),
90+
maxLines: 1,
91+
style: const TextStyle(
92+
fontSize: 14,
93+
fontWeight: FontWeight.w500,
94+
fontFamily: 'Mulish',
95+
),
96+
decoration: const InputDecoration(
97+
// Magic number 4 makes the textField take up the same space as FlowyText
98+
contentPadding: EdgeInsets.symmetric(vertical: 4),
99+
border: InputBorder.none,
100+
isDense: true,
101+
),
102+
);
103+
} else {
104+
child = FlowyText.medium(state.content, fontSize: 14);
105+
child = Padding(
106+
padding: const EdgeInsets.symmetric(vertical: 6),
107+
child: child,
108+
);
109+
}
102110
}
103111

104-
return Align(
105-
alignment: Alignment.centerLeft,
106-
child: Padding(
107-
padding: const EdgeInsets.symmetric(vertical: 6),
108-
child: child,
109-
),
110-
);
112+
return Align(alignment: Alignment.centerLeft, child: child);
111113
},
112114
),
113115
),

‎frontend/app_flowy/lib/plugins/board/presentation/card/card.dart‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,11 @@ class _BoardCardState extends State<BoardCard> {
100100
);
101101
rowNotifier.insertCell(cellId, cellNotifier);
102102

103-
if (index != 0) {
104-
child = Padding(
105-
key: cellId.key(),
106-
padding: const EdgeInsets.only(left: 4, right: 4, top: 8),
107-
child: child,
108-
);
109-
} else {
110-
child = Padding(
111-
key: UniqueKey(),
112-
padding: const EdgeInsets.only(left: 4, right: 4),
113-
child: child,
114-
);
115-
}
116-
103+
child = Padding(
104+
key: cellId.key(),
105+
padding: const EdgeInsets.only(left: 4, right: 4),
106+
child: child,
107+
);
117108
children.add(child);
118109
},
119110
);

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import 'package:app_flowy/generated/locale_keys.g.dart';
12
import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
23
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
34
import 'package:app_flowy/startup/startup.dart';
45
import 'package:app_flowy/plugins/grid/application/prelude.dart';
6+
import 'package:easy_localization/easy_localization.dart';
57
import 'package:flowy_infra/image.dart';
68
import 'package:flowy_infra/theme.dart';
79
import 'package:flowy_infra_ui/style_widget/button.dart';
@@ -155,7 +157,10 @@ class CreateFieldButton extends StatelessWidget {
155157
final theme = context.watch<AppTheme>();
156158

157159
return FlowyButton(
158-
text: const FlowyText.medium('New column', fontSize: 12),
160+
text: FlowyText.medium(
161+
LocaleKeys.grid_field_newColumn.tr(),
162+
fontSize: 12,
163+
),
159164
hoverColor: theme.shader6,
160165
onTap: () => FieldEditor(
161166
gridId: gridId,

‎frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart‎

Lines changed: 66 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import 'package:app_flowy/plugins/grid/application/row/row_detail_bloc.dart';
55
import 'package:flowy_infra/image.dart';
66
import 'package:flowy_infra/theme.dart';
77
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
8+
import 'package:flowy_infra_ui/style_widget/button.dart';
89
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
910
import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
11+
import 'package:flowy_infra_ui/style_widget/text.dart';
1012
import 'package:flowy_infra_ui/widget/spacing.dart';
1113
import 'package:easy_localization/easy_localization.dart';
1214
import 'package:app_flowy/generated/locale_keys.g.dart';
@@ -67,16 +69,21 @@ class _RowDetailPageState extends State<RowDetailPage> {
6769
return bloc;
6870
},
6971
child: Padding(
70-
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
72+
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
7173
child: Column(
7274
children: [
7375
SizedBox(
74-
height: 40,
76+
height: 30,
7577
child: Row(
7678
children: const [Spacer(), _CloseButton()],
7779
),
7880
),
79-
Expanded(child: _PropertyList(cellBuilder: widget.cellBuilder)),
81+
Expanded(
82+
child: _PropertyList(
83+
cellBuilder: widget.cellBuilder,
84+
viewId: widget.dataController.rowInfo.gridId,
85+
),
86+
),
8087
],
8188
),
8289
),
@@ -101,9 +108,11 @@ class _CloseButton extends StatelessWidget {
101108
}
102109

103110
class _PropertyList extends StatelessWidget {
111+
final String viewId;
104112
final GridCellBuilder cellBuilder;
105113
final ScrollController _scrollController;
106114
_PropertyList({
115+
required this.viewId,
107116
required this.cellBuilder,
108117
Key? key,
109118
}) : _scrollController = ScrollController(),
@@ -114,29 +123,63 @@ class _PropertyList extends StatelessWidget {
114123
return BlocBuilder<RowDetailBloc, RowDetailState>(
115124
buildWhen: (previous, current) => previous.gridCells != current.gridCells,
116125
builder: (context, state) {
117-
return ScrollbarListStack(
118-
axis: Axis.vertical,
119-
controller: _scrollController,
120-
barSize: GridSize.scrollBarSize,
121-
child: ListView.separated(
122-
controller: _scrollController,
123-
itemCount: state.gridCells.length,
124-
itemBuilder: (BuildContext context, int index) {
125-
return _RowDetailCell(
126-
cellId: state.gridCells[index],
127-
cellBuilder: cellBuilder,
128-
);
129-
},
130-
separatorBuilder: (BuildContext context, int index) {
131-
return const VSpace(2);
132-
},
133-
),
126+
return Column(
127+
children: [
128+
Expanded(
129+
child: ScrollbarListStack(
130+
axis: Axis.vertical,
131+
controller: _scrollController,
132+
barSize: GridSize.scrollBarSize,
133+
child: ListView.separated(
134+
controller: _scrollController,
135+
itemCount: state.gridCells.length,
136+
itemBuilder: (BuildContext context, int index) {
137+
return _RowDetailCell(
138+
cellId: state.gridCells[index],
139+
cellBuilder: cellBuilder,
140+
);
141+
},
142+
separatorBuilder: (BuildContext context, int index) {
143+
return const VSpace(2);
144+
},
145+
),
146+
),
147+
),
148+
_CreateFieldButton(viewId: viewId),
149+
],
134150
);
135151
},
136152
);
137153
}
138154
}
139155

156+
class _CreateFieldButton extends StatelessWidget {
157+
final String viewId;
158+
const _CreateFieldButton({required this.viewId, Key? key}) : super(key: key);
159+
160+
@override
161+
Widget build(BuildContext context) {
162+
final theme = context.read<AppTheme>();
163+
164+
return SizedBox(
165+
height: 40,
166+
child: FlowyButton(
167+
text: FlowyText.medium(
168+
LocaleKeys.grid_field_newColumn.tr(),
169+
fontSize: 12,
170+
),
171+
hoverColor: theme.shader6,
172+
onTap: () => FieldEditor(
173+
gridId: viewId,
174+
fieldName: "",
175+
typeOptionLoader: NewFieldTypeOptionLoader(gridId: viewId),
176+
).show(context),
177+
leftIcon: svgWidget("home/add"),
178+
),
179+
);
180+
}
181+
}
182+
140183
class _RowDetailCell extends StatelessWidget {
141184
final GridCellIdentifier cellId;
142185
final GridCellBuilder cellBuilder;
@@ -172,7 +215,9 @@ class _RowDetailCell extends StatelessWidget {
172215
SizedBox(
173216
width: 150,
174217
child: FieldCellButton(
175-
field: cellId.field, onTap: () => _showFieldEditor(context)),
218+
field: cellId.field,
219+
onTap: () => _showFieldEditor(context),
220+
),
176221
),
177222
const HSpace(10),
178223
Expanded(child: gesture),

0 commit comments

Comments
 (0)