From 489fa95e43dc278ee116a73991753424d57e5f5b Mon Sep 17 00:00:00 2001 From: Mayank Variya Date: Fri, 8 Nov 2024 11:35:10 +0530 Subject: [PATCH 1/3] Tournament minor improvements --- khelo/assets/locales/app_en.arb | 1 + .../tabs/tournament_detail_overview_tab.dart | 107 +++++++++--------- .../detail/tournament_detail_screen.dart | 52 +++++++-- .../detail/tournament_detail_view_model.dart | 15 ++- .../tournament_detail_view_model.freezed.dart | 2 +- style/lib/button/more_option_button.dart | 17 ++- 6 files changed, 122 insertions(+), 72 deletions(-) diff --git a/khelo/assets/locales/app_en.arb b/khelo/assets/locales/app_en.arb index 07ceeb2a..34f9e6c7 100644 --- a/khelo/assets/locales/app_en.arb +++ b/khelo/assets/locales/app_en.arb @@ -240,6 +240,7 @@ "tournament_detail_key_stat_most_fours_title": "Most Fours", "tournament_detail_key_stat_most_sixes_title": "Most Sixes", + "key_stat_all": "All", "key_stat_filter_runs": "Runs", "key_stat_filter_wickets": "Wickets", "key_stat_filter_fours": "Fours", diff --git a/khelo/lib/ui/flow/tournament/detail/tabs/tournament_detail_overview_tab.dart b/khelo/lib/ui/flow/tournament/detail/tabs/tournament_detail_overview_tab.dart index b2e09cfc..f62e5245 100644 --- a/khelo/lib/ui/flow/tournament/detail/tabs/tournament_detail_overview_tab.dart +++ b/khelo/lib/ui/flow/tournament/detail/tabs/tournament_detail_overview_tab.dart @@ -15,31 +15,26 @@ import 'package:style/text/app_text_style.dart'; import '../../../../../components/image_avatar.dart'; -class TournamentDetailOverviewTab extends ConsumerStatefulWidget { +class TournamentDetailOverviewTab extends ConsumerWidget { final TournamentModel tournament; + final PageController controller; const TournamentDetailOverviewTab({ super.key, required this.tournament, + required this.controller, }); @override - ConsumerState createState() => - _TournamentDetailOverviewTabState(); -} - -class _TournamentDetailOverviewTabState - extends ConsumerState { - @override - Widget build(BuildContext context) { + Widget build(BuildContext context, WidgetRef ref) { return ListView( padding: context.mediaQueryPadding.copyWith(top: 0) + EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 40), children: [ - _featuredMatchesView(context, widget.tournament.matches), - _keyStatsView(context, widget.tournament.keyStats), - _teamsSquadsView(context, widget.tournament.teams), - _infoView(context, widget.tournament), + _featuredMatchesView(context, tournament.matches), + _keyStatsView(context, tournament.keyStats), + _teamsSquadsView(context, tournament.teams), + _infoView(context, tournament), ], ); } @@ -56,7 +51,7 @@ class _TournamentDetailOverviewTabState title: context.l10n.tournament_detail_overview_featured_matches_title, showViewAll: matches.length > 3, - onViewAll: () {}, + onViewAll: () => controller.jumpToPage(2), ), ...List.generate( matches.take(3).length, @@ -68,48 +63,56 @@ class _TournamentDetailOverviewTabState } Widget _matchCellView(BuildContext context, MatchModel match) { - return Container( - padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24), - margin: EdgeInsets.symmetric(vertical: 8), - decoration: BoxDecoration( - color: context.colorScheme.surface, - borderRadius: BorderRadius.circular(16), - ), - child: Row( - children: [ - _buildTeamInfo(team: match.teams.first.team), - const Spacer(), - if (match.matchResult != null) ...[ - WonByMessageText( - isTournament: true, - matchResult: match.matchResult, - ), - ] else ...[ - Column( - children: [ - Text( - match.start_at?.format(context, DateFormatType.time) ?? - DateTime.now().format(context, DateFormatType.time), - style: AppTextStyle.caption - .copyWith(color: context.colorScheme.textDisabled), - ), - Text( - match.start_at?.relativeTime(context) ?? - DateTime.now().relativeTime(context), - style: AppTextStyle.subtitle2 - .copyWith(color: context.colorScheme.textPrimary), - ), - ], + return OnTapScale( + onTap: () => AppRoute.matchDetailTab(matchId: match.id).push(context), + child: Container( + padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24), + margin: EdgeInsets.symmetric(vertical: 8), + decoration: BoxDecoration( + color: context.colorScheme.surface, + borderRadius: BorderRadius.circular(16), + ), + child: Row( + children: [ + _buildTeamInfo(context, team: match.teams.first.team), + const Spacer(), + if (match.matchResult != null) ...[ + WonByMessageText( + isTournament: true, + matchResult: match.matchResult, + ), + ] else ...[ + Column( + children: [ + Text( + match.start_at?.format(context, DateFormatType.time) ?? + DateTime.now().format(context, DateFormatType.time), + style: AppTextStyle.caption + .copyWith(color: context.colorScheme.textDisabled), + ), + Text( + match.start_at?.relativeTime(context) ?? + DateTime.now().relativeTime(context), + style: AppTextStyle.subtitle2 + .copyWith(color: context.colorScheme.textPrimary), + ), + ], + ), + ], + const Spacer(), + _buildTeamInfo( + context, + team: match.teams.last.team, + isSecond: true, ), ], - const Spacer(), - _buildTeamInfo(team: match.teams.last.team, isSecond: true), - ], + ), ), ); } - Widget _buildTeamInfo({ + Widget _buildTeamInfo( + BuildContext context, { required TeamModel team, bool isSecond = false, }) { @@ -162,7 +165,7 @@ class _TournamentDetailOverviewTabState context, showViewAll: keyStatsList.length > 4, title: context.l10n.tournament_detail_overview_key_stats_title, - onViewAll: () {}, + onViewAll: () => controller.jumpToPage(4), ), const SizedBox(height: 8), GridView.builder( @@ -261,7 +264,7 @@ class _TournamentDetailOverviewTabState context, showViewAll: teams.length > 3, title: context.l10n.tournament_detail_overview_teams_squads_title, - onViewAll: () {}, + onViewAll: () => controller.jumpToPage(1), ), const SizedBox(height: 8), SizedBox( diff --git a/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart b/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart index e9c1ed3d..0bc2d992 100644 --- a/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart +++ b/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart @@ -1,3 +1,5 @@ +import 'dart:io'; + import 'package:cached_network_image/cached_network_image.dart'; import 'package:data/api/team/team_model.dart'; import 'package:data/api/tournament/tournament_model.dart'; @@ -17,6 +19,7 @@ import 'package:khelo/ui/flow/tournament/detail/tabs/tournament_detail_points_ta import 'package:khelo/ui/flow/tournament/detail/tabs/tournament_detail_stats_tab.dart'; import 'package:khelo/ui/flow/tournament/detail/tabs/tournament_detail_teams_tab.dart'; import 'package:khelo/ui/flow/tournament/detail/tournament_detail_view_model.dart'; +import 'package:style/button/action_button.dart'; import 'package:style/button/more_option_button.dart'; import 'package:style/button/tab_button.dart'; import 'package:style/extensions/context_extensions.dart'; @@ -111,6 +114,7 @@ class _TournamentDetailScreenState pinned: true, expandedHeight: 300, backgroundColor: context.colorScheme.surface, + leading: _backButton(context), flexibleSpace: _flexibleTitle(context, state.tournament!), actions: state.tournament!.created_by == state.currentUserId || state.tournament!.members @@ -118,6 +122,10 @@ class _TournamentDetailScreenState ? [ moreOptionButton( context, + size: 20, + backgroundColor: context + .colorScheme.containerHighOnSurface + .withOpacity(0.3), onPressed: () => _moreActionButton(context, state), ), ] @@ -145,6 +153,7 @@ class _TournamentDetailScreenState children: [ TournamentDetailOverviewTab( tournament: state.tournament!, + controller: _controller, ), TournamentDetailTeamsTab( onSelected: notifier.onTeamsSelected, @@ -243,6 +252,19 @@ class _TournamentDetailScreenState ) : null, ), + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Colors.transparent, + context.colorScheme.surface.withOpacity(0.2), + context.colorScheme.surface.withOpacity(0.8), + ], + ), + ), + ), Positioned( left: 16, bottom: 24, @@ -278,9 +300,7 @@ class _TournamentDetailScreenState child: Text( tournament.name, style: AppTextStyle.header1.copyWith( - color: tournament.banner_img_url != null - ? Colors.white - : context.colorScheme.textPrimary, + color: context.colorScheme.textPrimary, ), overflow: TextOverflow.ellipsis, textScaler: TextScaler.noScaling, @@ -295,9 +315,7 @@ class _TournamentDetailScreenState height: 24, width: 24, colorFilter: ColorFilter.mode( - tournament.banner_img_url != null - ? Colors.white - : context.colorScheme.textPrimary, + context.colorScheme.textPrimary, BlendMode.srcIn, ), ), @@ -307,9 +325,7 @@ class _TournamentDetailScreenState .start_date .format(context, DateFormatType.dayMonth)), style: AppTextStyle.body1.copyWith( - color: tournament.banner_img_url != null - ? Colors.white - : context.colorScheme.textPrimary, + color: context.colorScheme.textPrimary, ), ), ], @@ -359,4 +375,22 @@ class _TournamentDetailScreenState ), ]); } + + Widget _backButton(BuildContext context) { + return actionButton(context, + onPressed: context.pop, + icon: Container( + height: 28, + width: 28, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: context.colorScheme.containerHighOnSurface.withOpacity(0.3), + ), + child: Icon( + Platform.isIOS ? Icons.arrow_back_ios : Icons.arrow_back, + size: 20, + color: context.colorScheme.textPrimary, + ), + )); + } } diff --git a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart index 8d213319..01d99740 100644 --- a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart +++ b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart @@ -53,7 +53,7 @@ class TournamentDetailStateViewNotifier loading: false, ); onMatchFilter(null); - onStatFilter(null); + onStatFilter(state.selectedFilterTag); }, onError: (e) { state = state.copyWith(error: e, loading: false); debugPrint( @@ -116,13 +116,15 @@ class TournamentDetailStateViewNotifier } } - void onStatFilter(KeyStatFilterTag? tag) { + void onStatFilter(KeyStatFilterTag tag) { if (state.tournament == null) return; var filteredStats = state.tournament!.keyStats; filteredStats = filteredStats.where((e) { switch (tag) { + case KeyStatFilterTag.all: + return true; case KeyStatFilterTag.runs: return (e.stats.battingStat?.runScored ?? 0) > 0; case KeyStatFilterTag.wickets: @@ -143,8 +145,6 @@ class TournamentDetailStateViewNotifier return (e.stats.battingStat?.fours ?? 0) + (e.stats.battingStat?.sixes ?? 0) > 0; - case null: - return false; } }).toList(); @@ -176,7 +176,7 @@ class TournamentDetailStateViewNotifier state = state.copyWith( filteredStats: filteredStats, - selectedFilterTag: tag ?? state.selectedFilterTag, + selectedFilterTag: tag, ); } @@ -224,13 +224,14 @@ class TournamentDetailState with _$TournamentDetailState { String? currentUserId, @Default(null) String? matchFilter, @Default([]) List filteredMatches, - @Default(KeyStatFilterTag.runs) KeyStatFilterTag selectedFilterTag, + @Default(KeyStatFilterTag.all) KeyStatFilterTag selectedFilterTag, @Default([]) List filteredStats, @Default([]) List teamPoints, }) = _TournamentDetailState; } enum KeyStatFilterTag { + all, runs, wickets, battingAverage, @@ -243,6 +244,8 @@ enum KeyStatFilterTag { String getString(BuildContext context) { switch (this) { + case KeyStatFilterTag.all: + return context.l10n.key_stat_all; case KeyStatFilterTag.runs: return context.l10n.key_stat_filter_runs; case KeyStatFilterTag.wickets: diff --git a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.freezed.dart b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.freezed.dart index 14c71a7e..52fe94f0 100644 --- a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.freezed.dart +++ b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.freezed.dart @@ -249,7 +249,7 @@ class _$TournamentDetailStateImpl implements _TournamentDetailState { this.currentUserId, this.matchFilter = null, final List filteredMatches = const [], - this.selectedFilterTag = KeyStatFilterTag.runs, + this.selectedFilterTag = KeyStatFilterTag.all, final List filteredStats = const [], final List teamPoints = const []}) : _filteredMatches = filteredMatches, diff --git a/style/lib/button/more_option_button.dart b/style/lib/button/more_option_button.dart index d9d87083..bb06a7ec 100644 --- a/style/lib/button/more_option_button.dart +++ b/style/lib/button/more_option_button.dart @@ -8,12 +8,21 @@ Widget moreOptionButton( Function()? onPressed, double size = 24, Color? tintColor, + Color? backgroundColor, }) { return actionButton(context, onPressed: onPressed, - icon: Icon( - Platform.isIOS ? Icons.more_horiz_rounded : Icons.more_vert_rounded, - size: size, - color: tintColor ?? context.colorScheme.textPrimary, + icon: Container( + height: 28, + width: 28, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: backgroundColor ?? Colors.transparent, + ), + child: Icon( + Platform.isIOS ? Icons.more_horiz_rounded : Icons.more_vert_rounded, + size: size, + color: tintColor ?? context.colorScheme.textPrimary, + ), )); } From fffda0b33ebbd725375674b4787fb8b1533251f1 Mon Sep 17 00:00:00 2001 From: Mayank Variya Date: Fri, 8 Nov 2024 12:15:03 +0530 Subject: [PATCH 2/3] Minor changes --- .../detail/tournament_detail_screen.dart | 17 +++++++++-------- .../detail/tournament_detail_view_model.dart | 6 +++++- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart b/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart index 0bc2d992..925eae5d 100644 --- a/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart +++ b/khelo/lib/ui/flow/tournament/detail/tournament_detail_screen.dart @@ -25,6 +25,7 @@ import 'package:style/button/tab_button.dart'; import 'package:style/extensions/context_extensions.dart'; import 'package:style/indicator/progress_indicator.dart'; import 'package:style/text/app_text_style.dart'; +import 'package:style/theme/colors.dart'; import '../../../../components/action_bottom_sheet.dart'; import '../../../../components/app_page.dart'; @@ -125,7 +126,7 @@ class _TournamentDetailScreenState size: 20, backgroundColor: context .colorScheme.containerHighOnSurface - .withOpacity(0.3), + .withOpacity(0.4), onPressed: () => _moreActionButton(context, state), ), ] @@ -259,8 +260,8 @@ class _TournamentDetailScreenState end: Alignment.bottomCenter, colors: [ Colors.transparent, - context.colorScheme.surface.withOpacity(0.2), - context.colorScheme.surface.withOpacity(0.8), + surfaceDarkColor.withOpacity(0.2), + surfaceDarkColor.withOpacity(0.8), ], ), ), @@ -289,7 +290,7 @@ class _TournamentDetailScreenState size: 80, imageUrl: tournament.profile_img_url, border: Border.all( - color: Colors.white, + color: surfaceLightColor, width: 1.5, ), backgroundColor: context.colorScheme.primary, @@ -300,7 +301,7 @@ class _TournamentDetailScreenState child: Text( tournament.name, style: AppTextStyle.header1.copyWith( - color: context.colorScheme.textPrimary, + color: surfaceLightColor, ), overflow: TextOverflow.ellipsis, textScaler: TextScaler.noScaling, @@ -315,7 +316,7 @@ class _TournamentDetailScreenState height: 24, width: 24, colorFilter: ColorFilter.mode( - context.colorScheme.textPrimary, + surfaceLightColor, BlendMode.srcIn, ), ), @@ -325,7 +326,7 @@ class _TournamentDetailScreenState .start_date .format(context, DateFormatType.dayMonth)), style: AppTextStyle.body1.copyWith( - color: context.colorScheme.textPrimary, + color: surfaceLightColor, ), ), ], @@ -384,7 +385,7 @@ class _TournamentDetailScreenState width: 28, decoration: BoxDecoration( shape: BoxShape.circle, - color: context.colorScheme.containerHighOnSurface.withOpacity(0.3), + color: context.colorScheme.containerHighOnSurface.withOpacity(0.4), ), child: Icon( Platform.isIOS ? Icons.arrow_back_ios : Icons.arrow_back, diff --git a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart index 01d99740..f8bd4fb4 100644 --- a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart +++ b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart @@ -175,7 +175,11 @@ class TournamentDetailStateViewNotifier } state = state.copyWith( - filteredStats: filteredStats, + filteredStats: filteredStats + ..sort( + (a, b) => (b.stats.battingStat?.runScored ?? 0) + .compareTo(a.stats.battingStat?.runScored ?? 0), + ), selectedFilterTag: tag, ); } From 6c0390c1b3958df7efc98f7d6bca1843d6faffb5 Mon Sep 17 00:00:00 2001 From: Mayank Variya Date: Fri, 8 Nov 2024 14:23:25 +0530 Subject: [PATCH 3/3] Minor changes --- .../detail/tournament_detail_view_model.dart | 52 +++++++++---------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart index f8bd4fb4..ec7da851 100644 --- a/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart +++ b/khelo/lib/ui/flow/tournament/detail/tournament_detail_view_model.dart @@ -148,38 +148,34 @@ class TournamentDetailStateViewNotifier } }).toList(); - if (tag == KeyStatFilterTag.mostHundreds || - tag == KeyStatFilterTag.mostFifties || - tag == KeyStatFilterTag.boundaries) { - filteredStats.sort((a, b) { - int compareByTag(PlayerKeyStat x, PlayerKeyStat y) { - switch (tag) { - case KeyStatFilterTag.mostHundreds: - return (y.stats.battingStat?.hundreds ?? 0) - .compareTo(x.stats.battingStat?.hundreds ?? 0); - case KeyStatFilterTag.mostFifties: - return (y.stats.battingStat?.fifties ?? 0) - .compareTo(x.stats.battingStat?.fifties ?? 0); - case KeyStatFilterTag.boundaries: - return ((y.stats.battingStat?.fours ?? 0) + - (y.stats.battingStat?.sixes ?? 0)) - .compareTo((x.stats.battingStat?.fours ?? 0) + - (x.stats.battingStat?.sixes ?? 0)); - default: - return 0; - } + filteredStats.sort((a, b) { + int compareByTag(PlayerKeyStat x, PlayerKeyStat y) { + switch (tag) { + case KeyStatFilterTag.mostHundreds: + return (y.stats.battingStat?.hundreds ?? 0) + .compareTo(x.stats.battingStat?.hundreds ?? 0); + case KeyStatFilterTag.mostFifties: + return (y.stats.battingStat?.fifties ?? 0) + .compareTo(x.stats.battingStat?.fifties ?? 0); + case KeyStatFilterTag.boundaries: + return ((y.stats.battingStat?.fours ?? 0) + + (y.stats.battingStat?.sixes ?? 0)) + .compareTo((x.stats.battingStat?.fours ?? 0) + + (x.stats.battingStat?.sixes ?? 0)); + default: + return (b.stats.battingStat?.runScored ?? 0) + .compareTo(a.stats.battingStat?.runScored ?? 0); } + } - return compareByTag(a, b); - }); - } + return compareByTag(a, b); + }); + + filteredStats.sort((a, b) => (b.stats.battingStat?.runScored ?? 0) + .compareTo(a.stats.battingStat?.runScored ?? 0)); state = state.copyWith( - filteredStats: filteredStats - ..sort( - (a, b) => (b.stats.battingStat?.runScored ?? 0) - .compareTo(a.stats.battingStat?.runScored ?? 0), - ), + filteredStats: filteredStats, selectedFilterTag: tag, ); }