Skip to content

Commit bbd64fa

Browse files
richardshiueappflowy
richardshiue
and
appflowy
authored
refactor: appflowy theme system pt. 1 (#1407)
* 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 <[email protected]>
1 parent eff1da2 commit bbd64fa

File tree

87 files changed

+831
-920
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+831
-920
lines changed

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

Lines changed: 23 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
99
import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
1010
import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart';
1111
import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart';
12-
import 'package:app_flowy/workspace/application/appearance.dart';
1312
import 'package:appflowy_board/appflowy_board.dart';
1413
import 'package:easy_localization/easy_localization.dart';
1514
import 'package:flowy_infra/image.dart';
16-
import 'package:flowy_infra/theme.dart';
1715
import 'package:flowy_infra_ui/style_widget/text.dart';
1816
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
1917
import 'package:flowy_infra_ui/widget/error_page.dart';
@@ -22,7 +20,6 @@ import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart';
2220
import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
2321
import 'package:flutter/material.dart';
2422
import 'package:flutter_bloc/flutter_bloc.dart';
25-
import 'package:provider/provider.dart';
2623
import '../../grid/application/row/row_cache.dart';
2724
import '../application/board_bloc.dart';
2825
import 'card/card.dart';
@@ -102,27 +99,21 @@ class _BoardContentState extends State<BoardContent> {
10299
}
103100

104101
Widget _buildBoard(BuildContext context) {
105-
return ChangeNotifierProvider.value(
106-
value: Provider.of<AppearanceSetting>(context, listen: true),
107-
child: Selector<AppearanceSetting, AppTheme>(
108-
selector: (ctx, notifier) => notifier.theme,
109-
builder: (ctx, theme, child) => Expanded(
110-
child: AppFlowyBoard(
111-
boardScrollController: scrollManager,
112-
scrollController: ScrollController(),
113-
controller: context.read<BoardBloc>().boardController,
114-
headerBuilder: _buildHeader,
115-
footerBuilder: _buildFooter,
116-
cardBuilder: (_, column, columnItem) => _buildCard(
117-
context,
118-
column,
119-
columnItem,
120-
),
121-
groupConstraints: const BoxConstraints.tightFor(width: 300),
122-
config: AppFlowyBoardConfig(
123-
groupBackgroundColor: theme.bg1,
124-
),
125-
),
102+
return Expanded(
103+
child: AppFlowyBoard(
104+
boardScrollController: scrollManager,
105+
scrollController: ScrollController(),
106+
controller: context.read<BoardBloc>().boardController,
107+
headerBuilder: _buildHeader,
108+
footerBuilder: _buildFooter,
109+
cardBuilder: (_, column, columnItem) => _buildCard(
110+
context,
111+
column,
112+
columnItem,
113+
),
114+
groupConstraints: const BoxConstraints.tightFor(width: 300),
115+
config: AppFlowyBoardConfig(
116+
groupBackgroundColor: Theme.of(context).colorScheme.surfaceVariant,
126117
),
127118
),
128119
);
@@ -159,7 +150,6 @@ class _BoardContentState extends State<BoardContent> {
159150
groupData.headerData.groupName,
160151
fontSize: 14,
161152
overflow: TextOverflow.clip,
162-
color: context.read<AppTheme>().textColor,
163153
),
164154
),
165155
icon: _buildHeaderIcon(boardCustomData),
@@ -168,7 +158,7 @@ class _BoardContentState extends State<BoardContent> {
168158
width: 20,
169159
child: svgWidget(
170160
"home/add",
171-
color: context.read<AppTheme>().iconColor,
161+
color: Theme.of(context).colorScheme.onSurface,
172162
),
173163
),
174164
onAddButtonClick: () {
@@ -191,13 +181,12 @@ class _BoardContentState extends State<BoardContent> {
191181
width: 20,
192182
child: svgWidget(
193183
"home/add",
194-
color: context.read<AppTheme>().iconColor,
184+
color: Theme.of(context).colorScheme.onSurface,
195185
),
196186
),
197187
title: FlowyText.medium(
198188
LocaleKeys.board_column_create_new_card.tr(),
199189
fontSize: 14,
200-
color: context.read<AppTheme>().textColor,
201190
),
202191
height: 50,
203192
margin: config.footerPadding,
@@ -276,10 +265,12 @@ class _BoardContentState extends State<BoardContent> {
276265
}
277266

278267
BoxDecoration _makeBoxDecoration(BuildContext context) {
279-
final theme = context.read<AppTheme>();
280-
final borderSide = BorderSide(color: theme.shader6, width: 1.0);
268+
final borderSide = BorderSide(
269+
color: Theme.of(context).dividerColor,
270+
width: 1.0,
271+
);
281272
return BoxDecoration(
282-
color: theme.surface,
273+
color: Theme.of(context).colorScheme.surface,
283274
border: Border.fromBorderSide(borderSide),
284275
borderRadius: const BorderRadius.all(Radius.circular(6)),
285276
);
@@ -329,15 +320,7 @@ class _ToolbarBlocAdaptor extends StatelessWidget {
329320
fieldController: bloc.fieldController,
330321
);
331322

332-
return ChangeNotifierProvider.value(
333-
value: Provider.of<AppearanceSetting>(context, listen: true),
334-
child: Selector<AppearanceSetting, AppTheme>(
335-
selector: (ctx, notifier) => notifier.theme,
336-
builder: (ctx, theme, child) {
337-
return BoardToolbar(toolbarContext: toolbarContext);
338-
},
339-
),
340-
);
323+
return BoardToolbar(toolbarContext: toolbarContext);
341324
},
342325
);
343326
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import 'package:app_flowy/plugins/board/application/card/board_date_cell_bloc.dart';
22
import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
3-
import 'package:flowy_infra/theme.dart';
43
import 'package:flowy_infra_ui/style_widget/text.dart';
54
import 'package:flutter/material.dart';
65
import 'package:flutter_bloc/flutter_bloc.dart';
@@ -53,7 +52,7 @@ class _BoardDateCellState extends State<BoardDateCell> {
5352
child: FlowyText.regular(
5453
state.dateStr,
5554
fontSize: 13,
56-
color: context.read<AppTheme>().shader3,
55+
color: Theme.of(context).hintColor,
5756
),
5857
),
5958
);

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import 'package:app_flowy/plugins/board/application/card/board_url_cell_bloc.dar
22
import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
33
import 'package:flowy_infra/size.dart';
44
import 'package:flowy_infra/text_style.dart';
5-
import 'package:flowy_infra/theme.dart';
65
import 'package:flutter/material.dart';
76
import 'package:flutter_bloc/flutter_bloc.dart';
87
import 'package:textstyle_extensions/textstyle_extensions.dart';
@@ -37,7 +36,6 @@ class _BoardUrlCellState extends State<BoardUrlCell> {
3736

3837
@override
3938
Widget build(BuildContext context) {
40-
final theme = context.watch<AppTheme>();
4139
return BlocProvider.value(
4240
value: _cellBloc,
4341
child: BlocBuilder<BoardURLCellBloc, BoardURLCellState>(
@@ -58,7 +56,7 @@ class _BoardUrlCellState extends State<BoardUrlCell> {
5856
text: state.content,
5957
style: TextStyles.general(
6058
fontSize: FontSizes.s14,
61-
color: theme.main2,
59+
color: Theme.of(context).colorScheme.onPrimaryContainer,
6260
).underline,
6361
),
6462
),

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/board/application/card/card_data_controller.da
33
import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_action_sheet.dart';
44
import 'package:appflowy_popover/appflowy_popover.dart';
55
import 'package:flowy_infra/image.dart';
6-
import 'package:flowy_infra/theme.dart';
76
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
87
import 'package:flutter/foundation.dart';
98
import 'package:flutter/material.dart';
@@ -221,8 +220,10 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
221220
Widget build(BuildContext context) {
222221
return Padding(
223222
padding: const EdgeInsets.all(3.0),
224-
child:
225-
svgWidget('grid/details', color: context.read<AppTheme>().iconColor),
223+
child: svgWidget(
224+
'grid/details',
225+
color: Theme.of(context).colorScheme.onSurface,
226+
),
226227
);
227228
}
228229

@@ -243,7 +244,7 @@ class _CardEditOption extends StatelessWidget with CardAccessory {
243244
padding: const EdgeInsets.all(3.0),
244245
child: svgWidget(
245246
'editor/edit',
246-
color: context.read<AppTheme>().iconColor,
247+
color: Theme.of(context).colorScheme.onSurface,
247248
),
248249
);
249250
}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import 'package:flowy_infra/theme.dart';
21
import 'package:flowy_infra_ui/style_widget/hover.dart';
32
import 'package:flutter/material.dart';
4-
import 'package:flutter_bloc/flutter_bloc.dart';
53

64
enum AccessoryType {
75
edit,
@@ -28,25 +26,23 @@ class CardAccessoryContainer extends StatelessWidget {
2826

2927
@override
3028
Widget build(BuildContext context) {
31-
final theme = context.read<AppTheme>();
3229
final children = accessories.map((accessory) {
3330
return GestureDetector(
3431
behavior: HitTestBehavior.opaque,
3532
onTap: () {
3633
accessory.onTap(context);
3734
onTapAccessory(accessory.type);
3835
},
39-
child: _wrapHover(theme, accessory),
36+
child: _wrapHover(context, accessory),
4037
);
4138
}).toList();
4239
return _wrapDecoration(context, Row(children: children));
4340
}
4441

45-
FlowyHover _wrapHover(AppTheme theme, CardAccessory accessory) {
42+
FlowyHover _wrapHover(BuildContext context, CardAccessory accessory) {
4643
return FlowyHover(
4744
style: HoverStyle(
48-
hoverColor: theme.hover,
49-
backgroundColor: theme.surface,
45+
backgroundColor: Theme.of(context).colorScheme.surface,
5046
borderRadius: BorderRadius.zero,
5147
),
5248
builder: (_, onHover) => SizedBox(
@@ -58,8 +54,10 @@ class CardAccessoryContainer extends StatelessWidget {
5854
}
5955

6056
Widget _wrapDecoration(BuildContext context, Widget child) {
61-
final theme = context.read<AppTheme>();
62-
final borderSide = BorderSide(color: theme.shader6, width: 1.0);
57+
final borderSide = BorderSide(
58+
color: Theme.of(context).dividerColor,
59+
width: 1.0,
60+
);
6361
final decoration = BoxDecoration(
6462
color: Colors.transparent,
6563
border: Border.fromBorderSide(borderSide),

‎frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import 'package:appflowy_popover/appflowy_popover.dart';
88
import 'package:easy_localization/easy_localization.dart';
99
import 'package:flowy_infra/image.dart';
1010
import 'package:flowy_infra/size.dart';
11-
import 'package:flowy_infra/theme.dart';
1211
import 'package:flowy_infra_ui/style_widget/button.dart';
1312
import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
1413
import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -96,7 +95,6 @@ class _SettingItem extends StatelessWidget {
9695

9796
@override
9897
Widget build(BuildContext context) {
99-
final theme = context.read<AppTheme>();
10098
final isSelected = context
10199
.read<BoardSettingBloc>()
102100
.state
@@ -111,13 +109,15 @@ class _SettingItem extends StatelessWidget {
111109
action.title(),
112110
fontSize: FontSizes.s12,
113111
),
114-
hoverColor: theme.hover,
115112
onTap: () {
116113
context
117114
.read<BoardSettingBloc>()
118115
.add(BoardSettingEvent.performAction(action));
119116
},
120-
leftIcon: svgWidget(action.iconName(), color: theme.iconColor),
117+
leftIcon: svgWidget(
118+
action.iconName(),
119+
color: Theme.of(context).colorScheme.onSurface,
120+
),
121121
),
122122
);
123123
}

‎frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import 'package:app_flowy/plugins/grid/application/field/field_controller.dart';
22
import 'package:appflowy_popover/appflowy_popover.dart';
33
import 'package:flowy_infra/image.dart';
4-
import 'package:flowy_infra/theme.dart';
54
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
65
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
7-
import 'package:flutter/widgets.dart';
8-
import 'package:provider/provider.dart';
6+
import 'package:flutter/material.dart';
97

108
import 'board_setting.dart';
119

@@ -61,16 +59,17 @@ class _SettingButtonState extends State<_SettingButton> {
6159

6260
@override
6361
Widget build(BuildContext context) {
64-
final theme = context.read<AppTheme>();
6562
return AppFlowyPopover(
6663
controller: popoverController,
6764
constraints: BoxConstraints.loose(const Size(260, 400)),
6865
child: FlowyIconButton(
69-
hoverColor: theme.hover,
7066
width: 22,
7167
icon: Padding(
7268
padding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 3.0),
73-
child: svgWidget("grid/setting/setting", color: theme.iconColor),
69+
child: svgWidget(
70+
"grid/setting/setting",
71+
color: Theme.of(context).colorScheme.onSurface,
72+
),
7473
),
7574
),
7675
popupBuilder: (BuildContext popoverContext) {

‎frontend/app_flowy/lib/plugins/doc/document.dart‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
44
import 'package:app_flowy/plugins/util.dart';
55
import 'package:app_flowy/startup/plugin/plugin.dart';
66
import 'package:app_flowy/startup/startup.dart';
7-
import 'package:app_flowy/workspace/application/appearance.dart';
87
import 'package:app_flowy/plugins/doc/application/share_bloc.dart';
98
import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
109
import 'package:app_flowy/workspace/presentation/home/toast.dart';
@@ -16,15 +15,13 @@ import 'package:clipboard/clipboard.dart';
1615
import 'package:easy_localization/easy_localization.dart';
1716
import 'package:file_picker/file_picker.dart';
1817
import 'package:flowy_infra/size.dart';
19-
import 'package:flowy_infra/theme.dart';
2018
import 'package:flowy_infra_ui/widget/rounded_button.dart';
2119
import 'package:flowy_sdk/log.dart';
2220
import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
2321
import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
2422
import 'package:flowy_sdk/protobuf/flowy-document/entities.pb.dart';
2523
import 'package:flutter/material.dart';
2624
import 'package:flutter_bloc/flutter_bloc.dart';
27-
import 'package:provider/provider.dart';
2825

2926
import 'document_page.dart';
3027

@@ -129,23 +126,13 @@ class DocumentShareButton extends StatelessWidget {
129126
);
130127
},
131128
child: BlocBuilder<DocShareBloc, DocShareState>(
132-
builder: (context, state) {
133-
return ChangeNotifierProvider.value(
134-
value: Provider.of<AppearanceSetting>(context, listen: true),
135-
child: Selector<AppearanceSetting, Locale>(
136-
selector: (ctx, notifier) => notifier.locale,
137-
builder: (ctx, _, child) => ConstrainedBox(
138-
constraints: const BoxConstraints.expand(
139-
height: 30,
140-
width: 100,
141-
),
142-
child: ShareActionList(
143-
view: view,
144-
),
145-
),
146-
),
147-
);
148-
},
129+
builder: (context, state) => ConstrainedBox(
130+
constraints: const BoxConstraints.expand(
131+
height: 30,
132+
width: 100,
133+
),
134+
child: ShareActionList(view: view),
135+
),
149136
),
150137
),
151138
);
@@ -177,7 +164,6 @@ class ShareActionList extends StatelessWidget {
177164

178165
@override
179166
Widget build(BuildContext context) {
180-
final theme = context.watch<AppTheme>();
181167
final docShareBloc = context.read<DocShareBloc>();
182168
return PopoverActionList<ShareActionWrapper>(
183169
direction: PopoverDirection.bottomWithCenterAligned,
@@ -189,7 +175,7 @@ class ShareActionList extends StatelessWidget {
189175
title: LocaleKeys.shareAction_buttonText.tr(),
190176
fontSize: FontSizes.s12,
191177
borderRadius: Corners.s6Border,
192-
color: theme.main1,
178+
color: Theme.of(context).colorScheme.primary,
193179
onPressed: () => controller.show(),
194180
);
195181
},

0 commit comments

Comments
 (0)