Implementing new look for Study Progress card according to figma rede…

…sign, fixing dark theme colors for all the data viz cards, small change in fastfile, updating translation files
cph-cachet · Jan 29, 2025 · 8303e0d · 8303e0d
1 parent e8ad727
commit 8303e0d
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 22 deletions.
diff --git a/android/fastlane/Fastfile b/android/fastlane/Fastfile
@@ -25,7 +25,7 @@ platform :android do
     version_parts = version_string.split('+')
     if version_parts.size == 2
       version_number = version_parts[1].to_i
-      if version_number >= current_version_code
+      if version_number > current_version_code
         sh "flutter clean"
         sh "flutter pub get"
         sh "flutter pub upgrade"
@@ -48,7 +48,7 @@ platform :android do
     version_parts = version_string.split('+')
     if version_parts.size == 2
       version_number = version_parts[1].to_i
-      if version_number >= current_version_code
+      if version_number > current_version_code
         sh "flutter clean"
         sh "flutter pub get"
         sh "flutter pub upgrade"

diff --git a/assets/lang/da.json b/assets/lang/da.json
@@ -89,9 +89,9 @@
     "announcement": "Annoncering",
     "article": "Artikel",
     "news": "Nyhed",
-    "pending": "igangværende",
-    "expired": "udløbet",
-    "completed": "færdig",
+    "pending": "Igangværende",
+    "expired": "Udløbet",
+    "completed": "Færdig",
     "cancel": "Anuller",
     "install": "Installér",
     "pages.about.status.invited.message": "Du er inviteret til denne undersøgelse.",

diff --git a/assets/lang/en.json b/assets/lang/en.json
@@ -100,9 +100,9 @@
   "announcement": "Announcement",
   "article": "Article",
   "news": "News",
-  "pending": "pending",
-  "expired": "expired",
-  "completed": "completed",
+  "pending": "Pending",
+  "expired": "Expired",
+  "completed": "Completed",
   "cancel": "Cancel",
   "install": "Install",
   "pages.about.status.invited.message": "You are invited to this study.",

diff --git a/lib/ui/cards/activity_card.dart b/lib/ui/cards/activity_card.dart
@@ -63,6 +63,7 @@ class ActivityCardState extends State<ActivityCard> {
     RPLocalizations locale = RPLocalizations.of(context)!;
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/cards/distance_card.dart b/lib/ui/cards/distance_card.dart
@@ -35,6 +35,7 @@ class _DistanceCardState extends State<DistanceCard> {
     RPLocalizations locale = RPLocalizations.of(context)!;
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/cards/heart_rate_card.dart b/lib/ui/cards/heart_rate_card.dart
@@ -44,6 +44,7 @@ class HeartRateCardWidgetState extends State<HeartRateCardWidget>
     RPLocalizations locale = RPLocalizations.of(context)!;
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/cards/media_card.dart b/lib/ui/cards/media_card.dart
@@ -19,6 +19,7 @@ class MediaCardWidgetState extends State<MediaCardWidget> {
     }
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/cards/mobility_card.dart b/lib/ui/cards/mobility_card.dart
@@ -30,6 +30,7 @@ class _MobilityCardState extends State<MobilityCard> {
     RPLocalizations locale = RPLocalizations.of(context)!;
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/cards/steps_card.dart b/lib/ui/cards/steps_card.dart
@@ -29,6 +29,7 @@ class StepsCardWidgetState extends State<StepsCardWidget> {
     RPLocalizations locale = RPLocalizations.of(context)!;
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/cards/study_progress_card.dart b/lib/ui/cards/study_progress_card.dart
@@ -19,6 +19,7 @@ class StudyProgressCardWidgetState extends State<StudyProgressCardWidget> {
 
     widget.model.updateProgress();
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: StreamBuilder(
@@ -37,22 +38,71 @@ class StudyProgressCardWidgetState extends State<StudyProgressCardWidget> {
                   ),
                 ),
                 SizedBox(
-                    height: 160,
-                    child: LayoutBuilder(builder:
+                  height: 130,
+                  child: LayoutBuilder(
+                    builder:
                         (BuildContext context, BoxConstraints constraints) {
-                      return HorizontalBar(
-                        parentWidth: constraints.maxWidth,
-                        names: widget.model.progress
-                            .map((progress) => locale.translate(progress.state))
-                            .toList(),
-                        values: widget.model.progress
-                            .map((progress) => progress.value)
-                            .toList(),
-                        colors: widget.colors,
-                        order: OrderType.none,
-                        labelOrientation: LabelOrientation.horizontal,
+                      return Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 8.0),
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: List.generate(
+                                widget.model.progress.length,
+                                (index) => Padding(
+                                  padding:
+                                      const EdgeInsets.symmetric(vertical: 4.0),
+                                  child: Row(
+                                    children: [
+                                      Text(
+                                        widget.model.progress[index].value
+                                            .toString(),
+                                        style: TextStyle(
+                                          fontSize: 22,
+                                          fontWeight: FontWeight.bold,
+                                          color: widget.colors[index],
+                                        ),
+                                      ),
+                                      const SizedBox(width: 4),
+                                      Text(
+                                        locale.translate(
+                                            widget.model.progress[index].state),
+                                        style: const TextStyle(
+                                            fontSize: 16),
+                                      ),
+                                    ],
+                                  ),
+                                ),
+                              ),
+                            ),
+                          ),
+                          // Circular Progress Representation
+                          Padding(
+                            padding: const EdgeInsets.only(right: 24.0),
+                            child: SizedBox(
+                              width: 104,
+                              height: 104,
+                              child: CustomPaint(
+                                painter: TaskProgressPainter(
+                                  values: widget.model.progress
+                                      .map((p) => p.value)
+                                      .toList(),
+                                  colors: widget.colors,
+                                  faintColors: widget.colors
+                                      .map((c) => c.withOpacity(0.1))
+                                      .toList(),
+                                ),
+                              ),
+                            ),
+                          ),
+                        ],
                       );
-                    })),
+                    },
+                  ),
+                ),
               ],
             );
           },
