PAINTROID-639 Make tool options disappear when tapping the tool

Catrobat · Jan 13, 2024 · 65374f6 · 65374f6
1 parent ebf601d
commit 65374f6
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 34 deletions.
diff --git a/lib/ui/drawing_space/bottom_nav_bar.dart b/lib/ui/drawing_space/bottom_nav_bar.dart
@@ -3,35 +3,39 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:paintroid/core/app_localizations.dart';
 import 'package:paintroid/tool/tool.dart';
 import 'package:paintroid/ui/drawing_space/tools_bottom_sheet.dart';
+import 'package:paintroid/ui/drawing_space/tool_options_provider.dart';
 import 'package:paintroid/ui/shared/bottom_nav_bar_icon.dart';
 import 'package:paintroid/ui/styles.dart';
 
-class BottomNavBar extends StatelessWidget {
+class BottomNavBar extends ConsumerWidget {
   static const height = 64.0;
 
   const BottomNavBar({Key? key}) : super(key: key);
 
-  void _onNavigationItemSelected(int index, BuildContext context) {
-    if (index == 0) {
-      showModalBottomSheet(
-        context: context,
-        builder: (BuildContext context) => const SizedBox(
-          height: 270,
-          child: ToolsBottomSheet(),
-        ),
-      );
+  void _onNavigationItemSelected(int index, BuildContext context, WidgetRef ref) {
+    BottomNavBarItem item = BottomNavBarItem.values[index];
+    switch (item) {
+      case BottomNavBarItem.TOOLS:
+        showToolBottomSheet(context);
+        break;
+      case BottomNavBarItem.CURRENT_TOOL:
+        handleToolOptionsVisibility(ref);
+        break;
+      default:
+        return;
     }
   }
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+
     final localizations = AppLocalizations.of(context);
     return NavigationBarTheme(
       data: WidgetThemes.bottomNavBarThemeData,
       child: NavigationBar(
         height: height,
         onDestinationSelected: (index) =>
-            _onNavigationItemSelected(index, context),
+            _onNavigationItemSelected(index, context, ref),
         destinations: [
           NavigationDestination(
             label: localizations.tools,
@@ -70,4 +74,25 @@ class BottomNavBar extends StatelessWidget {
       ),
     );
   }
+
+  void showToolBottomSheet(BuildContext context) {
+    showModalBottomSheet(
+      context: context,
+      builder: (BuildContext context) => const SizedBox(
+        height: 270,
+        child: ToolsBottomSheet(),
+      ),
+    );
+  }
+
+  void handleToolOptionsVisibility(WidgetRef ref) {
+    ref.read(toolOptionsProvider.notifier).toggleVisibility();
+  }
 }
+
+enum BottomNavBarItem {
+  TOOLS,
+  CURRENT_TOOL,
+  COLOR,
+  LAYERS,
+}
diff --git a/...wing_space/bottom_brush_tool_options.dart → ...drawing_space/stroke_cap_tool_option.dart b/...wing_space/bottom_brush_tool_options.dart → ...drawing_space/stroke_cap_tool_option.dart
@@ -3,16 +3,16 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:paintroid/tool/src/brush_tool/brush_tool_state_provider.dart';
 import 'package:paintroid/ui/shared/custom_action_chip.dart';
 
-class BottomBrushToolOptions extends ConsumerStatefulWidget {
-  const BottomBrushToolOptions({super.key});
+class StrokeCapToolOption extends ConsumerStatefulWidget {
+  const StrokeCapToolOption({super.key});
 
   @override
-  ConsumerState<BottomBrushToolOptions> createState() =>
-      _BottomBrushToolOptionsState();
+  ConsumerState<StrokeCapToolOption> createState() =>
+      _StrokeCapToolOptionState();
 }
 
-class _BottomBrushToolOptionsState
-    extends ConsumerState<BottomBrushToolOptions> {
+class _StrokeCapToolOptionState
+    extends ConsumerState<StrokeCapToolOption> {
   Color _roundChipBackgroundColor = Colors.blue;
   Color _squareChipBackgroundColor = Colors.white;
 

diff --git a/...drawing_space/top_brush_tool_options.dart → ...awing_space/stroke_width_tool_option.dart b/...drawing_space/top_brush_tool_options.dart → ...awing_space/stroke_width_tool_option.dart
@@ -4,14 +4,14 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:paintroid/tool/src/brush_tool/brush_tool_state_provider.dart';
 import 'package:paintroid/ui/styles.dart';
 
-class TopBrushToolOptions extends ConsumerStatefulWidget {
-  const TopBrushToolOptions({super.key});
+class StrokeWidthToolOption extends ConsumerStatefulWidget {
+  const StrokeWidthToolOption({super.key});
 
   @override
-  ConsumerState<TopBrushToolOptions> createState() => _NumberTextFieldState();
+  ConsumerState<StrokeWidthToolOption> createState() => _StrokeWidthToolOptionState();
 }
 
-class _NumberTextFieldState extends ConsumerState<TopBrushToolOptions> {
+class _StrokeWidthToolOptionState extends ConsumerState<StrokeWidthToolOption> {
   late final TextEditingController _strokeWidthTextController;
 
   void _onChangedTextField(String value) {

diff --git a/lib/ui/drawing_space/tool_options.dart b/lib/ui/drawing_space/tool_options.dart
@@ -1,20 +1,59 @@
 import 'package:flutter/material.dart';
-import 'package:paintroid/ui/drawing_space/bottom_brush_tool_options.dart';
-import 'package:paintroid/ui/drawing_space/top_brush_tool_options.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:paintroid/tool/src/toolbox/toolbox_state_provider.dart';
+import 'package:paintroid/ui/drawing_space/stroke_cap_tool_option.dart';
+import 'package:paintroid/ui/drawing_space/tool_options_provider.dart';
+import 'package:paintroid/ui/drawing_space/stroke_width_tool_option.dart';
 
-class ToolOptions extends StatelessWidget {
+import 'package:paintroid/tool/src/tool_types.dart';
+
+class ToolOptions extends ConsumerWidget {
   const ToolOptions({super.key});
+  final animationDuration = const Duration(milliseconds: 300);
+  final maxOpacity = 1.0;
+  final minOpacity = 0.0;
 
   @override
-  Widget build(BuildContext context) {
-    return const Padding(
-      padding: EdgeInsets.all(8),
-      child: Column(
-        children: [
-          TopBrushToolOptions(),
-          Spacer(),
-          BottomBrushToolOptions(),
-        ],
+  Widget build(BuildContext context, WidgetRef ref) {
+    var options = getToolOptions(context, ref);
+    return  Padding(
+      padding: const EdgeInsets.all(8),
+      child: options,
+    );
+  }
+
+  Column getToolOptions(BuildContext context, WidgetRef ref) {
+    var tool = ref.watch(toolBoxStateProvider).currentTool;
+    switch (tool.type) {
+      case ToolType.BRUSH:
+      case ToolType.ERASER:
+        return defaultToolOptions(context, ref);
+      default:
+        return const Column();
+    }
+  }
+
+  Column defaultToolOptions(BuildContext context, WidgetRef ref) {
+    bool visible = ref.watch(toolOptionsProvider);
+    var opacity = visible ? maxOpacity : minOpacity;
+    var isIgnoring = !visible;
+
+    return Column(
+      children: [
+        buildToolOption(isIgnoring, opacity, const StrokeWidthToolOption()),
+        const Spacer(),
+        buildToolOption(isIgnoring, opacity, const StrokeCapToolOption()),
+      ],
+    );
+  }
+
+  Widget buildToolOption(bool isIgnoring, double opacity, Widget child) {
+    return IgnorePointer(
+      ignoring: isIgnoring,
+      child: AnimatedOpacity(
+        opacity: opacity,
+        duration: animationDuration,
+        child: child,
       ),
     );
   }

diff --git a/lib/ui/drawing_space/tool_options_provider.dart b/lib/ui/drawing_space/tool_options_provider.dart
@@ -0,0 +1,15 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'tool_options_provider.g.dart';
+
+@riverpod
+class ToolOptions extends _$ToolOptions {
+  void toggleVisibility() {
+    state = !state;
+  }
+
+  @override
+  bool build() {
+    return true;
+  }
+}