diff --git a/lib/pages/map_survey/presentations/controllers/map_survey_controller.dart b/lib/pages/map_survey/presentations/controllers/map_survey_controller.dart index e6e0a06..f1d1be8 100644 --- a/lib/pages/map_survey/presentations/controllers/map_survey_controller.dart +++ b/lib/pages/map_survey/presentations/controllers/map_survey_controller.dart @@ -51,6 +51,7 @@ import 'package:terepi_seged/widgets/map/all_layer_overlay.dart'; import 'package:terepi_seged/widgets/map/imported_layer_overlay.dart'; import 'package:terepi_seged/widgets/map/team_member_widget.dart'; import 'package:terepi_seged/widgets/map_edit_tools/color_row.dart'; +import 'package:terepi_seged/widgets/map_edit_tools/color_row_extended.dart'; import 'package:terepi_seged/widgets/map_edit_tools/map_feature_save_sheet.dart'; import 'package:terepi_seged/widgets/map_edit_tools/note_item_list_sheet.dart'; import 'package:terepi_seged/widgets/shared_map_widgets.dart'; @@ -1814,7 +1815,8 @@ class MapSurveyController extends GetxController implements StyleEditable { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - ColorRow(ctrl: this, circleSize: 34), + // ColorRow(ctrl: this, circleSize: 34), + ColorRowExtended(ctrl: this, circleSize: 34), SizedBox(height: 8), TextField( controller: labelCtrl, diff --git a/lib/widgets/map_edit_tools/color_row_extended.dart b/lib/widgets/map_edit_tools/color_row_extended.dart new file mode 100644 index 0000000..d922a4c --- /dev/null +++ b/lib/widgets/map_edit_tools/color_row_extended.dart @@ -0,0 +1,191 @@ +// Bővített színválasztó — terepi használatra optimalizálva +// Drop-in csere a ColorRow helyett — azonos konstruktor szignatúra +// +// Váltás a kódban (color_row.dart-ban): +// ColorRow(ctrl: ctrl) ← jelenlegi +// ExtendedColorRow(ctrl: ctrl) ← bővített +// +// Jellemzők: +// - 24 szín rácsban (6×4) — nagy érintési felület, kesztyűvel is kezelhető +// - Utolsó 5 használt szín külön sorban (app session alatt) +// - Animált kijelölés + +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:terepi_seged/core/style_editable.dart'; + +import 'style_editable.dart'; + +// ─── Legutóbbi színek — session szintű állapot ─────────────────────────────── + +class _RecentColors { + static final _list = [].obs; + static const _max = 5; + + static RxList get rx => _list; + + static void add(Color color) { + _list.remove(color); // duplikátum kiszűrése + _list.insert(0, color); + if (_list.length > _max) _list.removeLast(); + } +} + +// ─── Paletta ───────────────────────────────────────────────────────────────── + +class ColorRowExtended extends StatelessWidget { + final StyleEditable ctrl; + final double circleSize; + + // 24 szín — 6×4 rács + // Terepi alkalmazásra: jól elkülönülő, élénk, vakításra sem érzékeny + static const _palette = [ + // Piros / narancs árnyalatok + Color(0xFFE53935), Color(0xFFFF5722), + Color(0xFFE91E8C), Color(0xFFAD1457), + // Sárga / barna + Color(0xFFFFB300), Color(0xFFF57F17), + Color(0xFF8D6E63), Color(0xFF4E342E), + // Zöld + Color(0xFF43A047), Color(0xFF1B5E20), + Color(0xFF8BC34A), Color(0xFF33691E), + // Kék / türkiz + Color(0xFF1E88E5), Color(0xFF1565C0), + Color(0xFF00897B), Color(0xFF004D40), + // Lila / indigó + Color(0xFF6C63FF), Color(0xFF4527A0), + Color(0xFF8E24AA), Color(0xFF4A148C), + // Semleges + Color(0xFF546E7A), Color(0xFF37474F), + Color(0xFFBDBDBD), Color(0xFF212121), + ]; + + const ColorRowExtended({ + required this.ctrl, + this.circleSize = 40, + }); + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('Kitöltési szín', + style: TextStyle(fontSize: 13, color: Colors.grey.shade600)), + + // ── Legutóbbi színek ─────────────────────────────────────── + Obx(() { + final recent = _RecentColors.rx; + if (recent.isEmpty) return const SizedBox(height: 10); + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox(height: 10), + Text('Legutóbbi', + style: TextStyle(fontSize: 11, color: Colors.grey.shade500)), + const SizedBox(height: 6), + Obx(() => GridView.count( + crossAxisCount: 6, + crossAxisSpacing: 8, + mainAxisSpacing: 8, + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + children: recent + .map((color) => _ColorDot( + color: color, + size: circleSize, + selected: ctrl.activeEditColor.value == color, + onTap: () => _select(color), + )) + .toList(), + )), + const SizedBox(height: 10), + Text('Paletta', + style: TextStyle(fontSize: 11, color: Colors.grey.shade500)), + ], + ); + }), + + const SizedBox(height: 6), + + // ── Teljes paletta ───────────────────────────────────────── + Obx(() => GridView.count( + crossAxisCount: 6, + crossAxisSpacing: 8, + mainAxisSpacing: 8, + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + children: _palette + .map((color) => _ColorDot( + color: color, + size: circleSize, + selected: ctrl.activeEditColor.value == color, + onTap: () => _select(color), + )) + .toList(), + )), + ], + ); + } + + void _select(Color color) { + ctrl.activeEditColor.value = color; + _RecentColors.add(color); + } +} + +// ─── Egy szín kör ──────────────────────────────────────────────────────────── + +class _ColorDot extends StatelessWidget { + final Color color; + final double size; + final bool selected; + final VoidCallback onTap; + + const _ColorDot({ + required this.color, + required this.size, + required this.selected, + required this.onTap, + }); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: AnimatedContainer( + duration: const Duration(milliseconds: 150), + width: size, + height: size, + decoration: BoxDecoration( + color: color, + shape: BoxShape.circle, + border: Border.all( + color: selected + ? Theme.of(context).colorScheme.onSurface + : Colors.transparent, + width: 3, + ), + boxShadow: selected + ? [ + BoxShadow( + color: color.withOpacity(0.5), + blurRadius: 8, + spreadRadius: 2, + ) + ] + : null, + ), + child: selected + ? Icon(Icons.check, size: size * 0.45, color: _contrastColor(color)) + : null, + ), + ); + } + + /// Fehér vagy fekete pipa a szín kontrasztja alapján + Color _contrastColor(Color bg) { + final luminance = bg.computeLuminance(); + return luminance > 0.4 ? Colors.black : Colors.white; + } +} diff --git a/lib/widgets/map_edit_tools/map_feature_save_sheet.dart b/lib/widgets/map_edit_tools/map_feature_save_sheet.dart index 1c7dd5f..bf48fd8 100644 --- a/lib/widgets/map_edit_tools/map_feature_save_sheet.dart +++ b/lib/widgets/map_edit_tools/map_feature_save_sheet.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:terepi_seged/enums/map_edit_tool.dart'; import 'package:terepi_seged/pages/map_survey/presentations/controllers/map_survey_controller.dart'; +import 'package:terepi_seged/widgets/map_edit_tools/color_row_extended.dart'; import 'package:terepi_seged/widgets/map_edit_tools/note_audio_widget.dart'; import 'package:terepi_seged/widgets/map_edit_tools/note_photo_gallery.dart'; @@ -55,7 +56,8 @@ class MapFeatureSaveSheet extends StatelessWidget { fontSize: 18, fontWeight: FontWeight.w600), ), const SizedBox(height: 16), - ColorRow(ctrl: ctrl), + // ColorRow(ctrl: ctrl), + ColorRowExtended(ctrl: ctrl), const SizedBox(height: 18), OpacitySlider(ctrl: ctrl), const SizedBox(height: 10),