Skip to content

Commit

Permalink
Need help page improvements (#1004)
Browse files Browse the repository at this point in the history 
* Text is no longer justified

* Use base scaffold

* Layout landscape

* [BOT] Applying version.

* [BOT] Applying format.

* Tests

* [BOT] Update golden files

* [BOT] Update golden files

* [BOT] Update golden files

* [BOT] Update golden files

* [BOT] Applying pod update.

---------

Co-authored-by: LouisPhilippeHeon <[email protected]>
Co-authored-by: clubapplets-server <[email protected]>
  • Loading branch information
@LouisPhilippeHeon @clubapplets-server
3 people authored Jul 9, 2024
1 parent 0c762dc commit e8a9c5b
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 183 deletions.
321 changes: 149 additions & 172 deletions lib/features/more/faq/faq_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import 'package:stacked/stacked.dart';
import 'package:notredame/features/more/faq/faq_viewmodel.dart';
import 'package:notredame/features/more/faq/models/faq.dart';
import 'package:notredame/features/more/faq/models/faq_actions.dart';
import 'package:notredame/features/app/widgets/base_scaffold.dart';

class FaqView extends StatefulWidget {
final Color? backgroundColor;
Expand All @@ -27,115 +28,47 @@ class _FaqViewState extends State<FaqView> {
Widget build(BuildContext context) => ViewModelBuilder<FaqViewModel>.reactive(
viewModelBuilder: () => FaqViewModel(),
builder: (context, model, child) {
return Scaffold(
backgroundColor: widget.backgroundColor,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getTitle(),
getSubtitle(AppIntl.of(context)!.questions_and_answers),
Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
child: CarouselSlider(
options: CarouselOptions(
height: 250.0,
),
items: faq.questions.asMap().entries.map((entry) {
final int index = entry.key;
final question = faq.questions[index];

return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Theme.of(context).brightness ==
Brightness.light
? const Color.fromARGB(255, 240, 238, 238)
: const Color.fromARGB(255, 40, 40, 40),
borderRadius:
const BorderRadius.all(Radius.circular(8.0)),
),
child: getQuestionCard(
question.title[model.locale?.languageCode] ?? '',
question.description[
model.locale?.languageCode] ??
'',
),
);
},
);
}).toList(),
),
),
getSubtitle(AppIntl.of(context)!.actions),
Expanded(
child: ListView.builder(
key: const Key("action_listview_key"),
padding: const EdgeInsets.only(top: 1.0),
itemCount: faq.actions.length,
itemBuilder: (context, index) {
final action = faq.actions[index];

return getActionCard(
action.title[model.locale?.languageCode] ?? '',
action.description[model.locale?.languageCode] ?? '',
action.type,
action.link,
action.iconName,
action.iconColor,
action.circleColor,
context,
model);
},
),
)
],
return BaseScaffold(
appBar: AppBar(
title: Text(AppIntl.of(context)!.need_help),
),
showBottomBar: false,
body: (MediaQuery.of(context).orientation == Orientation.portrait)
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getSubtitle(AppIntl.of(context)!.questions_and_answers),
getCaroussel(model),
getSubtitle(AppIntl.of(context)!.actions),
getActions(model)
],
)
: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Column(
children: [
getSubtitle(
AppIntl.of(context)!.questions_and_answers),
Expanded(child: getCaroussel(model)),
],
),
),
Flexible(
child: Column(
children: [
getSubtitle(AppIntl.of(context)!.actions),
Container(child: getActions(model)),
],
),
)
],
),
);
},
);

Padding getTitle() {
return Padding(
padding: const EdgeInsets.only(top: 60.0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 5.0),
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Icon(
Icons.arrow_back,
color: widget.backgroundColor == Colors.white
? Colors.black
: Colors.white,
),
),
),
),
const SizedBox(width: 8.0),
Expanded(
child: Text(
AppIntl.of(context)!.need_help,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineSmall!.copyWith(
color: widget.backgroundColor == Colors.white
? Colors.black
: Colors.white,
),
),
),
],
),
);
}

