Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

- quill editor color picker improvements #36

Merged
merged 1 commit into from
Nov 5, 2024
Merged

- quill editor color picker improvements #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/macos/Flutter/GeneratedPluginRegistrant.swift
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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