Skip to content

Commit

Permalink
[Presentation] Improved the wish_simulator_history_page.dart
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wolfteam
Wolfteam committed Sep 17, 2023
1 parent fdbaaf4 commit 7ca013b
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 92 deletions.
243 changes: 156 additions & 87 deletions ...ulator/wish_simulator_history_dialog.dart → ...imulator/wish_simulator_history_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:shiori/application/bloc.dart';
Expand All @@ -10,103 +12,160 @@ import 'package:shiori/injection.dart';
import 'package:shiori/presentation/character/character_page.dart';
import 'package:shiori/presentation/shared/dialogs/confirm_dialog.dart';
import 'package:shiori/presentation/shared/extensions/i18n_extensions.dart';
import 'package:shiori/presentation/shared/extensions/media_query_extensions.dart';
import 'package:shiori/presentation/shared/item_popupmenu_filter.dart';
import 'package:shiori/presentation/shared/loading.dart';
import 'package:shiori/presentation/shared/nothing_found_column.dart';
import 'package:shiori/presentation/shared/styles.dart';
import 'package:shiori/presentation/weapon/weapon_page.dart';

class WishSimulatorHistoryDialog extends StatelessWidget {
class _CustomRoute extends PageRoute<void> {
final WidgetBuilder builder;

_CustomRoute({required this.builder});

@override
bool get opaque => false;

@override
Duration get transitionDuration => Duration.zero;

@override
bool get barrierDismissible => true;

@override
Color? get barrierColor => null;

@override
String? get barrierLabel => null;

@override
bool get maintainState => true;

@override
String get debugLabel => '${super.debugLabel}(${settings.name})';

@override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
final result = builder(context);
return Semantics(
scopesRoute: true,
explicitChildNodes: true,
child: result,
);
}

@override
Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
final PageTransitionsTheme theme = Theme.of(context).pageTransitionsTheme;
return theme.buildTransitions(this, context, animation, secondaryAnimation, child);
}
}

class WishSimulatorHistoryPage extends StatelessWidget {
final BannerItemType bannerType;

const WishSimulatorHistoryDialog({super.key, required this.bannerType});
const WishSimulatorHistoryPage({super.key, required this.bannerType});

static Future<void> transparentRoute(BuildContext context, BannerItemType bannerType) async {
final route = _CustomRoute(
builder: (context) => WishSimulatorHistoryPage(bannerType: bannerType),
);

await Navigator.push(context, route);
await route.completed;
}

@override
Widget build(BuildContext context) {
final mq = MediaQuery.of(context);
final s = S.of(context);
return BlocProvider<WishSimulatorPullHistoryBloc>(
create: (context) => Injection.wishSimulatorPullHistoryBloc..add(WishSimulatorPullHistoryEvent.init(bannerType: bannerType)),
child: BlocBuilder<WishSimulatorPullHistoryBloc, WishSimulatorPullHistoryState>(
builder: (context, state) => AlertDialog(
title: _TableTitle(
builder: (context, state) => Scaffold(
appBar: _CustomAppBar(
bannerType: state.map(loading: (_) => bannerType, loaded: (state) => state.bannerType),
showDeleteIcon: state.map(loading: (_) => false, loaded: (state) => state.items.isNotEmpty),
),
content: SizedBox(
width: mq.getWidthForDialogs(),
height: mq.getHeightForDialogs(WishSimulatorPullHistoryBloc.take + 2),
child: state.map(
loading: (_) => const Loading(useScaffold: false),
loaded: (state) => state.allItems.isEmpty
? const NothingFoundColumn()
: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
backgroundColor: Theme.of(context).colorScheme.background.withOpacity(0.8),
body: SafeArea(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0),
child: Center(
child: Container(
width: double.infinity,
constraints: const BoxConstraints(maxWidth: 1024),
child: state.map(
loading: (_) => const Loading(useScaffold: false),
loaded: (state) => state.items.isEmpty
? const NothingFoundColumn()
: SingleChildScrollView(
child: _Table(items: state.items),
),
_TablePagination(maxPage: state.maxPage, currentPage: state.currentPage),
],
),
),
),
),
),
),
),
actions: [
ElevatedButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(s.ok),
),
],
bottomNavigationBar: state.maybeMap(
loaded: (state) => state.items.isEmpty
? null
: Container(
margin: Styles.edgeInsetAll15,
child: _TablePagination(
maxPage: state.maxPage,
currentPage: state.currentPage,
),
),
orElse: () => null,
),
),
),
);
}
}

