Skip to content

Commit

Permalink
fix: quill editor color picker improvements (#36)
Browse files Browse the repository at this point in the history 
fix: move quill-default color picker from dialog to bottom-sheet
fix: adjusted the divider color
  • Loading branch information
@ps9310
ps9310 authored Nov 5, 2024
1 parent 79b0061 commit 6a36df0
Show file tree
Hide file tree
Showing 5 changed files with 535 additions and 122 deletions.
2 changes: 2 additions & 0 deletions example/macos/Flutter/GeneratedPluginRegistrant.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import irondash_engine_context
import just_audio
import package_info_plus
import path_provider_foundation
import quill_native_bridge_macos
import record_darwin
import share_plus
import shared_preferences_foundation
Expand All @@ -36,6 +37,7 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
JustAudioPlugin.register(with: registry.registrar(forPlugin: "JustAudioPlugin"))
FPPPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FPPPackageInfoPlusPlugin"))
PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
QuillNativeBridgePlugin.register(with: registry.registrar(forPlugin: "QuillNativeBridgePlugin"))
RecordPlugin.register(with: registry.registrar(forPlugin: "RecordPlugin"))
SharePlusMacosPlugin.register(with: registry.registrar(forPlugin: "SharePlusMacosPlugin"))
SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
Expand Down
10 changes: 8 additions & 2 deletions example/macos/Podfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ PODS:
- path_provider_foundation (0.0.1):
- Flutter
- FlutterMacOS
- quill_native_bridge_macos (0.0.1):
- FlutterMacOS
- record_darwin (1.0.0):
- Flutter
- FlutterMacOS
Expand Down Expand Up @@ -59,6 +61,7 @@ DEPENDENCIES:
- just_audio (from `Flutter/ephemeral/.symlinks/plugins/just_audio/macos`)
- package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`)
- path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`)
- quill_native_bridge_macos (from `Flutter/ephemeral/.symlinks/plugins/quill_native_bridge_macos/macos`)
- record_darwin (from `Flutter/ephemeral/.symlinks/plugins/record_darwin/macos`)
- share_plus (from `Flutter/ephemeral/.symlinks/plugins/share_plus/macos`)
- shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin`)
Expand Down Expand Up @@ -96,6 +99,8 @@ EXTERNAL SOURCES:
:path: Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos
path_provider_foundation:
:path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin
quill_native_bridge_macos:
:path: Flutter/ephemeral/.symlinks/plugins/quill_native_bridge_macos/macos
record_darwin:
:path: Flutter/ephemeral/.symlinks/plugins/record_darwin/macos
share_plus:
Expand Down Expand Up @@ -126,10 +131,11 @@ SPEC CHECKSUMS:
irondash_engine_context: da62996ee25616d2f01bbeb85dc115d813359478
just_audio: 9b67ca7b97c61cfc9784ea23cd8cc55eb226d489
OrderedSet: e539b66b644ff081c73a262d24ad552a69be3a94
package_info_plus: d2f71247aab4b6521434f887276093acc70d214c
package_info_plus: f5790acc797bf17c3e959e9d6cf162cc68ff7523
path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
quill_native_bridge_macos: f90985c5269ac7ba84d933605b463d96e5f544fe
record_darwin: df0a677188e5fed18472550298e675f19ddaffbe
share_plus: a182a58e04e51647c0481aadabbc4de44b3a2bce
share_plus: fd717ef89a2801d3491e737630112b80c310640e
shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
sqflite_darwin: a553b1fd6fe66f53bbb0fe5b4f5bab93f08d7a13
super_native_extensions: 85efee3a7495b46b04befcfc86ed12069264ebf3
Expand Down
255 changes: 136 additions & 119 deletions lib/src/components/organisms/quill_editor/color_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart' hide ColorExtension1;
import 'package:flutter_quill/flutter_quill.dart';
import 'package:flutter_quill/translations.dart';

import '../../../utils/localizations/translation.dart';
import '../../../utils/tools/utils.dart';
import '../../atoms.dart';
import '../../molecules.dart';
import 'material_picker.dart';

/// Controls color styles.
///
Expand Down Expand Up @@ -212,19 +216,18 @@ class ZdsQuillToolbarColorButtonState extends State<ZdsQuillToolbarColorButton>
await customCallback(_controller, widget.isBackground);
return;
}
unawaited(
showDialog<String>(
context: context,
barrierColor:
_options.dialogBarrierColor ?? context.quillSharedConfigurations?.dialogBarrierColor ?? Colors.black54,
builder: (_) => _ColorPickerDialog(
isBackground: widget.isBackground,
onRequestChangeColor: _changeColor,
isToggledColor: _isToggledColor,
selectionStyle: _selectionStyle,
),

final color = await showZdsBottomSheet<Color>(
context: context,
enableDrag: false,
builder: (_) => _ColorPickerDialog(
isBackground: widget.isBackground,
isToggledColor: _isToggledColor,
selectionStyle: _selectionStyle,
),
);

_changeColor(context, color);
}

@override
Expand All @@ -251,15 +254,13 @@ enum _PickerType {
class _ColorPickerDialog extends StatefulWidget {
const _ColorPickerDialog({
required this.isBackground,
required this.onRequestChangeColor,
required this.isToggledColor,
required this.selectionStyle,
});

final bool isBackground;

final bool isToggledColor;
final void Function(BuildContext context, Color? color) onRequestChangeColor;
final Style selectionStyle;

@override
Expand All @@ -269,12 +270,6 @@ class _ColorPickerDialog extends StatefulWidget {
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(
ObjectFlagProperty<void Function(BuildContext context, Color? color)>.has(
'onRequestChangeColor',
onRequestChangeColor,
),
)
..add(DiagnosticsProperty<bool>('isBackground', isBackground))
..add(DiagnosticsProperty<bool>('isToggledColor', isToggledColor))
..add(DiagnosticsProperty<Style>('selectionStyle', selectionStyle));
Expand All @@ -286,6 +281,7 @@ class _ColorPickerDialogState extends State<_ColorPickerDialog> {
Color selectedColor = Colors.black;

late final TextEditingController hexController;
final focusNode = FocusNode();
late void Function(void Function()) colorBoxSetState;

@override
Expand All @@ -299,118 +295,138 @@ class _ColorPickerDialogState extends State<_ColorPickerDialog> {
}
}

@override
void dispose() {
super.dispose();
hexController.dispose();
focusNode.dispose();
}

@override
Widget build(BuildContext context) {
final strings = ComponentStrings.of(context);
return AlertDialog(
actions: [
TextButton(
onPressed: () {
widget.onRequestChangeColor(context, null);
Navigator.of(context).pop();
},
child: Text(strings.get('CLEAR', 'Clear')),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(strings.get('OK', 'Ok')),
),
],
backgroundColor: Theme.of(context).canvasColor,
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
TextButton(
onPressed: () {
setState(() {
pickerType = _PickerType.material;
});
},
child: Text(strings.get('MATERIAL', 'Material')),
),
TextButton(
onPressed: () {
setState(() {
pickerType = _PickerType.color;
});
},
child: Text(strings.get('COLOR', 'Color')),
),
],
),
const SizedBox(height: 6),
Column(
children: [
if (pickerType == _PickerType.material)
MaterialPicker(
pickerColor: selectedColor,
onColorChanged: (color) {
widget.onRequestChangeColor(context, color);
Navigator.of(context).pop();
},
),
if (pickerType == _PickerType.color)
Column(
return Scaffold(
body: LayoutBuilder(
builder: (context, box) {
return Column(
children: [
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(14),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ColorPicker(
pickerColor: selectedColor,
displayThumbColor: true,
onColorChanged: (color) {
widget.onRequestChangeColor(context, color);
hexController.text = _colorToHex(color);
selectedColor = color;
colorBoxSetState(() {});
ZdsToggleButton(
values: [
strings.get('MATERIAL', 'Material'),
strings.get('COLOR', 'Color'),
],
onToggleCallback: (value) {
if (value == 0) {
setState(() {
pickerType = _PickerType.material;
});
} else {
setState(() {
pickerType = _PickerType.color;
});
}
},
),
const SizedBox(height: 10),
Row(
const SizedBox(height: 6),
Column(
children: [
Expanded(
child: TextFormField(
controller: hexController,
onChanged: (value) {
selectedColor = hexToColor(value);
widget.onRequestChangeColor(context, selectedColor);
colorBoxSetState(() {});
if (pickerType == _PickerType.material)
ZdsMaterialPicker(
pickerColor: selectedColor,
enableLabel: true,
height: box.maxHeight,
width: box.maxWidth,
onColorChanged: (color) {
Navigator.of(context).pop(color);
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
labelText: strings.get('HEX', 'Hex'),
border: const OutlineInputBorder(),
),
),
),
const SizedBox(width: 10),
StatefulBuilder(
builder: (context, mcolorBoxSetState) {
colorBoxSetState = mcolorBoxSetState;
return Container(
width: 38,
height: 38,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black45,
),
color: selectedColor,
borderRadius: BorderRadius.circular(5),
if (pickerType == _PickerType.color)
Column(
children: [
Row(
children: [
Expanded(
child: TextFormField(
focusNode: focusNode,
controller: hexController,
onChanged: (value) {
selectedColor = hexToColor(value);
colorBoxSetState(() {});
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
labelText: strings.get('HEX', 'Hex'),
border: const OutlineInputBorder(),
),
),
),
const SizedBox(width: 10),
StatefulBuilder(
builder: (context, setState) {
colorBoxSetState = setState;
return Container(
width: 38,
height: 38,
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
color: selectedColor,
borderRadius: BorderRadius.circular(5),
),
);
},
),
],
),
ColorPicker(
pickerColor: selectedColor,
displayThumbColor: true,
hexInputController: hexController,
labelTypes: List.empty(),
colorPickerWidth: context.isPhone() ? box.maxWidth : 300,
onColorChanged: (color) {
hexController.text = _colorToHex(color);
selectedColor = color;
colorBoxSetState(() {});
},
),
);
},
),
],
),
],
),
],
),
const SizedBox(height: 10),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(14),
child: Row(
children: [
const Spacer(),
ZdsButton.text(
child: Text(strings.get('CLEAR', 'Clear')),
onTap: () {
Navigator.of(context).pop();
},
),
const SizedBox(width: 8),
ZdsButton(
child: Text(strings.get('OK', 'Ok')),
onTap: () {
Navigator.of(context).pop(selectedColor);
},
),
],
),
),
],
);
},
),
);
}
Expand All @@ -422,7 +438,8 @@ class _ColorPickerDialogState extends State<_ColorPickerDialog> {
..add(EnumProperty<_PickerType>('pickerType', pickerType))
..add(ColorProperty('selectedColor', selectedColor))
..add(DiagnosticsProperty<TextEditingController>('hexController', hexController))
..add(ObjectFlagProperty<void Function(void Function() p1)>.has('colorBoxSetState', colorBoxSetState));
..add(ObjectFlagProperty<void Function(void Function() p1)>.has('colorBoxSetState', colorBoxSetState))
..add(DiagnosticsProperty<FocusNode>('focusNode', focusNode));
}
}

Expand Down
Loading

0 comments on commit 6a36df0

Please sign in to comment.