Skip to content

Commit d384115

Browse files
appflowyappflowy
committed
chore: config caladen ui
1 parent f617a04 commit d384115

File tree

8 files changed

+246
-70
lines changed

8 files changed

+246
-70
lines changed

‎frontend/app_flowy/assets/images/editor/clock_alarm.svg‎ renamed to ‎frontend/app_flowy/assets/images/grid/clock.svg‎

File renamed without changes.

‎frontend/app_flowy/lib/workspace/application/grid/cell/date_cal_bloc.dart‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ class DateCalBloc extends Bloc<DateCalEvent, DateCalState> {
2828
emit(state.copyWith(selectedDay: value.day));
2929
}
3030
},
31-
setFormat: (_CalendarFormat value) {
31+
setCalFormat: (_CalendarFormat value) {
3232
emit(state.copyWith(format: value.format));
3333
},
3434
setFocusedDay: (_FocusedDay value) {
@@ -38,6 +38,11 @@ class DateCalBloc extends Bloc<DateCalEvent, DateCalState> {
3838
didReceiveFieldUpdate: (_DidReceiveFieldUpdate value) {
3939
emit(state.copyWith(field: value.field));
4040
},
41+
setIncludeTime: (_IncludeTime value) {
42+
emit(state.copyWith(includeTime: value.includeTime));
43+
},
44+
setDateFormat: (_DateFormat value) {},
45+
setTimeFormat: (_TimeFormat value) {},
4146
);
4247
},
4348
);
@@ -97,8 +102,11 @@ class DateCalBloc extends Bloc<DateCalEvent, DateCalState> {
97102
class DateCalEvent with _$DateCalEvent {
98103
const factory DateCalEvent.initial() = _Initial;
99104
const factory DateCalEvent.selectDay(DateTime day) = _SelectDay;
100-
const factory DateCalEvent.setFormat(CalendarFormat format) = _CalendarFormat;
105+
const factory DateCalEvent.setCalFormat(CalendarFormat format) = _CalendarFormat;
101106
const factory DateCalEvent.setFocusedDay(DateTime day) = _FocusedDay;
107+
const factory DateCalEvent.setTimeFormat(TimeFormat value) = _TimeFormat;
108+
const factory DateCalEvent.setDateFormat(DateFormat value) = _DateFormat;
109+
const factory DateCalEvent.setIncludeTime(bool includeTime) = _IncludeTime;
102110
const factory DateCalEvent.didReceiveCellUpdate(Cell cell) = _DidReceiveCellUpdate;
103111
const factory DateCalEvent.didReceiveFieldUpdate(Field field) = _DidReceiveFieldUpdate;
104112
}
@@ -111,6 +119,7 @@ class DateCalState with _$DateCalState {
111119
required CalendarFormat format,
112120
required DateTime focusedDay,
113121
required bool includeTime,
122+
required Option<String> time,
114123
DateTime? selectedDay,
115124
}) = _DateCalState;
116125

@@ -120,5 +129,6 @@ class DateCalState with _$DateCalState {
120129
format: CalendarFormat.month,
121130
focusedDay: DateTime.now(),
122131
includeTime: false,
132+
time: none(),
123133
);
124134
}

‎frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell/calendar.dart‎

Lines changed: 181 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
import 'package:app_flowy/generated/locale_keys.g.dart';
12
import 'package:app_flowy/workspace/application/grid/cell/date_cal_bloc.dart';
3+
import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/date.dart';
4+
import 'package:easy_localization/easy_localization.dart';
5+
import 'package:flowy_infra/image.dart';
26
import 'package:flowy_infra/theme.dart';
37
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
8+
import 'package:flowy_infra_ui/style_widget/button.dart';
9+
import 'package:flowy_infra_ui/style_widget/text.dart';
10+
import 'package:flowy_infra_ui/widget/spacing.dart';
11+
import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
12+
import 'package:flutter/material.dart';
413
import 'package:flutter/widgets.dart';
514
import 'package:flutter_bloc/flutter_bloc.dart';
615
import 'package:table_calendar/table_calendar.dart';
@@ -9,6 +18,7 @@ import 'package:app_flowy/workspace/application/grid/prelude.dart';
918
final kToday = DateTime.now();
1019
final kFirstDay = DateTime(kToday.year, kToday.month - 3, kToday.day);
1120
final kLastDay = DateTime(kToday.year, kToday.month + 3, kToday.day);
21+
const kMargin = EdgeInsets.symmetric(horizontal: 6, vertical: 10);
1222

