AppFlowy-IO/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-09-11 19:17:43 +03:00
Code Issues Projects Releases Wiki Activity

feat: adjust font background color in dark mode (#5333)

Browse Source
This commit is contained in:
Lucas.Xu 2024-05-14 15:36:23 +08:00 committed by GitHub
parent eb0c9d3264
commit 3bead0bab9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 109 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/font_colors.dart Normal file
View File

@ -0,0 +1,66 @@
import 'package:flutter/material.dart';
class EditorFontColors {
static final lightColors = [
const Color(0x00FFFFFF),
const Color(0xFFE8E0FF),
const Color(0xFFFFE6FD),
const Color(0xFFFFDAE6),
const Color(0xFFFFEFE3),
const Color(0xFFF5FFDC),
const Color(0xFFDDFFD6),
const Color(0xFFDEFFF1),
const Color(0xFFE1FBFF),
const Color(0xFFFFADAD),
const Color(0xFFFFE088),
const Color(0xFFA7DF4A),
const Color(0xFFD4C0FF),
const Color(0xFFFDB2FE),
const Color(0xFFFFD18B),
const Color(0xFF65E7F0),
const Color(0xFF71E6B4),
const Color(0xFF80F1FF),
];
static final darkColors = [
const Color(0x00FFFFFF),
const Color(0xFF8B80AD),
const Color(0xFF987195),
const Color(0xFF906D78),
const Color(0xFFA68B77),
const Color(0xFF88936D),
const Color(0xFF72936B),
const Color(0xFF6B9483),
const Color(0xFF658B90),
const Color(0xFF95405A),
const Color(0xFFA6784D),
const Color(0xFF6E9234),
const Color(0xFF6455A2),
const Color(0xFF924F83),
const Color(0xFFA48F34),
const Color(0xFF29A3AC),
const Color(0xFF2E9F84),
const Color(0xFF405EA6),
];
// if the input color doesn't exist in the list, return the input color itself.
static Color? fromBuiltInColors(BuildContext context, Color? color) {
if (color == null) {
return null;
}
final brightness = Theme.of(context).brightness;
// if the dark mode color using light mode, return it's corresponding light color. Same for light mode.
if (brightness == Brightness.light) {
if (darkColors.contains(color)) {
return lightColors[darkColors.indexOf(color)];
}
} else {
if (lightColors.contains(color)) {
return darkColors[lightColors.indexOf(color)];
}
}
return color;
}
}

16
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart
View File

@ -1,6 +1,7 @@
import 'dart:async';
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
@ -25,7 +26,10 @@ class ColorItem extends StatelessWidget {
editorState.getSelectionColor(AppFlowyRichTextKeys.textColor);
final String? selectedBackgroundColor =
editorState.getSelectionColor(AppFlowyRichTextKeys.backgroundColor);
final backgroundColor = EditorFontColors.fromBuiltInColors(
context,
selectedBackgroundColor?.tryToColor(),
);
return MobileToolbarMenuItemWrapper(
size: const Size(82, 52),
onTap: () async {
@ -48,10 +52,12 @@ class ColorItem extends StatelessWidget {
);
},
icon: FlowySvgs.m_aa_font_color_m,
iconColor: selectedTextColor?.tryToColor(),
backgroundColor: selectedBackgroundColor?.tryToColor() ??
theme.toolbarMenuItemBackgroundColor,
selectedBackgroundColor: selectedBackgroundColor?.tryToColor(),
iconColor: EditorFontColors.fromBuiltInColors(
context,
selectedTextColor?.tryToColor(),
),
backgroundColor: backgroundColor ?? theme.toolbarMenuItemBackgroundColor,
selectedBackgroundColor: backgroundColor,
isSelected: selectedBackgroundColor != null,
showRightArrow: true,
iconPadding: const EdgeInsets.only(

27
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart
View File

@ -1,6 +1,7 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
@ -154,7 +155,7 @@ class _TextColorAndBackgroundColorState
}
class _BackgroundColors extends StatelessWidget {
_BackgroundColors({
const _BackgroundColors({
this.selectedColor,
required this.onSelectedColor,
});
@ -162,29 +163,11 @@ class _BackgroundColors extends StatelessWidget {
final Color? selectedColor;
final void Function(Color color) onSelectedColor;
final colors = [
const Color(0x00FFFFFF),
const Color(0xFFE8E0FF),
const Color(0xFFFFE6FD),
const Color(0xFFFFDAE6),
const Color(0xFFFFEFE3),
const Color(0xFFF5FFDC),
const Color(0xFFDDFFD6),
const Color(0xFFDEFFF1),
const Color(0xFFE1FBFF),
const Color(0xFFFFADAD),
const Color(0xFFFFE088),
const Color(0xFFA7DF4A),
const Color(0xFFD4C0FF),
const Color(0xFFFDB2FE),
const Color(0xFFFFD18B),
const Color(0xFFFFF176),
const Color(0xFF71E6B4),
const Color(0xFF80F1FF),
];
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).brightness == Brightness.light
? EditorFontColors.lightColors
: EditorFontColors.darkColors;
return GridView.count(
crossAxisCount: _count,
shrinkWrap: true,

11
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart
View File

@ -1,4 +1,5 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
@ -122,11 +123,17 @@ final colorToolbarItem = AppFlowyMobileToolbarItem(
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9),
color: backgroundColor?.tryToColor(),
color: EditorFontColors.fromBuiltInColors(
context,
backgroundColor?.tryToColor(),
),
),
child: FlowySvg(
FlowySvgs.m_aa_font_color_m,
color: textColor?.tryToColor(),
color: EditorFontColors.fromBuiltInColors(
context,
textColor?.tryToColor(),
),
),
);
},

21
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
View File

@ -1,11 +1,9 @@
import 'dart:math';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:appflowy/core/helpers/url_launcher.dart';
import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_item/utils.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
@ -17,6 +15,8 @@ import 'package:appflowy/workspace/application/settings/appearance/appearance_cu
import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
import 'package:collection/collection.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
@ -243,6 +243,21 @@ class EditorStyleCustomizer {
return before;
}
if (attributes.backgroundColor != null) {
final color = EditorFontColors.fromBuiltInColors(
context,
attributes.backgroundColor!,
);
if (color != null) {
return TextSpan(
text: before.text,
style: after.style?.merge(
TextStyle(backgroundColor: color),
),
);
}
}
// try to refresh font here.
if (attributes.fontFamily != null) {
try {