mirror of
https://github.com/twonlyapp/twonly-app.git
synced 2026-09-01 08:04:07 +00:00
352 lines
12 KiB
Dart
352 lines
12 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:twonly/src/database/twonly.db.dart';
|
|
import 'package:twonly/src/utils/misc.dart';
|
|
import 'package:twonly/src/visual/components/custom_color_picker_dialog.comp.dart';
|
|
import 'package:twonly/src/visual/elements/my_button.element.dart';
|
|
|
|
class LabelEditorBottomSheet extends StatefulWidget {
|
|
const LabelEditorBottomSheet({
|
|
this.label,
|
|
super.key,
|
|
});
|
|
|
|
final Label? label;
|
|
|
|
@override
|
|
State<LabelEditorBottomSheet> createState() => _LabelEditorBottomSheetState();
|
|
}
|
|
|
|
class _LabelEditorBottomSheetState extends State<LabelEditorBottomSheet> {
|
|
late TextEditingController _nameController;
|
|
late int _selectedBgColor;
|
|
late int _selectedTextColor;
|
|
|
|
static const List<int> defaultBgColors = [
|
|
0xFFE57373, // Red
|
|
0xFFF06292, // Pink
|
|
0xFFBA68C8, // Purple
|
|
0xFF7986CB, // Indigo
|
|
0xFF64B5F6, // Blue
|
|
0xFF4DD0E1, // Cyan
|
|
0xFF4DB6AC, // Teal
|
|
0xFF81C784, // Green
|
|
0xFFFFB74D, // Amber
|
|
0xFFFF8A65, // Deep Orange
|
|
0xFF90A4AE, // Blue Grey
|
|
0xFF424242, // Dark Grey
|
|
];
|
|
|
|
static const List<int> defaultTextColors = [
|
|
0xFFFFFFFF, // White
|
|
0xFF121212, // Dark/Black
|
|
0xFF1B263B, // Deep Navy
|
|
0xFF8B0000, // Dark Red
|
|
0xFF004D40, // Dark Teal
|
|
0xFF4A148C, // Dark Purple
|
|
];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_nameController = TextEditingController(text: widget.label?.name ?? '');
|
|
_selectedBgColor = widget.label?.backgroundColor ?? defaultBgColors[4];
|
|
_selectedTextColor = widget.label?.textColor ?? defaultTextColors[0];
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_nameController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _pickCustomColor({required bool isBgColor}) async {
|
|
final initial = isBgColor
|
|
? Color(_selectedBgColor)
|
|
: Color(_selectedTextColor);
|
|
final pickedColorInt = await showDialog<int>(
|
|
context: context,
|
|
builder: (context) => CustomColorPickerDialog(initialColor: initial),
|
|
);
|
|
|
|
if (pickedColorInt != null && mounted) {
|
|
setState(() {
|
|
if (isBgColor) {
|
|
_selectedBgColor = pickedColorInt;
|
|
} else {
|
|
_selectedTextColor = pickedColorInt;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isEditing = widget.label != null;
|
|
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
|
|
|
|
return Padding(
|
|
padding: EdgeInsets.only(bottom: bottomInset),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).scaffoldBackgroundColor,
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Drag indicator handle
|
|
Center(
|
|
child: Container(
|
|
width: 40,
|
|
height: 4,
|
|
margin: const EdgeInsets.only(bottom: 16),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade400,
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
isEditing ? context.lang.editLabel : context.lang.createLabel,
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
// Interactive Inline Label Badge
|
|
Center(
|
|
child: IntrinsicWidth(
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(
|
|
minWidth: 100,
|
|
maxWidth: 200,
|
|
),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Color(_selectedBgColor),
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 2,
|
|
),
|
|
child: TextField(
|
|
controller: _nameController,
|
|
autofocus: true,
|
|
maxLength: 8,
|
|
textAlign: TextAlign.center,
|
|
textCapitalization: TextCapitalization.words,
|
|
style: TextStyle(
|
|
color: Color(_selectedTextColor),
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
decoration: InputDecoration(
|
|
hintText: context.lang.labelNameHint,
|
|
hintStyle: TextStyle(
|
|
color: Color(
|
|
_selectedTextColor,
|
|
).withValues(alpha: 0.6),
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
border: InputBorder.none,
|
|
isDense: true,
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 4,
|
|
vertical: 6,
|
|
),
|
|
counterText: '',
|
|
),
|
|
onChanged: (_) => setState(() {}),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
// Background Color Section
|
|
Text(
|
|
context.lang.labelBackgroundColor,
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Wrap(
|
|
alignment: WrapAlignment.center,
|
|
spacing: 10,
|
|
runSpacing: 10,
|
|
children: [
|
|
...defaultBgColors.map((colorValue) {
|
|
final selected = _selectedBgColor == colorValue;
|
|
return GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_selectedBgColor = colorValue;
|
|
});
|
|
},
|
|
child: Container(
|
|
width: 36,
|
|
height: 36,
|
|
decoration: BoxDecoration(
|
|
color: Color(colorValue),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: selected
|
|
? Icon(
|
|
Icons.check,
|
|
size: 18,
|
|
color:
|
|
Color(colorValue).computeLuminance() > 0.5
|
|
? Colors.black
|
|
: Colors.white,
|
|
)
|
|
: null,
|
|
),
|
|
);
|
|
}),
|
|
// Custom Color Picker Button
|
|
GestureDetector(
|
|
onTap: () => _pickCustomColor(isBgColor: true),
|
|
child: Container(
|
|
width: 36,
|
|
height: 36,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
gradient: SweepGradient(
|
|
colors: [
|
|
Colors.red,
|
|
Colors.yellow,
|
|
Colors.green,
|
|
Colors.cyan,
|
|
Colors.blue,
|
|
Colors.purple,
|
|
Colors.red,
|
|
],
|
|
),
|
|
),
|
|
child: const Icon(
|
|
Icons.colorize,
|
|
size: 18,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 20),
|
|
// Text Color Section
|
|
Text(
|
|
context.lang.labelTextColor,
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Wrap(
|
|
alignment: WrapAlignment.center,
|
|
spacing: 10,
|
|
runSpacing: 10,
|
|
children: [
|
|
...defaultTextColors.map((colorValue) {
|
|
final selected = _selectedTextColor == colorValue;
|
|
return GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_selectedTextColor = colorValue;
|
|
});
|
|
},
|
|
child: Container(
|
|
width: 36,
|
|
height: 36,
|
|
decoration: BoxDecoration(
|
|
color: Color(colorValue),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: selected
|
|
? Icon(
|
|
Icons.check,
|
|
size: 18,
|
|
color:
|
|
Color(colorValue).computeLuminance() > 0.5
|
|
? Colors.black
|
|
: Colors.white,
|
|
)
|
|
: null,
|
|
),
|
|
);
|
|
}),
|
|
// Custom Color Picker Button for Text
|
|
GestureDetector(
|
|
onTap: () => _pickCustomColor(isBgColor: false),
|
|
child: Container(
|
|
width: 36,
|
|
height: 36,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
gradient: SweepGradient(
|
|
colors: [
|
|
Colors.red,
|
|
Colors.yellow,
|
|
Colors.green,
|
|
Colors.cyan,
|
|
Colors.blue,
|
|
Colors.purple,
|
|
Colors.red,
|
|
],
|
|
),
|
|
),
|
|
child: const Icon(
|
|
Icons.colorize,
|
|
size: 18,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 24),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: MyButton(
|
|
variant: MyButtonVariant.text,
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
child: Text(context.lang.cancel),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: MyButton(
|
|
variant: MyButtonVariant.primaryMiddle,
|
|
onPressed: () {
|
|
final name = _nameController.text.trim();
|
|
if (name.isNotEmpty) {
|
|
Navigator.of(context).pop({
|
|
'name': name,
|
|
'backgroundColor': _selectedBgColor,
|
|
'textColor': _selectedTextColor,
|
|
});
|
|
}
|
|
},
|
|
child: Text(context.lang.ok),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|