@@ -61,3 +111,66 @@ class StudyProgressCardWidgetState extends State<StudyProgressCardWidget> {
     );
   }
 }
+
+class TaskProgressPainter extends CustomPainter {
+  final List<int> values;
+  final List<Color> colors;
+  final List<Color> faintColors;
+  final double pi = 3.141592;
+
+  TaskProgressPainter(
+      {required this.values, required this.colors, required this.faintColors});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final double centerX = size.width / 2;
+    final double centerY = size.height / 2;
+    final Offset center = Offset(centerX, centerY);
+    final double maxRadius = size.width / 2;
+    final double ringWidth = maxRadius / 3;
+
+    int totalTasks = values.reduce((a, b) => a + b);
+    if (totalTasks == 0) return;
+
+    List<double> percentages = values.map((v) => v / totalTasks).toList();
+
+    for (int i = 0; i < 3; i++) {
+      double radius = maxRadius - (i * ringWidth);
+      double sweepAngle = pi * percentages[i];
+      Paint paintFill = Paint()
+        ..color = colors[i]
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = ringWidth
+        ..strokeCap = StrokeCap.round;
+
+      Paint paintBackground = Paint()
+        ..color = faintColors[i]
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = ringWidth
+        ..strokeCap = StrokeCap.round;
+
+      // draw the arc as a percentage of the full circle
+      canvas.drawArc(
+        Rect.fromCircle(center: center, radius: radius),
+        pi / 2,
+        sweepAngle > 0 ? sweepAngle : pi * (percentages[i] + 0.01),
+        false,
+        paintFill,
+      );
+
+      // draw a full circle as a background with a faint color
+      canvas.drawArc(
+        Rect.fromCircle(center: center, radius: radius),
+        0,
+        2 * pi,
+        false,
+        paintBackground,
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+}
diff --git a/lib/ui/cards/survey_card.dart b/lib/ui/cards/survey_card.dart
@@ -19,6 +19,7 @@ class _SurveyCardState extends State<SurveyCard> {
     }
 
     return StudiesMaterial(
+      backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Column(

diff --git a/lib/ui/pages/audio_task_page.dart b/lib/ui/pages/audio_task_page.dart
@@ -216,6 +216,7 @@ class AudioTaskPageState extends State<AudioTaskPage> {
             Expanded(
               flex: 3,
               child: StudiesMaterial(
+                backgroundColor: Theme.of(context).extension<CarpColors>()!.white!,
                 child: Scrollbar(
                   child: SingleChildScrollView(
                     scrollDirection: Axis.vertical, //.horizontal