You are viewing a plain text version of this content. The canonical link for it is here.
Posted to github@beam.apache.org by GitBox <gi...@apache.org> on 2022/08/19 13:47:49 UTC

[GitHub] [beam] nausharipov opened a new pull request, #22794: [Tour of Beam]: Welcome Screen frontend layout

nausharipov opened a new pull request, #22794:
URL: https://github.com/apache/beam/pull/22794

   Resolves #22583 
   
   ------------------------
   
   Thank you for your contribution! Follow this checklist to help us incorporate your contribution quickly and easily:
   
    - [ ] [**Choose reviewer(s)**](https://beam.apache.org/contribute/#make-your-change) and mention them in a comment (`R: @username`).
    - [ ] Mention the appropriate issue in your description (for example: `addresses #123`), if applicable. This will automatically add a link to the pull request in the issue. If you would like the issue to automatically close on merging the pull request, comment `fixes #<ISSUE NUMBER>` instead.
    - [ ] Update `CHANGES.md` with noteworthy changes.
    - [ ] If this contribution is large, please file an Apache [Individual Contributor License Agreement](https://www.apache.org/licenses/icla.pdf).
   
   See the [Contributor Guide](https://beam.apache.org/contribute) for more tips on [how to make review process smoother](https://beam.apache.org/contribute/get-started-contributing/#make-the-reviewers-job-easier).
   
   To check the build health, please visit [https://github.com/apache/beam/blob/master/.test-infra/BUILD_STATUS.md](https://github.com/apache/beam/blob/master/.test-infra/BUILD_STATUS.md)
   
   GitHub Actions Tests Status (on master branch)
   ------------------------------------------------------------------------------------------------
   [![Build python source distribution and wheels](https://github.com/apache/beam/workflows/Build%20python%20source%20distribution%20and%20wheels/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Build+python+source+distribution+and+wheels%22+branch%3Amaster+event%3Aschedule)
   [![Python tests](https://github.com/apache/beam/workflows/Python%20tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Python+Tests%22+branch%3Amaster+event%3Aschedule)
   [![Java tests](https://github.com/apache/beam/workflows/Java%20Tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Java+Tests%22+branch%3Amaster+event%3Aschedule)
   [![Go tests](https://github.com/apache/beam/workflows/Go%20tests/badge.svg?branch=master&event=schedule)](https://github.com/apache/beam/actions?query=workflow%3A%22Go+tests%22+branch%3Amaster+event%3Aschedule)
   
   See [CI.md](https://github.com/apache/beam/blob/master/CI.md) for more information about GitHub Actions CI.
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960501413


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -0,0 +1,348 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../components/complexity.dart';
+import '../../components/page_container.dart';
+import '../../config/theme/colors_provider.dart';
+import '../../constants/assets.dart';
+import '../../constants/colors.dart';
+import '../../constants/sizes.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageContainer(
+      child: SingleChildScrollView(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: const [
+            Expanded(child: _SdkSelection()),
+            Expanded(child: _TourSummary()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SdkSelection extends StatelessWidget {
+  const _SdkSelection();
+
+  @override
+  Widget build(BuildContext context) {
+    return _SdkSelectionBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(50, 60, 50, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                _IntroText(),
+                SizedBox(height: TobSizes.size32),
+                _Buttons(),
+              ],
+            ),
+          ),
+          Image.asset(TobAssets.welcomeLaptop),

Review Comment:
   Fixed the layout, keeping the cropped laptop.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960502115


##########
learning/tour-of-beam/frontend/lib/components/complexity.dart:
##########
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+
+import '../constants/colors.dart';
+import '../constants/sizes.dart';
+
+enum Complexity { basic, medium, advanced }
+
+class ComplexityWidget extends StatelessWidget {
+  final Complexity complexity;
+
+  const ComplexityWidget({required this.complexity});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: _dots[complexity]!);
+  }
+
+  static const Map<Complexity, List<Widget>> _dots = {
+    Complexity.basic: [_Dot.green, _Dot.grey, _Dot.grey],
+    Complexity.medium: [_Dot.orange, _Dot.orange, _Dot.grey],

Review Comment:
   Implemented the above.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960393854


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   <img width="592" alt="Screen Shot 2022-09-01 at 14 53 48" src="https://user-images.githubusercontent.com/31556582/187874174-5d06b4e7-21d6-4318-9b56-c53eb7ed4f45.png">
   <img width="1428" alt="Screen Shot 2022-09-01 at 14 54 11" src="https://user-images.githubusercontent.com/31556582/187874236-598644bf-4816-4e51-ac74-7947399a7dbf.png">
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on PR #22794:
URL: https://github.com/apache/beam/pull/22794#issuecomment-1234109920

   @damondouglas If any minor issues still stand, we still prefer this merged now work on them in the next PR. This is because I will next be extracting a lot of Playground internals into a package to be reused in both Playground and ToB apps. This extensive refactoring requires that there are no pending merges in the two frontentds.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960500803


##########
learning/tour-of-beam/frontend/README.md:
##########
@@ -0,0 +1,25 @@
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+# Tour of Beam
+

Review Comment:
   Done.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] damccorm merged pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
damccorm merged PR #22794:
URL: https://github.com/apache/beam/pull/22794


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on PR #22794:
URL: https://github.com/apache/beam/pull/22794#issuecomment-1234054076

   @damondouglas we've fixed the layout.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960501760


##########
learning/tour-of-beam/frontend/assets/translations/en.yaml:
##########
@@ -0,0 +1,39 @@
+#  Licensed to the Apache Software Foundation (ASF) under one
+#  or more contributor license agreements.  See the NOTICE file
+#  distributed with this work for additional information
+#  regarding copyright ownership.  The ASF licenses this file
+#  to you under the Apache License, Version 2.0 (the
+#  "License"); you may not use this file except in compliance
+#  with the License.  You may obtain a copy of the License at
+#
+#  http://www.apache.org/licenses/LICENSE-2.0
+#
+#  Unless required by applicable law or agreed to in writing,
+#  software distributed under the License is distributed on an
+#  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+#  KIND, either express or implied.  See the License for the
+#  specific language governing permissions and limitations
+#  under the License.
+
+ui:
+  copyright: '© The Apache Software Foundation'
+  darkMode: 'Dark Mode'
+  lightMode: 'Light Mode'
+  privacyPolicy: 'Privacy Policy'
+  reportIssue: 'Report issue in Jira'

Review Comment:
   Fixed.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960502458


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -31,45 +31,30 @@ import '../../constants/sizes.dart';
 class WelcomeScreen extends StatelessWidget {
   const WelcomeScreen();
 
-  static const horizontalHalves = [
-    TableRow(
-      children: [
-        TableCell(
-          verticalAlignment: TableCellVerticalAlignment.fill,
-          child: _SdkSelection(),
-        ),
-        _TourSummary(),
-      ],
-    ),
-  ];
-
-  static const verticalHalves = [
-    TableRow(
-      children: [
-        TableCell(
-          child: _SdkSelection(),
-        ),
-      ],
-    ),
-    TableRow(
-      children: [
-        _TourSummary(),
-      ],
-    ),
-  ];
-
   @override
   Widget build(BuildContext context) {
     return PageContainer(
       child: SingleChildScrollView(
-        child: Table(
-          border: TableBorder.symmetric(
-            inside: BorderSide(color: ThemeColors.of(context).divider),
-          ),
-          children: MediaQuery.of(context).size.width > ScreenSizes.medium
-              ? horizontalHalves
-              : verticalHalves,
-        ),
+        child: MediaQuery.of(context).size.width > ScreenSizes.medium

Review Comment:
   Done with the above naming.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on PR #22794:
URL: https://github.com/apache/beam/pull/22794#issuecomment-1220777273

   R: @damondouglas 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960382003


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   
   https://user-images.githubusercontent.com/31556582/187871423-d79c544d-e0a3-43a4-9bbd-0d5f8d20ca8b.mov
   
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960396958


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   OK, let's go with `MediaQuery` solution for now.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r957173924


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -0,0 +1,348 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../components/complexity.dart';
+import '../../components/page_container.dart';
+import '../../config/theme/colors_provider.dart';
+import '../../constants/assets.dart';
+import '../../constants/colors.dart';
+import '../../constants/sizes.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageContainer(
+      child: SingleChildScrollView(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: const [
+            Expanded(child: _SdkSelection()),
+            Expanded(child: _TourSummary()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SdkSelection extends StatelessWidget {
+  const _SdkSelection();
+
+  @override
+  Widget build(BuildContext context) {
+    return _SdkSelectionBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(50, 60, 50, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                _IntroText(),
+                SizedBox(height: TobSizes.size32),
+                _Buttons(),
+              ],
+            ),
+          ),
+          Image.asset(TobAssets.welcomeLaptop),

Review Comment:
   The image is displayed properly if the html renderer is selected. I'll update README.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960395276


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   the height of the laptop is completely dependent on the height of the sized box inside of the left column.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] github-actions[bot] commented on pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on PR #22794:
URL: https://github.com/apache/beam/pull/22794#issuecomment-1220778302

   Stopping reviewer notifications for this pull request: review requested by someone other than the bot, ceding control


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r954739337


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -0,0 +1,348 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../components/complexity.dart';
+import '../../components/page_container.dart';
+import '../../config/theme/colors_provider.dart';
+import '../../constants/assets.dart';
+import '../../constants/colors.dart';
+import '../../constants/sizes.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageContainer(
+      child: SingleChildScrollView(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: const [
+            Expanded(child: _SdkSelection()),
+            Expanded(child: _TourSummary()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SdkSelection extends StatelessWidget {
+  const _SdkSelection();
+
+  @override
+  Widget build(BuildContext context) {
+    return _SdkSelectionBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(50, 60, 50, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                _IntroText(),
+                SizedBox(height: TobSizes.size32),
+                _Buttons(),
+              ],
+            ),
+          ),
+          Image.asset(TobAssets.welcomeLaptop),
+        ],
+      ),
+    );
+  }
+}
+
+class _TourSummary extends StatelessWidget {
+  const _TourSummary();
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        vertical: TobSizes.size20,
+        horizontal: 27,
+      ),
+      child: Column(
+        children: _modules
+            .map(
+              (module) => _Module(
+                title: module,
+                isLast: module == _modules.last,
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+
+  static const List<String> _modules = [
+    'Core Transforms',
+    'Common Transforms',
+    'IO',
+    'Windowing',
+    'Triggers',
+  ];
+}
+
+class _SdkSelectionBody extends StatelessWidget {
+  final Widget child;
+  const _SdkSelectionBody({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: ThemeColors.of(context).background,
+        border: Border(
+          right: BorderSide(
+            color: ThemeColors.of(context).divider,
+          ),
+        ),
+      ),
+      child: child,
+    );
+  }
+}
+
+class _IntroText extends StatelessWidget {
+  const _IntroText();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'pages.home.title',
+          style: Theme.of(context).textTheme.displayMedium,
+        ).tr(),
+        Container(
+          margin: const EdgeInsets.symmetric(vertical: 32),
+          height: 2,
+          color: TobColors.grey2,
+          constraints: const BoxConstraints(maxWidth: 150),
+        ),
+        RichText(
+          text: TextSpan(
+            style: Theme.of(context).textTheme.bodyLarge,
+            children: [
+              TextSpan(
+                text: 'pages.home.ifSaveProgress'.tr(),
+              ),
+              TextSpan(
+                text: 'pages.home.signIn'.tr(),
+                style: Theme.of(context)
+                    .textTheme
+                    .bodyLarge!
+                    .copyWith(color: ThemeColors.of(context).primary),
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () {
+                    // TODO(nausharipov): sign in
+                  },
+              ),
+              TextSpan(text: '\n\n${'pages.home.selectLanguage'.tr()}'),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _Buttons extends StatelessWidget {
+  const _Buttons();
+
+  void _onSdkChanged(String value) {
+    // TODO(nausharipov): select the language
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      children: [
+        Wrap(
+          children: ['Java', 'Python', 'Go']
+              .map(
+                (e) => _SdkButton(
+                  value: e,
+                  groupValue: _sdk,
+                  onChanged: _onSdkChanged,
+                ),
+              )
+              .toList(),
+        ),
+        ElevatedButton(

Review Comment:
   When "Start leaning" is below, it is off a module grid and is not aligned to anything, i.e. it is wider than Java and narrower than Java + Python. It is not that much of a problem, but one line looks better. So I prefer to break only when we have to.
   
   Compare:
   
   ![image](https://user-images.githubusercontent.com/44893228/186629445-fa8fffae-4ecc-4805-8a0b-ad4cebadec51.png)
   
   ![image](https://user-images.githubusercontent.com/44893228/186628405-fc73de04-bdb0-48bf-8463-e3cf8b17af4b.png)
   
   Also I don't think many people notice the switch as they do not normally resize splash screens like this.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r954781891


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -0,0 +1,348 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../components/complexity.dart';
+import '../../components/page_container.dart';
+import '../../config/theme/colors_provider.dart';
+import '../../constants/assets.dart';
+import '../../constants/colors.dart';
+import '../../constants/sizes.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageContainer(
+      child: SingleChildScrollView(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: const [
+            Expanded(child: _SdkSelection()),
+            Expanded(child: _TourSummary()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SdkSelection extends StatelessWidget {
+  const _SdkSelection();
+
+  @override
+  Widget build(BuildContext context) {
+    return _SdkSelectionBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(50, 60, 50, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                _IntroText(),
+                SizedBox(height: TobSizes.size32),
+                _Buttons(),
+              ],
+            ),
+          ),
+          Image.asset(TobAssets.welcomeLaptop),

Review Comment:
   Why do you want it removed? This image is in the approved layout:
   https://www.figma.com/file/gzeYx965q4DwV6ugDzp0iG/Apache-Beam-Playground?node-id=1475%3A5359
   
   There is a problem with it however. It is cropped nicely on the mock, but looks awkward when scrolled down:
   
   ![image](https://user-images.githubusercontent.com/44893228/186637874-edbb51d7-3896-4e38-aa97-804f1d28bfc3.png)
   
   I suggest we keep it but stick to the bottom at the crop ratio from the mock so the user cannot scroll below this:
   
   ![image](https://user-images.githubusercontent.com/44893228/186638431-2d7b26f9-e26e-4837-ade3-0b225888ea0f.png)
   
   Also for some reason the border shows hard pixels, we should see how to get them smooth if we keep the image.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] damondouglas commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
damondouglas commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r953153188


##########
learning/tour-of-beam/frontend/README.md:
##########
@@ -0,0 +1,25 @@
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+# Tour of Beam
+

Review Comment:
   May we add a README at: learning/tour-of-beam/README.md that explains the purpose of Tour of Beam to someone who has never heard of it?
   
   Then, assuming that this learning/tour-of-beam/README.md exists, may we add:
   
   ```markdown
   # Overview
   
   This folder holds code that supports the user interface for [Tour of Beam](../).
   
   # Requirements
   
   To develop, build and test code in this folder requires the following:
   
   - https://flutter.dev/
   
   ```



##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -0,0 +1,348 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../components/complexity.dart';
+import '../../components/page_container.dart';
+import '../../config/theme/colors_provider.dart';
+import '../../constants/assets.dart';
+import '../../constants/colors.dart';
+import '../../constants/sizes.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageContainer(
+      child: SingleChildScrollView(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: const [
+            Expanded(child: _SdkSelection()),
+            Expanded(child: _TourSummary()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SdkSelection extends StatelessWidget {
+  const _SdkSelection();
+
+  @override
+  Widget build(BuildContext context) {
+    return _SdkSelectionBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(50, 60, 50, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                _IntroText(),
+                SizedBox(height: TobSizes.size32),
+                _Buttons(),
+              ],
+            ),
+          ),
+          Image.asset(TobAssets.welcomeLaptop),
+        ],
+      ),
+    );
+  }
+}
+
+class _TourSummary extends StatelessWidget {
+  const _TourSummary();
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        vertical: TobSizes.size20,
+        horizontal: 27,
+      ),
+      child: Column(
+        children: _modules
+            .map(
+              (module) => _Module(
+                title: module,
+                isLast: module == _modules.last,
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+
+  static const List<String> _modules = [
+    'Core Transforms',
+    'Common Transforms',
+    'IO',
+    'Windowing',
+    'Triggers',
+  ];
+}
+
+class _SdkSelectionBody extends StatelessWidget {
+  final Widget child;
+  const _SdkSelectionBody({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: ThemeColors.of(context).background,
+        border: Border(
+          right: BorderSide(
+            color: ThemeColors.of(context).divider,
+          ),
+        ),
+      ),
+      child: child,
+    );
+  }
+}
+
+class _IntroText extends StatelessWidget {
+  const _IntroText();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'pages.home.title',
+          style: Theme.of(context).textTheme.displayMedium,
+        ).tr(),
+        Container(
+          margin: const EdgeInsets.symmetric(vertical: 32),
+          height: 2,
+          color: TobColors.grey2,
+          constraints: const BoxConstraints(maxWidth: 150),
+        ),
+        RichText(
+          text: TextSpan(
+            style: Theme.of(context).textTheme.bodyLarge,
+            children: [
+              TextSpan(
+                text: 'pages.home.ifSaveProgress'.tr(),
+              ),
+              TextSpan(
+                text: 'pages.home.signIn'.tr(),
+                style: Theme.of(context)
+                    .textTheme
+                    .bodyLarge!
+                    .copyWith(color: ThemeColors.of(context).primary),
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () {
+                    // TODO(nausharipov): sign in
+                  },
+              ),
+              TextSpan(text: '\n\n${'pages.home.selectLanguage'.tr()}'),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _Buttons extends StatelessWidget {
+  const _Buttons();
+
+  void _onSdkChanged(String value) {
+    // TODO(nausharipov): select the language
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      children: [
+        Wrap(
+          children: ['Java', 'Python', 'Go']
+              .map(
+                (e) => _SdkButton(
+                  value: e,
+                  groupValue: _sdk,
+                  onChanged: _onSdkChanged,
+                ),
+              )
+              .toList(),
+        ),
+        ElevatedButton(

Review Comment:
   On a wide screen, for me the "Start learning" button appeared on the right side of the "Java", "Python", and "Go" buttons.  Yet, when I made the width more narrow, the "Start learning" button positioned below.
   
   May we persist the "Start learning" below the language selection buttons?



##########
learning/tour-of-beam/frontend/assets/translations/en.yaml:
##########
@@ -0,0 +1,39 @@
+#  Licensed to the Apache Software Foundation (ASF) under one
+#  or more contributor license agreements.  See the NOTICE file
+#  distributed with this work for additional information
+#  regarding copyright ownership.  The ASF licenses this file
+#  to you under the Apache License, Version 2.0 (the
+#  "License"); you may not use this file except in compliance
+#  with the License.  You may obtain a copy of the License at
+#
+#  http://www.apache.org/licenses/LICENSE-2.0
+#
+#  Unless required by applicable law or agreed to in writing,
+#  software distributed under the License is distributed on an
+#  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+#  KIND, either express or implied.  See the License for the
+#  specific language governing permissions and limitations
+#  under the License.
+
+ui:
+  copyright: '© The Apache Software Foundation'
+  darkMode: 'Dark Mode'
+  lightMode: 'Light Mode'
+  privacyPolicy: 'Privacy Policy'
+  reportIssue: 'Report issue in Jira'

Review Comment:
   I think the Beam project uses GitHub issues now instead of Jira.



##########
learning/tour-of-beam/frontend/lib/components/complexity.dart:
##########
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+
+import '../constants/colors.dart';
+import '../constants/sizes.dart';
+
+enum Complexity { basic, medium, advanced }
+
+class ComplexityWidget extends StatelessWidget {
+  final Complexity complexity;
+
+  const ComplexityWidget({required this.complexity});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: _dots[complexity]!);
+  }
+
+  static const Map<Complexity, List<Widget>> _dots = {
+    Complexity.basic: [_Dot.green, _Dot.grey, _Dot.grey],
+    Complexity.medium: [_Dot.orange, _Dot.orange, _Dot.grey],

Review Comment:
   Unless I was in dark mode, the two orange dots were not distinguishable from the grey.



##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -0,0 +1,348 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../components/complexity.dart';
+import '../../components/page_container.dart';
+import '../../config/theme/colors_provider.dart';
+import '../../constants/assets.dart';
+import '../../constants/colors.dart';
+import '../../constants/sizes.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageContainer(
+      child: SingleChildScrollView(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: const [
+            Expanded(child: _SdkSelection()),
+            Expanded(child: _TourSummary()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SdkSelection extends StatelessWidget {
+  const _SdkSelection();
+
+  @override
+  Widget build(BuildContext context) {
+    return _SdkSelectionBody(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(50, 60, 50, 20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                _IntroText(),
+                SizedBox(height: TobSizes.size32),
+                _Buttons(),
+              ],
+            ),
+          ),
+          Image.asset(TobAssets.welcomeLaptop),

Review Comment:
   May we consider removing this image?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r957088713


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -31,45 +31,30 @@ import '../../constants/sizes.dart';
 class WelcomeScreen extends StatelessWidget {
   const WelcomeScreen();
 
-  static const horizontalHalves = [
-    TableRow(
-      children: [
-        TableCell(
-          verticalAlignment: TableCellVerticalAlignment.fill,
-          child: _SdkSelection(),
-        ),
-        _TourSummary(),
-      ],
-    ),
-  ];
-
-  static const verticalHalves = [
-    TableRow(
-      children: [
-        TableCell(
-          child: _SdkSelection(),
-        ),
-      ],
-    ),
-    TableRow(
-      children: [
-        _TourSummary(),
-      ],
-    ),
-  ];
-
   @override
   Widget build(BuildContext context) {
     return PageContainer(
       child: SingleChildScrollView(
-        child: Table(
-          border: TableBorder.symmetric(
-            inside: BorderSide(color: ThemeColors.of(context).divider),
-          ),
-          children: MediaQuery.of(context).size.width > ScreenSizes.medium
-              ? horizontalHalves
-              : verticalHalves,
-        ),
+        child: MediaQuery.of(context).size.width > ScreenSizes.medium

Review Comment:
   This should be a separate constant so that we do not guess which of `ScreenSizes` breaks the halves. Something like this:
   
   ```dart
   class ScreenBreakpoints {
     static const twoColumns = ScreenSizes.medium;
   }
   ```
   
   But this is not final. I am struggling to come up with the name that will indicate that two columns are *at or wider* screen, and this is not clear yet. The same problem is also with `ScreenSizes.medium`.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960388124


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   Can the `Positioned` contain something like this?
   
   ```dart
   Row(
     children: [
       Expanded(/* laptop */),
       Expanded(/* empty SizedBox */),
     ],
   ),
   ```
   
   The two `Expanded`s will split the full width in half. And the laptop will occupy the full width of its half.
   If it works, we may need to put this under the content so that the right half does not make the content unclickable.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960371056


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   Explicit sizes should be the last resort. Can this be done with this?
   
   For two columns:
   ```
   WelcomeScreen
   +- PageContainer
      +- SingleChildScrollView
         +- Stack
            +- Row
               +- Left column without laptop but with blank container with the height of the laptop
               +- Right column
            +- Laptop sticked to the bottom
   ```
   
   For one column:
   ```
   WelcomeScreen
   +- PageContainer
      +- SingleChildScrollView
         +- Column
            +- Left column without laptop but with blank container
            +- Laptop
            +- Right column
   ```
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] nausharipov commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
nausharipov commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r960383016


##########
learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart:
##########
@@ -65,15 +65,23 @@ class _SdkSelection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
+    return Container(
+      constraints: BoxConstraints(
+        minHeight: MediaQuery.of(context).size.height -

Review Comment:
   in that case, the laptop is independent of the left column's size. 



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [beam] alexeyinkin commented on a diff in pull request #22794: [Tour of Beam]: Welcome Screen frontend layout

Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #22794:
URL: https://github.com/apache/beam/pull/22794#discussion_r954731859


##########
learning/tour-of-beam/frontend/lib/components/complexity.dart:
##########
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+
+import '../constants/colors.dart';
+import '../constants/sizes.dart';
+
+enum Complexity { basic, medium, advanced }
+
+class ComplexityWidget extends StatelessWidget {
+  final Complexity complexity;
+
+  const ComplexityWidget({required this.complexity});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: _dots[complexity]!);
+  }
+
+  static const Map<Complexity, List<Widget>> _dots = {
+    Complexity.basic: [_Dot.green, _Dot.grey, _Dot.grey],
+    Complexity.medium: [_Dot.orange, _Dot.orange, _Dot.grey],

Review Comment:
   Let's do `0x30808080` that fits both light and dark?
   
   ![image](https://user-images.githubusercontent.com/44893228/186627977-54cc652c-66f8-42e1-ad40-d458596fa128.png)
   ![image](https://user-images.githubusercontent.com/44893228/186627379-7b392f49-7c27-4f30-8f64-9caeb34fe199.png)
   ![image](https://user-images.githubusercontent.com/44893228/186627896-e681916c-175d-4631-9c9c-1d70f56a43b6.png)
   ![image](https://user-images.githubusercontent.com/44893228/186627490-628d7781-4e77-4193-9042-13ace8be8d9d.png)
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: github-unsubscribe@beam.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org