From e0afa9cbca44dcfd40e02dff5fc603f092add4c1 Mon Sep 17 00:00:00 2001 From: "darkhan.nausharipov" Date: Fri, 21 Oct 2022 17:32:30 +0600 Subject: [PATCH] Unit content navigation (#23593) Update URL on node click (#23593) Active unit color (#23593) removeListener in unit (#23593) First unit is opened on group title click (#23593) WIP by Alexey Inkin (#23593) selectedUnitColor (#23593) Unit borderRadius (#23593) RegExp todo (#23593) added referenced collection package to remove warning (#23593) small refinement (#23593) expand on group tap, padding, openNode (#23593) group expansion bug fix (#23593) --- .../assets/svg/unit-progress-selected-0.svg | 3 + .../frontend/lib/components/filler_text.dart | 29 ---------- .../frontend/lib/models/content_tree.dart | 14 ++++- .../frontend/lib/models/group.dart | 29 +++++++--- .../frontend/lib/models/module.dart | 29 ++++++---- .../frontend/lib/models/node.dart | 20 +++++-- .../frontend/lib/models/parent_node.dart | 18 ++++++ .../frontend/lib/models/unit.dart | 15 ++++- .../pages/tour/controllers/content_tree.dart | 57 +++++++++++++++++-- .../frontend/lib/pages/tour/path.dart | 9 ++- .../frontend/lib/pages/tour/state.dart | 2 + .../lib/pages/tour/widgets/group.dart | 32 +++++++++-- .../lib/pages/tour/widgets/module.dart | 2 +- .../frontend/lib/pages/tour/widgets/unit.dart | 44 ++++++++++++-- .../frontend/lib/pages/welcome/screen.dart | 3 - learning/tour-of-beam/frontend/pubspec.lock | 4 +- learning/tour-of-beam/frontend/pubspec.yaml | 1 + .../lib/src/constants/colors.dart | 42 +++++++------- .../lib/src/theme/theme.dart | 4 ++ 19 files changed, 259 insertions(+), 98 deletions(-) create mode 100644 learning/tour-of-beam/frontend/assets/svg/unit-progress-selected-0.svg delete mode 100644 learning/tour-of-beam/frontend/lib/components/filler_text.dart diff --git a/learning/tour-of-beam/frontend/assets/svg/unit-progress-selected-0.svg b/learning/tour-of-beam/frontend/assets/svg/unit-progress-selected-0.svg new file mode 100644 index 0000000000000..8ddd690681753 --- /dev/null +++ b/learning/tour-of-beam/frontend/assets/svg/unit-progress-selected-0.svg @@ -0,0 +1,3 @@ + + + diff --git a/learning/tour-of-beam/frontend/lib/components/filler_text.dart b/learning/tour-of-beam/frontend/lib/components/filler_text.dart deleted file mode 100644 index ca6099e6d9dec..0000000000000 --- a/learning/tour-of-beam/frontend/lib/components/filler_text.dart +++ /dev/null @@ -1,29 +0,0 @@ -/* - * 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'; - -class FillerText extends StatelessWidget { - final int width; - const FillerText({required this.width}); - - @override - Widget build(BuildContext context) { - return Text(''.padRight(width, 'Just a filler text. ')); - } -} diff --git a/learning/tour-of-beam/frontend/lib/models/content_tree.dart b/learning/tour-of-beam/frontend/lib/models/content_tree.dart index 4c3ba29378abc..14949cc157fa9 100644 --- a/learning/tour-of-beam/frontend/lib/models/content_tree.dart +++ b/learning/tour-of-beam/frontend/lib/models/content_tree.dart @@ -18,15 +18,25 @@ import '../repositories/models/get_content_tree_response.dart'; import 'module.dart'; +import 'node.dart'; +import 'parent_node.dart'; -class ContentTreeModel { +class ContentTreeModel extends ParentNodeModel { final String sdkId; final List modules; + @override + List get nodes => modules; + const ContentTreeModel({ required this.sdkId, required this.modules, - }); + }) : super( + id: sdkId, + parent: null, + title: '', + nodes: modules, + ); ContentTreeModel.fromResponse(GetContentTreeResponse response) : this( diff --git a/learning/tour-of-beam/frontend/lib/models/group.dart b/learning/tour-of-beam/frontend/lib/models/group.dart index 22086e6303e8e..ba1d4047a5740 100644 --- a/learning/tour-of-beam/frontend/lib/models/group.dart +++ b/learning/tour-of-beam/frontend/lib/models/group.dart @@ -23,15 +23,28 @@ import 'parent_node.dart'; class GroupModel extends ParentNodeModel { const GroupModel({ required super.id, - required super.title, required super.nodes, + required super.parent, + required super.title, }); - GroupModel.fromResponse(GroupResponseModel group) - : super( - id: group.id, - title: group.title, - nodes: - group.nodes.map(NodeModel.fromResponse).toList(growable: false), - ); + factory GroupModel.fromResponse( + GroupResponseModel groupResponse, + ParentNodeModel parent, + ) { + final group = GroupModel( + id: groupResponse.id, + nodes: [], + parent: parent, + title: groupResponse.title, + ); + + group.nodes.addAll( + groupResponse.nodes.map( + (node) => NodeModel.fromResponse(node, group), + ), + ); + + return group; + } } diff --git a/learning/tour-of-beam/frontend/lib/models/module.dart b/learning/tour-of-beam/frontend/lib/models/module.dart index 81f8c1b6d613c..eb1f7e50633c7 100644 --- a/learning/tour-of-beam/frontend/lib/models/module.dart +++ b/learning/tour-of-beam/frontend/lib/models/module.dart @@ -27,18 +27,27 @@ class ModuleModel extends ParentNodeModel { const ModuleModel({ required super.id, - required super.title, required super.nodes, + required super.parent, + required super.title, required this.complexity, }); - ModuleModel.fromResponse(ModuleResponseModel module) - : complexity = module.complexity, - super( - id: module.id, - title: module.title, - nodes: module.nodes - .map(NodeModel.fromResponse) - .toList(growable: false), - ); + factory ModuleModel.fromResponse(ModuleResponseModel moduleResponse) { + final module = ModuleModel( + complexity: moduleResponse.complexity, + nodes: [], + id: moduleResponse.id, + parent: null, + title: moduleResponse.title, + ); + + module.nodes.addAll( + moduleResponse.nodes.map( + (node) => NodeModel.fromResponse(node, module), + ), + ); + + return module; + } } diff --git a/learning/tour-of-beam/frontend/lib/models/node.dart b/learning/tour-of-beam/frontend/lib/models/node.dart index d13ceea2d2826..7a653de1e3adf 100644 --- a/learning/tour-of-beam/frontend/lib/models/node.dart +++ b/learning/tour-of-beam/frontend/lib/models/node.dart @@ -19,15 +19,18 @@ import '../repositories/models/node.dart'; import '../repositories/models/node_type_enum.dart'; import 'group.dart'; +import 'parent_node.dart'; import 'unit.dart'; abstract class NodeModel { final String id; final String title; + final NodeModel? parent; const NodeModel({ required this.id, required this.title, + required this.parent, }); /// Constructs nodes from the response data. @@ -36,20 +39,27 @@ abstract class NodeModel { /// because they come from a golang backend which does not /// support inheritance, and so they use an extra layer of composition /// which is inconvenient in Flutter. - static List fromMaps(List json) { + static List fromMaps(List json, ParentNodeModel parent) { return json .cast>() .map(NodeResponseModel.fromJson) - .map(fromResponse) + .map((nodeResponse) => fromResponse(nodeResponse, parent)) .toList(); } - static NodeModel fromResponse(NodeResponseModel node) { + static NodeModel fromResponse( + NodeResponseModel node, + ParentNodeModel parent, + ) { switch (node.type) { case NodeType.group: - return GroupModel.fromResponse(node.group!); + return GroupModel.fromResponse(node.group!, parent); case NodeType.unit: - return UnitModel.fromResponse(node.unit!); + return UnitModel.fromResponse(node.unit!, parent); } } + + NodeModel getFirstUnit(); + + NodeModel? getNodeByTreeIds(List treeIds); } diff --git a/learning/tour-of-beam/frontend/lib/models/parent_node.dart b/learning/tour-of-beam/frontend/lib/models/parent_node.dart index 0271cfb9508fb..53f3c7a17667a 100644 --- a/learning/tour-of-beam/frontend/lib/models/parent_node.dart +++ b/learning/tour-of-beam/frontend/lib/models/parent_node.dart @@ -16,6 +16,8 @@ * limitations under the License. */ +import 'package:collection/collection.dart'; + import 'node.dart'; abstract class ParentNodeModel extends NodeModel { @@ -23,7 +25,23 @@ abstract class ParentNodeModel extends NodeModel { const ParentNodeModel({ required super.id, + required super.parent, required super.title, required this.nodes, }); + + @override + NodeModel getFirstUnit() => nodes[0].getFirstUnit(); + + @override + NodeModel? getNodeByTreeIds(List treeIds) { + final firstId = treeIds.firstOrNull; + final child = nodes.firstWhereOrNull((node) => node.id == firstId); + + if (child == null) { + return null; + } + + return child.getNodeByTreeIds(treeIds.sublist(1)); + } } diff --git a/learning/tour-of-beam/frontend/lib/models/unit.dart b/learning/tour-of-beam/frontend/lib/models/unit.dart index 48b55af33d154..eb2e158ddf622 100644 --- a/learning/tour-of-beam/frontend/lib/models/unit.dart +++ b/learning/tour-of-beam/frontend/lib/models/unit.dart @@ -18,8 +18,19 @@ import '../repositories/models/unit.dart'; import 'node.dart'; +import 'parent_node.dart'; class UnitModel extends NodeModel { - UnitModel.fromResponse(UnitResponseModel unit) - : super(id: unit.id, title: unit.title); + UnitModel.fromResponse(UnitResponseModel unit, ParentNodeModel parent) + : super( + id: unit.id, + parent: parent, + title: unit.title, + ); + + @override + NodeModel getFirstUnit() => this; + + @override + NodeModel? getNodeByTreeIds(List treeIds) => this; } diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/controllers/content_tree.dart b/learning/tour-of-beam/frontend/lib/pages/tour/controllers/content_tree.dart index dc5fc5a15cebd..6193f0b8ce092 100644 --- a/learning/tour-of-beam/frontend/lib/pages/tour/controllers/content_tree.dart +++ b/learning/tour-of-beam/frontend/lib/pages/tour/controllers/content_tree.dart @@ -17,33 +17,82 @@ */ import 'package:flutter/widgets.dart'; +import 'package:get_it/get_it.dart'; import 'package:playground_components/playground_components.dart'; +import '../../../cache/content_tree.dart'; +import '../../../models/group.dart'; import '../../../models/node.dart'; +import '../../../models/unit.dart'; class ContentTreeController extends ChangeNotifier { String _sdkId; List _treeIds; NodeModel? _currentNode; + final _contentTreeCache = GetIt.instance.get(); + final expandedIds = {}; ContentTreeController({ required String initialSdkId, List initialTreeIds = const [], }) : _sdkId = initialSdkId, - _treeIds = initialTreeIds; + _treeIds = initialTreeIds { + expandedIds.addAll(initialTreeIds); + _contentTreeCache.addListener(_onContentTreeCacheChange); + _onContentTreeCacheChange(); + } Sdk get sdk => Sdk.parseOrCreate(_sdkId); String get sdkId => _sdkId; List get treeIds => _treeIds; NodeModel? get currentNode => _currentNode; - void onNodeTap(NodeModel node) { + void openNode(NodeModel node) { + if (!expandedIds.contains(node.id)) { + expandedIds.add(node.id); + } + if (node == _currentNode) { return; } - _currentNode = node; - // TODO(alexeyinkin): Set _treeIds from node. + if (node is GroupModel) { + openNode(node.nodes.first); + } else if (node is UnitModel) { + _currentNode = node; + } + + if (_currentNode != null) { + _treeIds = _getNodeAncestors(_currentNode!, [_currentNode!.id]); + } + notifyListeners(); + } + + List _getNodeAncestors(NodeModel node, List ancestors) { + if (node.parent != null) { + ancestors.add(node.parent!.id); + return _getNodeAncestors(node.parent!, ancestors); + } else { + return ancestors.reversed.toList(); + } + } + + void _onContentTreeCacheChange() { + final contentTree = _contentTreeCache.getContentTree(_sdkId); + if (contentTree == null) { + return; + } + + openNode( + contentTree.getNodeByTreeIds(_treeIds) ?? contentTree.getFirstUnit(), + ); + notifyListeners(); } + + @override + void dispose() { + _contentTreeCache.removeListener(_onContentTreeCacheChange); + super.dispose(); + } } diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/path.dart b/learning/tour-of-beam/frontend/lib/pages/tour/path.dart index 5f8971852f9f8..07dd386bdfcbb 100644 --- a/learning/tour-of-beam/frontend/lib/pages/tour/path.dart +++ b/learning/tour-of-beam/frontend/lib/pages/tour/path.dart @@ -26,7 +26,7 @@ class TourPath extends PagePath { final String sdkId; final List treeIds; - static final _regExp = RegExp(r'^/tour/([a-z]+)(/[/-a-zA-Z0-9]+)?$'); + static final _regExp = RegExp(r'^/tour/([a-z]+)((/[-a-zA-Z0-9]+)*)$'); TourPath({ required this.sdkId, @@ -47,7 +47,12 @@ class TourPath extends PagePath { if (matches == null) return null; final sdkId = matches[1] ?? (throw Error()); - final treeIds = matches[2]?.split('/') ?? const []; + final treeIdsString = matches[2]; + + final treeIds = (treeIdsString == null) + ? const [] + // TODO(nausharipov): use RegExp to remove the slash + : treeIdsString.substring(1).split('/'); return TourPath( sdkId: sdkId, diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/state.dart b/learning/tour-of-beam/frontend/lib/pages/tour/state.dart index ae8fc0e1e706f..e709839e915eb 100644 --- a/learning/tour-of-beam/frontend/lib/pages/tour/state.dart +++ b/learning/tour-of-beam/frontend/lib/pages/tour/state.dart @@ -44,6 +44,7 @@ class TourNotifier extends ChangeNotifier with PageStateMixin { playgroundController = _createPlaygroundController(initialSdkId) { contentTreeController.addListener(_onChanged); _unitContentCache.addListener(_onChanged); + _onChanged(); } @override @@ -53,6 +54,7 @@ class TourNotifier extends ChangeNotifier with PageStateMixin { ); void _onChanged() { + emitPathChanged(); final currentNode = contentTreeController.currentNode; if (currentNode is UnitModel) { final content = _unitContentCache.getUnitContent( diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/group.dart b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/group.dart index bdebcfc507bed..2be9d09e218b1 100644 --- a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/group.dart +++ b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/group.dart @@ -25,7 +25,7 @@ import '../controllers/content_tree.dart'; import 'group_nodes.dart'; import 'group_title.dart'; -class GroupWidget extends StatelessWidget { +class GroupWidget extends StatefulWidget { final GroupModel group; final ContentTreeController contentTreeController; @@ -34,22 +34,44 @@ class GroupWidget extends StatelessWidget { required this.contentTreeController, }); + @override + State createState() => _GroupWidgetState(); +} + +class _GroupWidgetState extends State { @override Widget build(BuildContext context) { + final isExpanded = + widget.contentTreeController.expandedIds.contains(widget.group.id); + return ExpansionTileWrapper( ExpansionTile( + key: Key('${widget.group.id}$isExpanded'), + initiallyExpanded: isExpanded, tilePadding: EdgeInsets.zero, + onExpansionChanged: (expand) { + /// Since expandedIds is also used for expansion, it needs to be + /// updated to prevent the tile to stay collapsed on title tap. + if (!expand) { + widget.contentTreeController.expandedIds.remove(widget.group.id); + setState(() {}); + } + }, title: GroupTitleWidget( - group: group, - onTap: () => contentTreeController.onNodeTap(group), + group: widget.group, + onTap: () { + widget.contentTreeController.openNode(widget.group); + // Couldn't make it rebuild reliably with AnimatedBuilder + setState(() {}); + }, ), childrenPadding: const EdgeInsets.only( left: BeamSizes.size24, ), children: [ GroupNodesWidget( - nodes: group.nodes, - contentTreeController: contentTreeController, + nodes: widget.group.nodes, + contentTreeController: widget.contentTreeController, ), ], ), diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/module.dart b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/module.dart index 886e9f98d8637..b01987bf0a7ca 100644 --- a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/module.dart +++ b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/module.dart @@ -39,7 +39,7 @@ class ModuleWidget extends StatelessWidget { children: [ ModuleTitleWidget( module: module, - onTap: () => contentTreeController.onNodeTap(module), + onTap: () => contentTreeController.openNode(module), ), ...module.nodes .map( diff --git a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/unit.dart b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/unit.dart index 914361a347a4a..b6ba021ea8410 100644 --- a/learning/tour-of-beam/frontend/lib/pages/tour/widgets/unit.dart +++ b/learning/tour-of-beam/frontend/lib/pages/tour/widgets/unit.dart @@ -24,7 +24,7 @@ import '../../../models/unit.dart'; import '../controllers/content_tree.dart'; import 'tour_progress_indicator.dart'; -class UnitWidget extends StatelessWidget { +class UnitWidget extends StatefulWidget { final UnitModel unit; final ContentTreeController contentTreeController; @@ -33,16 +33,50 @@ class UnitWidget extends StatelessWidget { required this.contentTreeController, }); + @override + State createState() => _UnitWidgetState(); +} + +class _UnitWidgetState extends State { + @override + void initState() { + super.initState(); + widget.contentTreeController.addListener(_rebuild); + } + + @override + void dispose() { + widget.contentTreeController.removeListener(_rebuild); + super.dispose(); + } + + void _rebuild() { + setState(() {}); + } + @override Widget build(BuildContext context) { + final bool isSelected = + widget.contentTreeController.currentNode?.id == widget.unit.id; return ClickableWidget( - onTap: () => contentTreeController.onNodeTap(unit), - child: Padding( + onTap: () => widget.contentTreeController.openNode(widget.unit), + child: Container( + decoration: BoxDecoration( + color: isSelected ? Theme.of(context).selectedRowColor : null, + borderRadius: BorderRadius.circular(BeamSizes.size3), + ), padding: const EdgeInsets.symmetric(vertical: BeamSizes.size10), child: Row( children: [ - TourProgressIndicator(assetPath: Assets.svg.unitProgress0), - Expanded(child: Text(unit.title)), + TourProgressIndicator( + // TODO(nausharipov): fix indicator colors in mockups + assetPath: isSelected + ? Assets.svg.unitProgressSelected0 + : Assets.svg.unitProgress0, + ), + Expanded( + child: Text(widget.unit.title), + ), ], ), ), diff --git a/learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart b/learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart index 4215935626722..af6e91969bd25 100644 --- a/learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart +++ b/learning/tour-of-beam/frontend/lib/pages/welcome/screen.dart @@ -24,7 +24,6 @@ import 'package:playground_components/playground_components.dart'; import '../../components/builders/content_tree.dart'; import '../../components/builders/sdks.dart'; -import '../../components/filler_text.dart'; import '../../components/scaffold.dart'; import '../../constants/sizes.dart'; import '../../generated/assets.gen.dart'; @@ -397,7 +396,6 @@ class _ModuleBody extends StatelessWidget { padding: _modulePadding, child: Column( children: [ - const FillerText(width: 20), const SizedBox(height: BeamSizes.size16), Divider( color: themeData.dividerColor, @@ -416,7 +414,6 @@ class _LastModuleBody extends StatelessWidget { return Container( margin: _moduleLeftMargin, padding: _modulePadding, - child: const FillerText(width: 20), ); } } diff --git a/learning/tour-of-beam/frontend/pubspec.lock b/learning/tour-of-beam/frontend/pubspec.lock index 9983b9bb53043..6b49ce6e37bca 100644 --- a/learning/tour-of-beam/frontend/pubspec.lock +++ b/learning/tour-of-beam/frontend/pubspec.lock @@ -156,7 +156,7 @@ packages: source: hosted version: "4.2.0" collection: - dependency: transitive + dependency: "direct main" description: name: collection url: "https://pub.dartlang.org" @@ -278,7 +278,7 @@ packages: name: flutter_code_editor url: "https://pub.dartlang.org" source: hosted - version: "0.1.1" + version: "0.1.3" flutter_driver: dependency: transitive description: flutter diff --git a/learning/tour-of-beam/frontend/pubspec.yaml b/learning/tour-of-beam/frontend/pubspec.yaml index a6e829542e0c6..a8f4fd9a4ce7f 100644 --- a/learning/tour-of-beam/frontend/pubspec.yaml +++ b/learning/tour-of-beam/frontend/pubspec.yaml @@ -28,6 +28,7 @@ environment: dependencies: app_state: ^0.8.1 + collection: ^1.16.0 easy_localization: ^3.0.1 easy_localization_ext: ^0.1.0 easy_localization_loader: ^1.0.0 diff --git a/playground/frontend/playground_components/lib/src/constants/colors.dart b/playground/frontend/playground_components/lib/src/constants/colors.dart index 447d564056edd..22e8a3e3880c1 100644 --- a/playground/frontend/playground_components/lib/src/constants/colors.dart +++ b/playground/frontend/playground_components/lib/src/constants/colors.dart @@ -36,45 +36,47 @@ class BeamColors { class BeamGraphColors { static const node = BeamColors.grey3; - static const border = Color(0xFF45454E); + static const border = Color(0xff45454E); static const edge = BeamLightThemeColors.primary; } class BeamNotificationColors { - static const error = Color(0xFFE54545); - static const info = Color(0xFF3E67F6); - static const success = Color(0xFF37AC66); - static const warning = Color(0xFFEEAB00); + static const error = Color(0xffE54545); + static const info = Color(0xff3E67F6); + static const success = Color(0xff37AC66); + static const warning = Color(0xffEEAB00); } class BeamLightThemeColors { - static const border = Color(0xFFE5E5E5); + static const border = Color(0xffE5E5E5); static const primaryBackground = BeamColors.white; static const secondaryBackground = Color(0xffFCFCFC); + static const selectedUnitColor = Color(0xffE6E7E9); static const grey = Color(0xffE5E5E5); - static const listBackground = Color(0xFFA0A4AB); + static const listBackground = BeamColors.grey3; static const text = BeamColors.darkBlue; static const primary = Color(0xffE74D1A); - static const icon = Color(0xFFA0A4AB); + static const icon = BeamColors.grey3; - static const code1 = Color(0xFFDA2833); - static const code2 = Color(0xFF5929B4); - static const codeComment = Color(0xFF4C6B60); - static const codeBackground = Color(0xFFFEF6F3); + static const code1 = Color(0xffDA2833); + static const code2 = Color(0xff5929B4); + static const codeComment = Color(0xff4C6B60); + static const codeBackground = Color(0xffFEF6F3); } class BeamDarkThemeColors { - static const border = Color(0xFFA0A4AB); + static const border = BeamColors.grey3; static const primaryBackground = Color(0xff18181B); static const secondaryBackground = BeamColors.darkGrey; + static const selectedUnitColor = Color(0xff626267); static const grey = Color(0xff3F3F46); - static const listBackground = Color(0xFF606772); - static const text = Color(0xffFFFFFF); + static const listBackground = Color(0xff606772); + static const text = Color(0xffffffff); static const primary = Color(0xffF26628); - static const icon = Color(0xFF606772); + static const icon = Color(0xff606772); - static const code1 = Color(0xFFDA2833); - static const code2 = Color(0xFF5929B4); - static const codeComment = Color(0xFF4C6B60); - static const codeBackground = Color(0xFF231B1B); + static const code1 = Color(0xffDA2833); + static const code2 = Color(0xff5929B4); + static const codeComment = Color(0xff4C6B60); + static const codeBackground = Color(0xff231B1B); } diff --git a/playground/frontend/playground_components/lib/src/theme/theme.dart b/playground/frontend/playground_components/lib/src/theme/theme.dart index 14c811abe931c..c17a2c4b44529 100644 --- a/playground/frontend/playground_components/lib/src/theme/theme.dart +++ b/playground/frontend/playground_components/lib/src/theme/theme.dart @@ -121,6 +121,7 @@ final kLightTheme = ThemeData( ), primaryColor: BeamLightThemeColors.primary, scaffoldBackgroundColor: BeamLightThemeColors.secondaryBackground, + selectedRowColor: BeamLightThemeColors.selectedUnitColor, tabBarTheme: _getTabBarTheme( textColor: BeamLightThemeColors.text, indicatorColor: BeamLightThemeColors.primary, @@ -194,6 +195,7 @@ final kDarkTheme = ThemeData( ), primaryColor: BeamDarkThemeColors.primary, scaffoldBackgroundColor: BeamDarkThemeColors.secondaryBackground, + selectedRowColor: BeamDarkThemeColors.selectedUnitColor, tabBarTheme: _getTabBarTheme( textColor: BeamDarkThemeColors.text, indicatorColor: BeamDarkThemeColors.primary, @@ -396,8 +398,10 @@ MarkdownStyleSheet _getMarkdownStyle(Brightness brightness) { return MarkdownStyleSheet( p: textTheme.bodyMedium, + pPadding: EdgeInsets.only(top: BeamSizes.size2), h1: textTheme.headlineLarge, h3: textTheme.headlineMedium, + h3Padding: EdgeInsets.only(top: BeamSizes.size4), code: GoogleFonts.sourceCodePro( color: textColor, backgroundColor: BeamColors.transparent,