Skip to content

Commit

Permalink
Attempt to improve the custom build ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wolfteam
Wolfteam committed Jan 5, 2022
1 parent 46c251f commit 1fad747
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 63 deletions.
27 changes: 9 additions & 18 deletions lib/presentation/artifacts/widgets/artifact_card.dart
View file
Expand Up @@ -42,9 +42,9 @@ class ArtifactCard extends StatelessWidget {
required this.image,
required this.rarity,
this.isInSelectionMode = false,
}) : imgWidth = 70,
imgHeight = 60,
bonus = const [],
this.imgWidth = 70,
this.imgHeight = 60,
}) : bonus = const [],
withoutDetails = true,
withElevation = false,
super(key: key);
Expand Down Expand Up @@ -85,21 +85,12 @@ class ArtifactCard extends StatelessWidget {
placeholder: MemoryImage(kTransparentImage),
image: AssetImage(image),
),
Center(
child: Tooltip(
message: name,
child: !withoutDetails
? Text(
name,
textAlign: TextAlign.center,
style: theme.textTheme.subtitle1!.copyWith(fontWeight: FontWeight.bold, color: Colors.white),
)
: Text(
name,
textAlign: TextAlign.center,
style: theme.textTheme.subtitle1!.copyWith(fontWeight: FontWeight.bold, color: Colors.white),
overflow: TextOverflow.ellipsis,
),
Tooltip(
message: name,
child: Text(
name,
textAlign: TextAlign.center,
style: theme.textTheme.subtitle1!.copyWith(fontWeight: FontWeight.bold, color: Colors.white),
),
),
Rarity(stars: rarity),
Expand Down
32 changes: 2 additions & 30 deletions lib/presentation/character/widgets/character_detail_build_card.dart
View file
Expand Up @@ -9,6 +9,7 @@ import 'package:shiori/presentation/shared/extensions/element_type_extensions.da
import 'package:shiori/presentation/shared/extensions/i18n_extensions.dart';
import 'package:shiori/presentation/shared/row_column_item_or.dart';
import 'package:shiori/presentation/shared/styles.dart';
import 'package:shiori/presentation/shared/sub_stats_to_focus.dart';
import 'package:shiori/presentation/weapons/widgets/weapon_card.dart';

final _replaceDigitRegex = RegExp(r'\d{1}');
Expand Down Expand Up @@ -85,7 +86,7 @@ class CharacterDetailBuildCard extends StatelessWidget {
style: theme.textTheme.subtitle2!.copyWith(fontWeight: FontWeight.bold),
),
),
_SubStatToFocus(
SubStatToFocus(
subStatsToFocus: subStatsToFocus,
color: color,
),
Expand Down Expand Up @@ -197,35 +198,6 @@ class _ArtifactRow extends StatelessWidget {
}
}

class _SubStatToFocus extends StatelessWidget {
final List<StatType> subStatsToFocus;
final Color color;

const _SubStatToFocus({
Key? key,
required this.subStatsToFocus,
required this.color,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
final text = subStatsToFocus.map((e) => s.translateStatTypeWithoutValue(e)).join(' > ');
return Container(
margin: Styles.edgeInsetHorizontal5,
child: Text(
'${s.subStats}: $text',
style: theme.textTheme.subtitle2!.copyWith(
fontWeight: FontWeight.bold,
color: color,
fontSize: 12,
),
),
);
}
}

class _SkillPriority extends StatelessWidget {
final List<CharacterSkillType> skillPriorities;
final Color color;
Expand Down
94 changes: 79 additions & 15 deletions lib/presentation/custom_build/custom_build_page.dart
View file
Expand Up @@ -19,6 +19,7 @@ import 'package:shiori/presentation/shared/extensions/element_type_extensions.da
import 'package:shiori/presentation/shared/extensions/i18n_extensions.dart';
import 'package:shiori/presentation/shared/loading.dart';
import 'package:shiori/presentation/shared/styles.dart';
import 'package:shiori/presentation/shared/sub_stats_to_focus.dart';
import 'package:shiori/presentation/shared/utils/enum_utils.dart';
import 'package:shiori/presentation/weapons/weapons_page.dart';
import 'package:shiori/presentation/weapons/widgets/weapon_card.dart';
Expand Down Expand Up @@ -229,7 +230,7 @@ class _Weapons extends StatelessWidget {
children: [
Container(
padding: Styles.edgeInsetVertical10,
margin: const EdgeInsets.only(bottom: 10),
// margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: color,
border: Border(top: BorderSide(color: Colors.white)),
Expand All @@ -240,6 +241,39 @@ class _Weapons extends StatelessWidget {
style: theme.textTheme.subtitle1!.copyWith(fontWeight: FontWeight.bold),
),
),
ButtonBar(
buttonPadding: EdgeInsets.zero,
children: [
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.add),
),
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.sort),
),
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.clear_all),
),
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.delete),
),
],
),
Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
Expand All @@ -252,8 +286,8 @@ class _Weapons extends StatelessWidget {
rarity: e.rarity,
image: e.image,
isComingSoon: e.isComingSoon,
imgHeight: 60,
imgWidth: 70,
// imgHeight: 60,
// imgWidth: 70,
),
)
.toList(),
Expand Down Expand Up @@ -281,7 +315,7 @@ class _Weapons extends StatelessWidget {
}

