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

refactor: appflowy theme system pt. 1 (#1407)

Browse Source 
* refactor: port theme provider to bloc

* refactor: port from custom theme type enum to material design's brightness

* chore: add custom color extension to ThemeData

* refactor: use Theme.of(context) when trying to get theme colors

* refactor: toggle widget code refactor

* refactor: flowy hover style refactor

* refactor: flowy icon refactor

* fix: regression on sidebar tooltip text from #1210

* chore: read color from theme.of

* chore: quick access to custom color

* fix: dart test

* fix: scrollbar regression

* chore: fix flutter lint

* chore: fix grid bloc test

Co-authored-by: appflowy <annie@appflowy.io>
This commit is contained in:
Richard Shiue
2022-11-10 14:22:18 +08:00
committed by GitHub
parent eff1da2812
commit bbd64fae81
87 changed files with 830 additions and 919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
View File

@ -4,7 +4,6 @@ import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart'
import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/grid/application/grid_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
@ -335,8 +334,6 @@ class RowCountBadge extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocSelector<GridBloc, GridState, int>(
selector: (state) => state.rowCount,
builder: (context, rowCount) {
@ -348,7 +345,7 @@ class RowCountBadge extends StatelessWidget {
FlowyText.regular(
'${LocaleKeys.grid_row_count.tr()} : ',
fontSize: 13,
color: theme.shader3,
color: Theme.of(context).hintColor,
),
FlowyText.regular(rowCount.toString(), fontSize: 13),
],

14
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
View File

@ -1,7 +1,7 @@
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flowy_infra/size.dart';
@ -71,13 +71,12 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
if (widget.isCellEditing) {
return const SizedBox();
} else {
final theme = context.watch<AppTheme>();
return Tooltip(
message: LocaleKeys.tooltip_openAsPage.tr(),
textStyle: TextStyles.caption.textColor(Colors.white),
child: svgWidget(
"grid/expander",
color: theme.main1,
color: Theme.of(context).colorScheme.primary,
),
);
}
@ -184,13 +183,14 @@ class _Background extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return Consumer<AccessoryHoverState>(
builder: (context, state, child) {
if (state.onHover) {
return FlowyHoverContainer(
style: HoverStyle(
borderRadius: Corners.s6Border, hoverColor: theme.shader6),
borderRadius: Corners.s6Border,
hoverColor: CustomColors.of(context).lightGreyHover,
),
);
} else {
return const SizedBox();
@ -207,12 +207,10 @@ class CellAccessoryContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final children =
accessories.where((accessory) => accessory.enable()).map((accessory) {
final hover = FlowyHover(
style:
HoverStyle(hoverColor: theme.bg3, backgroundColor: theme.surface),
style: HoverStyle(hoverColor: CustomColors.of(context).lightGreyHover),
builder: (_, onHover) => Container(
width: 26,
height: 26,

13
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart
View File

@ -1,6 +1,4 @@
import 'package:flowy_infra/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart';
@ -66,12 +64,17 @@ class CellContainer extends StatelessWidget {
}
BoxDecoration _makeBoxDecoration(BuildContext context, bool isFocus) {
final theme = context.watch<AppTheme>();
if (isFocus) {
final borderSide = BorderSide(color: theme.main1, width: 1.0);
final borderSide = BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 1.0,
);
return BoxDecoration(border: Border.fromBorderSide(borderSide));
} else {
final borderSide = BorderSide(color: theme.shader5, width: 1.0);
final borderSide = BorderSide(
color: Theme.of(context).dividerColor,
width: 1.0,
);
return BoxDecoration(
border: Border(right: borderSide, bottom: borderSide));
}

3
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checkbox_cell.dart
View File

@ -2,7 +2,7 @@ import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/grid/application/prelude.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/sizes.dart';
import 'cell_builder.dart';
@ -44,6 +44,7 @@ class _CheckboxCellState extends GridCellState<GridCheckboxCell> {
child: Padding(
padding: GridSize.cellContentInsets,
child: FlowyIconButton(
hoverColor: Colors.transparent,
onPressed: () => context
.read<CheckboxCellBloc>()
.add(const CheckboxCellEvent.select()),

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

@ -6,10 +6,10 @@ import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dar
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:dartz/dartz.dart' show Either;
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/theme.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';
@ -113,19 +113,18 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocProvider.value(
value: bloc,
child: BlocBuilder<DateCalBloc, DateCalState>(
buildWhen: (p, c) => false,
builder: (context, state) {
List<Widget> children = [
_buildCalendar(theme, context),
_buildCalendar(context),
_TimeTextField(
bloc: context.read<DateCalBloc>(),
popoverMutex: popoverMutex,
),
Divider(height: 1, color: theme.shader5),
Divider(height: 1, color: Theme.of(context).dividerColor),
const _IncludeTimeButton(),
_DateTypeOptionButton(popoverMutex: popoverMutex)
];
@ -153,7 +152,7 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
super.dispose();
}
Widget _buildCalendar(AppTheme theme, BuildContext context) {
Widget _buildCalendar(BuildContext context) {
return BlocBuilder<DateCalBloc, DateCalState>(
builder: (context, state) {
return TableCalendar(
@ -181,38 +180,38 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
weekdayStyle: TextStyles.general(
fontSize: 13,
fontWeight: FontWeight.w400,
color: theme.shader3,
color: Theme.of(context).hintColor,
),
weekendStyle: TextStyles.general(
fontSize: 13,
fontWeight: FontWeight.w400,
color: theme.shader3,
color: Theme.of(context).hintColor,
),
),
calendarStyle: CalendarStyle(
cellMargin: const EdgeInsets.all(3),
defaultDecoration: BoxDecoration(
color: theme.surface,
color: Theme.of(context).colorScheme.surface,
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(6)),
),
selectedDecoration: BoxDecoration(
color: theme.main1,
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(6)),
),
todayDecoration: BoxDecoration(
color: theme.shader4,
color: CustomColors.of(context).lightGreyHover,
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(6)),
),
weekendDecoration: BoxDecoration(
color: theme.surface,
color: Theme.of(context).colorScheme.surface,
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(6)),
),
outsideDecoration: BoxDecoration(
color: theme.surface,
color: Theme.of(context).colorScheme.surface,
shape: BoxShape.rectangle,
borderRadius: const BorderRadius.all(Radius.circular(6)),
),
@ -220,15 +219,14 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
weekendTextStyle: TextStyles.body1.size(FontSizes.s14),
selectedTextStyle: TextStyles.general(
fontSize: FontSizes.s14,
color: theme.surface,
color: Theme.of(context).colorScheme.surface,
),
todayTextStyle: TextStyles.general(
fontSize: FontSizes.s14,
color: theme.surface,
),
outsideTextStyle: TextStyles.general(
fontSize: FontSizes.s14,
color: theme.shader4,
color: Theme.of(context).disabledColor,
),
),
selectedDayPredicate: (day) {
@ -261,7 +259,6 @@ class _IncludeTimeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocSelector<DateCalBloc, DateCalState, bool>(
selector: (state) => state.dateTypeOptionPB.includeTime,
builder: (context, includeTime) {
@ -271,7 +268,10 @@ class _IncludeTimeButton extends StatelessWidget {
padding: kMargin,
child: Row(
children: [
svgWidget("grid/clock", color: theme.iconColor),
svgWidget(
"grid/clock",
color: Theme.of(context).colorScheme.onSurface,
),
const HSpace(4),
FlowyText.medium(
LocaleKeys.grid_field_includeTime.tr(),
@ -283,7 +283,7 @@ class _IncludeTimeButton extends StatelessWidget {
onChanged: (value) => context
.read<DateCalBloc>()
.add(DateCalEvent.setIncludeTime(!value)),
style: ToggleStyle.big(theme),
style: ToggleStyle.big,
padding: EdgeInsets.zero,
),
],
@ -338,7 +338,6 @@ class _TimeTextFieldState extends State<_TimeTextField> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocConsumer<DateCalBloc, DateCalState>(
listener: (context, state) {
_controller.text = state.time ?? "";
@ -355,10 +354,10 @@ class _TimeTextFieldState extends State<_TimeTextField> {
hintText: state.timeHintText,
controller: _controller,
style: TextStyles.body1.size(FontSizes.s14),
normalBorderColor: theme.shader4,
errorBorderColor: theme.red,
focusBorderColor: theme.main1,
cursorColor: theme.main1,
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));
@ -388,7 +387,6 @@ class _DateTypeOptionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final title =
"${LocaleKeys.grid_field_dateFormat.tr()} &${LocaleKeys.grid_field_timeFormat.tr()}";
return BlocSelector<DateCalBloc, DateCalState, DateTypeOptionPB>(
@ -401,9 +399,11 @@ class _DateTypeOptionButton extends StatelessWidget {
constraints: BoxConstraints.loose(const Size(140, 100)),
child: FlowyButton(
text: FlowyText.medium(title, fontSize: 14),
hoverColor: theme.hover,
margin: kMargin,
rightIcon: svgWidget("grid/more", color: theme.iconColor),
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
),
),
popupBuilder: (BuildContext popContext) {
return _CalDateTimeSetting(

24
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart
View File

@ -1,34 +1,32 @@
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
extension SelectOptionColorExtension on SelectOptionColorPB {
Color make(BuildContext context) {
final theme = context.watch<AppTheme>();
switch (this) {
case SelectOptionColorPB.Purple:
return theme.tint1;
return CustomColors.tint1;
case SelectOptionColorPB.Pink:
return theme.tint2;
return CustomColors.tint2;
case SelectOptionColorPB.LightPink:
return theme.tint3;
return CustomColors.tint3;
case SelectOptionColorPB.Orange:
return theme.tint4;
return CustomColors.tint4;
case SelectOptionColorPB.Yellow:
return theme.tint5;
return CustomColors.tint5;
case SelectOptionColorPB.Lime:
return theme.tint6;
return CustomColors.tint6;
case SelectOptionColorPB.Green:
return theme.tint7;
return CustomColors.tint7;
case SelectOptionColorPB.Aqua:
return theme.tint8;
return CustomColors.tint8;
case SelectOptionColorPB.Blue:
return theme.tint9;
return CustomColors.tint9;
default:
throw ArgumentError;
}
@ -118,12 +116,10 @@ class SelectOptionTagCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return Stack(
fit: StackFit.expand,
children: [
FlowyHover(
style: HoverStyle(hoverColor: theme.hover),
child: InkWell(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),

8
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart
View File

@ -2,7 +2,6 @@ import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/grid/application/prelude.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
// ignore: unused_import
@ -164,8 +163,7 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
Widget child = _buildOptions(theme, context);
Widget child = _buildOptions(context);
return Stack(
alignment: AlignmentDirectional.center,
@ -203,13 +201,13 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
);
}
Widget _buildOptions(AppTheme theme, BuildContext context) {
Widget _buildOptions(BuildContext context) {
final Widget child;
if (widget.selectOptions.isEmpty && widget.cellStyle != null) {
child = FlowyText.medium(
widget.cellStyle!.placeholder,
fontSize: 14,
color: theme.shader3,
color: Theme.of(context).hintColor,
);
} else {
final children = widget.selectOptions.map(

17
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart
View File

@ -2,9 +2,9 @@ import 'dart:collection';
import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
import 'package:app_flowy/plugins/grid/application/cell/select_option_editor_bloc.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
@ -184,7 +184,6 @@ class _Title extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: Padding(
@ -192,7 +191,7 @@ class _Title extends StatelessWidget {
child: FlowyText.medium(
LocaleKeys.grid_selectOption_panelTitle.tr(),
fontSize: 12,
color: theme.shader3,
color: Theme.of(context).hintColor,
),
),
);
@ -205,18 +204,17 @@ class _CreateOptionCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return Row(
children: [
FlowyText.medium(
LocaleKeys.grid_selectOption_create.tr(),
fontSize: 12,
color: theme.shader3,
color: Theme.of(context).hintColor,
),
const HSpace(10),
SelectOptionTag(
name: name,
color: theme.shader6,
color: CustomColors.of(context).lightGreyHover,
onSelected: () => context
.read<SelectOptionCellEditorBloc>()
.add(SelectOptionEditorEvent.newOption(name)),
@ -252,7 +250,6 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return AppFlowyPopover(
controller: _popoverController,
offset: const Offset(20, 0),
@ -283,8 +280,12 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
FlowyIconButton(
width: 30,
onPressed: () => _popoverController.show(),
hoverColor: Colors.transparent,
iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
icon: svgWidget("editor/details", color: theme.iconColor),
icon: svgWidget(
"editor/details",
color: Theme.of(context).colorScheme.onSurface,
),
),
],
),

14
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
View File

@ -2,14 +2,12 @@ import 'dart:collection';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:textfield_tags/textfield_tags.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
@ -65,8 +63,6 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return TextFieldTags(
textEditingController: controller,
textfieldTagsController: widget.tagController,
@ -109,7 +105,10 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
style: TextStyles.body1.size(FontSizes.s14),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: theme.main1, width: 1.0),
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 1.0,
),
borderRadius: Corners.s10Border,
),
isDense: true,
@ -118,7 +117,10 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
prefixIconConstraints:
BoxConstraints(maxWidth: widget.distanceToText),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: theme.main1, width: 1.0),
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 1.0,
),
borderRadius: Corners.s10Border,
),
),

16
frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
View File

@ -7,7 +7,6 @@ import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
@ -114,7 +113,6 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocProvider.value(
value: _cellBloc,
child: BlocBuilder<URLCellBloc, URLCellState>(
@ -127,7 +125,7 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
text: state.content,
style: TextStyles.general(
fontSize: FontSizes.s14,
color: theme.main2,
color: Theme.of(context).colorScheme.primaryContainer,
).underline,
),
),
@ -216,13 +214,15 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return AppFlowyPopover(
constraints: BoxConstraints.loose(const Size(300, 160)),
controller: _popoverController,
direction: PopoverDirection.bottomWithLeftAligned,
offset: const Offset(0, 20),
child: svgWidget("editor/edit", color: theme.iconColor),
child: svgWidget(
"editor/edit",
color: Theme.of(context).colorScheme.onSurface,
),
popupBuilder: (BuildContext popoverContext) {
return URLEditorPopover(
cellController:
@ -251,8 +251,10 @@ class _CopyURLAccessoryState extends State<_CopyURLAccessory>
with GridCellAccessoryState {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return svgWidget("editor/copy", color: theme.iconColor);
return svgWidget(
"editor/copy",
color: Theme.of(context).colorScheme.onSurface,
);
}
@override

12
frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
View File

@ -1,9 +1,7 @@
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
class InputTextField extends StatefulWidget {
@ -49,8 +47,6 @@ class _InputTextFieldState extends State<InputTextField> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final height = widget.maxLength == null ? 36.0 : 56.0;
return RoundedInputField(
@ -60,9 +56,6 @@ class _InputTextFieldState extends State<InputTextField> {
height: height,
maxLength: widget.maxLength,
style: TextStyles.body1.size(13),
normalBorderColor: theme.shader4,
focusBorderColor: theme.main1,
cursorColor: theme.main1,
onChanged: (text) {
if (widget.onChanged != null) {
widget.onChanged!(text);
@ -108,12 +101,11 @@ class TypeOptionSeparator extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Container(
color: theme.shader4,
height: 0.25,
color: Theme.of(context).dividerColor,
height: 1.0,
),
);
}

10
frontend/app_flowy/lib/plugins/grid/presentation/widgets/footer/grid_footer.dart
View File

@ -1,8 +1,8 @@
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:app_flowy/plugins/grid/application/grid_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
@ -13,12 +13,14 @@ class GridAddRowButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return FlowyButton(
text: FlowyText.medium(LocaleKeys.grid_row_newRow.tr(), fontSize: 12),
hoverColor: theme.shader6,
hoverColor: CustomColors.of(context).lightGreyHover,
onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
leftIcon: svgWidget("home/add", color: theme.iconColor),
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
),
);
}
}

21
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart
View File

@ -1,8 +1,8 @@
import 'package:app_flowy/plugins/grid/application/field/field_cell_bloc.dart';
import 'package:app_flowy/plugins/grid/application/field/field_service.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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/hover.dart';
@ -91,8 +91,10 @@ class _GridHeaderCellContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final borderSide = BorderSide(color: theme.shader5, width: 1.0);
final borderSide = BorderSide(
color: Theme.of(context).dividerColor,
width: 1.0,
);
final decoration = BoxDecoration(
border: Border(
top: borderSide,
@ -116,8 +118,6 @@ class _DragToExpandLine extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return InkWell(
onTap: () {},
child: GestureDetector(
@ -136,7 +136,7 @@ class _DragToExpandLine extends StatelessWidget {
child: FlowyHover(
cursor: SystemMouseCursors.resizeLeftRight,
style: HoverStyle(
hoverColor: theme.main1,
hoverColor: Theme.of(context).colorScheme.primary,
borderRadius: BorderRadius.zero,
contentMargin: const EdgeInsets.only(left: 6),
),
@ -160,17 +160,18 @@ class FieldCellButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
// Using this technique to have proper text ellipsis
// https://github.com/flutter/flutter/issues/18761#issuecomment-812390920
final text = Characters(field.name)
.replaceAll(Characters(''), Characters('\u{200B}'))
.toString();
return FlowyButton(
hoverColor: theme.shader6,
hoverColor: CustomColors.of(context).lightGreyHover,
onTap: onTap,
leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
leftIcon: svgWidget(
field.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
text: FlowyText.medium(
text,
fontSize: 12,

12
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart
View File

@ -5,7 +5,6 @@ import 'package:app_flowy/plugins/grid/application/prelude.dart';
import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
@ -72,8 +71,6 @@ class _EditFieldButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocBuilder<FieldActionSheetBloc, FieldActionSheetState>(
builder: (context, state) {
return SizedBox(
@ -83,7 +80,6 @@ class _EditFieldButton extends StatelessWidget {
LocaleKeys.grid_field_editProperty.tr(),
fontSize: 12,
),
hoverColor: theme.hover,
onTap: onTap,
),
);
@ -151,14 +147,12 @@ class FieldActionCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return FlowyButton(
text: FlowyText.medium(
action.title(),
fontSize: 12,
color: enable ? null : theme.shader4,
color: enable ? null : Theme.of(context).disabledColor,
),
hoverColor: theme.hover,
onTap: () {
if (enable) {
action.run(context, fieldContext);
@ -167,7 +161,9 @@ class FieldActionCell extends StatelessWidget {
},
leftIcon: svgWidget(
action.iconName(),
color: enable ? theme.iconColor : theme.disableIconColor,
color: enable
? Theme.of(context).colorScheme.onSurface
: Theme.of(context).disabledColor,
),
);
}

10
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
View File

@ -5,7 +5,6 @@ import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:dartz/dartz.dart' show none;
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/text_style.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
@ -166,7 +165,6 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return MultiBlocListener(
listeners: [
BlocListener<FieldEditorBloc, FieldEditorState>(
@ -193,10 +191,6 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
fontSize: 13,
),
controller: controller,
normalBorderColor: theme.shader4,
errorBorderColor: theme.red,
focusBorderColor: theme.main1,
cursorColor: theme.main1,
errorText: context.read<FieldEditorBloc>().state.errorText,
onChanged: (newName) {
context
@ -222,7 +216,6 @@ class _DeleteFieldButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocBuilder<FieldEditorBloc, FieldEditorState>(
buildWhen: (previous, current) => previous != current,
builder: (context, state) {
@ -231,10 +224,9 @@ class _DeleteFieldButton extends StatelessWidget {
text: FlowyText.medium(
LocaleKeys.grid_field_delete.tr(),
fontSize: 12,
color: enable ? null : theme.shader4,
color: enable ? null : Theme.of(context).disabledColor,
),
onTap: () => onDeleted?.call(),
hoverColor: theme.hover,
onHover: (_) => popoverMutex.close(),
);
return SizedBox(height: 36, child: button);

10
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart
View File

@ -1,6 +1,5 @@
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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/scrolling/styled_list.dart';
@ -10,7 +9,6 @@ import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
import 'package:flutter/material.dart';
import '../../layout/sizes.dart';
import 'field_type_extension.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
typedef SelectFieldCallback = void Function(FieldType);
@ -60,15 +58,15 @@ class FieldTypeCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(fieldType.title(), fontSize: 12),
hoverColor: theme.hover,
onTap: () => onSelectField(fieldType),
leftIcon: svgWidget(fieldType.iconName(), color: theme.iconColor),
leftIcon: svgWidget(
fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
),
);
}

10
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart
View File

@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/type_option
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:dartz/dartz.dart' show Either;
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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';
@ -108,7 +107,6 @@ class _SwitchFieldButton extends StatelessWidget {
}
Widget _buildMoreButton(BuildContext context) {
final theme = context.read<AppTheme>();
final bloc = context.read<FieldTypeOptionEditBloc>();
return FlowyButton(
text: FlowyText.medium(
@ -116,12 +114,14 @@ class _SwitchFieldButton extends StatelessWidget {
fontSize: 12,
),
margin: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
hoverColor: theme.hover,
leftIcon: svgWidget(
bloc.state.field.fieldType.iconName(),
color: theme.iconColor,
color: Theme.of(context).colorScheme.onSurface,
),
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
),
rightIcon: svgWidget("grid/more", color: theme.iconColor),
);
}
}

15
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart
View File

@ -5,8 +5,8 @@ import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/grid/application/prelude.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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';
@ -94,7 +94,6 @@ class _GridHeaderState extends State<_GridHeader> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocBuilder<GridHeaderBloc, GridHeaderState>(
buildWhen: (previous, current) => previous.fields != current.fields,
builder: (context, state) {
@ -107,7 +106,7 @@ class _GridHeaderState extends State<_GridHeader> {
.toList();
return Container(
color: theme.surface,
color: Theme.of(context).colorScheme.surface,
child: RepaintBoundary(
child: ReorderableRow(
crossAxisAlignment: CrossAxisAlignment.stretch,
@ -154,8 +153,8 @@ class _CellTrailing extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final borderSide = BorderSide(color: theme.shader4, width: 0.4);
final borderSide =
BorderSide(color: Theme.of(context).dividerColor, width: 1.0);
return Container(
width: GridSize.trailHeaderPadding,
decoration: BoxDecoration(
@ -173,8 +172,6 @@ class CreateFieldButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return AppFlowyPopover(
direction: PopoverDirection.bottomWithRightAligned,
asBarrier: true,
@ -185,11 +182,11 @@ class CreateFieldButton extends StatelessWidget {
LocaleKeys.grid_field_newColumn.tr(),
fontSize: 12,
),
hoverColor: theme.shader6,
hoverColor: CustomColors.of(context).lightGreyHover,
onTap: () {},
leftIcon: svgWidget(
"home/add",
color: theme.iconColor,
color: Theme.of(context).colorScheme.onSurface,
),
),
popupBuilder: (BuildContext popover) {

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

@ -5,7 +5,6 @@ import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dar
import 'package:easy_localization/easy_localization.dart' hide DateFormat;
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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';
@ -120,17 +119,18 @@ class DateFormatButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(LocaleKeys.grid_field_dateFormat.tr(),
fontSize: 12),
margin: GridSize.typeOptionContentInsets,
hoverColor: theme.hover,
onTap: onTap,
onHover: onHover,
rightIcon: svgWidget("grid/more", color: theme.iconColor),
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
),
),
);
}
@ -146,17 +146,18 @@ class TimeFormatButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(LocaleKeys.grid_field_timeFormat.tr(),
fontSize: 12),
margin: GridSize.typeOptionContentInsets,
hoverColor: theme.hover,
onTap: onTap,
onHover: onHover,
rightIcon: svgWidget("grid/more", color: theme.iconColor),
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
),
),
);
}
@ -167,7 +168,6 @@ class _IncludeTimeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocSelector<DateTypeOptionBloc, DateTypeOptionState, bool>(
selector: (state) => state.typeOption.includeTime,
builder: (context, includeTime) {
@ -187,7 +187,7 @@ class _IncludeTimeButton extends StatelessWidget {
.read<DateTypeOptionBloc>()
.add(DateTypeOptionEvent.includeTime(!value));
},
style: ToggleStyle.big(theme),
style: ToggleStyle.big,
padding: EdgeInsets.zero,
),
],
@ -246,7 +246,6 @@ class DateFormatCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
Widget? checkmark;
if (isSelected) {
checkmark = svgWidget("grid/checkmark");
@ -256,7 +255,6 @@ class DateFormatCell extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(dateFormat.title(), fontSize: 12),
hoverColor: theme.hover,
rightIcon: checkmark,
onTap: () => onSelected(dateFormat),
),
@ -330,7 +328,6 @@ class TimeFormatCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
Widget? checkmark;
if (isSelected) {
checkmark = svgWidget("grid/checkmark");
@ -340,7 +337,6 @@ class TimeFormatCell extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(timeFormat.title(), fontSize: 12),
hoverColor: theme.hover,
rightIcon: checkmark,
onTap: () => onSelected(timeFormat),
),

10
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart
View File

@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/number_form
import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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';
@ -50,7 +49,6 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return BlocProvider(
create: (context) =>
NumberTypeOptionBloc(typeOptionContext: typeOptionContext),
@ -68,8 +66,10 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
constraints: BoxConstraints.loose(const Size(460, 440)),
child: FlowyButton(
margin: GridSize.typeOptionContentInsets,
hoverColor: theme.hover,
rightIcon: svgWidget("grid/more", color: theme.iconColor),
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
),
text: Row(
children: [
FlowyText.medium(LocaleKeys.grid_field_numberFormat.tr(),
@ -165,7 +165,6 @@ class NumberFormatCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
Widget? checkmark;
if (isSelected) {
checkmark = svgWidget("grid/checkmark");
@ -175,7 +174,6 @@ class NumberFormatCell extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(format.title(), fontSize: 12),
hoverColor: theme.hover,
onTap: () => onSelected(format),
rightIcon: checkmark,
),

17
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart
View File

@ -1,7 +1,6 @@
import 'package:app_flowy/plugins/grid/application/field/type_option/select_option_type_option_bloc.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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';
@ -68,14 +67,13 @@ class OptionTitle extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.read<AppTheme>();
return BlocBuilder<SelectOptionTypeOptionBloc, SelectOptionTypeOptionState>(
builder: (context, state) {
List<Widget> children = [
FlowyText.medium(
LocaleKeys.grid_field_optionTitle.tr(),
fontSize: 12,
color: theme.shader3,
color: Theme.of(context).hintColor,
)
];
if (state.options.isNotEmpty && !state.isEditingOption) {
@ -97,7 +95,6 @@ class _OptionTitleButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
width: 100,
height: 26,
@ -107,7 +104,6 @@ class _OptionTitleButton extends StatelessWidget {
fontSize: 12,
textAlign: TextAlign.center,
),
hoverColor: theme.hover,
onTap: () {
context
.read<SelectOptionTypeOptionBloc>()
@ -185,8 +181,6 @@ class _OptionCellState extends State<_OptionCell> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return AppFlowyPopover(
controller: _popoverController,
mutex: widget.popoverMutex,
@ -203,7 +197,7 @@ class _OptionCellState extends State<_OptionCell> {
children: [
svgWidget(
"grid/details",
color: theme.iconColor,
color: Theme.of(context).colorScheme.onSurface,
),
],
),
@ -235,19 +229,20 @@ class _AddOptionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(LocaleKeys.grid_field_addSelectOption.tr(),
fontSize: 12),
hoverColor: theme.hover,
onTap: () {
context
.read<SelectOptionTypeOptionBloc>()
.add(const SelectOptionTypeOptionEvent.addingOption());
},
leftIcon: svgWidget("home/add", color: theme.iconColor),
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
),
),
);
}

13
frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
View File

@ -2,7 +2,6 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/edit_select
import 'package:app_flowy/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
@ -84,14 +83,15 @@ class _DeleteTag extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(LocaleKeys.grid_selectOption_deleteTag.tr(),
fontSize: 12),
hoverColor: theme.hover,
leftIcon: svgWidget("grid/delete", color: theme.iconColor),
leftIcon: svgWidget(
"grid/delete",
color: Theme.of(context).colorScheme.onSurface,
),
onTap: () {
context
.read<EditSelectOptionBloc>()
@ -130,7 +130,6 @@ class SelectOptionColorList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final cells = SelectOptionColorPB.values.map((color) {
return _SelectOptionColorCell(
color: color, isSelected: selectedColor == color);
@ -148,7 +147,7 @@ class SelectOptionColorList extends StatelessWidget {
LocaleKeys.grid_selectOption_colorPanelTitle.tr(),
fontSize: FontSizes.s12,
textAlign: TextAlign.left,
color: theme.shader3,
color: Theme.of(context).hintColor,
),
),
),
@ -178,7 +177,6 @@ class _SelectOptionColorCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
Widget? checkmark;
if (isSelected) {
checkmark = svgWidget("grid/checkmark");
@ -198,7 +196,6 @@ class _SelectOptionColorCell extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(color.optionName(), fontSize: 12),
hoverColor: theme.hover,
leftIcon: colorIcon,
rightIcon: checkmark,
onTap: () {

5
frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/grid_row.dart
View File

@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/grid/application/row/row_cache.dart';
import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flutter/foundation.dart';
@ -152,10 +151,8 @@ class _InsertButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return FlowyIconButton(
tooltipText: LocaleKeys.tooltip_addNewRow.tr(),
hoverColor: theme.hover,
width: 20,
height: 30,
onPressed: () => context.read<RowBloc>().add(const RowEvent.createRow()),
@ -184,10 +181,8 @@ class _MenuButtonState extends State<_MenuButton> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return FlowyIconButton(
tooltipText: LocaleKeys.tooltip_openMenu.tr(),
hoverColor: theme.hover,
width: 20,
height: 30,
onPressed: () => widget.openMenu(),

11
frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_action_sheet.dart
View File

@ -2,7 +2,6 @@ import 'package:app_flowy/plugins/grid/application/row/row_action_sheet_bloc.dar
import 'package:easy_localization/easy_localization.dart';
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
@ -56,23 +55,23 @@ class _RowActionCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return SizedBox(
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(
action.title(),
fontSize: 12,
color: action.enable() ? theme.textColor : theme.shader3,
color: action.enable() ? null : Theme.of(context).disabledColor,
),
hoverColor: theme.hover,
onTap: () {
if (action.enable()) {
action.performAction(context);
}
},
leftIcon: svgWidget(action.iconName(), color: theme.iconColor),
leftIcon: svgWidget(
action.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
),
);
}

23
frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart
View File

@ -3,8 +3,8 @@ import 'package:app_flowy/plugins/grid/application/field/type_option/type_option
import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
import 'package:app_flowy/plugins/grid/application/row/row_detail_bloc.dart';
import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
import 'package:flowy_infra/color_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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/icon_button.dart';
@ -83,14 +83,16 @@ class _CloseButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return FlowyIconButton(
width: 24,
onPressed: () {
FlowyOverlay.pop(context);
},
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget("home/close", color: theme.iconColor),
icon: svgWidget(
"home/close",
color: Theme.of(context).colorScheme.onSurface,
),
);
}
}
@ -187,8 +189,6 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> {
@override
Widget build(BuildContext context) {
final theme = context.read<AppTheme>();
return AppFlowyPopover(
constraints: BoxConstraints.loose(const Size(240, 200)),
controller: popoverController,
@ -202,7 +202,7 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> {
LocaleKeys.grid_field_newColumn.tr(),
fontSize: 12,
),
hoverColor: theme.shader6,
hoverColor: CustomColors.of(context).lightGreyHover,
onTap: () {},
leftIcon: svgWidget("home/add"),
),
@ -229,10 +229,10 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> {
}
BoxDecoration _makeBoxDecoration(BuildContext context) {
final theme = context.read<AppTheme>();
final borderSide = BorderSide(color: theme.shader6, width: 1.0);
final borderSide =
BorderSide(color: Theme.of(context).dividerColor, width: 1.0);
return BoxDecoration(
color: theme.surface,
color: Theme.of(context).colorScheme.surface,
border: Border(top: borderSide),
);
}
@ -256,8 +256,7 @@ class _RowDetailCellState extends State<_RowDetailCell> {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final style = _customCellStyle(theme, widget.cellId.fieldType);
final style = _customCellStyle(widget.cellId.fieldType);
final cell = widget.cellBuilder.build(widget.cellId, style: style);
final gesture = GestureDetector(
@ -323,7 +322,7 @@ class _RowDetailCellState extends State<_RowDetailCell> {
}
}
GridCellStyle? _customCellStyle(AppTheme theme, FieldType fieldType) {
GridCellStyle? _customCellStyle(FieldType fieldType) {
switch (fieldType) {
case FieldType.Checkbox:
return null;

6
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_group.dart
View File

@ -2,7 +2,6 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_type_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
@ -71,8 +70,6 @@ class _GridGroupCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.read<AppTheme>();
Widget? rightIcon;
if (fieldContext.isGroupField) {
rightIcon = Padding(
@ -85,10 +82,9 @@ class _GridGroupCell extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
text: FlowyText.medium(fieldContext.name, fontSize: 12),
hoverColor: theme.hover,
leftIcon: svgWidget(
fieldContext.fieldType.iconName(),
color: theme.iconColor,
color: Theme.of(context).colorScheme.onSurface,
),
rightIcon: rightIcon,
onTap: () {

22
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart
View File

@ -5,7 +5,6 @@ import 'package:app_flowy/plugins/grid/application/setting/property_bloc.dart';
import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_type_extension.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.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/icon_button.dart';
@ -87,22 +86,20 @@ class _GridPropertyCell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final checkmark = fieldContext.visibility
? svgWidget('home/show', color: theme.iconColor)
: svgWidget('home/hide', color: theme.iconColor);
final checkmark = svgWidget(
fieldContext.visibility ? 'home/show' : 'home/hide',
color: Theme.of(context).colorScheme.onSurface,
);
return Row(
children: [
Expanded(
child: SizedBox(
height: GridSize.typeOptionItemHeight,
child: _editFieldButton(theme, context),
child: _editFieldButton(context),
),
),
FlowyIconButton(
hoverColor: theme.hover,
width: GridSize.typeOptionItemHeight,
onPressed: () {
context.read<GridPropertyBloc>().add(
@ -115,16 +112,17 @@ class _GridPropertyCell extends StatelessWidget {
);
}
Widget _editFieldButton(AppTheme theme, BuildContext context) {
Widget _editFieldButton(BuildContext context) {
return AppFlowyPopover(
mutex: popoverMutex,
offset: const Offset(20, 0),
constraints: BoxConstraints.loose(const Size(240, 400)),
child: FlowyButton(
text: FlowyText.medium(fieldContext.name, fontSize: 12),
hoverColor: theme.hover,
leftIcon: svgWidget(fieldContext.fieldType.iconName(),
color: theme.iconColor),
leftIcon: svgWidget(
fieldContext.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
),
popupBuilder: (BuildContext context) {
return FieldEditor(

15
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_setting.dart
View File

@ -1,7 +1,6 @@
import 'package:app_flowy/plugins/grid/application/setting/setting_bloc.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
@ -89,7 +88,6 @@ class _SettingItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final isSelected = context
.read<GridSettingBloc>()
.state
@ -100,15 +98,20 @@ class _SettingItem extends StatelessWidget {
height: GridSize.typeOptionItemHeight,
child: FlowyButton(
isSelected: isSelected,
text: FlowyText.medium(action.title(),
fontSize: 12, color: action.enable() ? null : theme.shader4),
hoverColor: theme.hover,
text: FlowyText.medium(
action.title(),
fontSize: 12,
color: action.enable() ? null : Theme.of(context).disabledColor,
),
onTap: () {
context
.read<GridSettingBloc>()
.add(GridSettingEvent.performAction(action));
},
leftIcon: svgWidget(action.iconName(), color: theme.iconColor),
leftIcon: svgWidget(
action.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
),
);
}

6
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart
View File

@ -1,11 +1,9 @@
import 'package:app_flowy/plugins/grid/application/setting/setting_bloc.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/style_widget/extension.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/field/field_controller.dart';
import '../../layout/sizes.dart';
@ -51,17 +49,15 @@ class _SettingButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
return AppFlowyPopover(
constraints: BoxConstraints.loose(const Size(260, 400)),
offset: const Offset(0, 10),
margin: const EdgeInsets.all(6),
child: FlowyIconButton(
width: 22,
hoverColor: theme.hover,
icon: svgWidget(
"grid/setting/setting",
color: theme.iconColor,
color: Theme.of(context).colorScheme.onSurface,
).padding(horizontal: 3, vertical: 3),
),
popupBuilder: (BuildContext context) {