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

feat: Improve dark mode in document page (#2254)

Browse Source 
* chore: update page icon hover color

* chore: update remove icon hover color

* chore: update emoji picker style

* chore: update ai writer dialog button style

* chore: update Dropdown menu item style in code block

* chore: update callout tint color name

* chore: add null assertion in emoji popover
This commit is contained in:
Yijing Huang 2023-04-18 02:42:12 -04:00 committed by GitHub
parent 45d3a74103
commit 782d01274d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 63 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/appflowy_flutter/lib/plugins/document/editor_styles.dart
View File

@ -23,10 +23,9 @@ EditorStyle customEditorTheme(BuildContext context) {
fontFamily: 'poppins-Bold',
),
backgroundColor: Theme.of(context).colorScheme.surface,
selectionMenuItemSelectedIconColor:
Theme.of(context).textTheme.bodyMedium?.color,
selectionMenuItemSelectedTextColor:
Theme.of(context).textTheme.bodyMedium?.color,
selectionMenuBackgroundColor: Theme.of(context).cardColor,
selectionMenuItemSelectedIconColor: Theme.of(context).colorScheme.onSurface,
selectionMenuItemSelectedTextColor: Theme.of(context).colorScheme.onSurface,
);
return editorStyle;
}

3
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart
View File

@ -169,9 +169,8 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
_removeIcon();
},
useIntrinsicWidth: true,
leftIcon: Icon(
leftIcon: const Icon(
Icons.emoji_emotions_outlined,
color: Theme.of(context).iconTheme.color,
size: 18,
),
text: FlowyText.regular(

14
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/emoji_popover.dart
View File

@ -50,14 +50,14 @@ class _EmojiPopoverState extends State<EmojiPopover> {
],
);
},
config: const Config(
config: Config(
columns: 8,
emojiSizeMax: 28,
bgColor: Colors.transparent,
iconColor: Colors.grey,
iconColorSelected: Color(0xff333333),
indicatorColor: Color(0xff333333),
progressIndicatorColor: Color(0xff333333),
iconColor: Theme.of(context).iconTheme.color!,
iconColorSelected: Theme.of(context).colorScheme.onSurface,
selectedHoverColor: Theme.of(context).colorScheme.secondary,
progressIndicatorColor: Theme.of(context).iconTheme.color!,
buttonMode: ButtonMode.CUPERTINO,
initCategory: Category.RECENT,
),
@ -72,18 +72,16 @@ class _EmojiPopoverState extends State<EmojiPopover> {
return FlowyButton(
onTap: () => widget.removeIcon(),
useIntrinsicWidth: true,
hoverColor: Theme.of(context).colorScheme.onPrimary,
text: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: [
svgWidget("editor/delete"),
const FlowySvg(name: 'editor/delete'),
const SizedBox(
width: 5,
),
FlowyText(
LocaleKeys.document_plugins_cover_removeIcon.tr(),
color: Colors.grey,
),
],
),

2
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/icon_widget.dart
View File

@ -34,7 +34,7 @@ class _EmojiIconWidgetState extends State<EmojiIconWidget> {
margin: const EdgeInsets.only(top: 18),
decoration: BoxDecoration(
color: !hover
? Theme.of(context).colorScheme.secondary
? Theme.of(context).colorScheme.inverseSurface
: Colors.transparent,
borderRadius: Corners.s8Border,
),

46
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/openai/widgets/auto_completion_node_widget.dart
View File

@ -9,6 +9,8 @@ import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/style_widget/text_field.dart';
import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
@ -179,27 +181,13 @@ class _AutoCompletionInputState extends State<_AutoCompletionInput> {
Widget _buildInputFooterWidget(BuildContext context) {
return Row(
children: [
FlowyRichTextButton(
TextSpan(
children: [
TextSpan(
text: LocaleKeys.button_generate.tr(),
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
PrimaryTextButton(
LocaleKeys.button_generate.tr(),
onPressed: () async => await _onGenerate(),
),
const Space(10, 0),
FlowyRichTextButton(
TextSpan(
children: [
TextSpan(
text: LocaleKeys.button_Cancel.tr(),
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
SecondaryTextButton(
LocaleKeys.button_Cancel.tr(),
onPressed: () async => await _onExit(),
),
Expanded(
@ -219,27 +207,13 @@ class _AutoCompletionInputState extends State<_AutoCompletionInput> {
Widget _buildFooterWidget(BuildContext context) {
return Row(
children: [
FlowyRichTextButton(
TextSpan(
children: [
TextSpan(
text: '${LocaleKeys.button_keep.tr()} ',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
PrimaryTextButton(
LocaleKeys.button_keep.tr(),
onPressed: () => _onExit(),
),
const Space(10, 0),
FlowyRichTextButton(
TextSpan(
children: [
TextSpan(
text: '${LocaleKeys.button_discard.tr()} ',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
SecondaryTextButton(
LocaleKeys.button_discard.tr(),
onPressed: () => _onDiscard(),
),
],

5
frontend/appflowy_flutter/lib/workspace/application/appearance.dart
View File

@ -231,6 +231,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
surface: theme.surface,
// text&icon color when it is hovered
onSurface: theme.hoverFG,
// grey hover color
inverseSurface: theme.hoverBG3,
onError: theme.shader7,
error: theme.red,
outline: theme.shader4,
@ -277,7 +279,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
radius: Corners.s10Radius,
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
canvasColor: theme.shader6,
//dropdown menu color
canvasColor: theme.surface,
dividerColor: theme.divider,
hintColor: theme.hint,
//action item hover color

4
frontend/appflowy_flutter/lib/workspace/presentation/widgets/emoji_picker/src/config.dart
View File

@ -16,6 +16,7 @@ class Config {
this.initCategory = Category.RECENT,
this.bgColor = const Color(0xFFEBEFF2),
this.indicatorColor = Colors.blue,
this.selectedHoverColor = Colors.grey,
this.iconColor = Colors.grey,
this.iconColorSelected = Colors.blue,
this.progressIndicatorColor = Colors.blue,
@ -52,6 +53,9 @@ class Config {
/// The color of the category indicator
final Color indicatorColor;
/// The background color of the selected category
final Color selectedHoverColor;
/// The color of the category icons
final Color iconColor;

37
frontend/appflowy_flutter/lib/workspace/presentation/widgets/emoji_picker/src/default_emoji_picker_view.dart
View File

@ -1,4 +1,6 @@
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@ -106,37 +108,42 @@ class DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
return Container(
color: widget.config.bgColor,
padding: const EdgeInsets.all(5.0),
padding: const EdgeInsets.all(4.0),
child: Column(
children: [
SizedBox(
height: 25.0,
height: 40,
child: TextField(
controller: _emojiController,
focusNode: _emojiFocusNode,
autofocus: true,
style: const TextStyle(fontSize: 14.0),
cursorWidth: 1.0,
cursorColor: Colors.black,
cursorColor: Theme.of(context).colorScheme.tertiary,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: FontSizes.s16,
fontWeight: FontWeight.w400,
),
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(horizontal: 5.0),
contentPadding: const EdgeInsets.symmetric(horizontal: 10),
hintText: "Search emoji",
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(),
gapPadding: 0.0,
borderSide: BorderSide(
color: Theme.of(context).colorScheme.tertiary,
width: 2,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(),
gapPadding: 0.0,
borderSide: BorderSide(
color: Theme.of(context).colorScheme.tertiary,
),
),
filled: true,
fillColor: Colors.white,
hoverColor: Colors.white,
fillColor: Colors.transparent,
hoverColor: Colors.transparent,
),
),
),
const VSpace(6),
Row(
children: [
Expanded(
@ -150,9 +157,8 @@ class DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
indicatorColor: widget.config.indicatorColor,
padding: const EdgeInsets.symmetric(vertical: 5.0),
indicator: BoxDecoration(
border: Border.all(color: Colors.transparent),
borderRadius: BorderRadius.circular(4.0),
color: Colors.grey.withOpacity(0.5),
color: widget.config.selectedHoverColor,
),
onTap: (index) {
_pageController!.animateToPage(
@ -296,6 +302,7 @@ class DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
style: TextStyle(
fontSize: emojiSize,
backgroundColor: Colors.transparent,
color: Theme.of(context).iconTheme.color,
),
),
),

5
frontend/appflowy_flutter/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart
View File

@ -1,4 +1,5 @@
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:highlight/highlight.dart' as highlight;
import 'package:highlight/languages/all.dart';
@ -132,9 +133,9 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
allLanguages.keys.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
child: FlowyText.medium(
value,
style: const TextStyle(fontSize: 12.0),
color: Theme.of(context).colorScheme.tertiary,
),
);
}).toList(growable: false),

42
frontend/appflowy_flutter/packages/appflowy_editor_plugins/lib/src/extensions/theme_extension.dart
View File

@ -1,5 +1,4 @@
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flutter/material.dart';
@ -9,48 +8,25 @@ extension FlowyTintExtension on FlowyTint {
ThemeMode? themeMode,
String? theme,
}) {
if (themeMode == ThemeMode.light && theme == BuiltInTheme.defaultTheme) {
switch (this) {
case FlowyTint.tint1:
return l10n.lightLightTint1;
case FlowyTint.tint2:
return l10n.lightLightTint2;
case FlowyTint.tint3:
return l10n.lightLightTint3;
case FlowyTint.tint4:
return l10n.lightLightTint4;
case FlowyTint.tint5:
return l10n.lightLightTint5;
case FlowyTint.tint6:
return l10n.lightLightTint6;
case FlowyTint.tint7:
return l10n.lightLightTint7;
case FlowyTint.tint8:
return l10n.lightLightTint8;
case FlowyTint.tint9:
return l10n.lightLightTint9;
}
}
switch (this) {
case FlowyTint.tint1:
return l10n.tint1;
return l10n.lightLightTint1;
case FlowyTint.tint2:
return l10n.tint2;
return l10n.lightLightTint2;
case FlowyTint.tint3:
return l10n.tint3;
return l10n.lightLightTint3;
case FlowyTint.tint4:
return l10n.tint4;
return l10n.lightLightTint4;
case FlowyTint.tint5:
return l10n.tint5;
return l10n.lightLightTint5;
case FlowyTint.tint6:
return l10n.tint6;
return l10n.lightLightTint6;
case FlowyTint.tint7:
return l10n.tint7;
return l10n.lightLightTint7;
case FlowyTint.tint8:
return l10n.tint8;
return l10n.lightLightTint8;
case FlowyTint.tint9:
return l10n.tint9;
return l10n.lightLightTint9;
}
}
}