class _Artifacts extends StatelessWidget {
final List<ArtifactCardModel> artifacts;
final List<CustomBuildArtifactModel> artifacts;
final Color color;

const _Artifacts({
Expand All @@ -294,13 +328,14 @@ class _Artifacts extends StatelessWidget {
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
final possibleSubStats = getArtifactPossibleSubStats();
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: Styles.edgeInsetVertical10,
margin: const EdgeInsets.only(bottom: 10),
// margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: color,
border: Border(top: BorderSide(color: Colors.white)),
Expand All @@ -311,6 +346,32 @@ class _Artifacts extends StatelessWidget {
style: theme.textTheme.subtitle1!.copyWith(fontWeight: FontWeight.bold),
),
),
ButtonBar(
buttonPadding: EdgeInsets.zero,
children: [
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.add),
),
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.clear_all),
),
IconButton(
iconSize: 20,
padding: EdgeInsets.zero,
splashRadius: Styles.smallButtonSplashRadius,
onPressed: () {},
icon: Icon(Icons.delete),
),
],
),
Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
Expand All @@ -319,7 +380,7 @@ class _Artifacts extends StatelessWidget {
.map(
(e) => ArtifactCard.withoutDetails(
keyName: e.key,
name: e.name,
name: s.translateStatTypeWithoutValue(e.statType),
image: e.image,
rarity: e.rarity,
),
Expand All @@ -334,13 +395,21 @@ class _Artifacts extends StatelessWidget {
onPressed: () => _addArtifact(context),
),
],
)
),
SubStatToFocus(subStatsToFocus: [StatType.atk, StatType.critDmgPercentage, StatType.critRatePercentage], color: color),
Divider(),
],
);
}

Future<void> _addArtifact(BuildContext context) async {
final selectedType = await showDialog<ArtifactType>(context: context, builder: (ctx) => const SelectArtifactTypeDialog());
final bloc = context.read<CustomBuildBloc>();
final selectedType = await showDialog<ArtifactType>(
context: context,
builder: (ctx) => SelectArtifactTypeDialog(
selectedValues: artifacts.map((e) => e.type).toList(),
),
);
if (selectedType == null) {
return;
}
Expand All @@ -367,16 +436,11 @@ class _Artifacts extends StatelessWidget {
return;
}

await _openArtifactsPage(context, selectedType);
}

Future<void> _openArtifactsPage(BuildContext context, ArtifactType type) async {
//TODO: REMOVE THE CROWNS AND MAYBE ONLY SHOW THE SPECIFIC TYPE
final bloc = context.read<CustomBuildBloc>();
final selectedKey = await ArtifactsPage.forSelection(context, type: type);
final selectedKey = await ArtifactsPage.forSelection(context, type: selectedType);
if (selectedKey.isNullEmptyOrWhitespace) {
return;
}
bloc.add(CustomBuildEvent.addArtifact(key: selectedKey!, type: type));
bloc.add(CustomBuildEvent.addArtifact(key: selectedKey!, type: selectedType, statType: statType));
}
}
9 changes: 9 additions & 0 deletions lib/presentation/shared/dialogs/select_artifact_type_dialog.dart
View file
Expand Up @@ -7,10 +7,12 @@ import 'package:shiori/presentation/shared/images/artifact_image_type.dart';

class SelectArtifactTypeDialog extends StatefulWidget {
final List<ArtifactType> excluded;
final List<ArtifactType> selectedValues;

const SelectArtifactTypeDialog({
Key? key,
this.excluded = const <ArtifactType>[],
this.selectedValues = const <ArtifactType>[],
}) : super(key: key);

@override
Expand Down Expand Up @@ -49,6 +51,13 @@ class _SelectArtifactTypeDialogState extends State<SelectArtifactTypeDialog> {
title: Text(
s.translateArtifactType(type),
overflow: TextOverflow.ellipsis,
style: widget.selectedValues.contains(type)
? TextStyle(
decoration: TextDecoration.lineThrough,
decorationColor: theme.colorScheme.secondary,
decorationThickness: 2,
)
: null,
),
selected: currentSelectedType == type,
selectedTileColor: theme.colorScheme.secondary.withOpacity(0.2),
Expand Down
34 changes: 34 additions & 0 deletions lib/presentation/shared/sub_stats_to_focus.dart
View file
@@ -0,0 +1,34 @@
import 'package:flutter/material.dart';
import 'package:shiori/domain/enums/enums.dart';
import 'package:shiori/generated/l10n.dart';
import 'package:shiori/presentation/shared/extensions/i18n_extensions.dart';
import 'package:shiori/presentation/shared/styles.dart';

class SubStatToFocus extends StatelessWidget {
final List<StatType> subStatsToFocus;
final Color color;

const SubStatToFocus({
Key? key,
required this.subStatsToFocus,
required this.color,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final s = S.of(context);
final theme = Theme.of(context);
final text = subStatsToFocus.map((e) => s.translateStatTypeWithoutValue(e)).join(' > ');
return Container(
margin: Styles.edgeInsetHorizontal5,
child: Text(
'${s.subStats}: $text',
style: theme.textTheme.subtitle2!.copyWith(
fontWeight: FontWeight.bold,
color: color,
fontSize: 12,
),
),
);
}
}

0 comments on commit 1fad747

Please sign in to comment.