class _TableTitle extends StatelessWidget {
class _CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
final BannerItemType bannerType;
final bool showDeleteIcon;

const _TableTitle({
const _CustomAppBar({
required this.bannerType,
required this.showDeleteIcon,
});

@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);

@override
_CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<_CustomAppBar> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final s = S.of(context);
final title = '${s.wishHistory} (${s.translateBannerItemType(bannerType)})';
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Tooltip(
message: title,
child: Text(
title,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
),
const Spacer(),
return AppBar(
centerTitle: false,
title: Text(
'${s.wishHistory} (${s.translateBannerItemType(widget.bannerType)})',
overflow: TextOverflow.ellipsis,
style: theme.textTheme.titleLarge,
),
actions: [
ItemPopupMenuFilter<BannerItemType>(
tooltipText: s.bannerType,
selectedValue: bannerType,
selectedValue: widget.bannerType,
values: BannerItemType.values,
onSelected: (val) => context.read<WishSimulatorPullHistoryBloc>().add(WishSimulatorPullHistoryEvent.init(bannerType: val)),
icon: const Icon(Icons.filter_alt),
splashRadius: Styles.smallButtonSplashRadius,
itemText: (val, _) => s.translateBannerItemType(val),
),
if (showDeleteIcon)
if (widget.showDeleteIcon)
IconButton(
icon: const Icon(Icons.clear_all),
splashRadius: Styles.smallButtonSplashRadius,
tooltip: s.deleteAllItems,
onPressed: () => showDialog<bool>(
context: context,
builder: (context) => ConfirmDialog(
Expand All @@ -115,7 +174,7 @@ class _TableTitle extends StatelessWidget {
),
).then((confirmed) {
if (confirmed == true) {
context.read<WishSimulatorPullHistoryBloc>().add(WishSimulatorPullHistoryEvent.deleteData(bannerType: bannerType));
context.read<WishSimulatorPullHistoryBloc>().add(WishSimulatorPullHistoryEvent.deleteData(bannerType: widget.bannerType));
}
}),
),
Expand All @@ -131,51 +190,51 @@ class _Table extends StatelessWidget {

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final s = S.of(context);
final mq = MediaQuery.of(context);
final width = mq.getWidthForDialogs();
return SizedBox(
width: width * 1.5,
child: DataTable(
showCheckboxColumn: false,
columns: <DataColumn>[
DataColumn(
tooltip: s.itemType,
label: Expanded(
child: Text(
s.itemType,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
final textStyle = theme.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.bold);
return DataTable(
showCheckboxColumn: false,
columns: <DataColumn>[
DataColumn(
tooltip: s.itemType,
label: Expanded(
child: Text(
s.itemType,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: textStyle,
),
),
DataColumn(
tooltip: s.itemName,
label: Expanded(
child: Text(
s.itemName,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
DataColumn(
tooltip: s.itemName,
label: Expanded(
child: Text(
s.itemName,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: textStyle,
),
),
DataColumn(
tooltip: s.timeReceived,
label: Expanded(
child: Text(
s.timeReceived,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
DataColumn(
tooltip: s.timeReceived,
label: Expanded(
child: Text(
s.timeReceived,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: textStyle,
),
),
],
rows: items.mapIndex((e, index) => _buildRow(index, e, width, context, s)).toList(),
),
),
],
rows: items.mapIndex((e, index) => _buildRow(index, e, context, s)).toList(),
);
}

DataRow _buildRow(int index, WishSimulatorBannerItemPullHistoryModel item, double width, BuildContext context, S s) {
DataRow _buildRow(int index, WishSimulatorBannerItemPullHistoryModel item, BuildContext context, S s) {
TextStyle? nameStyle;
String name = item.name;
if (item.rarity > WishBannerConstants.minObtainableRarity) {
Expand All @@ -184,7 +243,7 @@ class _Table extends StatelessWidget {
: Styles.fourStarWishResultBackgroundColor;
final defaultStyle = DefaultTextStyle.of(context).style;
name += ' (${s.xStar(item.rarity)})';
nameStyle = defaultStyle.copyWith(color: color, fontWeight: FontWeight.bold);
nameStyle = defaultStyle.copyWith(color: color);
}
final isTapEnabled = [ItemType.character, ItemType.weapon].contains(item.type);
return DataRow(
Expand Down Expand Up @@ -245,20 +304,30 @@ class _TablePagination extends StatelessWidget {

@override
Widget build(BuildContext context) {
final s = S.of(context);
const double iconSize = 40;
return Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.chevron_left),
splashRadius: Styles.smallButtonSplashRadius,
iconSize: iconSize,
tooltip: s.previousPage,
onPressed: currentPage - 1 <= 0
? null
: () => context.read<WishSimulatorPullHistoryBloc>().add(WishSimulatorPullHistoryEvent.pageChanged(page: currentPage - 1)),
),
Text('$currentPage'),
Text(
'$currentPage',
overflow: TextOverflow.ellipsis,
),
IconButton(
icon: const Icon(Icons.chevron_right),
splashRadius: Styles.smallButtonSplashRadius,
iconSize: iconSize,
tooltip: s.nextPage,
onPressed: currentPage + 1 > maxPage
? null
: () => context.read<WishSimulatorPullHistoryBloc>().add(WishSimulatorPullHistoryEvent.pageChanged(page: currentPage + 1)),
Expand Down
7 changes: 2 additions & 5 deletions lib/presentation/wish_simulator/wish_simulator_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import 'package:shiori/presentation/wish_simulator/widgets/banner_main_image.dar
import 'package:shiori/presentation/wish_simulator/widgets/banner_top_image.dart';
import 'package:shiori/presentation/wish_simulator/widgets/wish_button.dart';
import 'package:shiori/presentation/wish_simulator/wish_result_page.dart';
import 'package:shiori/presentation/wish_simulator/wish_simulator_history_dialog.dart';
import 'package:shiori/presentation/wish_simulator/wish_simulator_history_page.dart';

const double _topIconSize = 40;
const double _topHeight = 100;
Expand Down Expand Up @@ -436,10 +436,7 @@ class _BottomButtons extends StatelessWidget {
width: width,
height: height,
text: s.wishHistory,
onTap: () => showDialog(
context: context,
builder: (context) => WishSimulatorHistoryDialog(bannerType: period.banners[selectedBannerIndex].type),
),
onTap: () => WishSimulatorHistoryPage.transparentRoute(context, period.banners[selectedBannerIndex].type),
),
WishQuantityButton(
imagePath: iconImage,
Expand Down

0 comments on commit 7ca013b

Please sign in to comment.