Padding getSubtitle(String subtitle) {
return Padding(
padding: const EdgeInsets.only(left: 18.0, top: 18.0, bottom: 10.0),
Expand All @@ -150,45 +83,92 @@ class _FaqViewState extends State<FaqView> {
);
}

CarouselSlider getCaroussel(FaqViewModel model) {
return CarouselSlider(
options: CarouselOptions(
height: 260.0,
),
items: faq.questions.asMap().entries.map((entry) {
final int index = entry.key;
final question = faq.questions[index];

return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Theme.of(context).brightness == Brightness.light
? const Color.fromARGB(255, 240, 238, 238)
: const Color.fromARGB(255, 40, 40, 40),
borderRadius: const BorderRadius.all(Radius.circular(8.0)),
),
child: getQuestionCard(
question.title[model.locale?.languageCode] ?? '',
question.description[model.locale?.languageCode] ?? '',
),
);
},
);
}).toList(),
);
}

Padding getQuestionCard(String title, String description) {
return Padding(
padding: const EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
child: Align(
alignment: Alignment.topLeft,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
textScaler: TextScaler.noScaling,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 20,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
),
textAlign: TextAlign.justify,
),
Text(
description,
textScaler: TextScaler.noScaling,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 16,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
),
textAlign: TextAlign.justify,
),
],
),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Text(
title,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 20,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
),
),
const SizedBox(height: 12),
Text(
description,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 16,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
),
),
],
),
),
);
}

Expanded getActions(FaqViewModel model) {
return Expanded(
child: ListView.builder(
key: const Key("action_listview_key"),
padding: const EdgeInsets.only(top: 1.0),
itemCount: faq.actions.length,
itemBuilder: (context, index) {
final action = faq.actions[index];

return getActionCard(
action.title[model.locale?.languageCode] ?? '',
action.description[model.locale?.languageCode] ?? '',
action.type,
action.link,
action.iconName,
action.iconColor,
action.circleColor,
context,
model);
},
),
);
}

Padding getActionCard(
String title,
String description,
Expand Down Expand Up @@ -228,52 +208,49 @@ class _FaqViewState extends State<FaqView> {
);
}

Row getActionCardInfo(BuildContext context, String title, String description,
IconData iconName, Color iconColor, Color circleColor) {
return Row(
children: <Widget>[
Column(
children: <Widget>[
CircleAvatar(
backgroundColor: circleColor,
radius: 25,
child: Icon(iconName, color: iconColor),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 0, 15),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
Padding getActionCardInfo(
BuildContext context,
String title,
String description,
IconData iconName,
Color iconColor,
Color circleColor) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text(
title,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 18,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
),
textAlign: TextAlign.left,
),
const SizedBox(height: 10.0),
Text(
description,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 16,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
),
textAlign: TextAlign.justify,
)
],
),
),
const SizedBox(width: 16),
CircleAvatar(
backgroundColor: circleColor,
radius: 25,
child: Icon(iconName, color: iconColor),
),
],
),
)
],
const SizedBox(height: 12.0),
Text(description,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 16,
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,
))
],
),
);
}

Expand Down
12 changes: 1 addition & 11 deletions test/ui/views/faq_view_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ void main() {

setUp(() async {
setupLaunchUrlServiceMock();
setupNetworkingServiceMock();
settingsManagerMock = setupSettingsManagerMock();
appIntl = await setupAppIntl();
});
Expand Down Expand Up @@ -70,17 +71,6 @@ void main() {
final subtitle2 = find.text(appIntl.questions_and_answers);
expect(subtitle2, findsNWidgets(1));
});

testWidgets('has 1 title', (WidgetTester tester) async {
SettingsManagerMock.stubLocale(settingsManagerMock);

await tester.pumpWidget(localizedWidget(child: const FaqView()));
await tester.pumpAndSettle();

final title = find.text(appIntl.need_help);

expect(title, findsOneWidget);
});
});

group("golden - ", () {
Expand Down
Binary file modified test/ui/views/goldenFiles/FaqView_1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e8a9c5b

Please sign in to comment.