Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use appflowy styled toggle widget in date settings (#1192)

Browse Source 
* feat: use appflowy styled toggle widgets in date settings

* feat: some date cell UI improvements
This commit is contained in:
Richard Shiue 2022-10-03 09:56:45 +08:00 committed by GitHub
parent 285231a845
commit cff24581a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
View File

@ -1,6 +1,8 @@
import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart'; import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle.dart';
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
import 'package:appflowy_popover/appflowy_popover.dart'; import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:dartz/dartz.dart' show Either; import 'package:dartz/dartz.dart' show Either;
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
@ -167,6 +169,18 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
rightChevronMargin: EdgeInsets.zero, rightChevronMargin: EdgeInsets.zero,
rightChevronIcon: svgWidget("home/arrow_right"), rightChevronIcon: svgWidget("home/arrow_right"),
), ),
daysOfWeekStyle: DaysOfWeekStyle(
dowTextFormatter: (date, locale) =>
DateFormat.E(locale).format(date).toUpperCase(),
weekdayStyle: TextStyle(
fontSize: 13,
color: theme.shader3,
),
weekendStyle: TextStyle(
fontSize: 13,
color: theme.shader3,
),
),
calendarStyle: CalendarStyle( calendarStyle: CalendarStyle(
selectedDecoration: BoxDecoration( selectedDecoration: BoxDecoration(
color: theme.main1, color: theme.main1,
@ -230,11 +244,13 @@ class _IncludeTimeButton extends StatelessWidget {
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(), FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(),
fontSize: 14), fontSize: 14),
const Spacer(), const Spacer(),
Switch( Toggle(
value: includeTime, value: includeTime,
onChanged: (newValue) => context onChanged: (value) => context
.read<DateCalBloc>() .read<DateCalBloc>()
.add(DateCalEvent.setIncludeTime(newValue)), .add(DateCalEvent.setIncludeTime(!value)),
style: ToggleStyle.big(theme),
padding: EdgeInsets.zero,
), ),
], ],
), ),
@ -350,7 +366,7 @@ class _DateTypeOptionButton extends StatelessWidget {
offset: const Offset(20, 0), offset: const Offset(20, 0),
constraints: BoxConstraints.loose(const Size(140, 100)), constraints: BoxConstraints.loose(const Size(140, 100)),
child: FlowyButton( child: FlowyButton(
text: FlowyText.medium(title, fontSize: 12), text: FlowyText.medium(title, fontSize: 14),
hoverColor: theme.hover, hoverColor: theme.hover,
margin: kMargin, margin: kMargin,
rightIcon: svgWidget("grid/more", color: theme.iconColor), rightIcon: svgWidget("grid/more", color: theme.iconColor),

11
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart
View File

@ -1,5 +1,7 @@
import 'package:app_flowy/plugins/grid/application/field/type_option/date_bloc.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/date_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart'; import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle.dart';
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
import 'package:easy_localization/easy_localization.dart' hide DateFormat; import 'package:easy_localization/easy_localization.dart' hide DateFormat;
import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/image.dart';
@ -161,6 +163,7 @@ class _IncludeTimeButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocSelector<DateTypeOptionBloc, DateTypeOptionState, bool>( return BlocSelector<DateTypeOptionBloc, DateTypeOptionState, bool>(
selector: (state) => state.typeOption.includeTime, selector: (state) => state.typeOption.includeTime,
builder: (context, includeTime) { builder: (context, includeTime) {
@ -173,13 +176,15 @@ class _IncludeTimeButton extends StatelessWidget {
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(), FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(),
fontSize: 12), fontSize: 12),
const Spacer(), const Spacer(),
Switch( Toggle(
value: includeTime, value: includeTime,
onChanged: (newValue) { onChanged: (value) {
context context
.read<DateTypeOptionBloc>() .read<DateTypeOptionBloc>()
.add(DateTypeOptionEvent.includeTime(newValue)); .add(DateTypeOptionEvent.includeTime(!value));
}, },
style: ToggleStyle.big(theme),
padding: EdgeInsets.zero,
), ),
], ],
), ),