feat: dark mode improvement (#90)

* chore: add item pop up style and new clear icon * fix: enable ColorPicker hover color * fix: fix text overflow
2023-04-20 20:57:02 -05:00 · 2023-04-20 20:57:02 -05:00 · a864409b6f
commit a864409b6f
parent 0f303cbd8e
5 changed files with 74 additions and 49 deletions
--- a/assets/images/clear.svg
+++ b/assets/images/clear.svg
@ -1,5 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="8" cy="8" r="7" fill="#F2F2F2"/>
-<path d="M6 6L10 10" stroke="#BDBDBD" stroke-linecap="round"/>
-<path d="M10 6L6 10" stroke="#BDBDBD" stroke-linecap="round"/>
-</svg>
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z" fill="#BDBDBD"></path> </svg>
--- a/lib/src/render/color_menu/color_picker.dart
+++ b/lib/src/render/color_menu/color_picker.dart
@ -1,4 +1,6 @@
+import 'package:appflowy_editor/src/editor_state.dart';
 import 'package:appflowy_editor/src/infra/flowy_svg.dart';
+import 'package:appflowy_editor/src/render/style/editor_style.dart';
 import 'package:flutter/material.dart';

 class ColorOption {
@ -19,6 +21,7 @@ enum _ColorType {
 class ColorPicker extends StatefulWidget {
  const ColorPicker({
    super.key,
+    this.editorState,
    this.selectedFontColorHex,
    this.selectedBackgroundColorHex,
    required this.pickerBackgroundColor,
@ -29,7 +32,7 @@ class ColorPicker extends StatefulWidget {
    required this.onSubmittedbackgroundColorHex,
    required this.onSubmittedFontColorHex,
  });
-
+  final EditorState? editorState;
  final String? selectedFontColorHex;
  final String? selectedBackgroundColorHex;
  final Color pickerBackgroundColor;
@ -53,6 +56,7 @@ class _ColorPickerState extends State<ColorPicker> {
      TextEditingController();
  final TextEditingController _backgroundColorOpacityController =
      TextEditingController();
+  EditorStyle? get style => widget.editorState?.editorStyle;

  @override
  void initState() {
@ -131,7 +135,6 @@ class _ColorPickerState extends State<ColorPicker> {
    return Text(
      text,
      style: const TextStyle(
-        color: Colors.grey,
        fontWeight: FontWeight.bold,
      ),
    );
@ -154,26 +157,15 @@ class _ColorPickerState extends State<ColorPicker> {
  Widget _buildColorItem(_ColorType type, ColorOption option, bool isChecked) {
    return SizedBox(
      height: 36,
-      child: InkWell(
-        customBorder: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(6),
-        ),
-        hoverColor: widget.pickerItemHoverColor,
-        onTap: () {
+      child: TextButton.icon(
+        onPressed: () {
          if (type == _ColorType.font) {
            widget.onSubmittedFontColorHex(option.colorHex);
          } else if (type == _ColorType.background) {
            widget.onSubmittedbackgroundColorHex(option.colorHex);
          }
        },
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            // padding
-            const SizedBox(width: 6),
-            // icon
-            SizedBox.square(
+        icon: SizedBox.square(
          dimension: 12,
          child: Container(
            decoration: BoxDecoration(
@ -182,19 +174,31 @@ class _ColorPickerState extends State<ColorPicker> {
            ),
          ),
        ),
-            // padding
-            const SizedBox(width: 10),
-            // text
+        style: ButtonStyle(
+          backgroundColor: MaterialStateProperty.resolveWith<Color>(
+            (Set<MaterialState> states) {
+              if (states.contains(MaterialState.hovered)) {
+                return style!.popupMenuHoverColor!;
+              }
+              return Colors.transparent;
+            },
+          ),
+        ),
+        label: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
            Expanded(
              child: Text(
                option.name,
                style:
                    TextStyle(fontSize: 12, color: widget.pickerItemTextColor),
+                softWrap: false,
+                maxLines: 1,
+                overflow: TextOverflow.fade,
              ),
            ),
            // checkbox
            if (isChecked) const FlowySvg(name: 'checkmark'),
-            const SizedBox(width: 6),
          ],
        ),
      ),
--- a/lib/src/render/link_menu/link_menu.dart
+++ b/lib/src/render/link_menu/link_menu.dart
@ -77,19 +77,19 @@ class _LinkMenuState extends State<LinkMenu> {
              if (widget.linkText != null) ...[
                _buildIconButton(
                  iconName: 'link',
-                  color: style?.selectionMenuItemIconColor,
+                  color: style?.popupMenuFGColor,
                  text: 'Open link',
                  onPressed: widget.onOpenLink,
                ),
                _buildIconButton(
                  iconName: 'copy',
-                  color: style?.selectionMenuItemIconColor,
+                  color: style?.popupMenuFGColor,
                  text: 'Copy link',
                  onPressed: widget.onCopyLink,
                ),
                _buildIconButton(
                  iconName: 'delete',
-                  color: style?.selectionMenuItemIconColor,
+                  color: style?.popupMenuFGColor,
                  text: 'Remove link',
                  onPressed: widget.onRemoveLink,
                ),
@ -102,11 +102,10 @@ class _LinkMenuState extends State<LinkMenu> {
  }

  Widget _buildHeader() {
-    return const Text(
+    return Text(
      'Add your link',
      style: TextStyle(
-        color: Colors.grey,
-        fontWeight: FontWeight.bold,
+        fontSize: style?.textStyle?.fontSize,
      ),
    );
  }
@ -114,13 +113,17 @@ class _LinkMenuState extends State<LinkMenu> {
  Widget _buildInput() {
    return TextField(
      focusNode: _focusNode,
-      style: const TextStyle(fontSize: 14.0),
+      style: TextStyle(
+        fontSize: style?.textStyle?.fontSize,
+      ),
      textAlign: TextAlign.left,
      controller: _textEditingController,
      onSubmitted: widget.onSubmitted,
      decoration: InputDecoration(
        hintText: 'URL',
-        hintStyle: const TextStyle(fontSize: 14.0),
+        hintStyle: TextStyle(
+          fontSize: style?.textStyle?.fontSize,
+        ),
        contentPadding: const EdgeInsets.all(16.0),
        isDense: true,
        suffixIcon: IconButton(
@ -151,20 +154,24 @@ class _LinkMenuState extends State<LinkMenu> {
        name: iconName,
        color: color,
      ),
-      style: TextButton.styleFrom(
-        minimumSize: const Size.fromHeight(40),
-        padding: EdgeInsets.zero,
-        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        alignment: Alignment.centerLeft,
-      ),
      label: Text(
        text,
        textAlign: TextAlign.left,
        style: TextStyle(
-          color: style?.selectionMenuItemTextColor ?? Colors.black,
+          color: color,
          fontSize: 14.0,
        ),
      ),
+      style: ButtonStyle(
+        backgroundColor: MaterialStateProperty.resolveWith<Color>(
+          (Set<MaterialState> states) {
+            if (states.contains(MaterialState.hovered)) {
+              return style!.popupMenuHoverColor!;
+            }
+            return Colors.transparent;
+          },
+        ),
+      ),
      onPressed: onPressed,
    );
  }
--- a/lib/src/render/style/editor_style.dart
+++ b/lib/src/render/style/editor_style.dart
@ -42,6 +42,10 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
  final TextStyle? code;
  final String? highlightColorHex;

+  // Item's pop up menu styles
+  final Color? popupMenuFGColor;
+  final Color? popupMenuHoverColor;
+
  EditorStyle({
    required this.padding,
    required this.backgroundColor,
@ -66,6 +70,8 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
    required this.code,
    required this.highlightColorHex,
    required this.lineHeight,
+    required this.popupMenuFGColor,
+    required this.popupMenuHoverColor,
  });

  @override
@ -92,6 +98,8 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
    TextStyle? code,
    String? highlightColorHex,
    double? lineHeight,
+    Color? popupMenuFGColor,
+    Color? popupMenuHoverColor,
  }) {
    return EditorStyle(
      padding: padding ?? this.padding,
@ -123,6 +131,8 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
      code: code ?? this.code,
      highlightColorHex: highlightColorHex ?? this.highlightColorHex,
      lineHeight: lineHeight ?? this.lineHeight,
+      popupMenuFGColor: popupMenuFGColor ?? this.popupMenuFGColor,
+      popupMenuHoverColor: popupMenuHoverColor ?? this.popupMenuHoverColor,
    );
  }

@ -183,6 +193,9 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
      code: TextStyle.lerp(code, other.code, t),
      highlightColorHex: highlightColorHex,
      lineHeight: lineHeight,
+      popupMenuFGColor: Color.lerp(popupMenuFGColor, other.popupMenuFGColor, t),
+      popupMenuHoverColor:
+          Color.lerp(popupMenuHoverColor, other.popupMenuHoverColor, t),
    );
  }

@ -223,6 +236,8 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
    ),
    highlightColorHex: '0x6000BCF0',
    lineHeight: 1.5,
+    popupMenuFGColor: const Color(0xFF333333),
+    popupMenuHoverColor: const Color(0xFFE0F8FF),
  );

  static final dark = light.copyWith(
@ -240,5 +255,7 @@ class EditorStyle extends ThemeExtension<EditorStyle> {
    selectionMenuItemSelectedColor: const Color(0xFF00BCF0),
    toolbarColor: const Color(0xFF131720),
    toolbarElevation: 0.0,
+    popupMenuFGColor: Colors.white,
+    popupMenuHoverColor: const Color(0xFF00BCF0),
  );
 }
--- a/lib/src/render/toolbar/toolbar_item.dart
+++ b/lib/src/render/toolbar/toolbar_item.dart
@ -571,10 +571,11 @@ void showColorMenu(
        child: Material(
          color: Colors.transparent,
          child: ColorPicker(
+            editorState: editorState,
            pickerBackgroundColor:
                style.selectionMenuBackgroundColor ?? Colors.white,
-            pickerItemHoverColor: style.selectionMenuItemSelectedColor ??
-                Colors.blue.withOpacity(0.3),
+            pickerItemHoverColor:
+                style.popupMenuHoverColor ?? Colors.blue.withOpacity(0.3),
            pickerItemTextColor:
                style.selectionMenuItemTextColor ?? Colors.black,
            selectedFontColorHex: fontColorHex,