1323
class CellCalendar with FlowyOverlayDelegate {
1424
final VoidCallback onDismissed;
@@ -47,7 +57,7 @@ class CellCalendar with FlowyOverlayDelegate {
4757
FlowyOverlay.of(context).insertWithAnchor(
4858
widget: OverlayContainer(
4959
child: calendar,
50-
constraints: BoxConstraints.tight(const Size(320, 320)),
60+
constraints: BoxConstraints.tight(const Size(320, 500)),
5161
),
5262
identifier: CellCalendar.identifier(),
5363
anchorContext: context,
@@ -67,6 +77,9 @@ class CellCalendar with FlowyOverlayDelegate {
6777

6878
@override
6979
void didRemove() => onDismissed();
80+
81+
@override
82+
bool asBarrier() => true;
7083
}
7184

7285
class _CellCalendarWidget extends StatelessWidget {
@@ -94,46 +107,175 @@ class _CellCalendarWidget extends StatelessWidget {
94107
},
95108
listenWhen: (p, c) => p.selectedDay != c.selectedDay,
96109
builder: (context, state) {
97-
return TableCalendar(
98-
firstDay: kFirstDay,
99-
lastDay: kLastDay,
100-
focusedDay: state.focusedDay,
101-
rowHeight: 40,
102-
calendarFormat: state.format,
103-
headerStyle: const HeaderStyle(formatButtonVisible: false),
104-
calendarStyle: CalendarStyle(
105-
selectedDecoration: BoxDecoration(
106-
color: theme.main1,
107-
shape: BoxShape.circle,
108-
),
109-
todayDecoration: BoxDecoration(
110-
color: theme.shader4,
111-
shape: BoxShape.circle,
112-
),
113-
selectedTextStyle: TextStyle(
114-
color: theme.surface,
115-
fontSize: 14.0,
116-
),
117-
todayTextStyle: TextStyle(
118-
color: theme.surface,
119-
fontSize: 14.0,
120-
),
121-
),
122-
selectedDayPredicate: (day) {
123-
return isSameDay(state.selectedDay, day);
124-
},
125-
onDaySelected: (selectedDay, focusedDay) {
126-
context.read<DateCalBloc>().add(DateCalEvent.selectDay(selectedDay));
127-
},
128-
onFormatChanged: (format) {
129-
context.read<DateCalBloc>().add(DateCalEvent.setFormat(format));
130-
},
131-
onPageChanged: (focusedDay) {
132-
context.read<DateCalBloc>().add(DateCalEvent.setFocusedDay(focusedDay));
133-
},
134-
);
110+
List<Widget> children = [];
111+
112+
children.addAll([
113+
_buildCalendar(state, theme, context),
114+
const VSpace(10),
115+
]);
116+
117+
if (state.includeTime) {
118+
children.addAll([
119+
const _TimeTextField(),
120+
const VSpace(10),
121+
]);
122+
}
123+
124+
children.addAll([
125+
Divider(height: 1, color: theme.shader5),
126+
const _IncludeTimeButton(),
127+
]);
128+
129+
state.typeOptinoData.fold(() => null, (dateTypeOption) {
130+
children.add(_DateTypeOptionButton(dateTypeOption: dateTypeOption));
131+
});
132+
133+
return Column(children: children);
135134
},
136135
),
137136
);
138137
}
138+
139+
TableCalendar<dynamic> _buildCalendar(DateCalState state, AppTheme theme, BuildContext context) {
140+
return TableCalendar(
141+
firstDay: kFirstDay,
142+
lastDay: kLastDay,
143+
focusedDay: state.focusedDay,
144+
rowHeight: 40,
145+
calendarFormat: state.format,
146+
headerStyle: HeaderStyle(
147+
formatButtonVisible: false,
148+
titleCentered: true,
149+
leftChevronMargin: EdgeInsets.zero,
150+
leftChevronPadding: EdgeInsets.zero,
151+
leftChevronIcon: svgWidget("home/arrow_left"),
152+
rightChevronPadding: EdgeInsets.zero,
153+
rightChevronMargin: EdgeInsets.zero,
154+
rightChevronIcon: svgWidget("home/arrow_right"),
155+
),
156+
calendarStyle: CalendarStyle(
157+
selectedDecoration: BoxDecoration(
158+
color: theme.main1,
159+
shape: BoxShape.circle,
160+
),
161+
todayDecoration: BoxDecoration(
162+
color: theme.shader4,
163+
shape: BoxShape.circle,
164+
),
165+
selectedTextStyle: TextStyle(
166+
color: theme.surface,
167+
fontSize: 14.0,
168+
),
169+
todayTextStyle: TextStyle(
170+
color: theme.surface,
171+
fontSize: 14.0,
172+
),
173+
),
174+
selectedDayPredicate: (day) {
175+
return isSameDay(state.selectedDay, day);
176+
},
177+
onDaySelected: (selectedDay, focusedDay) {
178+
context.read<DateCalBloc>().add(DateCalEvent.selectDay(selectedDay));
179+
},
180+
onFormatChanged: (format) {
181+
context.read<DateCalBloc>().add(DateCalEvent.setCalFormat(format));
182+
},
183+
onPageChanged: (focusedDay) {
184+
context.read<DateCalBloc>().add(DateCalEvent.setFocusedDay(focusedDay));
185+
},
186+
);
187+
}
188+
}
189+
190+
class _IncludeTimeButton extends StatelessWidget {
191+
const _IncludeTimeButton({Key? key}) : super(key: key);
192+
193+
@override
194+
Widget build(BuildContext context) {
195+
final theme = context.watch<AppTheme>();
196+
return BlocSelector<DateCalBloc, DateCalState, bool>(
197+
selector: (state) => state.includeTime,
198+
builder: (context, includeTime) {
199+
return SizedBox(
200+
height: 50,
201+
child: Padding(
202+
padding: kMargin,
203+
child: Row(
204+
children: [
205+
svgWidget("grid/clock", color: theme.iconColor),
206+
const HSpace(4),
207+
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(), fontSize: 14),
208+
const Spacer(),
209+
Switch(
210+
value: includeTime,
211+
onChanged: (newValue) => context.read<DateCalBloc>().add(DateCalEvent.setIncludeTime(newValue)),
212+
),
213+
],
214+
),
215+
),
216+
);
217+
},
218+
);
219+
}
220+
}
221+
222+
class _TimeTextField extends StatelessWidget {
223+
const _TimeTextField({Key? key}) : super(key: key);
224+
225+
@override
226+
Widget build(BuildContext context) {
227+
return Container();
228+
}
229+
}
230+
231+
class _DateTypeOptionButton extends StatelessWidget {
232+
final DateTypeOption dateTypeOption;
233+
const _DateTypeOptionButton({required this.dateTypeOption, Key? key}) : super(key: key);
234+
235+
@override
236+
Widget build(BuildContext context) {
237+
final theme = context.watch<AppTheme>();
238+
final title = LocaleKeys.grid_field_dateFormat.tr() + " &" + LocaleKeys.grid_field_timeFormat.tr();
239+
return FlowyButton(
240+
text: FlowyText.medium(title, fontSize: 12),
241+
hoverColor: theme.hover,
242+
margin: kMargin,
243+
onTap: () {
244+
final setting = _CalDateTimeSetting(dateTypeOption: dateTypeOption);
245+
setting.show(context);
246+
},
247+
rightIcon: svgWidget("grid/more", color: theme.iconColor),
248+
);
249+
}
250+
}
251+
252+
class _CalDateTimeSetting extends StatelessWidget {
253+
final DateTypeOption dateTypeOption;
254+
const _CalDateTimeSetting({required this.dateTypeOption, Key? key}) : super(key: key);
255+
256+
@override
257+
Widget build(BuildContext context) {
258+
return Column(children: [
259+
DateFormatButton(onTap: () {
260+
final list = DateFormatList(
261+
selectedFormat: dateTypeOption.dateFormat,
262+
onSelected: (format) {
263+
context.read<DateTypeOptionBloc>().add(DateTypeOptionEvent.didSelectDateFormat(format));
264+
},
265+
);
266+
}),
267+
TimeFormatButton(
268+
timeFormat: dateTypeOption.timeFormat,
269+
onTap: () {
270+
final list = TimeFormatList(
271+
selectedFormat: dateTypeOption.timeFormat,
272+
onSelected: (format) {
273+
context.read<DateTypeOptionBloc>().add(DateTypeOptionEvent.didSelectTimeFormat(format));
274+
});
275+
},
276+
),
277+
]);
278+
}
279+
280+
void show(BuildContext context) {}
139281
}

‎frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ class FieldCellButton extends StatelessWidget {
150150
onTap: onTap,
151151
leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
152152
text: FlowyText.medium(field.name, fontSize: 12),
153-
padding: GridSize.cellContentInsets,
153+
margin: GridSize.cellContentInsets,
154154
);
155155
}
156156
}

‎frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_editor_pannel.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ class _FieldEditorPannelState extends State<FieldEditorPannel> {
8080
height: GridSize.typeOptionItemHeight,
8181
child: FlowyButton(
8282
text: FlowyText.medium(field.fieldType.title(), fontSize: 12),
83-
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
83+
margin: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
8484
hoverColor: theme.hover,
8585
onTap: () {
8686
final list = FieldTypeList(onSelectField: (newFieldType) {

0 commit comments

Comments
 (0)