From d6cbbf3c2f1156f78a11c20bf85ad6ae5af07d3c Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Sun, 27 Nov 2022 17:24:04 +0800 Subject: [PATCH] chore: date cell & header editor UI + move to theme.of(context).texttheme (#1473) * chore: textstyles * chore: sizing --- .../widgets/cell/date_cell/date_cell.dart | 5 +- .../widgets/cell/date_cell/date_editor.dart | 208 ++++++++---------- .../widgets/header/type_option/date.dart | 23 +- .../lib/widget/rounded_input_field.dart | 2 +- 4 files changed, 105 insertions(+), 133 deletions(-) diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart index fd35d4d198..bfe9ffd65c 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart @@ -1,4 +1,3 @@ -import 'package:flowy_infra/size.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flutter/widgets.dart'; @@ -69,7 +68,7 @@ class _DateCellState extends GridCellState { controller: _popover, triggerActions: PopoverTriggerFlags.none, direction: PopoverDirection.bottomWithLeftAligned, - constraints: BoxConstraints.loose(const Size(320, 520)), + constraints: BoxConstraints.loose(const Size(260, 500)), margin: EdgeInsets.zero, child: SizedBox.expand( child: GestureDetector( @@ -81,7 +80,7 @@ class _DateCellState extends GridCellState { padding: GridSize.cellContentInsets, child: FlowyText.medium( state.dateStr, - fontSize: FontSizes.s14, + overflow: TextOverflow.ellipsis, ), ), ), diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart index 822b989da9..99920837d5 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart @@ -9,7 +9,6 @@ import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/color_extension.dart'; import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/size.dart'; -import 'package:flowy_infra/text_style.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/button.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; @@ -29,7 +28,6 @@ import '../../header/type_option/date.dart'; final kToday = DateTime.now(); final kFirstDay = DateTime(kToday.year, kToday.month - 3, kToday.day); final kLastDay = DateTime(kToday.year, kToday.month + 3, kToday.day); -const kMargin = EdgeInsets.symmetric(horizontal: 6, vertical: 10); class DateCellEditor extends StatefulWidget { final VoidCallback onDismissed; @@ -116,25 +114,25 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> { return BlocProvider.value( value: bloc, child: BlocBuilder( - buildWhen: (p, c) => false, + buildWhen: (p, c) => p != c, builder: (context, state) { List children = [ _buildCalendar(context), - _TimeTextField( - bloc: context.read(), - popoverMutex: popoverMutex, - ), - Divider(height: 1, color: Theme.of(context).dividerColor), + if (state.dateTypeOptionPB.includeTime) + _TimeTextField( + bloc: context.read(), + popoverMutex: popoverMutex, + ), + Divider(height: 1.0, color: Theme.of(context).dividerColor), const _IncludeTimeButton(), + Divider(height: 1.0, color: Theme.of(context).dividerColor), _DateTypeOptionButton(popoverMutex: popoverMutex) ]; return ListView.separated( shrinkWrap: true, controller: ScrollController(), - separatorBuilder: (context, index) { - return VSpace(GridSize.typeOptionSeparatorHeight); - }, + separatorBuilder: (context, index) => VSpace(GridSize.cellVPadding), itemCount: children.length, itemBuilder: (BuildContext context, int index) { return children[index]; @@ -155,17 +153,23 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> { Widget _buildCalendar(BuildContext context) { return BlocBuilder( builder: (context, state) { + final textStyle = Theme.of(context).textTheme.bodyMedium!; + final boxDecoration = BoxDecoration( + color: Theme.of(context).colorScheme.surface, + shape: BoxShape.rectangle, + borderRadius: Corners.s6Border, + ); return TableCalendar( firstDay: kFirstDay, lastDay: kLastDay, focusedDay: state.focusedDay, - rowHeight: 40, + rowHeight: GridSize.typeOptionItemHeight, calendarFormat: state.format, - daysOfWeekHeight: 40, + daysOfWeekHeight: GridSize.typeOptionItemHeight, headerStyle: HeaderStyle( formatButtonVisible: false, titleCentered: true, - titleTextStyle: TextStyles.body1.size(FontSizes.s14), + titleTextStyle: textStyle, leftChevronMargin: EdgeInsets.zero, leftChevronPadding: EdgeInsets.zero, leftChevronIcon: svgWidget("home/arrow_left"), @@ -177,57 +181,25 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> { daysOfWeekStyle: DaysOfWeekStyle( dowTextFormatter: (date, locale) => DateFormat.E(locale).format(date).toUpperCase(), - weekdayStyle: TextStyles.general( - fontSize: 13, - fontWeight: FontWeight.w400, - color: Theme.of(context).hintColor, - ), - weekendStyle: TextStyles.general( - fontSize: 13, - fontWeight: FontWeight.w400, - color: Theme.of(context).hintColor, - ), + weekdayStyle: AFThemeExtension.of(context).caption, + weekendStyle: AFThemeExtension.of(context).caption, ), calendarStyle: CalendarStyle( cellMargin: const EdgeInsets.all(3), - defaultDecoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, - shape: BoxShape.rectangle, - borderRadius: const BorderRadius.all(Radius.circular(6)), - ), - selectedDecoration: BoxDecoration( - color: Theme.of(context).colorScheme.primary, - shape: BoxShape.rectangle, - borderRadius: const BorderRadius.all(Radius.circular(6)), - ), - todayDecoration: BoxDecoration( - color: AFThemeExtension.of(context).lightGreyHover, - shape: BoxShape.rectangle, - borderRadius: const BorderRadius.all(Radius.circular(6)), - ), - weekendDecoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, - shape: BoxShape.rectangle, - borderRadius: const BorderRadius.all(Radius.circular(6)), - ), - outsideDecoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, - shape: BoxShape.rectangle, - borderRadius: const BorderRadius.all(Radius.circular(6)), - ), - defaultTextStyle: TextStyles.body1.size(FontSizes.s14), - weekendTextStyle: TextStyles.body1.size(FontSizes.s14), - selectedTextStyle: TextStyles.general( - fontSize: FontSizes.s14, - color: Theme.of(context).colorScheme.surface, - ), - todayTextStyle: TextStyles.general( - fontSize: FontSizes.s14, - ), - outsideTextStyle: TextStyles.general( - fontSize: FontSizes.s14, - color: Theme.of(context).disabledColor, - ), + defaultDecoration: boxDecoration, + selectedDecoration: boxDecoration.copyWith( + color: Theme.of(context).colorScheme.primary), + todayDecoration: boxDecoration.copyWith( + color: AFThemeExtension.of(context).lightGreyHover), + weekendDecoration: boxDecoration, + outsideDecoration: boxDecoration, + defaultTextStyle: textStyle, + weekendTextStyle: textStyle, + selectedTextStyle: + textStyle.textColor(Theme.of(context).colorScheme.surface), + todayTextStyle: textStyle, + outsideTextStyle: + textStyle.textColor(Theme.of(context).disabledColor), ), selectedDayPredicate: (day) { return state.calData.fold( @@ -263,9 +235,9 @@ class _IncludeTimeButton extends StatelessWidget { selector: (state) => state.dateTypeOptionPB.includeTime, builder: (context, includeTime) { return SizedBox( - height: 50, + height: GridSize.typeOptionItemHeight, child: Padding( - padding: kMargin, + padding: GridSize.typeOptionContentInsets, child: Row( children: [ svgWidget( @@ -273,10 +245,7 @@ class _IncludeTimeButton extends StatelessWidget { color: Theme.of(context).colorScheme.onSurface, ), const HSpace(4), - FlowyText.medium( - LocaleKeys.grid_field_includeTime.tr(), - fontSize: FontSizes.s14, - ), + FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()), const Spacer(), Toggle( value: includeTime, @@ -298,6 +267,7 @@ class _IncludeTimeButton extends StatelessWidget { class _TimeTextField extends StatefulWidget { final DateCalBloc bloc; final PopoverMutex popoverMutex; + const _TimeTextField({ required this.bloc, required this.popoverMutex, @@ -316,58 +286,51 @@ class _TimeTextFieldState extends State<_TimeTextField> { void initState() { _focusNode = FocusNode(); _controller = TextEditingController(text: widget.bloc.state.time); - if (widget.bloc.state.dateTypeOptionPB.includeTime) { - _focusNode.addListener(() { - if (mounted) { - widget.bloc.add(DateCalEvent.setTime(_controller.text)); - } - if (_focusNode.hasFocus) { - widget.popoverMutex.close(); - } - }); + _focusNode.addListener(() { + if (mounted) { + widget.bloc.add(DateCalEvent.setTime(_controller.text)); + } + }); + + _focusNode.addListener(() { + if (_focusNode.hasFocus) { + widget.popoverMutex.close(); + } + }); + + widget.popoverMutex.listenOnPopoverChanged(() { + if (_focusNode.hasFocus) { + _focusNode.unfocus(); + } + }); - widget.popoverMutex.listenOnPopoverChanged(() { - if (_focusNode.hasFocus) { - _focusNode.unfocus(); - } - }); - } super.initState(); } @override Widget build(BuildContext context) { - return BlocConsumer( - listener: (context, state) { - _controller.text = state.time ?? ""; - }, - listenWhen: (p, c) => p.time != c.time, - builder: (context, state) { - if (state.dateTypeOptionPB.includeTime) { - return Padding( - padding: kMargin, - child: RoundedInputField( - height: 40, - focusNode: _focusNode, - autoFocus: true, - hintText: state.timeHintText, - controller: _controller, - style: TextStyles.body1.size(FontSizes.s14), - normalBorderColor: Theme.of(context).colorScheme.outline, - errorBorderColor: Theme.of(context).colorScheme.error, - focusBorderColor: Theme.of(context).colorScheme.primary, - cursorColor: Theme.of(context).colorScheme.primary, - errorText: state.timeFormatError.fold(() => "", (error) => error), - onEditingComplete: (value) { - widget.bloc.add(DateCalEvent.setTime(value)); - }, - ), - ); - } else { - return const SizedBox(); - } - }, + _controller.text = widget.bloc.state.time ?? ""; + _controller.selection = + TextSelection.collapsed(offset: _controller.text.length); + return Padding( + padding: GridSize.typeOptionContentInsets, + child: RoundedInputField( + height: GridSize.typeOptionItemHeight, + focusNode: _focusNode, + autoFocus: true, + hintText: widget.bloc.state.timeHintText, + controller: _controller, + style: Theme.of(context).textTheme.bodyMedium!, + normalBorderColor: Theme.of(context).colorScheme.outline, + errorBorderColor: Theme.of(context).colorScheme.error, + focusBorderColor: Theme.of(context).colorScheme.primary, + cursorColor: Theme.of(context).colorScheme.primary, + errorText: + widget.bloc.state.timeFormatError.fold(() => "", (error) => error), + onEditingComplete: (value) => + widget.bloc.add(DateCalEvent.setTime(value)), + ), ); } @@ -397,12 +360,14 @@ class _DateTypeOptionButton extends StatelessWidget { triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click, offset: const Offset(20, 0), constraints: BoxConstraints.loose(const Size(140, 100)), - child: FlowyButton( - text: FlowyText.medium(title, fontSize: 14), - margin: kMargin, - rightIcon: svgWidget( - "grid/more", - color: Theme.of(context).colorScheme.onSurface, + child: SizedBox( + height: GridSize.typeOptionItemHeight, + child: FlowyButton( + text: FlowyText.medium(title), + rightIcon: svgWidget( + "grid/more", + color: Theme.of(context).colorScheme.onSurface, + ), ), ), popupBuilder: (BuildContext popContext) { @@ -476,9 +441,8 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> { child: ListView.separated( shrinkWrap: true, controller: ScrollController(), - separatorBuilder: (context, index) { - return VSpace(GridSize.typeOptionSeparatorHeight); - }, + separatorBuilder: (context, index) => + VSpace(GridSize.typeOptionSeparatorHeight), itemCount: children.length, itemBuilder: (BuildContext context, int index) { return children[index]; diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart index 126301a237..37ca30c412 100644 --- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart +++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart @@ -53,13 +53,22 @@ class DateTypeOptionWidget extends TypeOptionWidget { listener: (context, state) => typeOptionContext.typeOption = state.typeOption, builder: (context, state) { - return Column( - children: [ - const TypeOptionSeparator(), - _renderDateFormatButton(context, state.typeOption.dateFormat), - _renderTimeFormatButton(context, state.typeOption.timeFormat), - const _IncludeTimeButton(), - ], + final List children = [ + const TypeOptionSeparator(), + _renderDateFormatButton(context, state.typeOption.dateFormat), + _renderTimeFormatButton(context, state.typeOption.timeFormat), + const _IncludeTimeButton(), + ]; + + return ListView.separated( + shrinkWrap: true, + controller: ScrollController(), + separatorBuilder: (context, index) => + VSpace(GridSize.typeOptionSeparatorHeight), + itemCount: children.length, + itemBuilder: (BuildContext context, int index) { + return children[index]; + }, ); }, ), diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart index c453780fb6..5114966d11 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart @@ -118,7 +118,7 @@ class _RoundedInputFieldState extends State { contentPadding: widget.contentPadding, hintText: widget.hintText, hintStyle: - Theme.of(context).textTheme.bodyMedium!.textColor(borderColor), + Theme.of(context).textTheme.bodySmall!.textColor(borderColor), enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: borderColor,