From 3e140ce0edd2ffa8cc32c6ea9dba5bf41fa5a26a Mon Sep 17 00:00:00 2001 From: Kima Date: Tue, 2 Apr 2024 21:24:28 +0200 Subject: [PATCH] almost done with new grades page --- refilc/lib/ui/widgets/grade/grade_tile.dart | 10 +- .../lib/common/hero_scrollview.dart | 79 +++++++++++++--- .../cretification/certification_tile.dart | 17 +++- .../lib/pages/grades/grade_subject_view.dart | 92 ++++++++++++++----- 4 files changed, 155 insertions(+), 43 deletions(-) diff --git a/refilc/lib/ui/widgets/grade/grade_tile.dart b/refilc/lib/ui/widgets/grade/grade_tile.dart index 124b0bc..9be5ae6 100644 --- a/refilc/lib/ui/widgets/grade/grade_tile.dart +++ b/refilc/lib/ui/widgets/grade/grade_tile.dart @@ -86,15 +86,19 @@ class GradeTile extends StatelessWidget { visualDensity: VisualDensity.compact, contentPadding: isSubjectView ? grade.type != GradeType.ghost - ? const EdgeInsets.symmetric(horizontal: 12.0) - : const EdgeInsets.only(left: 12.0, right: 4.0) + ? const EdgeInsets.symmetric(horizontal: 8.0) + : const EdgeInsets.only(left: 8.0, right: 0.0) : const EdgeInsets.only(left: 8.0, right: 12.0), onTap: onTap, // onLongPress: kDebugMode ? () => log(jsonEncode(grade.json)) : null, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14.0)), leading: isSubjectView - ? GradeValueWidget(grade.value) + ? GradeValueWidget( + grade.value, + fill: true, + size: 27.5, + ) : GradeValueWidget( grade.value, fill: true, diff --git a/refilc_mobile_ui/lib/common/hero_scrollview.dart b/refilc_mobile_ui/lib/common/hero_scrollview.dart index 37ee49b..b994c3d 100644 --- a/refilc_mobile_ui/lib/common/hero_scrollview.dart +++ b/refilc_mobile_ui/lib/common/hero_scrollview.dart @@ -1,5 +1,7 @@ +import 'package:flutter_svg/svg.dart'; import 'package:refilc/theme/colors/colors.dart'; import 'package:flutter/material.dart'; +import 'package:refilc/theme/colors/utils.dart'; import 'package:refilc/utils/format.dart'; import 'package:refilc_mobile_ui/common/round_border_icon.dart'; @@ -101,22 +103,76 @@ class HeroScrollViewState extends State { } }), actions: widget.navBarItems, - expandedHeight: 155.69, + expandedHeight: 165.69, stretch: true, flexibleSpace: FlexibleSpaceBar( background: Stack( children: [ + Stack( + children: [ + Padding( + padding: const EdgeInsets.only(top: 26.0), + child: SvgPicture.asset( + "assets/svg/mesh_bg.svg", + // ignore: deprecated_member_use + color: ColorsUtils() + .darken( + Theme.of(context).colorScheme.primary, + amount: 0.4, + ) + .withOpacity(0.4), + width: MediaQuery.of(context).size.width, + fit: BoxFit.cover, + ), + ), + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Theme.of(context).scaffoldBackgroundColor, + Theme.of(context) + .scaffoldBackgroundColor + .withOpacity(0.1), + Theme.of(context) + .scaffoldBackgroundColor + .withOpacity(0.1), + Theme.of(context).scaffoldBackgroundColor, + ], + stops: const [0.1, 0.5, 0.7, 0.98], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + ), + ), + width: MediaQuery.of(context).size.width, + height: double.infinity, + ), + ], + ), Center( - child: Padding( - padding: const EdgeInsets.only(top: 46.0), + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).scaffoldBackgroundColor, + borderRadius: BorderRadius.circular(50.0), + ), + margin: const EdgeInsets.only(top: 30.0), child: RoundBorderIcon( - color: AppColors.of(context).text.withOpacity(.9), + color: ColorsUtils() + .darken( + Theme.of(context).colorScheme.primary, + amount: 0.4, + ) + .withOpacity(0.9), width: 1.5, padding: 12.0, icon: Icon( widget.icon, size: widget.iconSize / 2, - color: AppColors.of(context).text.withOpacity(.8), + color: ColorsUtils() + .darken( + Theme.of(context).colorScheme.primary, + amount: 0.4, + ) + .withOpacity(0.8), ), ), ), @@ -124,18 +180,19 @@ class HeroScrollViewState extends State { if (widget.showTitleUnscroll) Container( alignment: Alignment.center, - margin: const EdgeInsets.only(top: 82), + margin: const EdgeInsets.only(top: 133), padding: const EdgeInsets.symmetric(horizontal: 12.0), child: Text( - widget.title.capital(), + widget.title, maxLines: 2, overflow: TextOverflow.ellipsis, textAlign: TextAlign.center, style: TextStyle( - fontSize: 36.0, - color: AppColors.of(context).text.withOpacity(.9), - fontStyle: widget.italic ? FontStyle.italic : null, - fontWeight: FontWeight.bold), + fontSize: 26.0, + color: AppColors.of(context).text.withOpacity(.8), + fontStyle: widget.italic ? FontStyle.italic : null, + fontWeight: FontWeight.bold, + ), ), ), ], diff --git a/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart b/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart index 2b4be2d..683f084 100644 --- a/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart +++ b/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart @@ -11,11 +11,18 @@ import 'package:provider/provider.dart'; import 'certification_tile.i18n.dart'; class CertificationTile extends StatelessWidget { - const CertificationTile(this.grade, {super.key, this.onTap, this.padding}); + const CertificationTile( + this.grade, { + super.key, + this.onTap, + this.padding, + this.newStyle = false, + }); final Function()? onTap; final Grade grade; final EdgeInsetsGeometry? padding; + final bool newStyle; @override Widget build(BuildContext context) { @@ -57,13 +64,15 @@ class CertificationTile extends StatelessWidget { child: Padding( padding: padding ?? const EdgeInsets.symmetric(horizontal: 8.0), child: ListTile( + tileColor: gradeColor( + context: context, value: grade.value.value, nocolor: false) + .withOpacity(.1), visualDensity: VisualDensity.compact, contentPadding: isSubjectView - ? const EdgeInsets.only( - left: 12.0, right: 12.0, top: 2.0, bottom: 8.0) + ? const EdgeInsets.only(left: 20.0, right: 12.0, bottom: 6.0) : const EdgeInsets.only(left: 8.0, right: 12.0), shape: - RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)), + RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), onTap: onTap, leading: isSubjectView ? GradeValueWidget( diff --git a/refilc_mobile_ui/lib/pages/grades/grade_subject_view.dart b/refilc_mobile_ui/lib/pages/grades/grade_subject_view.dart index ffe7875..180e0e0 100644 --- a/refilc_mobile_ui/lib/pages/grades/grade_subject_view.dart +++ b/refilc_mobile_ui/lib/pages/grades/grade_subject_view.dart @@ -146,18 +146,39 @@ class _GradeSubjectViewState extends State { if (!gradeCalcMode) { subjectGrades.sort((a, b) => -a.date.compareTo(b.date)); + + _gradeTiles.add(const SizedBox( + height: 4.0, + )); + for (var grade in subjectGrades) { if (grade.type == GradeType.midYear) { _gradeTiles.add(GradeViewable(grade)); } else { - _gradeTiles.add(CertificationTile(grade, padding: EdgeInsets.zero)); + _gradeTiles.add(CertificationTile( + grade, + padding: const EdgeInsets.only(bottom: 6.0, top: 12.0), + newStyle: true, + )); } } + + _gradeTiles.add(const SizedBox( + height: 4.0, + )); } else if (subjectGrades.isNotEmpty) { + _gradeTiles.add(const SizedBox( + height: 8.0, + )); + subjectGrades.sort((a, b) => -a.date.compareTo(b.date)); for (var grade in subjectGrades) { _gradeTiles.add(GradeTile(grade)); } + + _gradeTiles.add(const SizedBox( + height: 8.0, + )); } tiles.add( PageTransitionSwitcher( @@ -188,7 +209,7 @@ class _GradeSubjectViewState extends State { ); tiles.add(Padding( - padding: EdgeInsets.only(bottom: !gradeCalcMode ? 24.0 : 250.0))); + padding: EdgeInsets.only(bottom: !gradeCalcMode ? 24.0 : 269.0))); gradeTiles = List.castFrom(tiles); } @@ -313,35 +334,56 @@ class _GradeSubjectViewState extends State { const SizedBox(width: 6.0), if (widget.groupAverage != 0) Center( + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).scaffoldBackgroundColor, + borderRadius: BorderRadius.circular(50.0), + ), child: AverageDisplay( - average: widget.groupAverage, border: true)), + average: widget.groupAverage, border: true), + ), + ), const SizedBox(width: 6.0), if (average != 0) - Center(child: AverageDisplay(average: average)), + Center( + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).scaffoldBackgroundColor, + borderRadius: BorderRadius.circular(50.0), + ), + child: AverageDisplay(average: average), + ), + ), const SizedBox(width: 6.0), if (plan != '') Center( - child: GestureDetector( - onTap: () { - Navigator.of(context).push(CupertinoPageRoute( - builder: (context) => - GoalStateScreen(subject: widget.subject))); - }, - child: Container( - width: 54.0, - padding: const EdgeInsets.symmetric(vertical: 8.0), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(45.0), - color: Theme.of(context) - .colorScheme - .primary - .withOpacity(.15), - ), - child: Icon( - FeatherIcons.flag, - size: 17.0, - weight: 2.5, - color: Theme.of(context).colorScheme.primary, + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).scaffoldBackgroundColor, + borderRadius: BorderRadius.circular(50.0), + ), + child: GestureDetector( + onTap: () { + Navigator.of(context).push(CupertinoPageRoute( + builder: (context) => + GoalStateScreen(subject: widget.subject))); + }, + child: Container( + width: 54.0, + padding: const EdgeInsets.symmetric(vertical: 8.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(45.0), + color: Theme.of(context) + .colorScheme + .primary + .withOpacity(.15), + ), + child: Icon( + FeatherIcons.flag, + size: 17.0, + weight: 2.5, + color: Theme.of(context).colorScheme.primary, + ), ), ), ),