text and popup (apache#25116)

akvelon · Feb 6, 2023 · f9f8c3a · f9f8c3a
1 parent 428ec97
commit f9f8c3a
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/learning/tour-of-beam/frontend/assets/translations/en.yaml b/learning/tour-of-beam/frontend/assets/translations/en.yaml
@@ -18,6 +18,7 @@
 ui:
   about: About Tour of Beam
   builtWith: Built with Apache Beam
+  cancel: Cancel
   continueGitHub: Continue with GitHub
   continueGoogle: Continue with Google
   copyright: © The Apache Software Foundation
@@ -27,7 +28,6 @@ ui:
   reportIssue: Report Issue in GitHub
   signIn: Sign in
   signOut: Sign out
-  solution: Solution
   toWebsite: To Apache Beam website
 
 pages:
@@ -38,7 +38,11 @@ pages:
     startTour: Start your tour
     title: Welcome to the Tour of Beam!
   tour:
+    assignment: Assignment
     completeUnit: Complete Unit
+    showSolution: Show
+    solution: Solution
+    solveYourself: Before revealing the solution, try solving the challenge on your own. Remember, the more you practice, the better you will become. Give it a shot and see how far you can get.
     summaryTitle: Table of Contents
 
 dialogs:

diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/solution_button.dart b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/solution_button.dart
@@ -19,8 +19,10 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:playground_components/playground_components.dart';
 
 import '../../../assets/assets.gen.dart';
+import '../../../constants/sizes.dart';
 import '../state.dart';
 
 class SolutionButton extends StatelessWidget {
@@ -42,9 +44,69 @@ class SolutionButton extends StatelessWidget {
                 : null,
           ),
         ),
-        onPressed: tourNotifier.toggleShowingSolution,
+        onPressed: () {
+          showDialog(
+            context: context,
+            builder: (context) => Dialog(
+              backgroundColor: Colors.transparent,
+              child: _Popup(tourNotifier: tourNotifier),
+            ),
+          );
+        },
         icon: SvgPicture.asset(Assets.svg.solution),
-        label: const Text('ui.solution').tr(),
+        label: Text(
+          tourNotifier.isShowingSolution
+              ? 'pages.tour.assignment'
+              : 'pages.tour.solution',
+        ).tr(),
+      ),
+    );
+  }
+}
+
+class _Popup extends StatelessWidget {
+  final TourNotifier tourNotifier;
+
+  const _Popup({
+    required this.tourNotifier,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return OverlayBody(
+      child: Container(
+        width: TobSizes.hintPopupWidth,
+        padding: const EdgeInsets.all(BeamSizes.size16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              'pages.tour.solveYourself',
+              style: Theme.of(context).textTheme.headlineMedium,
+            ).tr(),
+            const SizedBox(height: BeamSizes.size8),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                TextButton(
+                  onPressed: () {
+                    Navigator.pop(context);
+                  },
+                  child: const Text('ui.cancel').tr(),
+                ),
+                const SizedBox(width: BeamSizes.size8),
+                TextButton(
+                  onPressed: () {
+                    tourNotifier.toggleShowingSolution();
+                    Navigator.pop(context);
+                  },
+                  child: const Text('pages.tour.showSolution').tr(),
+                ),
+              ],
+            ),
+          ],
+        ),
       ),
     );
   }