Kibővített színválasztó widget: 24 szín és az utolsó 5 kiemelve

2026-07-05 00:10:55 +02:00
parent 2cf83149f0
commit 2dc7768f5f
3 changed files with 197 additions and 2 deletions
@@ -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,
@@ -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 = <Color>[].obs;
+  static const _max = 5;
+
+  static RxList<Color> 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;
+  }
+}
@@ -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),